FIX: Change wording from title -> name in channel about page (#19889)

We refer to the channel name rather than title elsewhere
(including the new channel modal), so we should be consistent.
Title is an internal abstraction, since DM channels cannot have
names (currently).

Also change the name field on channel edit to a input type="text"
rather than a textarea, since we don't want a huge input here.

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

@@ -18,22 +18,22 @@
 <div class="chat-form__section">
   <div class="chat-form__field">
     <label class="chat-form__label">
-      <span>{{i18n "chat.about_view.title"}}</span>
+      <span>{{i18n "chat.about_view.name"}}</span>
       {{#if (chat-guardian "can-edit-chat-channel")}}
         <div class="chat-form__label-actions">
           <DButton
-            @class="edit-title-btn btn-flat"
+            @class="edit-name-btn btn-flat"
             @label="chat.channel_settings.edit"
             @action={{if
-              this.onEditChatChannelTitle
+              this.onEditChatChannelName
-              this.onEditChatChannelTitle
+              this.onEditChatChannelName
             }}
           />
         </div>
       {{/if}}
     </label>
     <div class="chat-form__control">
-      <div class="channel-info-about-view__title">
+      <div class="channel-info-about-view__name">
         {{replace-emoji this.channel.escapedTitle}}
       </div>
     </div>

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

@@ -5,7 +5,7 @@ export default class ChatChannelAboutView extends Component {
   @service chat;
   tagName = "";
   channel = null;
-  onEditChatChannelTitle = null;
+  onEditChatChannelName = null;
   onEditChatChannelDescription = null;
   isLoading = false;
 }

plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name.js

@@ -6,30 +6,30 @@ export default class ChatChannelEditTitleController extends Controller.extend(
   ModalFunctionality
 ) {
   @service chatApi;
-  editedTitle = "";
+  editedName = "";
 
-  @computed("model.title", "editedTitle")
+  @computed("model.title", "editedName")
   get isSaveDisabled() {
     return (
-      this.model.title === this.editedTitle ||
+      this.model.title === this.editedName ||
-      this.editedTitle?.length > this.siteSettings.max_topic_title_length
+      this.editedName?.length > this.siteSettings.max_topic_title_length
     );
   }
 
   onShow() {
-    this.set("editedTitle", this.model.title || "");
+    this.set("editedName", this.model.title || "");
   }
 
   onClose() {
-    this.set("editedTitle", "");
+    this.set("editedName", "");
     this.clearFlash();
   }
 
   @action
-  onSaveChatChannelTitle() {
+  onSaveChatChannelName() {
     return this.chatApi
       .updateChannel(this.model.id, {
-        name: this.editedTitle,
+        name: this.editedName,
       })
       .then((result) => {
         this.model.set("title", result.channel.title);
@@ -43,8 +43,8 @@ export default class ChatChannelEditTitleController extends Controller.extend(
   }
 
   @action
-  onChangeChatChannelTitle(title) {
+  onChangeChatChannelName(title) {
     this.clearFlash();
-    this.set("editedTitle", title);
+    this.set("editedName", title);
   }
 }

plugins/chat/assets/javascripts/discourse/controllers/chat-channel-info-about.js

@@ -7,8 +7,8 @@ export default class ChatChannelInfoAboutController extends Controller.extend(
   ModalFunctionality
 ) {
   @action
-  onEditChatChannelTitle() {
+  onEditChatChannelName() {
-    showModal("chat-channel-edit-title", { model: this.model });
+    showModal("chat-channel-edit-name", { model: this.model });
   }
 
   @action

plugins/chat/assets/javascripts/discourse/templates/chat-channel-info-about.hbs

@@ -1,5 +1,5 @@
 <ChatChannelAboutView
   @channel={{this.model}}
-  @onEditChatChannelTitle={{action "onEditChatChannelTitle"}}
+  @onEditChatChannelName={{action "onEditChatChannelName"}}
   @onEditChatChannelDescription={{action "onEditChatChannelDescription"}}
 />

plugins/chat/assets/javascripts/discourse/templates/modal/chat-channel-edit-name.hbs

@@ -0,0 +1,22 @@
+<DModalBody @title="chat.channel_edit_name_modal.title">
+  <input
+    class="chat-channel-edit-name-modal__name-input"
+    placeholder={{i18n "chat.channel_edit_name_modal.input_placeholder"}}
+    {{on "input" (action "onChangeChatChannelName" value="target.value")}}
+    type="text"
+    value={{this.model.title}}
+  />
+  <span class="chat-channel-edit-name-modal__description">
+    {{i18n "chat.channel_edit_name_modal.description"}}
+  </span>
+</DModalBody>
+
+<div class="modal-footer">
+  <DButton
+    @class="btn-primary create"
+    @action={{action "onSaveChatChannelName"}}
+    @label="save"
+    @disabled={{this.isSaveDisabled}}
+  />
+  <DModalCancel @close={{route-action "closeModal"}} />
+</div>

plugins/chat/assets/javascripts/discourse/templates/modal/chat-channel-edit-title.hbs

@@ -1,20 +0,0 @@
-<DModalBody @title="chat.channel_edit_title_modal.title">
-  <textarea
-    class="chat-channel-edit-title-modal__title-input"
-    placeholder={{i18n "chat.channel_edit_title_modal.input_placeholder"}}
-    {{on "input" (action "onChangeChatChannelTitle" value="target.value")}}
-  >{{this.model.title}}</textarea>
-  <span class="chat-channel-edit-title-modal__description">
-    {{i18n "chat.channel_edit_title_modal.description"}}
-  </span>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @class="btn-primary create"
-    @action={{action "onSaveChatChannelTitle"}}
-    @label="save"
-    @disabled={{this.isSaveDisabled}}
-  />
-  <DModalCancel @close={{route-action "closeModal"}} />
-</div>

plugins/chat/assets/stylesheets/common/chat-channel-info.scss

@@ -117,13 +117,14 @@ input.channel-members-view__search-input {
   }
 }
 
-// Channel info edit title modal
+// Channel info edit name modal
-.chat-channel-edit-title-modal__title-input {
+.chat-channel-edit-name-modal__name-input {
   display: flex;
   margin: 0;
+  width: 100%;
 }
 
-.chat-channel-edit-title-modal__description {
+.chat-channel-edit-name-modal__description {
   display: flex;
   padding: 0.5rem 0;
   color: var(--primary-medium);

plugins/chat/config/locales/client.en.yml

@@ -233,6 +233,7 @@ en:
         associated_topic: Linked topic
         associated_category: Linked category
         title: Title
+        name: Name
         description: Description
 
       channel_info:
@@ -243,10 +244,10 @@ en:
           members: Members
           settings: Settings
 
-      channel_edit_title_modal:
+      channel_edit_name_modal:
-        title: Edit title
+        title: Edit name
-        input_placeholder: Add a title
+        input_placeholder: Add a name
-        description: Give a short descriptive title to your channel
+        description: Give a short descriptive name to your channel
 
       channel_edit_description_modal:
         title: Edit description

plugins/chat/spec/system/channel_about_page_spec.rb

@@ -16,14 +16,14 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
       chat_page.visit_channel_about(channel_1)
 
       expect(page.find(".category-name")).to have_content(channel_1.chatable.name)
-      expect(page.find(".channel-info-about-view__title")).to have_content(channel_1.title)
+      expect(page.find(".channel-info-about-view__name")).to have_content(channel_1.title)
     end
 
     it "escapes channel title" do
       channel_1.update!(name: "<script>alert('hello')</script>")
       chat_page.visit_channel_about(channel_1)
 
-      expect(page.find(".channel-info-about-view__title")["innerHTML"].strip).to eq(
+      expect(page.find(".channel-info-about-view__name")["innerHTML"].strip).to eq(
         "&lt;script&gt;alert('hello')&lt;/script&gt;",
       )
       expect(page.find(".chat-channel-title__name")["innerHTML"].strip).to eq(
@@ -31,10 +31,10 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
       )
     end
 
-    it "can’t edit title" do
+    it "can’t edit name" do
       chat_page.visit_channel_about(channel_1)
 
-      expect(page).to have_no_selector(".edit-title-btn")
+      expect(page).to have_no_selector(".edit-name-btn")
     end
 
     it "can’t edit description" do
@@ -76,20 +76,17 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
 
     before { sign_in(current_user) }
 
-    it "can edit title" do
+    it "can edit name" do
       chat_page.visit_channel_about(channel_1)
-      find(".edit-title-btn").click
+      find(".edit-name-btn").click
 
-      expect(page).to have_selector(
+      expect(find(".chat-channel-edit-name-modal__name-input").value).to eq(channel_1.title)
-        ".chat-channel-edit-title-modal__title-input",
-        text: channel_1.title,
-      )
 
-      title = "A new title"
+      name = "A new name"
-      find(".chat-channel-edit-title-modal__title-input").fill_in(with: title)
+      find(".chat-channel-edit-name-modal__name-input").fill_in(with: name)
       find(".create").click
 
-      expect(page).to have_content(title)
+      expect(page).to have_content(name)
     end
 
     it "can edit description" do