MM-57319 Direct Message modal message improvement (#27217)

* Direct Message modal message improvement

   *Help text changed, create a modal link created

* Updated the use of openModal to directly handle state updates in the component by using useDispatch hook.

* FormattedMessage is used in DM modal help text

* MM_NO_DOCKER updated to true in /server/config.mk file

* DM modal help message bug fixed

* bug: remainingRext function changed to RemainingComponent

* code style changes

* code style changes

* code style changes

* code style changes

* code style changes

* code style changes

* RemainingText component changed deleted and added remainingText

* code style changes

* href and prevenDefault added to a tag

* hideModal removed props and handled using dispach

* handleHide removed from List component

* MM_NO_DOCKER changed to false

* remaining text changed

* fixed bug

* MM_NO_DOCKER ?= false

* MM_NO_DOCKER ?= false

* added missed semicolons

* snapshot updated

---------

Co-authored-by: Begench <forgithubtobegench@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

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

@@ -57,6 +57,7 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
       addValue={[Function]}
       currentUserId="current_user_id"
       handleDelete={[Function]}
+      handleHide={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
       isExistingChannel={false}
@@ -347,6 +348,7 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
       addValue={[Function]}
       currentUserId="current_user_id"
       handleDelete={[Function]}
+      handleHide={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
       isExistingChannel={false}

webapp/channels/src/components/more_direct_channels/list/list.tsx

@@ -3,12 +3,16 @@
 
 import React, {useCallback, useMemo} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
+import {useDispatch} from 'react-redux';
 
 import type {UserProfile} from '@mattermost/types/users';
 
-import MultiSelect from 'components/multiselect/multiselect';
+import {openModal} from 'actions/views/modals';
 
-import Constants from 'utils/constants';
+import MultiSelect from 'components/multiselect/multiselect';
+import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
+
+import Constants, {ModalIdentifiers} from 'utils/constants';
 
 import ListItem from '../list_item';
 import {optionValue} from '../types';
@@ -23,6 +27,7 @@ type Props = {
     handleDelete: (values: OptionValue[]) => void;
     handlePageChange: (page: number, prevPage: number) => void;
     handleSubmit: (values?: OptionValue[]) => void;
+    handleHide: () => void;
     isExistingChannel: boolean;
     loading: boolean;
     options: Option[];
@@ -57,10 +62,18 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
         );
     }, [props.selectedItemRef]);
 
+    const dispatch = useDispatch();
+
     const handleSubmitImmediatelyOn = useCallback((value: OptionValue) => {
         return value.id === props.currentUserId || Boolean(value.delete_at);
     }, [props.currentUserId]);
 
+    const handleCreateChannel = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        e.preventDefault();
+        props.handleHide();
+        dispatch(openModal({modalId: ModalIdentifiers.NEW_CHANNEL_MODAL, dialogType: NewChannelModal}));
+    };
+
     const intl = useIntl();
 
     let note;
@@ -82,6 +95,37 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
         }
     }
 
+    let remainingText;
+    if (MAX_SELECTABLE_VALUES > props.values.length) {
+        remainingText = (
+            <FormattedMessage
+                id={'multiselect.numPeopleRemaining'}
+                defaultMessage={'Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {person} other {people}}. '}
+                values={{
+                    num: MAX_SELECTABLE_VALUES - props.values.length,
+                }}
+            />
+        );
+    } else {
+        remainingText = (
+            <FormattedMessage
+                id={'multiselect.maxPeople'}
+                defaultMessage={'Use ↑↓ to browse, ↵ to select. You can\'t add more than {num} people. Please <a>create a channel</a> to include more people.'}
+                values={{
+                    num: MAX_SELECTABLE_VALUES,
+                    a: (chunks: React.ReactNode) => {
+                        return (
+                            <a
+                                href='#'
+                                onClick={(e) => handleCreateChannel(e)}
+                            >{chunks}</a>
+                        );
+                    },
+                }}
+            />
+        );
+    }
+
     const options = useMemo(() => {
         return props.options.map(optionValue);
     }, [props.options]);
@@ -104,15 +148,7 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
             handleSubmit={props.handleSubmit}
             noteText={note}
             maxValues={MAX_SELECTABLE_VALUES}
-            numRemainingText={
-                <FormattedMessage
-                    id='multiselect.numPeopleRemaining'
-                    defaultMessage='Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {person} other {people}}. '
-                    values={{
-                        num: MAX_SELECTABLE_VALUES - props.values.length,
-                    }}
-                />
-            }
+            numRemainingText={remainingText}
             buttonSubmitText={
                 <FormattedMessage
                     id='multiselect.go'

webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx

@@ -272,6 +272,7 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
                 handleDelete={this.handleDelete}
                 handlePageChange={this.handlePageChange}
                 handleSubmit={this.handleSubmit}
+                handleHide={this.handleHide}
                 isExistingChannel={this.props.isExistingChannel}
                 loading={this.state.loadingUsers}
                 saving={this.state.saving}

webapp/channels/src/i18n/en.json

@@ -4206,6 +4206,7 @@
   "multiselect.list.notFound": "No results found matching <b>{searchQuery}</b>",
   "multiselect.loading": "Loading...",
   "multiselect.maxGroupMembers": "No more than 256 members can be added to a group at once.",
+  "multiselect.maxPeople": "Use ↑↓ to browse, ↵ to select. You can't add more than 7 people. Please <a>create a channel</a> to include more people. ",
   "multiselect.numGroupsRemaining": "Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {group} other {groups}}. ",
   "multiselect.numMembers": "{memberOptions, number} of {totalCount, number} members",
   "multiselect.numPeopleRemaining": "Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {person} other {people}}. ",