From dce5e811efb14341f534e3c8fb4c95f435f1608b Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Mon, 18 Dec 2023 23:09:47 +0200
Subject: [PATCH] UX: chat channel info area > classname changes (#24954)

---
 .../chat/routes/channel-info-members.gjs      | 12 +++++-----
 .../chat/routes/channel-info-settings.gjs     | 20 ++++++++---------
 .../components/chat/routes/channel-info.gjs   |  4 ++--
 .../stylesheets/common/chat-channel-info.scss |  8 +++----
 .../common/chat-channel-members.scss          |  2 +-
 .../common/chat-channel-settings.scss         |  6 ++---
 .../desktop/chat-channel-info.scss            |  2 +-
 .../mobile/chat-channel-members.scss          |  2 +-
 .../mobile/chat-channel-settings.scss         |  2 +-
 .../spec/system/channel_members_page_spec.rb  | 18 +++++++--------
 .../spec/system/channel_settings_page_spec.rb | 22 ++++++++-----------
 .../chat/chat_channel_settings.rb             |  4 ++--
 12 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
index 7ac2da49c9f..2b044bad680 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
@@ -130,19 +130,19 @@ export default class ChatRouteChannelInfoMembers extends Component {
         @onCancel={{this.hideAddMember}}
       />
     {{else}}
-      <div class="chat-channel-members">
+      <div class="c-channel-members">
         <DcFilterInput
           {{autoFocus}}
           @filterAction={{this.mutFilter}}
           @icons={{hash right="search"}}
-          @containerClass="chat-channel-members__filter"
+          @containerClass="c-channel-members__filter"
           placeholder={{this.filterPlaceholder}}
         />
 
-        <ul class="chat-channel-members__list" {{this.fill}}>
+        <ul class="c-channel-members__list" {{this.fill}}>
           {{#if @channel.chatable.group}}
             <li
-              class="chat-channel-members__list-item -add-member"
+              class="c-channel-members__list-item -add-member"
               role="button"
               {{on "click" this.addMember}}
               {{this.onEnter this.addMember}}
@@ -154,7 +154,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
           {{/if}}
           {{#each this.members as |membership|}}
             <li
-              class="chat-channel-members__list-item -member"
+              class="c-channel-members__list-item -member"
               {{on "click" (fn this.openMemberCard membership.user)}}
               {{this.onEnter (fn this.openMemberCard membership.user)}}
               tabindex="0"
@@ -168,7 +168,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
           {{else}}
             {{#if this.noResults}}
               <li
-                class="chat-channel-members__list-item -no-results alert alert-info"
+                class="c-channel-members__list-item -no-results alert alert-info"
               >
                 {{this.noMembershipsFoundLabel}}
               </li>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
index f89260ee34b..211d791e364 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
@@ -327,17 +327,17 @@ export default class ChatRouteChannelInfoSettings extends Component {
   }
 
   <template>
-    <div class="chat-channel-settings">
+    <div class="c-channel-settings">
       <ChatForm as |form|>
         <form.section @title={{this.titleSectionTitle}} as |section|>
           <section.row>
             <:default>
-              <div class="chat-channel-settings__name">
+              <div class="c-channel-settings__name">
                 {{replaceEmoji @channel.title}}
               </div>
 
               {{#if @channel.isCategoryChannel}}
-                <div class="chat-channel-settings__slug">
+                <div class="c-channel-settings__slug">
                   <LinkTo
                     @route="chat.channel"
                     @models={{@channel.routeModels}}
@@ -405,7 +405,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
               <:action>
                 <DToggleSwitch
                   @state={{@channel.currentUserMembership.muted}}
-                  class="chat-channel-settings__mute-switch"
+                  class="c-channel-settings__mute-switch"
                   {{on "click" this.onToggleMuted}}
                 />
               </:action>
@@ -423,7 +423,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                       "desktopNotificationLevel"
                       "desktop_notification_level"
                     }}
-                    class="chat-channel-settings__selector chat-channel-settings__desktop-notifications-selector"
+                    class="c-channel-settings__selector c-channel-settings__desktop-notifications-selector"
                   />
                 </:action>
               </section.row>
@@ -441,7 +441,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                       "mobileNotificationLevel"
                       "mobile_notification_level"
                     }}
-                    class="chat-channel-settings__selector chat-channel-settings__mobile-notifications-selector"
+                    class="c-channel-settings__selector c-channel-settings__mobile-notifications-selector"
                   />
                 </:action>
               </section.row>
@@ -476,7 +476,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                 <:action>
                   <DToggleSwitch
                     @state={{@channel.autoJoinUsers}}
-                    class="chat-channel-settings__auto-join-switch"
+                    class="c-channel-settings__auto-join-switch"
                     {{on
                       "click"
                       (fn this.onToggleAutoJoinUsers @channel.autoJoinUsers)
@@ -490,7 +490,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
               <section.row @label={{this.channelWideMentionsLabel}}>
                 <:action>
                   <DToggleSwitch
-                    class="chat-channel-settings__channel-wide-mentions"
+                    class="c-channel-settings__channel-wide-mentions"
                     @state={{@channel.allowChannelWideMentions}}
                     {{on
                       "click"
@@ -513,7 +513,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                 <:action>
                   <DToggleSwitch
                     @state={{@channel.threadingEnabled}}
-                    class="chat-channel-settings__threading-switch"
+                    class="c-channel-settings__threading-switch"
                     {{on
                       "click"
                       (fn
@@ -594,7 +594,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
             </:action>
           </section.row>
           {{#if @channel.chatable.group}}
-            <div class="chat-channel-settings__leave-info">
+            <div class="c-channel-settings__leave-info">
               {{icon "exclamation-triangle"}}
               {{i18n "chat.channel_settings.leave_groupchat_info"}}
             </div>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs
index 200b6a7ea4b..14dc516a594 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs
@@ -58,9 +58,9 @@ export default class ChatRoutesChannelInfo extends Component {
 
       <ChatChannelStatus @channel={{@channel}} />
 
-      <div class="chat-channel-info">
+      <div class="c-channel-info">
         {{#if this.showTabs}}
-          <nav class="chat-channel-info__nav">
+          <nav class="c-channel-info__nav">
             <ul class="nav nav-pills">
               <li>
                 <LinkTo
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
index 244c6a5fdc1..93dbca239d2 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
@@ -1,4 +1,4 @@
-.chat-channel-info {
+.c-channel-info {
   display: flex;
   padding: 1rem;
   flex-direction: column;
@@ -15,7 +15,7 @@
   }
 }
 
-.chat-channel-members__add-members {
+.c-channel-members__add-members {
   display: flex;
   gap: 1rem;
 
@@ -25,7 +25,7 @@
 }
 
 // Info header
-.chat-channel-info-header {
+.c-channel-info-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -33,7 +33,7 @@
   box-sizing: border-box;
 }
 
-.chat-channel-info-header__title {
+.c-channel-info-header__title {
   font-size: var(--font-up-2);
   margin: 0;
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-members.scss b/plugins/chat/assets/stylesheets/common/chat-channel-members.scss
index 70857126ce6..ab2d768a09a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-members.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-members.scss
@@ -1,4 +1,4 @@
-.chat-channel-members {
+.c-channel-members {
   max-width: 500px;
   width: 100%;
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss b/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss
index b9268c74ea0..223148c815f 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss
@@ -1,7 +1,7 @@
-.chat-channel-settings {
+.c-channel-settings {
   width: 100%;
 
-  .chat-channel-settings__slug {
+  .c-channel-settings__slug {
     max-width: 250px;
     @include ellipsis;
   }
@@ -19,7 +19,7 @@
     }
   }
 
-  .chat-form__section-content:has(.chat-channel-settings__leave-info) {
+  .chat-form__section-content:has(.c-channel-settings__leave-info) {
     gap: 0.25rem;
   }
 }
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-channel-info.scss b/plugins/chat/assets/stylesheets/desktop/chat-channel-info.scss
index 62eb938bc95..13965e67725 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-channel-info.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-channel-info.scss
@@ -1,3 +1,3 @@
-.chat-channel-info {
+.c-channel-info {
   max-width: 500px;
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss b/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
index 2e9eaadc263..92511513bfa 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
@@ -1,3 +1,3 @@
-.chat-channel-members {
+.c-channel-members {
   width: 100%;
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-channel-settings.scss b/plugins/chat/assets/stylesheets/mobile/chat-channel-settings.scss
index 3ebc181bc34..0b7de3264b1 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-channel-settings.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-channel-settings.scss
@@ -1,3 +1,3 @@
-.chat-channel-settings {
+.c-channel-settings {
   min-width: 320px;
 }
diff --git a/plugins/chat/spec/system/channel_members_page_spec.rb b/plugins/chat/spec/system/channel_members_page_spec.rb
index 8a2c02c9fa4..f9a146c6169 100644
--- a/plugins/chat/spec/system/channel_members_page_spec.rb
+++ b/plugins/chat/spec/system/channel_members_page_spec.rb
@@ -43,23 +43,23 @@ RSpec.describe "Channel - Info - Members page", type: :system do
       xit "shows all members" do
         chat_page.visit_channel_members(channel_1)
 
-        expect(page).to have_selector(".chat-channel-members__list-item", count: 60)
+        expect(page).to have_selector(".c-channel-members__list-item", count: 60)
 
-        scroll_to(find(".chat-channel-members__list-item:nth-child(60)"))
+        scroll_to(find(".c-channel-members__list-item:nth-child(60)"))
 
-        expect(page).to have_selector(".chat-channel-members__list-item", count: 100)
+        expect(page).to have_selector(".c-channel-members__list-item", count: 100)
 
-        scroll_to(find(".chat-channel-members__list-item:nth-child(100)"))
+        scroll_to(find(".c-channel-members__list-item:nth-child(100)"))
 
-        expect(page).to have_selector(".chat-channel-members__list-item", count: 100)
+        expect(page).to have_selector(".c-channel-members__list-item", count: 100)
       end
 
       context "with filter" do
         it "filters members" do
           chat_page.visit_channel_members(channel_1)
-          find(".chat-channel-members__filter").fill_in(with: "cat")
+          find(".c-channel-members__filter").fill_in(with: "cat")
 
-          expect(page).to have_selector(".chat-channel-members__list-item", count: 1, text: "cat")
+          expect(page).to have_selector(".c-channel-members__list-item", count: 1, text: "cat")
         end
       end
     end
@@ -69,7 +69,7 @@ RSpec.describe "Channel - Info - Members page", type: :system do
     it "doesn’t allow to add members" do
       chat_page.visit_channel_members(channel_1)
 
-      expect(chat_page).to have_no_css(".chat-channel-members__list-item.-add-member")
+      expect(chat_page).to have_no_css(".c-channel-members__list-item.-add-member")
     end
   end
 
@@ -86,7 +86,7 @@ RSpec.describe "Channel - Info - Members page", type: :system do
     it "allows to add members" do
       new_user = Fabricate(:user)
       chat_page.visit_channel_members(channel_1)
-      chat_page.find(".chat-channel-members__list-item.-add-member").click
+      chat_page.find(".c-channel-members__list-item.-add-member").click
       chat_page.find(".chat-message-creator__members-input").fill_in(with: new_user.username)
       chat_page.find(".chat-message-creator__list-item").click
       chat_page.find(".add-to-channel").click
diff --git a/plugins/chat/spec/system/channel_settings_page_spec.rb b/plugins/chat/spec/system/channel_settings_page_spec.rb
index 5834394528e..c69a04bc010 100644
--- a/plugins/chat/spec/system/channel_settings_page_spec.rb
+++ b/plugins/chat/spec/system/channel_settings_page_spec.rb
@@ -78,8 +78,8 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       chat_page.visit_channel_settings(channel_1)
 
       expect(page.find(".badge-category__name")).to have_content(channel_1.chatable.name)
-      expect(page.find(".chat-channel-settings__name")).to have_content(channel_1.title)
-      expect(page.find(".chat-channel-settings__slug")).to have_content(channel_1.slug)
+      expect(page.find(".c-channel-settings__name")).to have_content(channel_1.title)
+      expect(page.find(".c-channel-settings__slug")).to have_content(channel_1.slug)
     end
 
     it "can’t edit name or slug" do
@@ -98,7 +98,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       channel_1.update!(name: "<script>alert('hello')</script>")
       chat_page.visit_channel_settings(channel_1)
 
-      expect(page.find(".chat-channel-settings__name")["innerHTML"].strip).to eq(
+      expect(page.find(".c-channel-settings__name")["innerHTML"].strip).to eq(
         "&lt;script&gt;alert('hello')&lt;/script&gt;",
       )
       expect(page.find(".chat-channel-title__name")["innerHTML"].strip).to eq(
@@ -117,7 +117,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       membership = channel_1.membership_for(current_user)
 
       expect {
-        PageObjects::Components::DToggleSwitch.new(".chat-channel-settings__mute-switch").toggle
+        PageObjects::Components::DToggleSwitch.new(".c-channel-settings__mute-switch").toggle
 
         expect(toasts).to have_success(I18n.t("js.saved"))
       }.to change { membership.reload.muted }.from(false).to(true)
@@ -130,7 +130,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       expect {
         select_kit =
           PageObjects::Components::SelectKit.new(
-            ".chat-channel-settings__desktop-notifications-selector",
+            ".c-channel-settings__desktop-notifications-selector",
           )
         select_kit.expand
         select_kit.select_row_by_name("Never")
@@ -146,7 +146,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       expect {
         select_kit =
           PageObjects::Components::SelectKit.new(
-            ".chat-channel-settings__mobile-notifications-selector",
+            ".c-channel-settings__mobile-notifications-selector",
           )
         select_kit.expand
         select_kit.select_row_by_name("Never")
@@ -260,9 +260,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       chat_page.visit_channel_settings(channel_1)
 
       expect {
-        PageObjects::Components::DToggleSwitch.new(
-          ".chat-channel-settings__auto-join-switch",
-        ).toggle
+        PageObjects::Components::DToggleSwitch.new(".c-channel-settings__auto-join-switch").toggle
         find("#dialog-holder .btn-primary").click
 
         expect(toasts).to have_success(I18n.t("js.saved"))
@@ -274,7 +272,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
 
       expect {
         PageObjects::Components::DToggleSwitch.new(
-          ".chat-channel-settings__channel-wide-mentions",
+          ".c-channel-settings__channel-wide-mentions",
         ).toggle
 
         expect(toasts).to have_success(I18n.t("js.saved"))
@@ -296,9 +294,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       chat_page.visit_channel_settings(channel_1)
 
       expect {
-        PageObjects::Components::DToggleSwitch.new(
-          ".chat-channel-settings__threading-switch",
-        ).toggle
+        PageObjects::Components::DToggleSwitch.new(".c-channel-settings__threading-switch").toggle
 
         expect(toasts).to have_success(I18n.t("js.saved"))
       }.to change { channel_1.reload.threading_enabled }.from(false).to(true)
diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel_settings.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel_settings.rb
index 34d9ee1b8b1..7d0373cb5e5 100644
--- a/plugins/chat/spec/system/page_objects/chat/chat_channel_settings.rb
+++ b/plugins/chat/spec/system/page_objects/chat/chat_channel_settings.rb
@@ -12,11 +12,11 @@ module PageObjects
       end
 
       def has_slug?(slug)
-        page.has_css?(".chat-channel-settings__slug", text: slug)
+        page.has_css?(".c-channel-settings__slug", text: slug)
       end
 
       def has_name?(name)
-        page.has_css?(".chat-channel-settings__name", text: name)
+        page.has_css?(".c-channel-settings__name", text: name)
       end
     end
   end