From c74fa300e79c3c6f6afb168130cf8f0237ea7004 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 16 Jul 2024 12:34:37 +0200 Subject: [PATCH] FEATURE: allows browse page in chat drawer (#27919) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit ensures the browse page can be loaded in the drawer and doesn’t force full page mode. Other notable changes of this commit: - be consistent about wrapping each full page route with "c-routes.--route-name" and each drawer container with "c-drawer-routes.--route-name" - move browse channels into its own component, it was before in the template of the channels browse --- .../discourse/components/browse-channels.gjs | 129 +++++ .../discourse/components/chat-channel.gjs | 1 - .../components/chat/drawer-routes/browse.gjs | 47 ++ .../{members.gjs => channel-info-members.gjs} | 48 +- ...settings.gjs => channel-info-settings.gjs} | 51 +- .../chat/drawer-routes/channel-thread.gjs | 72 +-- .../chat/drawer-routes/channel-threads.gjs | 44 +- .../components/chat/drawer-routes/channel.gjs | 63 +-- .../chat/drawer-routes/channels.gjs | 30 +- .../chat/drawer-routes/direct-messages.gjs | 32 +- .../components/chat/drawer-routes/threads.gjs | 32 +- .../components/chat/navbar/back-button.gjs | 7 +- .../components/chat/routes/browse.gjs | 131 ----- .../chat/routes/channel-info-members.gjs | 128 ++--- .../chat/routes/channel-info-nav.gjs | 64 +-- .../chat/routes/channel-info-settings.gjs | 469 +++++++++--------- .../components/chat/routes/channel-info.gjs | 2 +- .../components/chat/routes/channel-thread.gjs | 2 +- .../chat/routes/channel-threads.gjs | 2 +- .../components/chat/routes/channel.gjs | 2 +- .../components/chat/routes/channels.gjs | 2 +- .../chat/routes/direct-messages.gjs | 2 +- .../components/chat/routes/threads.gjs | 2 +- .../services/chat-channel-composer.js | 14 +- .../discourse/services/chat-drawer-router.js | 36 +- .../discourse/templates/chat-browse-all.hbs | 2 +- .../templates/chat-browse-archived.hbs | 2 +- .../templates/chat-browse-closed.hbs | 2 +- .../discourse/templates/chat-browse-open.hbs | 2 +- .../discourse/templates/chat-browse.hbs | 14 +- .../stylesheets/common/chat-browse.scss | 10 + .../common/chat-drawer-routes.scss | 6 + .../chat/assets/stylesheets/common/index.scss | 1 + .../stylesheets/desktop/chat-navbar.scss | 4 +- .../stylesheets/mobile/base-mobile.scss | 2 +- .../assets/stylesheets/mobile/chat-index.scss | 6 +- .../mobile/chat-message-thread-indicator.scss | 2 +- .../chat/spec/system/drawer/browse_spec.rb | 24 + plugins/chat/spec/system/drawer/index_spec.rb | 9 + .../spec/system/hashtag_autocomplete_spec.rb | 2 +- .../message_notifications_mobile_spec.rb | 18 +- plugins/chat/spec/system/navigation_spec.rb | 14 +- .../chat/{browse_page.rb => browse.rb} | 13 +- .../page_objects/chat/chat_channel_threads.rb | 4 +- .../system/page_objects/chat/chat_thread.rb | 2 +- .../{channel_index.rb => channels_index.rb} | 8 +- .../system/page_objects/chat/user_threads.rb | 2 +- .../page_objects/chat_drawer/chat_drawer.rb | 19 +- .../chat/spec/system/single_thread_spec.rb | 2 +- 49 files changed, 882 insertions(+), 700 deletions(-) create mode 100644 plugins/chat/assets/javascripts/discourse/components/browse-channels.gjs create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/browse.gjs rename plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/{members.gjs => channel-info-members.gjs} (53%) rename plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/{settings.gjs => channel-info-settings.gjs} (53%) delete mode 100644 plugins/chat/assets/javascripts/discourse/components/chat/routes/browse.gjs create mode 100644 plugins/chat/assets/stylesheets/common/chat-drawer-routes.scss create mode 100644 plugins/chat/spec/system/drawer/browse_spec.rb rename plugins/chat/spec/system/page_objects/chat/{browse_page.rb => browse.rb} (69%) rename plugins/chat/spec/system/page_objects/chat/components/{channel_index.rb => channels_index.rb} (85%) diff --git a/plugins/chat/assets/javascripts/discourse/components/browse-channels.gjs b/plugins/chat/assets/javascripts/discourse/components/browse-channels.gjs new file mode 100644 index 00000000000..e4c8b221f99 --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/components/browse-channels.gjs @@ -0,0 +1,129 @@ +import Component from "@glimmer/component"; +import { cached, tracked } from "@glimmer/tracking"; +import { concat, hash } from "@ember/helper"; +import { action } from "@ember/object"; +import didInsert from "@ember/render-modifiers/modifiers/did-insert"; +import { LinkTo } from "@ember/routing"; +import { schedule } from "@ember/runloop"; +import { service } from "@ember/service"; +import { eq } from "truth-helpers"; +import DButton from "discourse/components/d-button"; +import { INPUT_DELAY } from "discourse-common/config/environment"; +import i18n from "discourse-common/helpers/i18n"; +import discourseDebounce from "discourse-common/lib/debounce"; +import List from "discourse/plugins/chat/discourse/components/chat/list"; +import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message"; +import ChatChannelCard from "discourse/plugins/chat/discourse/components/chat-channel-card"; +import DcFilterInput from "discourse/plugins/chat/discourse/components/dc-filter-input"; + +const ARCHIVED = "archived"; +const ALL = "all"; +const OPEN = "open"; +const CLOSED = "closed"; +const TABS = [ALL, OPEN, CLOSED, ARCHIVED]; + +export default class BrowseChannels extends Component { + @service chatApi; + @service modal; + @service siteSettings; + + @tracked filter = ""; + + get currentTab() { + return this.args.currentTab ?? ALL; + } + + @cached + get channelsCollection() { + return this.chatApi.channels({ + filter: this.filter, + status: this.currentTab, + }); + } + + get tabs() { + if (this.siteSettings.chat_allow_archiving_channels) { + return TABS; + } else { + return [...TABS].removeObject(ARCHIVED); + } + } + + @action + showChatNewMessageModal() { + this.modal.show(ChatModalNewMessage); + } + + @action + setFilter(event) { + this.filter = event.target.value; + discourseDebounce(this.debouncedLoad, INPUT_DELAY); + } + + @action + debouncedLoad() { + this.channelsCollection.load({ limit: 10 }); + } + + @action + focusFilterInput(input) { + schedule("afterRender", () => input?.focus()); + } + + +} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs index 0b2f14ba3a3..77399df0ce4 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs @@ -702,7 +702,6 @@ export default class ChatChannel extends Component { {{didUpdate this.loadMessages @targetMessageId}} data-id={{@channel.id}} > - diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/browse.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/browse.gjs new file mode 100644 index 00000000000..e077aa7a9a4 --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/browse.gjs @@ -0,0 +1,47 @@ +import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; +import { array } from "@ember/helper"; +import { service } from "@ember/service"; +import i18n from "discourse-common/helpers/i18n"; +import BrowseChannels from "discourse/plugins/chat/discourse/components/browse-channels"; +import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar"; + +export default class ChatDrawerRoutesBrowse extends Component { + @service chat; + @service chatStateManager; + @service chatChannelsManager; + @service chatHistory; + + @tracked showThreadFullTitle = false; + + get showfullTitle() { + return this.chatStateManager.isDrawerExpanded && this.showThreadFullTitle; + } + + +} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/members.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-members.gjs similarity index 53% rename from plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/members.gjs rename to plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-members.gjs index e367f09a1ae..5440d0d892e 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/members.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-members.gjs @@ -34,27 +34,35 @@ export default class ChatDrawerRoutesMembers extends Component { } } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/settings.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-settings.gjs similarity index 53% rename from plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/settings.gjs rename to plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-settings.gjs index 4b2fea27d5a..9cfb1f1349c 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/settings.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-settings.gjs @@ -34,30 +34,35 @@ export default class ChatDrawerRoutesSettings extends Component { } } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs index 8564c5e080d..32cf80c02cf 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs @@ -78,41 +78,45 @@ export default class ChatDrawerRoutesChannelThread extends Component { } } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs index a2fd12560ac..861b9742ccb 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs @@ -40,29 +40,31 @@ export default class ChatDrawerRoutesChannelThreads extends Component { } } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs index 587630451c2..d126e5b1130 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs @@ -11,9 +11,12 @@ export default class ChatDrawerRoutesChannel extends Component { @service chat; @service chatStateManager; @service chatChannelsManager; + @service chatHistory; get backBtnRoute() { - if (this.chat.activeChannel?.isDirectMessageChannel) { + if (this.chatHistory.previousRoute?.name === "chat.browse") { + return "chat.browse"; + } else if (this.chat.activeChannel?.isDirectMessageChannel) { return "chat.direct-messages"; } else { return "chat.channels"; @@ -34,34 +37,36 @@ export default class ChatDrawerRoutesChannel extends Component { } } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs index 624f4dd6548..d9fa7211637 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs @@ -10,21 +10,23 @@ export default class ChatDrawerRoutesChannels extends Component { @service chatStateManager; } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs index 080842f5bb6..4ab1eee669d 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs @@ -5,26 +5,28 @@ import ChannelsListDirect from "discourse/plugins/chat/discourse/components/chan import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar"; import ChatFooter from "discourse/plugins/chat/discourse/components/chat-footer"; -export default class ChatDrawerRoutesChannels extends Component { +export default class ChatDrawerRoutesDirectMessages extends Component { @service chat; @service chatStateManager; } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs index 992004cb238..c2d33bf60ea 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs @@ -10,22 +10,24 @@ export default class ChatDrawerRoutesThreads extends Component { @service chatStateManager; } diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs index 4b1c7f2bfb8..92c7d256dfc 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs @@ -2,7 +2,6 @@ import Component from "@glimmer/component"; import { LinkTo } from "@ember/routing"; import icon from "discourse-common/helpers/d-icon"; import I18n from "I18n"; -import { FOOTER_NAV_ROUTES } from "discourse/plugins/chat/discourse/lib/chat-constants"; export default class ChatNavbarBackButton extends Component { get icon() { @@ -14,11 +13,7 @@ export default class ChatNavbarBackButton extends Component { } get targetRoute() { - if (FOOTER_NAV_ROUTES.includes(this.args.route)) { - return this.args.route; - } else { - return "chat"; - } + return this.args.route ?? "chat"; }