DEV/ glimmerify chat-channel-status (#21445)

This commit also adds a component test for it and fixes a bug in `chat-channel-archive-status` `#getTopicURL` property which was incorrectly called as a function.

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

@@ -24,7 +24,7 @@ export default class ChatChannelArchiveStatus extends Component {
       I18n.t(translationKey, {
         completed: archive.messages,
         total: archive.totalMessages,
-        topic_url: this.#getTopicUrl(),
+        topic_url: this.topicUrl,
       })
     );
   }
@@ -32,7 +32,7 @@ export default class ChatChannelArchiveStatus extends Component {
   get channelArchiveCompletedMessage() {
     return htmlSafe(
       I18n.t("chat.channel_status.archive_completed", {
-        topic_url: this.#getTopicUrl(),
+        topic_url: this.topicUrl,
       })
     );
   }
@@ -44,7 +44,7 @@ export default class ChatChannelArchiveStatus extends Component {
       .catch(popupAjaxError);
   }
 
-  get #getTopicUrl() {
+  get topicUrl() {
     if (!this.args.channel.archive.topicId) {
       return "";
     }

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

@@ -1,8 +1,7 @@
-{{#if this.channelStatusMessage}}
+{{#if this.shouldRender}}
   <div class="chat-channel-status">
     {{d-icon this.channelStatusIcon}}
     <span>{{this.channelStatusMessage}}</span>
-
+    <ChatChannelArchiveStatus @channel={{@channel}} />
-    <ChatChannelArchiveStatus @channel={{this.channel}} />
   </div>
 {{/if}}

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

@@ -1,43 +1,39 @@
-import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 import {
   CHANNEL_STATUSES,
   channelStatusIcon,
 } from "discourse/plugins/chat/discourse/models/chat-channel";
 
-export default Component.extend({
+export default class ChatChannelStatus extends Component {
-  tagName: "",
+  LONG_FORMAT = "long";
-  channel: null,
+  SHORT_FORMAT = "short";
-  format: null,
+  VALID_FORMATS = [this.SHORT_FORMAT, this.LONG_FORMAT];
 
-  init() {
+  get format() {
-    this._super(...arguments);
+    return this.VALID_FORMATS.includes(this.args.format)
-    if (!["short", "long"].includes(this.format)) {
+      ? this.args.format
-      this.set("format", "long");
+      : this.LONG_FORMAT;
-    }
+  }
-  },
 
-  @discourseComputed("channel.status")
+  get shouldRender() {
-  channelStatusMessage(channelStatus) {
+    return this.args.channel.status !== CHANNEL_STATUSES.open;
-    if (channelStatus === CHANNEL_STATUSES.open) {
+  }
-      return null;
-    }
 
-    if (this.format === "long") {
+  get channelStatusMessage() {
-      return this._longStatusMessage(channelStatus);
+    if (this.format === this.LONG_FORMAT) {
+      return this.#longStatusMessage(this.args.channel.status);
     } else {
-      return this._shortStatusMessage(channelStatus);
+      return this.#shortStatusMessage(this.args.channel.status);
     }
-  },
+  }
 
-  @discourseComputed("channel.status")
+  get channelStatusIcon() {
-  channelStatusIcon(channelStatus) {
+    return channelStatusIcon(this.args.channel.status);
-    return channelStatusIcon(channelStatus);
+  }
-  },
 
-  _shortStatusMessage(channelStatus) {
+  #shortStatusMessage(status) {
-    switch (channelStatus) {
+    switch (status) {
       case CHANNEL_STATUSES.archived:
         return I18n.t("chat.channel_status.archived");
       case CHANNEL_STATUSES.closed:
@@ -47,10 +43,10 @@ export default Component.extend({
       case CHANNEL_STATUSES.readOnly:
         return I18n.t("chat.channel_status.read_only");
     }
-  },
+  }
 
-  _longStatusMessage(channelStatus) {
+  #longStatusMessage(status) {
-    switch (channelStatus) {
+    switch (status) {
       case CHANNEL_STATUSES.archived:
         return I18n.t("chat.channel_status.archived_header");
       case CHANNEL_STATUSES.closed:
@@ -60,5 +56,5 @@ export default Component.extend({
       case CHANNEL_STATUSES.readOnly:
         return I18n.t("chat.channel_status.read_only_header");
     }
-  },
+  }
-});
+}

plugins/chat/test/javascripts/components/chat-channel-status-test.js

@@ -0,0 +1,68 @@
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import I18n from "I18n";
+import { module, test } from "qunit";
+import { render } from "@ember/test-helpers";
+import fabricators from "../helpers/fabricators";
+import {
+  CHANNEL_STATUSES,
+  channelStatusIcon,
+} from "discourse/plugins/chat/discourse/models/chat-channel";
+
+module("Discourse Chat | Component | chat-channel-status", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("renders nothing when channel is opened", async function (assert) {
+    this.channel = fabricators.chatChannel();
+
+    await render(hbs`<ChatChannelStatus @channel={{this.channel}} />`);
+
+    assert.dom(".chat-channel-status").doesNotExist();
+  });
+
+  test("defaults to long format", async function (assert) {
+    this.channel = fabricators.chatChannel({ status: CHANNEL_STATUSES.closed });
+
+    await render(hbs`<ChatChannelStatus @channel={{this.channel}} />`);
+
+    assert
+      .dom(".chat-channel-status")
+      .hasText(I18n.t("chat.channel_status.closed_header"));
+  });
+
+  test("accepts a format argument", async function (assert) {
+    this.channel = fabricators.chatChannel({
+      status: CHANNEL_STATUSES.archived,
+    });
+
+    await render(
+      hbs`<ChatChannelStatus @channel={{this.channel}} @format="short" />`
+    );
+
+    assert
+      .dom(".chat-channel-status")
+      .hasText(I18n.t("chat.channel_status.archived"));
+  });
+
+  test("renders the correct icon", async function (assert) {
+    this.channel = fabricators.chatChannel({
+      status: CHANNEL_STATUSES.archived,
+    });
+
+    await render(hbs`<ChatChannelStatus @channel={{this.channel}} />`);
+
+    assert.dom(`.d-icon-${channelStatusIcon(this.channel.status)}`).exists();
+  });
+
+  test("renders archive status", async function (assert) {
+    this.currentUser.admin = true;
+    this.channel = fabricators.chatChannel({
+      status: CHANNEL_STATUSES.archived,
+      archive_failed: true,
+    });
+
+    await render(hbs`<ChatChannelStatus @channel={{this.channel}} />`);
+
+    assert.dom(".chat-channel-retry-archive").exists();
+  });
+});