UX Spec: Channel Settings Modal

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 in the future as well.

Open

Channel Info

This section provides access to change the channel name, URL, purpose and header

Open

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.

Editing the Channel’s 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 url

  • Hovering 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 Header Preview

For the channel header, there is a new icon button in the top-right of the header input that allows users to toggle the preview to show their markdown will render.

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.

Archive Channel

Archiving a channel can be done directly from the channel menu or from the channel settings modal

Behavior 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.

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.