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.
This commit is contained in:
Martin Brennan 2023-01-18 09:13:33 +10:00 committed by GitHub
parent 3483285b89
commit 31f6811a93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 62 additions and 61 deletions

View File

@ -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.onEditChatChannelTitle
this.onEditChatChannelName
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>

View File

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

View File

@ -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.editedTitle?.length > this.siteSettings.max_topic_title_length
this.model.title === this.editedName ||
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);
}
}

View File

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

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -117,13 +117,14 @@ input.channel-members-view__search-input {
}
}
// Channel info edit title modal
.chat-channel-edit-title-modal__title-input {
// Channel info edit name modal
.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);

View File

@ -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:
title: Edit title
input_placeholder: Add a title
description: Give a short descriptive title to your channel
channel_edit_name_modal:
title: Edit name
input_placeholder: Add a name
description: Give a short descriptive name to your channel
channel_edit_description_modal:
title: Edit description

View File

@ -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 "cant edit title" do
it "cant 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 "cant 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(
".chat-channel-edit-title-modal__title-input",
text: channel_1.title,
)
expect(find(".chat-channel-edit-name-modal__name-input").value).to eq(channel_1.title)
title = "A new title"
find(".chat-channel-edit-title-modal__title-input").fill_in(with: title)
name = "A new name"
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