DEV: various improvements to devex on chat (discourse#21612)

- Improves styleguide support
- Adds toggle color scheme to styleguide
- Adds properties mutators to styleguide
- Attempts to quit a session as soon as done with it in system specs, this should at least free resources faster
- Refactors fabricators to simplify them
- Adds more fabricators (uploads for example)
- Starts implementing components pattern in system specs
- Uses Chat::Message creator to create messages in system specs, this should help to have more real specs as the side effects should now happen

Author: jjaffeux

plugins/chat/assets/javascripts/discourse/components/chat-channel.hbs

@@ -41,7 +41,6 @@
         {{#each @channel.messages key="id" as |message|}}
           <ChatMessage
             @message={{message}}
-            @channel={{@channel}}
             @resendStagedMessage={{this.resendStagedMessage}}
             @messageDidEnterViewport={{this.messageDidEnterViewport}}
             @messageDidLeaveViewport={{this.messageDidLeaveViewport}}

plugins/chat/assets/javascripts/discourse/components/chat-channel.js

@@ -113,11 +113,10 @@ export default class ChatLivePane extends Component {
     if (this._loadedChannelId !== this.args.channel?.id) {
       this.unsubscribeToUpdates(this._loadedChannelId);
       this.chatChannelPane.selectingMessages = false;
-      this.chatChannelComposer.message =
-        this.args.channel.draft ||
-        ChatMessage.createDraftMessage(this.args.channel, {
-          user: this.currentUser,
-        });
+
+      if (this.args.channel.draft) {
+        this.chatChannelComposer.message = this.args.channel.draft;
+      }
 
       this._loadedChannelId = this.args.channel?.id;
     }

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

@@ -1,6 +1,6 @@
-<div class="chat-composer-message-details">
+<div class="chat-composer-message-details" data-id={{@message.id}}>
   <div class="chat-reply">
-    {{d-icon @icon}}
+    {{d-icon (if @message.editing "pencil-alt" "reply")}}
     <ChatUserAvatar @user={{@message.user}} />
     <span class="chat-reply__username">{{@message.user.username}}</span>
     <span class="chat-reply__excerpt">

plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs

@@ -9,7 +9,6 @@
         this.currentMessage
         this.currentMessage.inReplyTo
       }}
-      @icon={{if this.currentMessage.editing "pencil-alt" "reply"}}
       @cancelAction={{this.onCancel}}
     />
   {{/if}}
@@ -26,7 +25,7 @@
     }}
     {{did-update this.didUpdateMessage this.currentMessage}}
     {{did-update this.didUpdateInReplyTo this.currentMessage.inReplyTo}}
-    {{did-insert this.setupAppEvents}}
+    {{did-insert this.setup}}
     {{will-destroy this.teardown}}
     {{will-destroy this.cancelPersistDraft}}
   >
@@ -71,7 +70,7 @@
           {{on "click" this.onSend}}
           @icon="paper-plane"
           class="chat-composer__send-btn"
-          title="chat.composer.send"
+          title={{i18n "chat.composer.send"}}
           disabled={{or this.disabled (not this.sendEnabled)}}
           tabindex={{if this.sendEnabled 0 -1}}
           {{on "focus" (fn this.computeIsFocused true)}}

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

@@ -141,7 +141,10 @@ export default class ChatComposer extends Component {
   }
 
   @action
-  setupAppEvents() {
+  setup() {
+    this.composer.message = ChatMessage.createDraftMessage(this.args.channel, {
+      user: this.currentUser,
+    });
     this.appEvents.on("chat:modify-selection", this, "modifySelection");
     this.appEvents.on(
       "chat:open-insert-link-modal",

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js

@@ -54,6 +54,10 @@ export default class ChatMessageActionsDesktop extends Component {
         this.context
       );
 
+      if (!messageContainer) {
+        return;
+      }
+
       const viewport = messageContainer.closest(".popper-viewport");
       this.size =
         viewport.clientWidth < REDUCED_WIDTH_THRESHOLD ? REDUCED : FULL;

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

@@ -130,7 +130,7 @@ export default class ChatMessage extends Component {
       }
 
       _chatMessageDecorators.forEach((decorator) => {
-        decorator.call(this, this.messageContainer, this.args.channel);
+        decorator.call(this, this.messageContainer, this.args.message.channel);
       });
     });
   }
@@ -147,7 +147,7 @@ export default class ChatMessage extends Component {
       !this.args.message?.deletedAt ||
       this.currentUser.id === this.args.message?.user?.id ||
       this.currentUser.staff ||
-      this.args.channel?.canModerate
+      this.args.message?.channel?.canModerate
     );
   }
 
@@ -316,7 +316,10 @@ export default class ChatMessage extends Component {
   }
 
   get threadingEnabled() {
-    return this.args.channel?.threadingEnabled && !!this.args.message?.thread;
+    return (
+      this.args.message?.channel?.threadingEnabled &&
+      !!this.args.message?.thread
+    );
   }
 
   get showThreadIndicator() {

plugins/chat/assets/javascripts/discourse/components/chat-thread.hbs

@@ -34,7 +34,6 @@
       {{#each this.thread.messages key="id" as |message|}}
         <ChatMessage
           @message={{message}}
-          @channel={{this.channel}}
           @resendStagedMessage={{this.resendStagedMessage}}
           @messageDidEnterViewport={{this.messageDidEnterViewport}}
           @messageDidLeaveViewport={{this.messageDidLeaveViewport}}

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

@@ -20,10 +20,7 @@
           />
         </div>
       </div>
-      <Chat::Thread::OriginalMessage
-        @thread={{@thread}}
-        @message={{@thread.originalMessage}}
-      />
+      <Chat::Thread::OriginalMessage @message={{@thread.originalMessage}} />
     </div>
   </div>
 </div>

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

@@ -0,0 +1,15 @@
+<StyleguideExample @title="<ChatComposerMessageDetails>">
+  <Styleguide::Component>
+    <ChatComposerMessageDetails @message={{this.message}} />
+  </Styleguide::Component>
+
+  <Styleguide::Controls>
+    <Styleguide::Controls::Row @name="Mode">
+      {{#if this.message.editing}}
+        <DButton @action={{this.toggleMode}} @translatedLabel="Reply" />
+      {{else}}
+        <DButton @action={{this.toggleMode}} @translatedLabel="Editing" />
+      {{/if}}
+    </Styleguide::Controls::Row>
+  </Styleguide::Controls>
+</StyleguideExample>