From bc847e54d4bf0b70109b9de85e3f134a1901838f Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 9 May 2023 09:22:25 +0200 Subject: [PATCH] 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. --- .../components/chat-channel-archive-status.js | 6 +- .../components/chat-channel-status.hbs | 5 +- .../components/chat-channel-status.js | 60 ++++++++-------- .../components/chat-channel-status-test.js | 68 +++++++++++++++++++ 4 files changed, 101 insertions(+), 38 deletions(-) create mode 100644 plugins/chat/test/javascripts/components/chat-channel-status-test.js diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-archive-status.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-archive-status.js index edfd1bbf7f6..8998272a79a 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-archive-status.js +++ b/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 ""; } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-status.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-status.hbs index 149d1e97606..fd17ea850fd 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-status.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-status.hbs @@ -1,8 +1,7 @@ -{{#if this.channelStatusMessage}} +{{#if this.shouldRender}}
{{d-icon this.channelStatusIcon}} {{this.channelStatusMessage}} - - +
{{/if}} \ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-status.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-status.js index cfbd949cdac..bd4363d9b9d 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-status.js +++ b/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({ - tagName: "", - channel: null, - format: null, +export default class ChatChannelStatus extends Component { + LONG_FORMAT = "long"; + SHORT_FORMAT = "short"; + VALID_FORMATS = [this.SHORT_FORMAT, this.LONG_FORMAT]; - init() { - this._super(...arguments); - if (!["short", "long"].includes(this.format)) { - this.set("format", "long"); - } - }, + get format() { + return this.VALID_FORMATS.includes(this.args.format) + ? this.args.format + : this.LONG_FORMAT; + } - @discourseComputed("channel.status") - channelStatusMessage(channelStatus) { - if (channelStatus === CHANNEL_STATUSES.open) { - return null; - } + get shouldRender() { + return this.args.channel.status !== CHANNEL_STATUSES.open; + } - if (this.format === "long") { - return this._longStatusMessage(channelStatus); + get channelStatusMessage() { + 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") - channelStatusIcon(channelStatus) { - return channelStatusIcon(channelStatus); - }, + get channelStatusIcon() { + return channelStatusIcon(this.args.channel.status); + } - _shortStatusMessage(channelStatus) { - switch (channelStatus) { + #shortStatusMessage(status) { + 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) { - switch (channelStatus) { + #longStatusMessage(status) { + 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"); } - }, -}); + } +} diff --git a/plugins/chat/test/javascripts/components/chat-channel-status-test.js b/plugins/chat/test/javascripts/components/chat-channel-status-test.js new file mode 100644 index 00000000000..933eec276cd --- /dev/null +++ b/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``); + + 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``); + + 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`` + ); + + 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``); + + 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``); + + assert.dom(".chat-channel-retry-archive").exists(); + }); +});