DEV: allows fabricators to use faker (#26555)

The complexity of the situation is that we don't want to load faker into production by default but fabricators and styleguide are available on production.

This is made possible through app/assets/javascripts/discourse/app/lib/load-faker.js which contains a function to ensure faker is loaded asynchronously (loadFaker) and another function to access the loaded faker (getLoadedFaker).

Note 1: this commit also refactors fabricators to have access to context and use faker where possible
Note 2: this commit moves automation to admin bundle

---------

Co-authored-by: David Taylor <david@taylorhq.com>

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js

@@ -1,8 +1,9 @@
 import Component from "@glimmer/component";
 import { cached } from "@glimmer/tracking";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatComposerMessageDetails extends Component {
   @service site;
@@ -12,14 +13,16 @@ export default class ChatStyleguideChatComposerMessageDetails extends Component
 
   @cached
   get message() {
-    return fabricators.message({ user: this.currentUser });
+    return new ChatFabricators(getOwner(this)).message({
+      user: this.currentUser,
+    });
   }
 
   @action
   toggleMode() {
     if (this.message.editing) {
       this.message.editing = false;
-      this.message.inReplyTo = fabricators.message();
+      this.message.inReplyTo = new ChatFabricators(getOwner(this)).message();
     } else {
       this.message.editing = true;
       this.message.inReplyTo = null;

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js

@@ -1,14 +1,15 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 import { CHANNEL_STATUSES } from "discourse/plugins/chat/discourse/models/chat-channel";
 
 export default class ChatStyleguideChatComposer extends Component {
   @service chatChannelComposer;
   @service chatChannelPane;
 
-  channel = fabricators.channel({ id: -999 });
+  channel = new ChatFabricators(getOwner(this)).channel({ id: -999 });
 
   @action
   toggleDisabled() {

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js

@@ -3,7 +3,7 @@ import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatMessagesManager from "discourse/plugins/chat/discourse/lib/chat-messages-manager";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatMessage extends Component {
   @service currentUser;
@@ -12,7 +12,9 @@ export default class ChatStyleguideChatMessage extends Component {
 
   constructor() {
     super(...arguments);
-    this.message = fabricators.message({ user: this.currentUser });
+    this.message = new ChatFabricators(getOwner(this)).message({
+      user: this.currentUser,
+    });
     this.message.cook();
   }
 
@@ -30,7 +32,7 @@ export default class ChatStyleguideChatMessage extends Component {
     if (this.message.bookmark) {
       this.message.bookmark = null;
     } else {
-      this.message.bookmark = fabricators.bookmark();
+      this.message.bookmark = new ChatFabricators(getOwner(this)).bookmark();
     }
   }
 
@@ -55,7 +57,7 @@ export default class ChatStyleguideChatMessage extends Component {
       this.message.channel.threadingEnabled = false;
       this.message.thread = null;
     } else {
-      this.message.thread = fabricators.thread({
+      this.message.thread = new ChatFabricators(getOwner(this)).thread({
         channel: this.message.channel,
       });
       this.message.thread.preview.replyCount = 1;
@@ -75,8 +77,11 @@ export default class ChatStyleguideChatMessage extends Component {
       this.message.reactions = [];
     } else {
       this.message.reactions = [
-        fabricators.reaction({ emoji: "heart" }),
-        fabricators.reaction({ emoji: "rocket", reacted: true }),
+        new ChatFabricators(getOwner(this)).reaction({ emoji: "heart" }),
+        new ChatFabricators(getOwner(this)).reaction({
+          emoji: "rocket",
+          reacted: true,
+        }),
       ];
     }
   }
@@ -86,7 +91,10 @@ export default class ChatStyleguideChatMessage extends Component {
     if (this.message.uploads?.length) {
       this.message.uploads = [];
     } else {
-      this.message.uploads = [fabricators.upload(), fabricators.upload()];
+      this.message.uploads = [
+        new ChatFabricators(getOwner(this)).upload(),
+        new ChatFabricators(getOwner(this)).upload(),
+      ];
     }
   }
 }

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.js

@@ -1,13 +1,14 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalArchiveChannel from "discourse/plugins/chat/discourse/components/chat/modal/archive-channel";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalArchiveChannel extends Component {
   @service modal;
 
-  channel = fabricators.channel();
+  channel = new ChatFabricators(getOwner(this)).channel();
 
   @action
   openModal() {

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-channel-summary.js

@@ -1,8 +1,9 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalChannelSummary from "discourse/plugins/chat/discourse/components/chat/modal/channel-summary";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalChannelSummary extends Component {
   @service modal;
@@ -10,7 +11,7 @@ export default class ChatStyleguideChatModalChannelSummary extends Component {
   @action
   openModal() {
     return this.modal.show(ChatModalChannelSummary, {
-      model: { channelId: fabricators.channel().id },
+      model: { channelId: new ChatFabricators(getOwner(this)).channel().id },
     });
   }
 }

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.js

@@ -1,13 +1,14 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalDeleteChannel from "discourse/plugins/chat/discourse/components/chat/modal/delete-channel";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalDeleteChannel extends Component {
   @service modal;
 
-  channel = fabricators.channel();
+  channel = new ChatFabricators(getOwner(this)).channel();
 
   @action
   openModal() {

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.js

@@ -1,13 +1,14 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalEditChannelDescription from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-description";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalEditChannelDescription extends Component {
   @service modal;
 
-  channel = fabricators.channel();
+  channel = new ChatFabricators(getOwner(this)).channel();
 
   @action
   openModal() {

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.js

@@ -1,13 +1,14 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalEditChannelName from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-name";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalEditChannelName extends Component {
   @service modal;
 
-  channel = fabricators.channel();
+  channel = new ChatFabricators(getOwner(this)).channel();
 
   @action
   openModal() {

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.js

@@ -1,16 +1,17 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalMoveMessageToChannel from "discourse/plugins/chat/discourse/components/chat/modal/move-message-to-channel";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalMoveMessageToChannel extends Component {
   @service modal;
 
-  channel = fabricators.channel();
-  selectedMessageIds = [fabricators.message({ channel: this.channel })].mapBy(
-    "id"
-  );
+  channel = new ChatFabricators(getOwner(this)).channel();
+  selectedMessageIds = [
+    new ChatFabricators(getOwner(this)).message({ channel: this.channel }),
+  ].mapBy("id");
 
   @action
   openModal() {
@@ -18,7 +19,9 @@ export default class ChatStyleguideChatModalMoveMessageToChannel extends Compone
       model: {
         sourceChannel: this.channel,
         selectedMessageIds: [
-          fabricators.message({ channel: this.channel }),
+          new ChatFabricators(getOwner(this)).message({
+            channel: this.channel,
+          }),
         ].mapBy("id"),
       },
     });

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.js

@@ -1,8 +1,9 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalThreadSettings from "discourse/plugins/chat/discourse/components/chat/modal/thread-settings";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalThreadSettings extends Component {
   @service modal;
@@ -10,7 +11,7 @@ export default class ChatStyleguideChatModalThreadSettings extends Component {
   @action
   openModal() {
     return this.modal.show(ChatModalThreadSettings, {
-      model: fabricators.thread(),
+      model: new ChatFabricators(getOwner(this)).thread(),
     });
   }
 }

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.js

@@ -1,8 +1,9 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ChatModalToggleChannelStatus from "discourse/plugins/chat/discourse/components/chat/modal/toggle-channel-status";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatModalToggleChannelStatus extends Component {
   @service modal;
@@ -10,7 +11,7 @@ export default class ChatStyleguideChatModalToggleChannelStatus extends Componen
   @action
   openModal() {
     return this.modal.show(ChatModalToggleChannelStatus, {
-      model: fabricators.channel(),
+      model: new ChatFabricators(getOwner(this)).channel(),
     });
   }
 }

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.js

@@ -1,9 +1,10 @@
 import Component from "@glimmer/component";
+import { getOwner } from "@ember/application";
 import { service } from "@ember/service";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 export default class ChatStyleguideChatThreadListItem extends Component {
   @service currentUser;
 
-  thread = fabricators.thread();
+  thread = new ChatFabricators(getOwner(this)).thread();
 }

plugins/chat/assets/javascripts/discourse/lib/fabricators.js

@@ -4,11 +4,10 @@ The following fabricators are available in lib folder to allow
 styleguide to use them, and eventually to generate dummy data
 in a placeholder component. It should not be used for any other case.
 */
-
-import Bookmark from "discourse/models/bookmark";
+import { setOwner } from "@ember/application";
+import ApplicationInstance from "@ember/application/instance";
+import CoreFabricators, { incrementSequence } from "discourse/lib/fabricators";
 import Category from "discourse/models/category";
-import Group from "discourse/models/group";
-import User from "discourse/models/user";
 import ChatChannel, {
   CHANNEL_STATUSES,
   CHATABLE_TYPES,
@@ -19,184 +18,134 @@ import ChatMessageReaction from "discourse/plugins/chat/discourse/models/chat-me
 import ChatThread from "discourse/plugins/chat/discourse/models/chat-thread";
 import ChatThreadPreview from "discourse/plugins/chat/discourse/models/chat-thread-preview";
 
-let sequence = 0;
-
-function messageFabricator(args = {}) {
-  const channel = args.channel || channelFabricator();
-
-  const message = ChatMessage.create(
-    channel,
-    Object.assign(
-      {
-        id: args.id || sequence++,
-        user: args.user || userFabricator(),
-        message:
-          args.message ||
-          "@discobot **abc**defghijklmnopqrstuvwxyz [discourse](discourse.org) :rocket: ",
-        created_at: args.created_at || moment(),
-      },
-      args
-    )
-  );
-
-  const excerptLength = 50;
-  const text = message.message.toString();
-  if (text.length <= excerptLength) {
-    message.excerpt = text;
-  } else {
-    message.excerpt = text.slice(0, excerptLength) + "...";
+export default class ChatFabricators {
+  constructor(owner) {
+    if (owner && !(owner instanceof ApplicationInstance)) {
+      throw new Error(
+        "First argument of ChatFabricators constructor must be the owning ApplicationInstance"
+      );
+    }
+    setOwner(this, owner);
+    this.coreFabricators = new CoreFabricators(owner);
   }
 
-  return message;
-}
+  message(args = {}) {
+    const channel = args.channel || this.channel();
 
-function channelFabricator(args = {}) {
-  const id = args.id || sequence++;
-  const chatable = args.chatable || categoryFabricator();
+    const message = ChatMessage.create(
+      channel,
+      Object.assign(
+        {
+          id: args.id || incrementSequence(),
+          user: args.user || this.coreFabricators.user(),
+          message:
+            args.message ||
+            "@discobot **abc**defghijklmnopqrstuvwxyz [discourse](discourse.org) :rocket: ",
+          created_at: args.created_at || moment(),
+        },
+        args
+      )
+    );
 
-  const channel = ChatChannel.create({
-    id,
-    chatable_type:
-      (chatable instanceof Category
-        ? CHATABLE_TYPES.categoryChannel
-        : CHATABLE_TYPES.directMessageChannel) ||
-      chatable?.type ||
-      args.chatable_type,
-    chatable_id: chatable?.id || args.chatable_id,
-    title: args.title
-      ? args.title
-      : chatable instanceof Category
-      ? "General"
-      : null,
-    description: args.description,
-    chatable,
-    status: args.status || CHANNEL_STATUSES.open,
-    slug: chatable?.slug || chatable instanceof Category ? "general" : null,
-    meta: Object.assign({ can_delete_self: true }, args.meta || {}),
-    archive_failed: args.archive_failed ?? false,
-    memberships_count: args.memberships_count ?? 0,
-  });
+    const excerptLength = 50;
+    const text = message.message.toString();
+    if (text.length <= excerptLength) {
+      message.excerpt = text;
+    } else {
+      message.excerpt = text.slice(0, excerptLength) + "...";
+    }
 
-  channel.lastMessage = messageFabricator({ channel });
+    return message;
+  }
 
-  return channel;
-}
+  channel(args = {}) {
+    const id = args.id || incrementSequence();
+    const chatable = args.chatable || this.coreFabricators.category();
 
-function categoryFabricator(args = {}) {
-  return Category.create({
-    id: args.id || sequence++,
-    color: args.color || "D56353",
-    read_restricted: args.read_restricted ?? false,
-    name: args.name || "General",
-    slug: args.slug || "general",
-  });
-}
-
-function directMessageFabricator(args = {}) {
-  return ChatDirectMessage.create({
-    group: args.group ?? false,
-    users: args.users ?? [userFabricator(), userFabricator()],
-  });
-}
-
-function directMessageChannelFabricator(args = {}) {
-  const directMessage =
-    args.chatable ||
-    directMessageFabricator({
-      id: args.chatable_id || sequence++,
-      group: args.group ?? false,
-      users: args.users,
+    const channel = ChatChannel.create({
+      id,
+      chatable_type:
+        (chatable instanceof Category
+          ? CHATABLE_TYPES.categoryChannel
+          : CHATABLE_TYPES.directMessageChannel) ||
+        chatable?.type ||
+        args.chatable_type,
+      chatable_id: chatable?.id || args.chatable_id,
+      title: args.title
+        ? args.title
+        : chatable instanceof Category
+        ? chatable.name
+        : null,
+      description: args.description,
+      chatable,
+      status: args.status || CHANNEL_STATUSES.open,
+      slug:
+        chatable?.slug || chatable instanceof Category ? chatable.slugt : null,
+      meta: Object.assign({ can_delete_self: true }, args.meta || {}),
+      archive_failed: args.archive_failed ?? false,
+      memberships_count: args.memberships_count ?? 0,
     });
 
-  return channelFabricator(
-    Object.assign(args, {
-      chatable_type: CHATABLE_TYPES.directMessageChannel,
-      chatable_id: directMessage.id,
-      chatable: directMessage,
-      memberships_count: directMessage.users.length,
-    })
-  );
-}
+    channel.lastMessage = this.message({ channel });
 
-function userFabricator(args = {}) {
-  return User.create({
-    id: args.id || sequence++,
-    username: args.username || "hawk",
-    name: args.name,
-    avatar_template: "/letter_avatar_proxy/v3/letter/t/41988e/{size}.png",
-    suspended_till: args.suspended_till,
-  });
-}
+    return channel;
+  }
 
-function bookmarkFabricator(args = {}) {
-  return Bookmark.create({
-    id: args.id || sequence++,
-  });
-}
+  directMessage(args = {}) {
+    return ChatDirectMessage.create({
+      group: args.group ?? false,
+      users: args.users ?? [
+        this.coreFabricators.user(),
+        this.coreFabricators.user(),
+      ],
+    });
+  }
 
-function threadFabricator(args = {}) {
-  const channel = args.channel || channelFabricator();
-  return ChatThread.create(channel, {
-    id: args.id || sequence++,
-    title: args.title,
-    original_message: args.original_message || messageFabricator({ channel }),
-    preview: args.preview || threadPreviewFabricator({ channel }),
-  });
-}
-function threadPreviewFabricator(args = {}) {
-  return ChatThreadPreview.create({
-    last_reply_id: args.last_reply_id || sequence++,
-    last_reply_created_at: args.last_reply_created_at || Date.now(),
-    last_reply_excerpt: args.last_reply_excerpt || "This is a reply",
-    participant_count: args.participant_count ?? 0,
-    participant_users: args.participant_users ?? [],
-  });
-}
+  directMessageChannel(args = {}) {
+    const directMessage =
+      args.chatable ||
+      this.directMessage({
+        id: args.chatable_id || incrementSequence(),
+        group: args.group ?? false,
+        users: args.users,
+      });
 
-function reactionFabricator(args = {}) {
-  return ChatMessageReaction.create({
-    count: args.count ?? 1,
-    users: args.users || [userFabricator()],
-    emoji: args.emoji || "heart",
-    reacted: args.reacted ?? false,
-  });
-}
+    return this.channel(
+      Object.assign(args, {
+        chatable_type: CHATABLE_TYPES.directMessageChannel,
+        chatable_id: directMessage.id,
+        chatable: directMessage,
+        memberships_count: directMessage.users.length,
+      })
+    );
+  }
 
-function groupFabricator(args = {}) {
-  return Group.create({
-    name: args.name || "Engineers",
-  });
-}
+  thread(args = {}) {
+    const channel = args.channel || this.channel();
+    return ChatThread.create(channel, {
+      id: args.id || incrementSequence(),
+      title: args.title,
+      original_message: args.original_message || this.message({ channel }),
+      preview: args.preview || this.threadPreview({ channel }),
+    });
+  }
 
-function uploadFabricator() {
-  return {
-    extension: "jpeg",
-    filesize: 126177,
-    height: 800,
-    human_filesize: "123 KB",
-    id: 202,
-    original_filename: "avatar.PNG.jpg",
-    retain_hours: null,
-    short_path: "/images/avatar.png",
-    short_url: "upload://yoj8pf9DdIeHRRULyw7i57GAYdz.jpeg",
-    thumbnail_height: 320,
-    thumbnail_width: 690,
-    url: "/images/avatar.png",
-    width: 1920,
-  };
-}
+  threadPreview(args = {}) {
+    return ChatThreadPreview.create({
+      last_reply_id: args.last_reply_id || incrementSequence(),
+      last_reply_created_at: args.last_reply_created_at || Date.now(),
+      last_reply_excerpt: args.last_reply_excerpt || "This is a reply",
+      participant_count: args.participant_count ?? 0,
+      participant_users: args.participant_users ?? [],
+    });
+  }
 
-export default {
-  bookmark: bookmarkFabricator,
-  user: userFabricator,
-  channel: channelFabricator,
-  directMessageChannel: directMessageChannelFabricator,
-  message: messageFabricator,
-  thread: threadFabricator,
-  threadPreview: threadPreviewFabricator,
-  reaction: reactionFabricator,
-  upload: uploadFabricator,
-  category: categoryFabricator,
-  directMessage: directMessageFabricator,
-  group: groupFabricator,
-};
+  reaction(args = {}) {
+    return ChatMessageReaction.create({
+      count: args.count ?? 1,
+      users: args.users || [this.coreFabricators.user()],
+      emoji: args.emoji || "heart",
+      reacted: args.reacted ?? false,
+    });
+  }
+}