MM-53125 Add feature to convert group message to private channel (#24421)

* Added convert to channel menu item

* WIP

* refactored channel name input field and created conversion modal

* style

* style

* WIP

* wip

* Created API to fetch common teams of GM members

* Added UI for all members deactivated

* Fetched common teams in client

* WIP

* Added a required attribute to DropdownInput component

* Fixed a case with dropdown input required flag

* WIP

* API first draft

* Genetayed layers and mocks

* Fixed create channel bug

* WIP

* Added cache invalidation

* Calling API from client

* Updated API to accept name and display name as well

* WIP

* Moved converted GM to correct category

* Style fixes

* Added logic to move user to new team/channel after GM conversion

* Prevented guest user from performing action

* Added loading indicator

* Added smoother height transistion when loading finishes

* UI imporvements

* WIP

* Formatted GM conversion message on client side

* lint fix

* Moved convert option from sidebar menu to channel header menu

* Some cleanup

* Updated server layers

* Fixed i18n

* Fixed types

* Fix server i18n

* Fixed channel creation bug

* Added store test for GetCommonTeamIDsForMultipleUsers

* Server tests done

* Updated snapshots

* Updated layers

* lint fix

* Update tests

* For CI

* lint

* restored debug code

* Used user ID instead of username in channel conversion post

* WIP

* Review fixes

* LInt fixes

* Test fix

* WIP

* WIP

* WIP

* wip

* Review fixes, lots of them

* Review fix

* Disabled WIP test

* test

* Cleanup

* Test fix

* removed testing line

* Fixed incorrect default message

* Review fixes

* Fixes

* lint and i18n fix

* Setting category on server side

* updated i18n

* Updated tests

* Added tests

* Refs cleanup

* added test

---------

Co-authored-by: Harshil Sharma <harshilsharma@Harshils-MacBook-Pro.local>

webapp/channels/src/actions/team_actions.ts

@@ -7,10 +7,12 @@ import type {UserProfile} from '@mattermost/types/users';
 
 import {TeamTypes} from 'mattermost-redux/action_types';
 import {getChannelStats} from 'mattermost-redux/actions/channels';
+import {logError} from 'mattermost-redux/actions/errors';
 import {savePreferences} from 'mattermost-redux/actions/preferences';
 import * as TeamActions from 'mattermost-redux/actions/teams';
 import {selectTeam} from 'mattermost-redux/actions/teams';
 import {getUser} from 'mattermost-redux/actions/users';
+import {Client4} from 'mattermost-redux/client';
 import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import type {ActionFunc, DispatchFunc, GetStateFunc} from 'mattermost-redux/types/actions';
@@ -114,3 +116,19 @@ export function updateTeamsOrderForUser(teamIds: Array<Team['id']>) {
         dispatch(savePreferences(currentUserId, teamOrderPreferences));
     };
 }
+
+export function getGroupMessageMembersCommonTeams(channelId: string): ActionFunc<Team[], ServerError> {
+    return async (dispatch) => {
+        let teams: Team[];
+
+        try {
+            const response = await Client4.getGroupMessageMembersCommonTeams(channelId);
+            teams = response.data;
+        } catch (error) {
+            dispatch(logError(error as ServerError));
+            return {error: error as ServerError};
+        }
+
+        return {data: teams};
+    };
+}

webapp/channels/src/actions/websocket_actions.jsx

@@ -79,7 +79,14 @@ import {getGroup} from 'mattermost-redux/selectors/entities/groups';
 import {getPost, getMostRecentPostIdInChannel, getTeamIdFromPost} from 'mattermost-redux/selectors/entities/posts';
 import {isCollapsedThreadsEnabled} from 'mattermost-redux/selectors/entities/preferences';
 import {haveISystemPermission, haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
-import {getMyTeams, getCurrentRelativeTeamUrl, getCurrentTeamId, getCurrentTeamUrl, getTeam} from 'mattermost-redux/selectors/entities/teams';
+import {
+    getMyTeams,
+    getCurrentRelativeTeamUrl,
+    getCurrentTeamId,
+    getCurrentTeamUrl,
+    getTeam,
+    getRelativeTeamUrl,
+} from 'mattermost-redux/selectors/entities/teams';
 import {getNewestThreadInTeam, getThread, getThreads} from 'mattermost-redux/selectors/entities/threads';
 import {getCurrentUser, getCurrentUserId, getUser, getIsManualStatusForUserId, isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
 import {isGuest} from 'mattermost-redux/utils/user_utils';
@@ -619,7 +626,8 @@ export function handleChannelUpdatedEvent(msg) {
 
         const state = doGetState();
         if (channel.id === getCurrentChannelId(state)) {
-            getHistory().replace(`${getCurrentRelativeTeamUrl(state)}/channels/${channel.name}`);
+            // using channel's team_id to ensure we always redirect to current channel even if channel's team changes.
+            getHistory().replace(`${getRelativeTeamUrl(state, channel.team_id)}/channels/${channel.name}`);
         }
     };
 }

webapp/channels/src/actions/websocket_actions.test.jsx

@@ -649,7 +649,10 @@ describe('handleChannelUpdatedEvent', () => {
     test('when a channel is updated', () => {
         const testStore = configureStore(initialState);
 
-        const channel = {id: 'channel'};
+        const channel = {
+            id: 'channel',
+            team_id: 'team',
+        };
         const msg = {data: {channel: JSON.stringify(channel)}};
 
         testStore.dispatch(handleChannelUpdatedEvent(msg));
@@ -662,7 +665,10 @@ describe('handleChannelUpdatedEvent', () => {
     test('should not change URL when current channel is updated', () => {
         const testStore = configureStore(initialState);
 
-        const channel = {id: 'channel'};
+        const channel = {
+            id: 'channel',
+            team_id: 'team',
+        };
         const msg = {data: {channel: JSON.stringify(channel)}};
 
         testStore.dispatch(handleChannelUpdatedEvent(msg));

webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap

@@ -459,6 +459,43 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       show={false}
       text="Edit Conversation Header"
     />
+    <MenuItemToggleModalRedux
+      dialogProps={
+        Object {
+          "channel": Object {
+            "create_at": 0,
+            "creator_id": "id",
+            "delete_at": 0,
+            "display_name": "name",
+            "group_constrained": false,
+            "header": "header",
+            "id": "test-channel-id",
+            "last_post_at": 0,
+            "last_root_post_at": 0,
+            "name": "DN",
+            "purpose": "purpose",
+            "scheme_id": "id",
+            "team_id": "team_id",
+            "type": "O",
+            "update_at": 0,
+          },
+        }
+      }
+      dialogType={
+        Object {
+          "$$typeof": Symbol(react.memo),
+          "WrappedComponent": [Function],
+          "compare": null,
+          "type": [Function],
+        }
+      }
+      id="convertGMPrivateChannel"
+      modalId="convert_gm_to_channel"
+      show={false}
+      text="Convert to Private Channel"
+    />
+  </MenuGroup>
+  <MenuGroup>
     <Connect(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
@@ -1251,6 +1288,43 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       show={false}
       text="Edit Conversation Header"
     />
+    <MenuItemToggleModalRedux
+      dialogProps={
+        Object {
+          "channel": Object {
+            "create_at": 0,
+            "creator_id": "id",
+            "delete_at": 0,
+            "display_name": "name",
+            "group_constrained": false,
+            "header": "header",
+            "id": "test-channel-id",
+            "last_post_at": 0,
+            "last_root_post_at": 0,
+            "name": "DN",
+            "purpose": "purpose",
+            "scheme_id": "id",
+            "team_id": "team_id",
+            "type": "O",
+            "update_at": 0,
+          },
+        }
+      }
+      dialogType={
+        Object {
+          "$$typeof": Symbol(react.memo),
+          "WrappedComponent": [Function],
+          "compare": null,
+          "type": [Function],
+        }
+      }
+      id="convertGMPrivateChannel"
+      modalId="convert_gm_to_channel"
+      show={false}
+      text="Convert to Private Channel"
+    />
+  </MenuGroup>
+  <MenuGroup>
     <Connect(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={

webapp/channels/src/components/channel_header_dropdown/channel_header_dropdown_items.tsx

@@ -15,6 +15,7 @@ import ChannelInviteModal from 'components/channel_invite_modal';
 import ChannelMoveToSubMenuOld from 'components/channel_move_to_sub_menu_old';
 import ChannelNotificationsModal from 'components/channel_notifications_modal';
 import ConvertChannelModal from 'components/convert_channel_modal';
+import ConvertGmToChannelModal from 'components/convert_gm_to_channel_modal';
 import DeleteChannelModal from 'components/delete_channel_modal';
 import EditChannelHeaderModal from 'components/edit_channel_header_modal';
 import EditChannelPurposeModal from 'components/edit_channel_purpose_modal';
@@ -221,6 +222,18 @@ export default class ChannelHeaderDropdown extends React.PureComponent<Props> {
                         dialogProps={{channel}}
                         text={localizeMessage('channel_header.setConversationHeader', 'Edit Conversation Header')}
                     />
+
+                    <Menu.ItemToggleModalRedux
+                        id='convertGMPrivateChannel'
+                        show={channel.type === Constants.GM_CHANNEL && !isArchived && !isReadonly && !isGuest(user.roles)}
+                        modalId={ModalIdentifiers.CONVERT_GM_TO_CHANNEL}
+                        dialogType={ConvertGmToChannelModal}
+                        dialogProps={{channel}}
+                        text={localizeMessage('sidebar_left.sidebar_channel_menu_convert_to_channel', 'Convert to Private Channel')}
+                    />
+                </Menu.Group>
+
+                <Menu.Group divider={divider}>
                     <ChannelPermissionGate
                         channelId={channel.id}
                         teamId={channel.team_id}

webapp/channels/src/components/channel_name_form_field/channel_name_form_field.scss

@@ -0,0 +1,5 @@
+.channel-name-input-field {
+    height: 34px !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+}

webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx

@@ -0,0 +1,145 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
+
+import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
+
+import type {CustomMessageInputType} from 'components/widgets/inputs/input/input';
+import Input from 'components/widgets/inputs/input/input';
+import URLInput from 'components/widgets/inputs/url_input/url_input';
+
+import Constants from 'utils/constants';
+import {cleanUpUrlable, getSiteURL, validateChannelUrl} from 'utils/url';
+import {generateSlug, localizeMessage} from 'utils/utils';
+
+export type Props = {
+    value: string;
+    name: string;
+    placeholder: string;
+    onDisplayNameChange: (name: string) => void;
+    onURLChange: (url: string) => void;
+    autoFocus?: boolean;
+    onErrorStateChange?: (isError: boolean) => void;
+}
+
+import './channel_name_form_field.scss';
+
+function validateDisplayName(displayNameParam: string) {
+    const errors: string[] = [];
+
+    const displayName = displayNameParam.trim();
+
+    if (displayName.length < Constants.MIN_CHANNELNAME_LENGTH) {
+        errors.push(localizeMessage('channel_modal.name.longer', 'Channel names must have at least 2 characters.'));
+    }
+
+    if (displayName.length > Constants.MAX_CHANNELNAME_LENGTH) {
+        errors.push(localizeMessage('channel_modal.name.shorter', 'Channel names must have maximum 64 characters.'));
+    }
+
+    return errors;
+}
+
+// Component for input fields for editing channel display name
+// along with stuff to edit its URL.
+const ChannelNameFormField = (props: Props): JSX.Element => {
+    const intl = useIntl();
+    const {formatMessage} = intl;
+
+    const displayNameModified = useRef<boolean>(false);
+    const [displayNameError, setDisplayNameError] = useState<string>('');
+    const displayName = useRef<string>('');
+    const urlModified = useRef<boolean>(false);
+    const [url, setURL] = useState<string>('');
+    const [urlError, setURLError] = useState<string>('');
+    const [inputCustomMessage, setInputCustomMessage] = useState<CustomMessageInputType | null>(null);
+
+    const {name: currentTeamName} = useSelector(getCurrentTeam);
+
+    const handleOnDisplayNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        const {target: {value: updatedDisplayName}} = e;
+
+        const displayNameErrors = validateDisplayName(updatedDisplayName);
+
+        // set error if any, else clear it
+        setDisplayNameError(displayNameErrors.length ? displayNameErrors[displayNameErrors.length - 1] : '');
+        displayName.current = updatedDisplayName;
+        props.onDisplayNameChange(updatedDisplayName);
+
+        if (!urlModified.current) {
+            // if URL isn't explicitly modified, it's derived from the display name
+            const cleanURL = cleanUpUrlable(updatedDisplayName);
+            setURL(cleanURL);
+            setURLError('');
+            props.onURLChange(cleanURL);
+        }
+    }, [props.onDisplayNameChange, props.onURLChange]);
+
+    const handleOnDisplayNameBlur = useCallback(() => {
+        if (displayName.current && !url) {
+            const url = generateSlug();
+            setURL(url);
+            props.onURLChange(url);
+        }
+        if (!displayNameModified.current) {
+            displayNameModified.current = true;
+            setInputCustomMessage(null);
+        }
+    }, [props.onURLChange, displayName.current, url, displayNameModified]);
+
+    const handleOnURLChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        const {target: {value: url}} = e;
+
+        const cleanURL = url.toLowerCase().replace(/\s/g, '-');
+        const urlErrors = validateChannelUrl(cleanURL, intl) as string[];
+
+        setURLError(urlErrors.length ? urlErrors[urlErrors.length - 1] : '');
+        setURL(cleanURL);
+        urlModified.current = true;
+        props.onURLChange(cleanURL);
+    }, [props.onURLChange]);
+
+    useEffect(() => {
+        if (props.onErrorStateChange) {
+            props.onErrorStateChange(Boolean(displayNameError) || Boolean(urlError));
+        }
+    }, [displayNameError, urlError]);
+
+    return (
+        <React.Fragment>
+            <Input
+                type='text'
+                autoComplete='off'
+                autoFocus={props.autoFocus !== false}
+                required={true}
+                name={props.name}
+                containerClassName={`${props.name}-container`}
+                inputClassName={`${props.name}-input channel-name-input-field`}
+                label={formatMessage({id: 'channel_modal.name.label', defaultMessage: 'Channel name'})}
+                placeholder={props.placeholder}
+                limit={Constants.MAX_CHANNELNAME_LENGTH}
+                value={props.value}
+                customMessage={inputCustomMessage}
+                onChange={handleOnDisplayNameChange}
+                onBlur={handleOnDisplayNameBlur}
+            />
+            <URLInput
+                className='new-channel-modal__url'
+                base={getSiteURL()}
+                path={`${currentTeamName}/channels`}
+                pathInfo={url}
+                limit={Constants.MAX_CHANNELNAME_LENGTH}
+                shortenLength={Constants.DEFAULT_CHANNELURL_SHORTEN_LENGTH}
+                error={urlError}
+                onChange={handleOnURLChange}
+            />
+        </React.Fragment>
+    );
+};
+
+export default ChannelNameFormField;

webapp/channels/src/components/convert_gm_to_channel_modal/convert_gm_to_channel_modal.scss

@@ -0,0 +1,60 @@
+#convert-gm-to-channel-modal {
+    .convert-gm-to-channel-modal-body {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        overflow-y: visible;
+        transition: height 200ms ease;
+
+        &.multi-team {
+            height: 340px;
+        }
+
+        &.single-team {
+            height: 230px;
+        }
+
+        &.loading {
+            height: 152px;
+        }
+
+        &.error {
+            height: unset;
+        }
+
+        .new-channel-modal__url {
+            margin-top: -20px;
+        }
+
+        .loadingIndicator {
+            display: block;
+            width: 32px;
+            height: 32px;
+            margin: 36px auto 48px;
+            font-size: 32px;
+        }
+
+        .conversion-error {
+            color: var(--error-text);
+        }
+    }
+
+    .DropDown__menu {
+        z-index: 999;
+        max-height: 120px;
+    }
+
+    .DropDown__menu-list {
+        z-index: 999;
+        max-height: 120px;
+    }
+
+    .modal-body {
+        overflow: visible;
+    }
+
+    .GenericModal__button.delete.disabled {
+        color: var(--button-color) !important;
+        opacity: 0.65;
+    }
+}

webapp/channels/src/components/convert_gm_to_channel_modal/convert_gm_to_channel_modal.test.tsx

@@ -0,0 +1,177 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, waitFor} from '@testing-library/react';
+import nock from 'nock';
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+
+import type {Channel} from '@mattermost/types/channels';
+import type {Team} from '@mattermost/types/teams';
+import type {UserProfile} from '@mattermost/types/users';
+import type {DeepPartial} from '@mattermost/types/utilities';
+
+import {Client4} from 'mattermost-redux/client';
+import {Preferences} from 'mattermost-redux/constants';
+
+import ConvertGmToChannelModal from 'components/convert_gm_to_channel_modal/convert_gm_to_channel_modal';
+
+import TestHelper from 'packages/mattermost-redux/test/test_helper';
+import {renderWithFullContext, screen} from 'tests/react_testing_utils';
+
+import type {GlobalState} from 'types/store';
+
+describe('component/ConvertGmToChannelModal', () => {
+    const user1 = TestHelper.fakeUserWithId();
+    const user2 = TestHelper.fakeUserWithId();
+    const user3 = TestHelper.fakeUserWithId();
+
+    const baseProps = {
+        onExited: jest.fn(),
+        channel: {id: 'channel_id_1', type: 'G'} as Channel,
+        actions: {
+            closeModal: jest.fn(),
+            convertGroupMessageToPrivateChannel: jest.fn(),
+            moveChannelsInSidebar: jest.fn(),
+        },
+        profilesInChannel: [user1, user2, user3] as UserProfile[],
+        teammateNameDisplaySetting: Preferences.DISPLAY_PREFER_FULL_NAME,
+        channelsCategoryId: 'sidebar_category_1',
+        currentUserId: user1.id,
+    };
+
+    const baseState: DeepPartial<GlobalState> = {
+        entities: {
+            teams: {
+                teams: {
+                    team_id_1: {id: 'team_id_1', display_name: 'Team 1'} as Team,
+                    team_id_2: {id: 'team_id_2', display_name: 'Team 2'} as Team,
+                },
+                currentTeamId: 'team_id_1',
+            },
+        },
+    };
+
+    test('members part of multiple common teams', async () => {
+        TestHelper.initBasic(Client4);
+        nock(Client4.getBaseRoute()).
+            get('/channels/channel_id_1/common_teams').
+            reply(200, [
+                {id: 'team_id_1', display_name: 'Team 1'},
+                {id: 'team_id_2', display_name: 'Team 2'},
+            ]);
+
+        renderWithFullContext(
+            <ConvertGmToChannelModal {...baseProps}/>,
+            baseState,
+        );
+
+        // we need to use waitFor for first assertion as we have a minimum 1200 ms loading animation in the dialog
+        // before it's content is rendered.
+        await waitFor(
+            () => expect(screen.queryByText('Conversation history will be visible to any channel members')).toBeInTheDocument(),
+            {timeout: 1500},
+        );
+
+        expect(screen.queryByText('Select Team')).toBeInTheDocument();
+        expect(screen.queryByPlaceholderText('Channel name')).toBeInTheDocument();
+        expect(screen.queryByText('Edit')).toBeInTheDocument();
+    });
+
+    test('members part of single common teams', async () => {
+        TestHelper.initBasic(Client4);
+        nock(Client4.getBaseRoute()).
+            get('/channels/channel_id_1/common_teams').
+            reply(200, [
+                {id: 'team_id_1', display_name: 'Team 1'},
+            ]);
+
+        renderWithFullContext(
+            <ConvertGmToChannelModal {...baseProps}/>,
+            baseState,
+        );
+
+        // we need to use waitFor for first assertion as we have a minimum 1200 ms loading animation in the dialog
+        // before it's content is rendered.
+        await waitFor(
+            () => expect(screen.queryByText('Conversation history will be visible to any channel members')).toBeInTheDocument(),
+            {timeout: 1500},
+        );
+
+        expect(screen.queryByText('Select Team')).not.toBeInTheDocument();
+        expect(screen.queryByPlaceholderText('Channel name')).toBeInTheDocument();
+        expect(screen.queryByText('Edit')).toBeInTheDocument();
+    });
+
+    test('members part of no common teams', async () => {
+        TestHelper.initBasic(Client4);
+        nock(Client4.getBaseRoute()).
+            get('/channels/channel_id_1/common_teams').
+            reply(200, []);
+
+        renderWithFullContext(
+            <ConvertGmToChannelModal {...baseProps}/>,
+            baseState,
+        );
+
+        // we need to use waitFor for first assertion as we have a minimum 1200 ms loading animation in the dialog
+        // before it's content is rendered.
+        await waitFor(
+            () => expect(screen.queryByText('Unable to convert to a channel because group members are part of different teams')).toBeInTheDocument(),
+            {timeout: 1500},
+        );
+
+        expect(screen.queryByText('Select Team')).not.toBeInTheDocument();
+        expect(screen.queryByPlaceholderText('Channel name')).not.toBeInTheDocument();
+        expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    });
+
+    test('multiple common teams - trying conversion', async () => {
+        TestHelper.initBasic(Client4);
+        nock(Client4.getBaseRoute()).
+            get('/channels/channel_id_1/common_teams').
+            reply(200, [
+                {id: 'team_id_1', display_name: 'Team 1'},
+                {id: 'team_id_2', display_name: 'Team 2'},
+            ]);
+
+        baseProps.actions.convertGroupMessageToPrivateChannel.mockResolvedValueOnce({});
+
+        renderWithFullContext(
+            <ConvertGmToChannelModal {...baseProps}/>,
+            baseState,
+        );
+
+        // we need to use waitFor for first assertion as we have a minimum 1200 ms loading animation in the dialog
+        // before it's content is rendered.
+        await waitFor(
+            () => expect(screen.queryByText('Conversation history will be visible to any channel members')).toBeInTheDocument(),
+            {timeout: 1500},
+        );
+
+        const teamDropdown = screen.queryByText('Select Team');
+        expect(teamDropdown).not.toBeNull();
+        fireEvent(
+            teamDropdown!,
+            new MouseEvent('mousedown', {
+                bubbles: true,
+                cancelable: true,
+            }),
+        );
+
+        const team1Option = screen.queryByText('Team 1');
+        expect(team1Option).toBeInTheDocument();
+        fireEvent.click(team1Option!);
+
+        const channelNameInput = screen.queryByPlaceholderText('Channel name');
+        expect(channelNameInput).toBeInTheDocument();
+        fireEvent.change(channelNameInput!, {target: {value: 'Channel name set by me'}});
+
+        const confirmButton = screen.queryByText('Convert to private channel');
+        expect(channelNameInput).toBeInTheDocument();
+
+        await act(async () => {
+            fireEvent.click(confirmButton!);
+        });
+    });
+});

webapp/channels/src/components/convert_gm_to_channel_modal/convert_gm_to_channel_modal.tsx

@@ -0,0 +1,217 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import type {ComponentProps} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {useDispatch} from 'react-redux';
+
+import './convert_gm_to_channel_modal.scss';
+
+import {GenericModal} from '@mattermost/components';
+import type {Channel} from '@mattermost/types/channels';
+import type {ServerError} from '@mattermost/types/errors';
+import type {Team} from '@mattermost/types/teams';
+import type {UserProfile} from '@mattermost/types/users';
+
+import type {ActionResult} from 'mattermost-redux/types/actions';
+import {displayUsername} from 'mattermost-redux/utils/user_utils';
+
+import {getGroupMessageMembersCommonTeams} from 'actions/team_actions';
+import {trackEvent} from 'actions/telemetry_actions';
+
+import ChannelNameFormField from 'components/channel_name_form_field/channel_name_form_field';
+import type {Actions} from 'components/convert_gm_to_channel_modal/index';
+import NoCommonTeamsError from 'components/convert_gm_to_channel_modal/no_common_teams/no_common_teams';
+import TeamSelector from 'components/convert_gm_to_channel_modal/team_selector/team_selector';
+import WarningTextSection from 'components/convert_gm_to_channel_modal/warning_text_section/warning_text_section';
+import LoadingSpinner from 'components/widgets/loading/loading_spinner';
+
+export type Props = {
+    onExited: () => void;
+    channel: Channel;
+    actions: Actions;
+    profilesInChannel: UserProfile[];
+    teammateNameDisplaySetting: string;
+    currentUserId: string;
+}
+
+const ConvertGmToChannelModal = (props: Props) => {
+    const intl = useIntl();
+    const {formatMessage} = intl;
+
+    const [channelName, setChannelName] = useState<string>('');
+    const channelURL = useRef<string>('');
+    const handleChannelURLChange = useCallback((newURL: string) => {
+        channelURL.current = newURL;
+    }, []);
+
+    const [channelMemberNames, setChannelMemberNames] = useState<string[]>([]);
+
+    useEffect(() => {
+        const validProfilesInChannel = props.profilesInChannel.
+            filter((user) => user.id !== props.currentUserId && user.delete_at === 0).
+            map((user) => displayUsername(user, props.teammateNameDisplaySetting));
+
+        setChannelMemberNames(validProfilesInChannel);
+    }, [props.profilesInChannel]);
+
+    const [commonTeamsById, setCommonTeamsById] = useState<{[id: string]: Team}>({});
+    const [commonTeamsFetched, setCommonTeamsFetched] = useState<boolean>(false);
+    const [loadingAnimationTimeout, setLoadingAnimationTimeout] = useState<boolean>(false);
+    const [selectedTeamId, setSelectedTeamId] = useState<string>();
+    const [nameError, setNameError] = useState<boolean>(false);
+    const [conversionError, setConversionError] = useState<string>();
+
+    const dispatch = useDispatch();
+
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return (() => {
+            mounted.current = false;
+        });
+    }, []);
+
+    useEffect(() => {
+        const work = async () => {
+            const response = await dispatch(getGroupMessageMembersCommonTeams(props.channel.id)) as ActionResult<Team[], ServerError>;
+            if (!mounted.current) {
+                return;
+            }
+
+            if (response.error || !response.data) {
+                return;
+            }
+            const teams = response.data;
+
+            const teamsById: {[id: string]: Team} = {};
+            teams.forEach((team) => {
+                teamsById[team.id] = team;
+            });
+
+            setCommonTeamsById(teamsById);
+            setCommonTeamsFetched(true);
+
+            // if there is only common team, selected it.
+            if (teams.length === 1) {
+                setSelectedTeamId(teams[0].id);
+            }
+        };
+
+        work();
+        setTimeout(() => setLoadingAnimationTimeout(true), 1200);
+    }, []);
+
+    const handleConfirm = useCallback(async () => {
+        if (!selectedTeamId) {
+            return;
+        }
+
+        const {error} = await props.actions.convertGroupMessageToPrivateChannel(props.channel.id, selectedTeamId, channelName.trim(), channelURL.current.trim());
+
+        if (error) {
+            setConversionError(error.message);
+            return;
+        }
+
+        setConversionError(undefined);
+        trackEvent('actions', 'convert_group_message_to_private_channel', {channel_id: props.channel.id});
+        props.onExited();
+    }, [selectedTeamId, props.channel.id, channelName, channelURL.current, props.actions.moveChannelsInSidebar]);
+
+    const showLoader = !commonTeamsFetched || !loadingAnimationTimeout;
+    const canCreate = selectedTeamId !== undefined && channelName !== '' && !nameError;
+    const modalProps: Partial<ComponentProps<typeof GenericModal>> = {};
+    let modalBody;
+
+    if (!showLoader && Object.keys(commonTeamsById).length === 0) {
+        modalProps.confirmButtonText = formatMessage({id: 'generic.okay', defaultMessage: 'Okay'});
+        modalProps.handleConfirm = props.onExited;
+
+        modalBody = (
+            <div className='convert-gm-to-channel-modal-body error'>
+                <NoCommonTeamsError/>
+            </div>
+        );
+    } else {
+        modalProps.handleCancel = showLoader ? undefined : props.onExited;
+        modalProps.isDeleteModal = true;
+        modalProps.cancelButtonText = formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'});
+        modalProps.confirmButtonText = formatMessage({id: 'sidebar_left.sidebar_channel_modal.confirmation_text', defaultMessage: 'Convert to private channel'});
+        modalProps.isConfirmDisabled = !canCreate;
+
+        let subBody;
+        if (showLoader) {
+            subBody = (
+                <div className='loadingIndicator'>
+                    <LoadingSpinner/>
+                </div>
+            );
+        } else {
+            subBody = (
+                <React.Fragment>
+                    <WarningTextSection channelMemberNames={channelMemberNames}/>
+
+                    {
+                        Object.keys(commonTeamsById).length > 1 &&
+                        <TeamSelector
+                            teamsById={commonTeamsById}
+                            onChange={setSelectedTeamId}
+                        />
+                    }
+
+                    <ChannelNameFormField
+                        value={channelName}
+                        name='convert-gm-to-channel-modal-channel-name'
+                        placeholder={formatMessage({id: 'sidebar_left.sidebar_channel_modal.channel_name_placeholder', defaultMessage: 'Enter a name for the channel'})}
+                        autoFocus={false}
+                        onDisplayNameChange={setChannelName}
+                        onURLChange={handleChannelURLChange}
+                        onErrorStateChange={setNameError}
+                    />
+
+                    {
+                        conversionError &&
+                        <div className='conversion-error'>
+                            <i className='icon icon-alert-outline'/>
+                            <span>{conversionError}</span>
+                        </div>
+                    }
+
+                </React.Fragment>
+            );
+        }
+
+        modalBody = (
+            <div
+                className={classNames({
+                    'convert-gm-to-channel-modal-body': true,
+                    loading: showLoader,
+                    'single-team': Object.keys(commonTeamsById).length === 1,
+                    'multi-team': Object.keys(commonTeamsById).length > 1,
+                })}
+            >
+                {subBody}
+            </div>
+        );
+    }
+
+    return (
+        <GenericModal
+            id='convert-gm-to-channel-modal'
+            className='convert-gm-to-channel-modal'
+            modalHeaderText={formatMessage({id: 'sidebar_left.sidebar_channel_modal.header', defaultMessage: 'Convert to Private Channel'})}
+            compassDesign={true}
+            handleConfirm={showLoader ? undefined : handleConfirm}
+            onExited={props.onExited}
+            autoCloseOnConfirmButton={false}
+            {...modalProps}
+        >
+            {modalBody}
+        </GenericModal>
+    );
+};
+
+export default ConvertGmToChannelModal;

webapp/channels/src/components/convert_gm_to_channel_modal/index.ts

@@ -0,0 +1,56 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import type {ActionCreatorsMapObject, Dispatch} from 'redux';
+import {bindActionCreators} from 'redux';
+
+import {convertGroupMessageToPrivateChannel} from 'mattermost-redux/actions/channels';
+import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
+import {
+    getCurrentUserId,
+    makeGetProfilesInChannel,
+} from 'mattermost-redux/selectors/entities/users';
+import type {Action, ActionResult} from 'mattermost-redux/types/actions';
+
+import {moveChannelsInSidebar} from 'actions/views/channel_sidebar';
+import {closeModal} from 'actions/views/modals';
+
+import type {Props} from 'components/convert_gm_to_channel_modal/convert_gm_to_channel_modal';
+import ConvertGmToChannelModal from 'components/convert_gm_to_channel_modal/convert_gm_to_channel_modal';
+
+import type {GlobalState} from 'types/store';
+
+function makeMapStateToProps() {
+    const getProfilesInChannel = makeGetProfilesInChannel();
+
+    return (state: GlobalState, ownProps: Props) => {
+        const allProfilesInChannel = getProfilesInChannel(state, ownProps.channel.id);
+        const currentUserId = getCurrentUserId(state);
+        const teammateNameDisplaySetting = getTeammateNameDisplaySetting(state);
+
+        return {
+            profilesInChannel: allProfilesInChannel,
+            teammateNameDisplaySetting,
+            currentUserId,
+        };
+    };
+}
+
+export type Actions = {
+    closeModal: (modalID: string) => void;
+    convertGroupMessageToPrivateChannel: (channelID: string, teamID: string, displayName: string, name: string) => Promise<ActionResult>;
+    moveChannelsInSidebar: (categoryId: string, targetIndex: number, draggableChannelId: string, setManualSorting?: boolean) => void;
+}
+
+function mapDispatchToProps(dispatch: Dispatch) {
+    return {
+        actions: bindActionCreators<ActionCreatorsMapObject<Action>, Actions>({
+            closeModal,
+            convertGroupMessageToPrivateChannel,
+            moveChannelsInSidebar,
+        }, dispatch),
+    };
+}
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(ConvertGmToChannelModal);

webapp/channels/src/components/convert_gm_to_channel_modal/no_common_teams/no_common_teams.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import 'components/convert_gm_to_channel_modal/warning_text_section/warning_text_section.scss';
+
+const NoCommonTeamsError = (): JSX.Element => {
+    return (
+        <div className='warning-section error'>
+            <i className='fa fa-exclamation-circle'/>
+            <div className='warning-text'>
+                <div className='warning-header'>
+                    <FormattedMessage
+                        id='sidebar_left.sidebar_channel_modal.no_common_teams_error.heading'
+                        defaultMessage='Unable to convert to a channel because group members are part of different teams'
+                    />
+                </div>
+                <div className='warning-body'>
+                    <FormattedMessage
+                        id='sidebar_left.sidebar_channel_modal.no_common_teams_error.body'
+                        defaultMessage='Group Message cannot be converted to a channel because members are not a part of the same team. Add all members to a single team to convert this group message to a channel in that team.'
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NoCommonTeamsError;

webapp/channels/src/components/convert_gm_to_channel_modal/team_selector/team_selector.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
+
+import type {Team} from '@mattermost/types/teams';
+
+import {getCurrentLocale} from 'selectors/i18n';
+
+import DropdownInput from 'components/dropdown_input';
+
+export type Props = {
+    teamsById: {[id: string]: Team};
+    onChange: (teamId: string) => void;
+}
+
+const TeamSelector = (props: Props): JSX.Element => {
+    const [value, setValue] = useState<Team>();
+    const intl = useIntl();
+    const {formatMessage} = intl;
+
+    const handleTeamChange = useCallback((e) => {
+        const teamId = e.value as string;
+
+        setValue(props.teamsById[teamId]);
+        props.onChange(teamId);
+    }, []);
+
+    const currentLocale = useSelector(getCurrentLocale);
+
+    const teamValues = Object.values(props.teamsById).
+        map((team) => ({value: team.id, label: team.display_name})).
+        sort((teamA, teamB) => teamA.label.localeCompare(teamB.label, currentLocale));
+
+    return (
+        <DropdownInput
+            className='team_selector'
+            required={true}
+            onChange={handleTeamChange}
+            value={value ? {label: value.display_name, value: value.id} : undefined}
+            options={teamValues}
+            legend={formatMessage({id: 'sidebar_left.sidebar_channel_modal.select_team_placeholder', defaultMessage: 'Select Team'})}
+            placeholder={formatMessage({id: 'sidebar_left.sidebar_channel_modal.select_team_placeholder', defaultMessage: 'Select Team'})}
+            name='team_selector'
+        />
+    );
+};
+
+export default TeamSelector;

webapp/channels/src/components/convert_gm_to_channel_modal/warning_text_section/warning_text_section.scss

@@ -0,0 +1,35 @@
+.warning-section {
+    display: flex;
+    padding: 16px;
+    border: 1px solid rgba(var(--sidebar-text-active-border-rgb), 0.16);
+    background: rgba(var(--sidebar-text-active-border-rgb), 0.08);
+    border-radius: 4px;
+    gap: 12px;
+
+    &.error {
+        border: 1px solid rgba(var(--dnd-indicator-rgb), 0.16);
+        background: rgba(var(--dnd-indicator-rgb), 0.08);
+
+        .fa.fa-exclamation-circle {
+            color: rgba(var(--dnd-indicator-rgb), 1);
+        }
+    }
+
+    .fa.fa-exclamation-circle {
+        width: 24px;
+        height: 24px;
+        color: rgba(var(--sidebar-text-active-border-rgb), 1);
+        font-size: 24px;
+    }
+
+    .warning-text {
+        display: flex;
+        flex-direction: column;
+        color: var(--center-channel-color-88);
+        gap: 8px;
+    }
+
+    .warning-header {
+        font-weight: bold;
+    }
+}

webapp/channels/src/components/convert_gm_to_channel_modal/warning_text_section/warning_text_section.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import 'components/convert_gm_to_channel_modal/warning_text_section/warning_text_section.scss';
+
+export type Props = {
+    channelMemberNames: string[];
+}
+const WarningTextSection = (props: Props): JSX.Element => {
+    const intl = useIntl();
+
+    let memberNames: string;
+
+    if (props.channelMemberNames.length > 0) {
+        memberNames = intl.formatList(props.channelMemberNames);
+    } else {
+        memberNames = intl.formatMessage({id: 'sidebar_left.sidebar_channel_modal.warning_body_yourself', defaultMessage: 'yourself'});
+    }
+
+    return (
+        <div className='warning-section'>
+            <i className='fa fa-exclamation-circle'/>
+            <div className='warning-text'>
+                <div className='warning-header'>
+                    <FormattedMessage
+                        id='sidebar_left.sidebar_channel_modal.warning_header'
+                        defaultMessage='Conversation history will be visible to any channel members'
+                    />
+                </div>
+                <div className='warning-body'>
+                    <FormattedMessage
+                        id='sidebar_left.sidebar_channel_modal.warning_body'
+                        defaultMessage='You are about to convert the Group Message with {memberNames} to a Channel. This cannot be undone.'
+                        values={{
+                            memberNames,
+                        }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+export default WarningTextSection;

webapp/channels/src/components/dropdown_input.tsx

@@ -2,11 +2,17 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import type {CSSProperties} from 'react';
+import {useIntl} from 'react-intl';
 import ReactSelect, {components} from 'react-select';
 import type {Props as SelectProps, ActionMeta} from 'react-select';
 
+import InputError from 'components/input_error';
+import type {CustomMessageInputType} from 'components/widgets/inputs/input/input';
+
+import {ItemStatus} from 'utils/constants';
+
 import './dropdown_input.scss';
 
 // TODO: This component needs work, should not be used outside of AddressInfo until this comment is removed.
@@ -22,6 +28,7 @@ type Props<T> = Omit<SelectProps<T>, 'onChange'> & {
     error?: string;
     onChange: (value: T, action: ActionMeta<T>) => void;
     testId?: string;
+    required?: boolean;
 };
 
 const baseStyles = {
@@ -73,19 +80,6 @@ const Option = (props: any) => {
     );
 };
 
-const renderError = (error?: string) => {
-    if (!error) {
-        return null;
-    }
-
-    return (
-        <div className='Input___error'>
-            <i className='icon icon-alert-outline'/>
-            <span>{error}</span>
-        </div>
-    );
-};
-
 const DropdownInput = <T extends ValueType>(props: Props<T>) => {
     const {value, placeholder, className, addon, name, textPrefix, legend, onChange, styles, options, error, testId, ...otherProps} = props;
 
@@ -101,10 +95,29 @@ const DropdownInput = <T extends ValueType>(props: Props<T>) => {
         }
     };
 
+    const {formatMessage} = useIntl();
+    const [customInputLabel, setCustomInputLabel] = useState<CustomMessageInputType>(null);
+    const ownValue = useRef<T>();
+
+    const ownOnChange = (value: T, action: ActionMeta<T>) => {
+        ownValue.current = value;
+        onChange(value, action);
+    };
+    const validateInput = () => {
+        if (!props.required || (ownValue.current !== null && ownValue.current)) {
+            setCustomInputLabel(null);
+            return;
+        }
+
+        const validationErrorMsg = formatMessage({id: 'widget.input.required', defaultMessage: 'This field is required'});
+        setCustomInputLabel({type: ItemStatus.ERROR, value: validationErrorMsg});
+    };
+
     const onInputBlur = (event: React.FocusEvent<HTMLElement>) => {
         const {onBlur} = props;
 
         setFocused(false);
+        validateInput();
 
         if (onBlur) {
             onBlur(event);
@@ -112,6 +125,7 @@ const DropdownInput = <T extends ValueType>(props: Props<T>) => {
     };
 
     const showLegend = Boolean(focused || value);
+    const isError = error || customInputLabel?.type === 'error';
 
     return (
         <div
@@ -120,7 +134,7 @@ const DropdownInput = <T extends ValueType>(props: Props<T>) => {
         >
             <fieldset
                 className={classNames('Input_fieldset', className, {
-                    Input_fieldset___error: error,
+                    Input_fieldset___error: isError,
                     Input_fieldset___legend: showLegend,
                 })}
             >
@@ -145,14 +159,17 @@ const DropdownInput = <T extends ValueType>(props: Props<T>) => {
                         className={classNames('Input', className, {Input__focus: showLegend})}
                         classNamePrefix={'DropDown'}
                         value={value}
-                        onChange={onChange as any} // types are not working correctly for multiselect
+                        onChange={ownOnChange as any} // types are not working correctly for multiselect
                         styles={{...baseStyles, ...styles}}
                         {...otherProps}
                     />
                 </div>
                 {addon}
             </fieldset>
-            {renderError(error)}
+            <InputError
+                message={error}
+                custom={customInputLabel}
+            />
         </div>
     );
 };

webapp/channels/src/components/input_error.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+
+import type {CustomMessageInputType} from 'components/widgets/inputs/input/input';
+
+import {ItemStatus} from 'utils/constants';
+
+type Props = {
+    message?: string;
+    custom?: CustomMessageInputType;
+}
+
+const InputError = (props: Props) => {
+    if (props.message) {
+        return (
+            <div className='Input___error'>
+                <i className='icon icon-alert-outline'/>
+                <span>{props.message}</span>
+            </div>
+        );
+    } else if (props.custom) {
+        return (
+            <div className={`Input___customMessage Input___${props.custom.type}`}>
+                <i
+                    className={classNames(`icon ${props.custom.type}`, {
+                        'icon-alert-outline': props.custom.type === ItemStatus.WARNING,
+                        'icon-alert-circle-outline': props.custom.type === ItemStatus.ERROR,
+                        'icon-information-outline': props.custom.type === ItemStatus.INFO,
+                        'icon-check': props.custom.type === ItemStatus.SUCCESS,
+                    })}
+                />
+                <span>{props.custom.value}</span>
+            </div>
+        );
+    }
+    return null;
+};
+
+export default InputError;

webapp/channels/src/components/new_channel_modal/new_channel_modal.scss

@@ -1,10 +1,4 @@
 .new-channel-modal {
-    .new-channel-modal-name-input {
-        height: 34px !important;
-        border: 0 !important;
-        border-radius: 0 !important;
-    }
-
     .new-channel-modal-type-selector {
         margin-top: 24px;
     }

webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx

@@ -2,8 +2,7 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import crypto from 'crypto';
-import React, {useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import {Tooltip} from 'react-bootstrap';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
@@ -25,15 +24,12 @@ import type {DispatchFunc} from 'mattermost-redux/types/actions';
 import {switchToChannel} from 'actions/views/channel';
 import {closeModal} from 'actions/views/modals';
 
+import ChannelNameFormField from 'components/channel_name_form_field/channel_name_form_field';
 import OverlayTrigger from 'components/overlay_trigger';
-import Input from 'components/widgets/inputs/input/input';
-import URLInput from 'components/widgets/inputs/url_input/url_input';
 import PublicPrivateSelector from 'components/widgets/public-private-selector/public-private-selector';
 
 import Pluggable from 'plugins/pluggable';
-import Constants, {ItemStatus, ModalIdentifiers} from 'utils/constants';
-import {cleanUpUrlable, validateChannelUrl, getSiteURL} from 'utils/url';
-import {localizeMessage} from 'utils/utils';
+import Constants, {ModalIdentifiers} from 'utils/constants';
 
 import type {GlobalState} from 'types/store';
 
@@ -53,20 +49,6 @@ export function getChannelTypeFromPermissions(canCreatePublicChannel: boolean, c
     return channelType as ChannelType;
 }
 
-export function validateDisplayName(displayName: string) {
-    const errors: string[] = [];
-
-    if (displayName.length < Constants.MIN_CHANNELNAME_LENGTH) {
-        errors.push(localizeMessage('channel_modal.name.longer', 'Channel names must have at least 2 characters.'));
-    }
-
-    if (displayName.length > Constants.MAX_CHANNELNAME_LENGTH) {
-        errors.push(localizeMessage('channel_modal.name.shorter', 'Channel names must have maximum 64 characters.'));
-    }
-
-    return errors;
-}
-
 const enum ServerErrorId {
     CHANNEL_URL_SIZE = 'model.channel.is_valid.1_or_more.app_error',
     CHANNEL_UPDATE_EXISTS = 'store.sql_channel.update.exists.app_error',
@@ -78,7 +60,7 @@ const NewChannelModal = () => {
     const intl = useIntl();
     const {formatMessage} = intl;
 
-    const {id: currentTeamId, name: currentTeamName} = useSelector((state: GlobalState) => getCurrentTeam(state));
+    const {id: currentTeamId} = useSelector(getCurrentTeam);
 
     const canCreatePublicChannel = useSelector((state: GlobalState) => (currentTeamId ? haveICurrentChannelPermission(state, Permissions.CREATE_PUBLIC_CHANNEL) : false));
     const canCreatePrivateChannel = useSelector((state: GlobalState) => (currentTeamId ? haveICurrentChannelPermission(state, Permissions.CREATE_PRIVATE_CHANNEL) : false));
@@ -88,12 +70,10 @@ const NewChannelModal = () => {
     const [displayName, setDisplayName] = useState('');
     const [url, setURL] = useState('');
     const [purpose, setPurpose] = useState('');
-    const [displayNameModified, setDisplayNameModified] = useState(false);
-    const [urlModified, setURLModified] = useState(false);
-    const [displayNameError, setDisplayNameError] = useState('');
     const [urlError, setURLError] = useState('');
     const [purposeError, setPurposeError] = useState('');
     const [serverError, setServerError] = useState('');
+    const [channelInputError, setChannelInputError] = useState(false);
 
     // create a board along with the channel
     const pluginsComponentsList = useSelector((state: GlobalState) => state.plugins.components);
@@ -215,48 +195,10 @@ const NewChannelModal = () => {
         }
     };
 
-    const handleOnDisplayNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        e.preventDefault();
-        const {target: {value: displayName}} = e;
-
-        const displayNameErrors = validateDisplayName(displayName);
-
-        setDisplayNameError(displayNameErrors.length ? displayNameErrors[displayNameErrors.length - 1] : '');
-        setDisplayName(displayName);
-        setServerError('');
-
-        if (!urlModified) {
-            setURL(cleanUpUrlable(displayName));
-            setURLError('');
-        }
-    };
-
-    const handleOnDisplayNameBlur = () => {
-        if (displayName && !url) {
-            setURL(crypto.randomBytes(16).toString('hex'));
-        }
-        if (!displayNameModified) {
-            setDisplayNameModified(true);
-        }
-    };
-
-    const handleOnURLChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        e.preventDefault();
-        const {target: {value: url}} = e;
-
-        const cleanURL = url.toLowerCase().replace(/\s/g, '-');
-        const urlErrors = validateChannelUrl(cleanURL, intl) as string[];
-
-        setURLError(urlErrors.length ? urlErrors[urlErrors.length - 1] : '');
-        setURL(cleanURL);
-        setURLModified(true);
-        setServerError('');
-    };
-
-    const handleOnTypeChange = (channelType: ChannelType) => {
+    const handleOnTypeChange = useCallback((channelType: ChannelType) => {
         setType(channelType);
         setServerError('');
-    };
+    }, []);
 
     const handleOnPurposeChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         e.preventDefault();
@@ -272,7 +214,7 @@ const NewChannelModal = () => {
         e.stopPropagation();
     };
 
-    const canCreate = displayName && !displayNameError && !urlError && type && !purposeError && !serverError && canCreateFromPluggable;
+    const canCreate = displayName && !urlError && type && !purposeError && !serverError && canCreateFromPluggable && !channelInputError;
 
     const newBoardInfoIcon = (
         <OverlayTrigger
@@ -318,31 +260,13 @@ const NewChannelModal = () => {
             onExited={handleOnModalCancel}
         >
             <div className='new-channel-modal-body'>
-                <Input
-                    type='text'
-                    autoComplete='off'
-                    autoFocus={true}
-                    required={true}
-                    name='new-channel-modal-name'
-                    containerClassName='new-channel-modal-name-container'
-                    inputClassName='new-channel-modal-name-input'
-                    label={formatMessage({id: 'channel_modal.name.label', defaultMessage: 'Channel name'})}
-                    placeholder={formatMessage({id: 'channel_modal.name.placeholder', defaultMessage: 'Enter a name for your new channel'})}
-                    limit={Constants.MAX_CHANNELNAME_LENGTH}
+                <ChannelNameFormField
                     value={displayName}
-                    customMessage={displayNameModified ? {type: ItemStatus.ERROR, value: displayNameError} : null}
-                    onChange={handleOnDisplayNameChange}
-                    onBlur={handleOnDisplayNameBlur}
-                />
-                <URLInput
-                    className='new-channel-modal__url'
-                    base={getSiteURL()}
-                    path={`${currentTeamName}/channels`}
-                    pathInfo={url}
-                    limit={Constants.MAX_CHANNELNAME_LENGTH}
-                    shortenLength={Constants.DEFAULT_CHANNELURL_SHORTEN_LENGTH}
-                    error={urlError}
-                    onChange={handleOnURLChange}
+                    name='new-channel-modal-name'
+                    placeholder={formatMessage({id: 'channel_modal.name.placeholder', defaultMessage: 'Enter a name for your new channel'})}
+                    onDisplayNameChange={setDisplayName}
+                    onURLChange={setURL}
+                    onErrorStateChange={setChannelInputError}
                 />
                 <PublicPrivateSelector
                     className='new-channel-modal-type-selector'

webapp/channels/src/components/post_markdown/system_message_helpers.tsx

@@ -14,12 +14,13 @@ import {isPostEphemeral} from 'mattermost-redux/utils/post_utils';
 
 import Markdown from 'components/markdown';
 import CombinedSystemMessage from 'components/post_view/combined_system_message';
+import GMConversionMessage from 'components/post_view/gm_conversion_message/gm_conversion_message';
 import PostAddChannelMember from 'components/post_view/post_add_channel_member';
 
 import type {TextFormattingOptions} from 'utils/text_formatting';
 import {getSiteURL} from 'utils/url';
 
-function renderUsername(value: string): ReactNode {
+export function renderUsername(value: string): ReactNode {
     const username = (value[0] === '@') ? value : `@${value}`;
 
     const options = {
@@ -426,6 +427,13 @@ export function renderSystemMessage(post: Post, currentTeam: Team, channel: Chan
                 messageData={messageData}
             />
         );
+    } else if (post.type === Posts.POST_TYPES.GM_CONVERTED_TO_CHANNEL) {
+        // This is rendered via a separate component instead of registering in
+        // systemMessageRenderers because we need to format a list with keeping i18n support
+        // which cannot be done outside a react component.
+        return (
+            <GMConversionMessage post={post}/>
+        );
     }
 
     return null;

webapp/channels/src/components/post_view/gm_conversion_message/gm_conversion_message.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect, useRef} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {useDispatch, useSelector} from 'react-redux';
+
+import type {Post} from '@mattermost/types/posts';
+
+import {getMissingProfilesByIds} from 'mattermost-redux/actions/users';
+import {makeGetProfilesByIdsAndUsernames} from 'mattermost-redux/selectors/entities/users';
+
+import {renderUsername} from 'components/post_markdown/system_message_helpers';
+
+import type {GlobalState} from 'types/store';
+
+export type Props = {
+    post: Post;
+}
+function GMConversionMessage(props: Props): JSX.Element {
+    const convertedByUserId = props.post.props.convertedByUserId;
+    const gmMembersDuringConversionIDs = props.post.props.gmMembersDuringConversionIDs as string[];
+
+    const dispatch = useDispatch();
+    const intl = useIntl();
+
+    useEffect(() => {
+        dispatch(getMissingProfilesByIds(gmMembersDuringConversionIDs));
+    }, [props.post]);
+
+    const getProfilesByIdsAndUsernames = useRef(makeGetProfilesByIdsAndUsernames());
+    const userProfiles = useSelector(
+        (state: GlobalState) => getProfilesByIdsAndUsernames.current(
+            state,
+            {allUserIds: gmMembersDuringConversionIDs, allUsernames: []},
+        ),
+    );
+
+    const convertedByUserUsername = userProfiles.find((user) => user.id === convertedByUserId)!.username;
+    const gmMembersUsernames = userProfiles.map((user) => renderUsername(user.username));
+
+    if (!convertedByUserId || !gmMembersDuringConversionIDs || gmMembersDuringConversionIDs.length === 0) {
+        return (
+            <span>{props.post.message}</span>
+        );
+    }
+
+    return (
+        <FormattedMessage
+            id='api.channel.group_message_converted_to.private_channel'
+            defaultMessage='{convertedBy} created this channel from a group message with {gmMembers}.'
+            values={{
+                convertedBy: renderUsername(convertedByUserUsername),
+                gmMembers: intl.formatList(gmMembersUsernames),
+            }}
+        />
+    );
+}
+
+export default GMConversionMessage;

webapp/channels/src/i18n/en.json

@@ -2661,6 +2661,7 @@
   "api.channel.add_guest.added": "{addedUsername} added to the channel as a guest by {username}.",
   "api.channel.add_member.added": "{addedUsername} added to the channel by {username}.",
   "api.channel.delete_channel.archived": "{username} archived the channel.",
+  "api.channel.group_message_converted_to.private_channel": "{convertedBy} created this channel from a group message with {gmMembers}.",
   "api.channel.guest_join_channel.post_and_forget": "{username} joined the channel as a guest.",
   "api.channel.join_channel.post_and_forget": "{username} joined the channel.",
   "api.channel.leave.left": "{username} left the channel.",
@@ -3614,6 +3615,7 @@
   "generic.close": "Close",
   "generic.done": "Done",
   "generic.next": "Next",
+  "generic.okay": "Okay",
   "generic.previous": "Previous",
   "get_app.continueToBrowser": "View in Browser",
   "get_app.dontHaveTheDesktopApp": "Don't have the Desktop App?",
@@ -4822,6 +4824,7 @@
   "sidebar_left.sidebar_category_menu.viewCategory": "Mark category as read",
   "sidebar_left.sidebar_category.newDropBoxLabel": "Drag channels here...",
   "sidebar_left.sidebar_category.newLabel": "new",
+  "sidebar_left.sidebar_channel_menu_convert_to_channel": "Convert to Private Channel",
   "sidebar_left.sidebar_channel_menu.addMembers": "Add Members",
   "sidebar_left.sidebar_channel_menu.channels": "Channels",
   "sidebar_left.sidebar_channel_menu.copyLink": "Copy Link",
@@ -4841,6 +4844,15 @@
   "sidebar_left.sidebar_channel_menu.unfavoriteChannel": "Unfavorite",
   "sidebar_left.sidebar_channel_menu.unmuteChannel": "Unmute Channel",
   "sidebar_left.sidebar_channel_menu.unmuteConversation": "Unmute Conversation",
+  "sidebar_left.sidebar_channel_modal.channel_name_placeholder": "Enter a name for the channel",
+  "sidebar_left.sidebar_channel_modal.confirmation_text": "Convert to private channel",
+  "sidebar_left.sidebar_channel_modal.header": "Convert to Private Channel",
+  "sidebar_left.sidebar_channel_modal.no_common_teams_error.body": "Group Message cannot be converted to a channel because members are not a part of the same team. Add all members to a single team to convert this group message to a channel in that team.",
+  "sidebar_left.sidebar_channel_modal.no_common_teams_error.heading": "Unable to convert to a channel because group members are part of different teams",
+  "sidebar_left.sidebar_channel_modal.select_team_placeholder": "Select Team",
+  "sidebar_left.sidebar_channel_modal.warning_body": "You are about to convert the Group Message with {memberNames} to a Channel. This cannot be undone.",
+  "sidebar_left.sidebar_channel_modal.warning_body_yourself": "yourself",
+  "sidebar_left.sidebar_channel_modal.warning_header": "Conversation history will be visible to any channel members",
   "sidebar_left.sidebar_channel_navigator.addChannelsCta": "Add channels",
   "sidebar_left.sidebar_channel_navigator.inviteUsers": "Invite Users",
   "sidebar_left.sidebar_channel.selectedCount": "{count} selected",

webapp/channels/src/packages/mattermost-redux/src/actions/channels.ts

@@ -339,6 +339,40 @@ export function updateChannelPrivacy(channelId: string, privacy: string): Action
     };
 }
 
+export function convertGroupMessageToPrivateChannel(channelID: string, teamID: string, displayName: string, name: string): ActionFunc {
+    return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
+        dispatch({type: ChannelTypes.UPDATE_CHANNEL_REQUEST, data: null});
+
+        let updatedChannel;
+        try {
+            updatedChannel = await Client4.convertGroupMessageToPrivateChannel(channelID, teamID, displayName, name);
+        } catch (error) {
+            forceLogoutIfNecessary(error, dispatch, getState);
+            dispatch({type: ChannelTypes.UPDATE_CHANNEL_FAILURE, error});
+            dispatch(logError(error));
+            return {error};
+        }
+
+        dispatch(batchActions([
+            {
+                type: ChannelTypes.RECEIVED_CHANNEL,
+                data: updatedChannel,
+            },
+            {
+                type: ChannelTypes.UPDATE_CHANNEL_SUCCESS,
+            },
+        ]));
+
+        // move the channel from direct message category to the default "channels" category
+        const channelsCategory = getCategoryInTeamByType(getState(), teamID, CategoryTypes.CHANNELS);
+        if (!channelsCategory) {
+            return {};
+        }
+
+        return updatedChannel;
+    };
+}
+
 export function updateChannelNotifyProps(userId: string, channelId: string, props: Partial<ChannelNotifyProps>): ActionFunc {
     return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
         const notifyProps = {

webapp/channels/src/packages/mattermost-redux/src/constants/posts.ts

@@ -32,6 +32,7 @@ export const PostTypes = {
     ADD_BOT_TEAMS_CHANNELS: 'add_bot_teams_channels' as PostType,
     SYSTEM_WARN_METRIC_STATUS: 'warn_metric_status' as PostType,
     REMINDER: 'reminder' as PostType,
+    GM_CONVERTED_TO_CHANNEL: 'system_gm_to_channel' as PostType,
 };
 
 export default {

webapp/channels/src/packages/mattermost-redux/src/selectors/entities/teams.ts

@@ -143,6 +143,11 @@ export const getCurrentRelativeTeamUrl: (state: GlobalState) => string = createS
     },
 );
 
+export function getRelativeTeamUrl(state: GlobalState, teamId: string): string {
+    const team = getTeam(state, teamId);
+    return `/${team.name}`;
+}
+
 export const getCurrentTeamStats: (state: GlobalState) => TeamStats = createSelector(
     'getCurrentTeamStats',
     getCurrentTeamId,

webapp/channels/src/utils/constants.tsx

@@ -445,6 +445,7 @@ export const ModalIdentifiers = {
     SELF_HOSTED_EXPANSION: 'self_hosted_expansion',
     START_TRIAL_FORM_MODAL: 'start_trial_form_modal',
     START_TRIAL_FORM_MODAL_RESULT: 'start_trial_form_modal_result',
+    CONVERT_GM_TO_CHANNEL: 'convert_gm_to_channel',
 };
 
 export const UserStatuses = {

webapp/channels/src/utils/utils.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {getName} from 'country-list';
+import crypto from 'crypto';
 import cssVars from 'css-vars-ponyfill';
 import type {Locale} from 'date-fns';
 import {isNil} from 'lodash';
@@ -1747,6 +1748,9 @@ export function getBlankAddressWithCountry(country?: string): Address {
     };
 }
 
+export function generateSlug(): string {
+    return crypto.randomBytes(16).toString('hex');
+}
 export function sortUsersAndGroups(a: UserProfile | Group, b: UserProfile | Group) {
     let aSortString = '';
     let bSortString = '';

webapp/platform/client/src/client4.ts

@@ -4201,6 +4201,26 @@ export default class Client4 {
             {method: 'delete', body: JSON.stringify(deletionRequest)},
         );
     }
+
+    getGroupMessageMembersCommonTeams = (channelId: string) => {
+        return this.doFetchWithResponse<Team[]>(
+            `${this.getChannelRoute(channelId)}/common_teams`,
+            {method: 'get'},
+        )
+    }
+
+    convertGroupMessageToPrivateChannel = (channelId: string, teamId: string, displayName: string, name: string) => {
+        const body = {
+            channel_id: channelId,
+            team_id: teamId,
+            display_name: displayName,
+            name: name,
+        }
+        return this.doFetchWithResponse<Channel>(
+            `${this.getChannelRoute(channelId)}/convert_to_channel?team_id=${teamId}`,
+            {method: 'post', body: JSON.stringify(body)},
+        )
+    }
 }
 
 export function parseAndMergeNestedHeaders(originalHeaders: any) {