UX Spec: Channel Settings Modal
- Matt Birtch
- Abhijit Singh
Ready for implementation
Important Links
Description
Because we are reducing the edit functions to one menu item in the Channel Header, we will put all the editing into one Channel Settings modal. This modal will also allow us to offer other Channel Settings that are currently only available in the System Console. This will open it up to other settings as well as plugins in the future.
The Channel Settings modal allows channel administrators and other authorized users to update key details about a channel. The modal is organized into three tabs for this phase of the project:
Info
Configuration
Archive channel
Note: Channel Settings is only available to channel admins and above by default.
Navigation & Entry Points
Channel header menu: Users with the appropriate permissions can open the modal via the channel’s header menu.
Channel info RHS: Users with the appropriate permissions can click on the pencil icon on the Channel Purpose or Channel Header field in the Channel Info RHS to open the channel settings modal with the appropriate field in-focus.
Channel header text blank state: Users with the appropriate permissions can click on the
Add a channel headerlink to open the channel settings modal with the Channel Header field in-focus.
Upon accessing Channel Settings, the modal opens on the Info tab by default.
Modal tabs
Channel Info
This section provides access to change the channel name, URL, access (public/private), purpose and header.
Channel Name
Text field labeled Channel name.
Accepts alphanumeric characters and spaces (maximum length: 64 characters).
If a user exceeds the maximum character length, an inline error message is displayed, and there is a negative character counter in the field.
Channel URL
Initially, the channel’s URL is displayed below the channel name along with an ‘Edit’ button.
The URL should be truncated as needed placing the
...in the middle of the urlHovering over a truncated URL displays a tooltip with the full URL
The displayed URL auto-updates as the channel name is updated (unless the user has previously customized it).
When users click ‘Edit’, the URL slug input field is revealed (see below).
Spaces and special characters (~, #, etc) are converted to dashes as you type to prevent errors. Uppercase letters are auto-converted to lowercase. Only lowercase letters, numbers, dashes, and underscores are allowed.
Channel Access
Public channel vs. Private channel radio buttons.
Users with the correct permissions can convert from public to private channel. Currently channel admins cannot change from private to public and that has to be done by a system admin in the system console.
When the user saves after switching the selector from Public to Private channel, there should be a confirmation modal displayed, identical to what we have currently for converting from a Public to Private channel.
In case of private channels, the public channel radio button card should be disabled.
Channel Purpose
Text field labeled Channel purpose.
Placeholder text: “Enter a purpose for this channel.”
When the purpose field contains a value, there is a new icon button in the top-right of the input that allows users to toggle the preview to show how their markdown will render.
Channel Header Preview
Text field labeled Channel header.
Placeholder text: “Enter a header description or important links.”
When the header field contains a value, there is a new icon button in the top-right of the header input that allows users to toggle the preview to show how their markdown will render.
Configuration Tab
Channel Banner
https://mattermost.atlassian.net/wiki/x/BYDTxQ
Archive Channel
Archiving a channel can be done directly from the channel menu or from the channel settings modal, and triggers a confirmation dialog before archiving.
Note: The channel settings modal will not be available for an archived channel since none of the edit options are available. The channel will first need to be Unarchived from the channel header menu to access the channel settings modal again.
Behaviour for Saving Settings
As soon as a change is made to the settings, a floating footer animates from the bottom within the active content area. Users can continue making changes while this footer is displayed, but they cannot change sections until they either save or cancel the changes they’ve made.
Changing Tabs while there are unsaved changes
If users attempt to change sections while there are unsaved changes, the footer animates with a shake to highlight that they have unsaved changes. They cannot change tabs until changes are saved or canceled
Closing the modal while there are unsaved changes
Using the close button
If a user presses the close button or clicks anywhere outside the modal while there are unsaved changes they are prevented and warned about the unsaved changes once. If they try to close again, the modal closes without saving.
Pressing the ESC key
If a user presses the ESC key while there are unsaved changes they are not warned and the modal closes without saving immediately.
Displaying errors with unsaved changes
When ‘Save’ is clicked and errors are detected, the floating footer displays in an error state, and relevant fields are marked in errors state with messages proximal to them. In addition, the Save button is disabled until it’s resolved or the user resets.
Mobile Webview
Because of the sections in this modal, it will need to be treated as a two-level flow. More details in the Figma design file.
Accessibility
Keyboard Navigation
Users should be able to tab through all form fields and buttons.
Enter on a focused button triggers its action; Esc closes the dialog.
Screen Reader Labels
All fields (Channel Name, Purpose, Header, etc.) must have accessible labels.
For Direct Messages and Group Messages
Since the only settings that can be changed on a DM or GM is the header, ‘Channel Settings’ changes to ‘Edit Header’ in the menu. This will open an updated Edit Header modal that only provides the field to edit the conversation header.
Channel Permissions
This section provides the ability to change:
Channel Access. Users with the correct permissions can convert from public to private channel. Currently channel admins cannot change from private to public and that has to be done by a system admin in the system console. We should consider allowing the channel admin to do this in the chat UI.
Permissions for guests and members. This is borrowed from the current system console ‘Channel Moderation’ functionality.
