From 44827a8fc10c14f4b789e22613c264092c206351 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Thu, 18 Jul 2024 11:12:43 +0200
Subject: [PATCH 01/32] Fix: Change message when 7 user in pm

---
 .../more_direct_channels/list/list.tsx        | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index c04182cbb8..c44446e758 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -120,13 +120,20 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
             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,
-                    }}
-                />
+                props.values.length === MAX_SELECTABLE_VALUES ? (
+                    <FormattedMessage
+                        id='multiselect.noMorePeople'
+                        defaultMessage='Un message personnel est limité à 7 personnes.'
+                    />
+                ) : (
+                    <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,
+                        }}
+                    />
+                )
             }
             buttonSubmitText={
                 <FormattedMessage

From ef3b4cb0b59ceb837dba8b31a419534c6f83fa34 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 11:24:39 +0200
Subject: [PATCH 02/32] Feat: modal for max user in pm

---
 .../more_direct_channels/list/list.tsx        | 14 +--
 .../more_direct_channels.tsx                  |  1 +
 .../src/components/multiselect/index.ts       | 21 +++++
 .../components/multiselect/multiselect.tsx    | 93 +++++++++++++++----
 webapp/channels/src/i18n/de.json              |  7 +-
 webapp/channels/src/i18n/en.json              |  7 +-
 webapp/channels/src/i18n/es.json              |  7 +-
 webapp/channels/src/i18n/fr.json              |  7 +-
 webapp/channels/src/i18n/it.json              |  7 +-
 webapp/channels/src/images/icons/lamp.svg     | 15 +++
 .../channels/src/sass/components/_modal.scss  | 14 +++
 .../src/sass/components/_react-select.scss    |  3 +
 webapp/channels/src/utils/constants.tsx       |  2 +
 13 files changed, 163 insertions(+), 35 deletions(-)
 create mode 100644 webapp/channels/src/components/multiselect/index.ts
 create mode 100644 webapp/channels/src/images/icons/lamp.svg

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index c44446e758..8a8f68634f 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -7,7 +7,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 
-import MultiSelect from 'components/multiselect/multiselect';
+import MultiSelect from 'components/multiselect/index';
 
 import Constants from 'utils/constants';
 
@@ -35,6 +35,7 @@ export type Props = {
     totalCount: number;
     users: UserProfile[];
     emptyGroupChannelsIds: string[];
+    exitParentModal: () => void;
 
     /**
      * An array of values that have been selected by the user in the multiselect.
@@ -118,20 +119,21 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
             handleAdd={props.addValue}
             handleSubmit={props.handleSubmit}
             noteText={note}
+            exitParentModal={props.exitParentModal}
+            disableMultiSelectList={true}
             maxValues={MAX_SELECTABLE_VALUES}
+            changeMessageColor='red'
+            showError={props.values.length === MAX_SELECTABLE_VALUES}
             numRemainingText={
                 props.values.length === MAX_SELECTABLE_VALUES ? (
                     <FormattedMessage
                         id='multiselect.noMorePeople'
-                        defaultMessage='Un message personnel est limité à 7 personnes.'
+                        defaultMessage='A personal message is limited to 7 people.'
                     />
                 ) : (
                     <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,
-                        }}
+                        defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
                     />
                 )
             }
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index ceee0a6f4a..a93f3d8f70 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -267,6 +267,7 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
     render() {
         const body = (
             <List
+                exitParentModal={this.handleExit}
                 addValue={this.addValue}
                 currentUserId={this.props.currentUserId}
                 handleDelete={this.handleDelete}
diff --git a/webapp/channels/src/components/multiselect/index.ts b/webapp/channels/src/components/multiselect/index.ts
new file mode 100644
index 0000000000..54d0ad24f7
--- /dev/null
+++ b/webapp/channels/src/components/multiselect/index.ts
@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import type {Dispatch} from 'redux';
+
+import {openModal, closeModal} from 'actions/views/modals';
+
+import MultiSelect from './multiselect';
+
+function mapDispatchToProps(dispatch: Dispatch) {
+    return {
+        actions: bindActionCreators({
+            openModal,
+            closeModal,
+        }, dispatch),
+    };
+}
+
+export default connect(null, mapDispatchToProps)(MultiSelect);
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 5fc694a025..343ffc7014 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -10,13 +10,16 @@ import ReactSelect, {components} from 'react-select';
 import type {getOptionValue} from 'react-select/src/builtins';
 import type {InputActionMeta} from 'react-select/src/types';
 
+import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
 import SaveButton from 'components/save_button';
 import CloseCircleSolidIcon from 'components/widgets/icons/close_circle_solid_icon';
 import Avatar from 'components/widgets/users/avatar';
 
-import {Constants, A11yCustomEventTypes} from 'utils/constants';
+import {Constants, A11yCustomEventTypes, ModalIdentifiers} from 'utils/constants';
 import {imageURLForUser, getDisplayName, localizeMessage} from 'utils/utils';
 
+import type {ModalData} from 'types/actions';
+
 import MultiSelectList from './multiselect_list';
 
 export type Value = {
@@ -29,7 +32,13 @@ export type Value = {
     disabled?: boolean;
 };
 
+type Actions = {
+    openModal: <P>(modalData: ModalData<P>) => void;
+    closeModal: (modalId: string) => void;
+}
+
 export type Props<T extends Value> = {
+    actions: Actions;
     ariaLabelRenderer: getOptionValue<T>;
     backButtonClick?: () => void;
     backButtonClass?: string;
@@ -59,16 +68,20 @@ export type Props<T extends Value> = {
     perPage: number;
     placeholderText?: string;
     saving?: boolean;
+    showError?: boolean;
+    changeMessageColor: string;
     submitImmediatelyOn?: (value: T) => boolean;
     totalCount?: number;
     users?: unknown[];
     valueWithImage: boolean;
+    disableMultiSelectList?: boolean;
     valueRenderer?: (props: {data: T}) => any;
     values: T[];
     focusOnLoad?: boolean;
     savingEnabled?: boolean;
     handleCancel?: () => void;
     customNoOptionsMessage?: React.ReactNode;
+    exitParentModal: () => void;
 }
 
 export type State = {
@@ -91,6 +104,8 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         focusOnLoad: true,
         savingEnabled: true,
         showInputByDefault: false,
+        changeMessageColor: false,
+        disableMultiSelectList: false,
     };
 
     public constructor(props: Props<T>) {
@@ -103,6 +118,15 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         };
     }
 
+    public openModal = (): void => {
+        this.props.exitParentModal();
+        const newModal = {
+            modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
+            dialogType: NewChannelModal,
+        };
+        this.props.actions.openModal(newModal);
+    };
+
     public componentDidMount() {
         const inputRef: unknown = this.reactSelectRef.current && this.reactSelectRef.current.select.inputRef;
 
@@ -447,18 +471,18 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
             memberCount = (
                 <FormattedMessage
                     id='multiselect.numMembers'
-                    defaultMessage='{memberOptions, number} of {totalCount, number} members'
+                    defaultMessage='{options}/7 users'
                     values={{
-                        memberOptions: optionsToDisplay.length,
-                        totalCount: this.props.totalCount,
+                        options: this.props.values.length,
                     }}
                 />
             );
         }
+        const lampIcon = () => Constants.LAMP_ICON;
 
         return (
             <>
-                <div className='filtered-user-list'>
+                <div className={(this.props.disableMultiSelectList && this.props.values.length === 7) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -466,7 +490,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                                 ref={this.reactSelectRef as React.RefObject<any>} // type of ref on @types/react-select is outdated
                                 isMulti={true}
                                 options={this.props.options}
-                                styles={styles}
+                                styles={styles(this.props.showError)}
                                 components={{
                                     Menu: nullComponent,
                                     IndicatorsContainer: nullComponent,
@@ -487,7 +511,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                                 getOptionLabel={this.props.ariaLabelRenderer}
                                 aria-label={this.props.placeholderText}
                                 className={this.state.a11yActive ? 'multi-select__focused' : ''}
-                                classNamePrefix='react-select-auto react-select'
+                                classNamePrefix={this.props.showError ? 'react-select-auto react-select error' : 'react-select-auto react-select'}
                             />
                             {this.props.saveButtonPosition === 'top' &&
                                 <SaveButton
@@ -504,18 +528,42 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             id='multiSelectHelpMemberInfo'
                             className='multi-select__help'
                         >
-                            {numRemainingText}
+                            <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
+                                {numRemainingText}
+                            </div>
+
                             {memberCount}
                         </div>
                     </div>
-                    {multiSelectList}
+                    {this.props.disableMultiSelectList && this.props.values.length === 7 ? (
+                        <div className='create-new-channel'>
+                            <img src={lampIcon()}/>
+                            <FormattedMessage
+                                id='multiselect.new_channel'
+                                defaultMessage='Create a channel to communicate with more people'
+                            />
+                            <a
+                                href='#'
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    this.openModal();
+                                }}
+                            >
+                                <FormattedMessage
+                                    id='multiselect.new_channel_create'
+                                    defaultMessage='Create a channel'
+                                />
+                            </a>
+                        </div>
+                    ) : (multiSelectList)
+                    }
                     <div
                         id='multiSelectMessageNote'
                         className='multi-select__help'
                     >
                         {noteTextContainer}
                     </div>
-                    {this.props.saveButtonPosition === 'top' &&
+                    {this.props.saveButtonPosition === 'top' && !this.props.disableMultiSelectList &&
                         <div className='filter-controls'>
                             {previousButton}
                             {nextButton}
@@ -572,14 +620,21 @@ const paddedComponent = (WrappedComponent: any) => {
     };
 };
 
-const styles = {
-    container: () => {
-        return {
-            display: 'flex',
-            overflow: 'hidden',
-            flex: 'auto',
-        };
-    },
-};
+const styles = (showError: boolean | undefined) => ({
+    container: (base: React.CSSProperties) => ({
+        ...base,
+        display: 'flex',
+        overflow: 'hidden',
+        flex: 'auto',
+    }),
+    control: (base: React.CSSProperties) => ({
+        ...base,
+        borderColor: 'red',
+        boxShadow: showError ? '0 0 0 1px red' : 'none',
+        '&:hover': {
+            borderColor: 'red',
+        },
+    }),
+});
 
 export default MultiSelect;
diff --git a/webapp/channels/src/i18n/de.json b/webapp/channels/src/i18n/de.json
index 5129539688..a092907c61 100644
--- a/webapp/channels/src/i18n/de.json
+++ b/webapp/channels/src/i18n/de.json
@@ -4437,10 +4437,13 @@
   "multiselect.go": "Los",
   "multiselect.list.notFound": "Für die Suchanfrage <b>{searchQuery}</b> wurden keine Ergebnisse gefunden",
   "multiselect.loading": "Lade...",
+  "multiselect.noMorePeople": "Eine persönliche Nachricht ist auf 7 Personen begrenzt.",
+  "multiselect.numMembers": "{options}/7 Benutzer",
+  "multiselect.numPeopleRemaining": "Verwenden Sie die ↑↓ Pfeiltasten auf der Tastatur, ENTER zum Auswählen.",
+  "multiselect.new_channel": "Erstellen Sie einen Kanal, um mit mehr Personen zu kommunizieren",
+  "multiselect.new_channel_create": "Einen Kanal erstellen",
   "multiselect.maxGroupMembers": "Es können nicht mehr als 256 Mitglieder auf einmal zu einer Gruppe hinzugefügt werden.",
   "multiselect.numGroupsRemaining": "Verwende ↑↓ zum Navigieren, ↵ zur Auswahl. Du kannst {num, number} weitere {num, plural, one {Gruppe} other {Gruppen}} hinzufügen. ",
-  "multiselect.numMembers": "{memberOptions, number} von {totalCount, number} Benutzern",
-  "multiselect.numPeopleRemaining": "Verwende ↑↓ zum Navigieren, ↵ zur Auswahl. Du kannst {num, number} weitere {num, plural, one {Person} other {Personen}} hinzufügen. ",
   "multiselect.numRemaining": "Es können maximal {max, number} gleichzeitig hinzugefügt werden. Es können {num, number} weitere hinzugefügt werden.",
   "multiselect.placeholder": "Mitglieder suchen",
   "multiselect.placeholder.peopleOrGroups": "Suche nach Personen oder Gruppen",
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 6a687dab2b..e810e39173 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4411,10 +4411,13 @@
   "multiselect.go": "Go",
   "multiselect.list.notFound": "No results found matching <b>{searchQuery}</b>",
   "multiselect.loading": "Loading...",
+  "multiselect.noMorePeople": "A personal message is limited to 7 people.",
+  "multiselect.numMembers": "{options}/7 users",
+  "multiselect.numPeopleRemaining": "Use the ↑↓ arrows on the keyboard, ENTER to select.",
+  "multiselect.new_channel": "Create a channel to communicate with more people",
+  "multiselect.new_channel_create": "Create a channel",
   "multiselect.maxGroupMembers": "No more than 256 members can be added to a group at once.",
   "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}}. ",
   "multiselect.numRemaining": "Up to {max, number} can be added at a time. You have {num, number} remaining.",
   "multiselect.placeholder": "Search for people",
   "multiselect.placeholder.peopleOrGroups": "Search for people or groups",
diff --git a/webapp/channels/src/i18n/es.json b/webapp/channels/src/i18n/es.json
index e97fe9ecce..d7899fe0cd 100644
--- a/webapp/channels/src/i18n/es.json
+++ b/webapp/channels/src/i18n/es.json
@@ -3810,9 +3810,12 @@
   "multiselect.go": "Ir",
   "multiselect.list.notFound": "No se encontraron resultados que encajen con **{searchQuery}**",
   "multiselect.loading": "Cargando...",
+  "multiselect.noMorePeople": "Un mensaje personal está limitado a 7 personas.",
+  "multiselect.numMembers": "{options}/7 usuarios",
+  "multiselect.numPeopleRemaining": "Usa las flechas ↑↓ del teclado, ENTER para seleccionar.",
+  "multiselect.new_channel": "Crear un canal para comunicarse con más personas",
+  "multiselect.new_channel_create": "Crear un canal",
   "multiselect.numGroupsRemaining": "Utiliza ↑↓ para navegar, ↵ para seleccionar. Puedes agregar {num, number} {num, plural, one {grupo} other {grupos}} más. ",
-  "multiselect.numMembers": "{memberOptions, number} de {totalCount, number} miembros",
-  "multiselect.numPeopleRemaining": "Utiliza ↑↓ para navegar, ↵ para seleccionar. Puedes agregar {num, number} {num, plural, one {persona} other {personas}} más. ",
   "multiselect.numRemaining": "Se puede añadir hasta {max, number} a la vez. Te quedan {num, number}.",
   "multiselect.placeholder": "Buscar personas",
   "multiselect.saveDetailsButton": "Guardar Detalles",
diff --git a/webapp/channels/src/i18n/fr.json b/webapp/channels/src/i18n/fr.json
index 60eafb4f6b..f9914b383d 100644
--- a/webapp/channels/src/i18n/fr.json
+++ b/webapp/channels/src/i18n/fr.json
@@ -3750,12 +3750,15 @@
   "multiselect.go": "Aller à",
   "multiselect.list.notFound": "Aucun résultat trouvé pour <b>{searchQuery}</b>",
   "multiselect.loading": "Chargement…",
+  "multiselect.noMorePeople": "Un message personnel est limité à 7 personnes.",
   "multiselect.numGroupsRemaining": "Utilisez les flèches ↑↓ pour parcourir, ↵ pour sélectionner. Vous pouvez encore ajouter {num, number} {num, plural, one {groupe} other {groupes}}. ",
-  "multiselect.numMembers": "{memberOptions, number} de {totalCount, number} membres",
-  "multiselect.numPeopleRemaining": "Utilisez les flèches ↑↓ pour parcourir, ↵ pour sélectionner. Vous pouvez encore ajouter {num, number} {num, plural, one {personne} other {personnes}}. ",
+  "multiselect.numMembers": "{options}/7 utilisateurs",
+  "multiselect.numPeopleRemaining": "Utilisez les flèches ↑↓ du clavier, ENTER pour sélectionner.",
   "multiselect.numRemaining": "Vous pouvez ajouter jusqu'à {max, number} à la fois. Il vous reste {num, number}.",
   "multiselect.placeholder": "Rechercher des membres",
   "multiselect.placeholder.peopleOrGroups": "Rechercher des personnes ou des groupes",
+  "multiselect.new_channel": "Créer un canal pour échanger avec plus de personnes",
+  "multiselect.new_channel_create": "Créer un canal",
   "multiselect.saveDetailsButton": "Enregistrer les détails",
   "multiselect.savingDetailsButton": "Enregistrement...",
   "multiselect.selectChannels": "Utilisez ↑↓ pour parcourir, ↵ pour sélectionner.",
diff --git a/webapp/channels/src/i18n/it.json b/webapp/channels/src/i18n/it.json
index 935a6142d2..55ed577acc 100644
--- a/webapp/channels/src/i18n/it.json
+++ b/webapp/channels/src/i18n/it.json
@@ -2907,9 +2907,12 @@
   "multiselect.go": "Vai",
   "multiselect.list.notFound": "Nessun elemento trovato corrispondenti a <b>{searchQuery}</b>",
   "multiselect.loading": "Caricamento...",
+  "multiselect.noMorePeople": "Un messaggio personale è limitato a 7 persone.",
+  "multiselect.numMembers": "{options}/7 utenti",
+  "multiselect.numPeopleRemaining": "Usa le frecce ↑↓ della tastiera, ENTER per selezionare.",
+  "multiselect.new_channel": "Crea un canale per comunicare con più persone",
+  "multiselect.new_channel_create": "Crea un canale",
   "multiselect.numGroupsRemaining": "Usa ↑↓ per navigare, ↵ per scegliere. Puoi aggiungere {num, number} {num, plural, one {group} other {groups}}. ",
-  "multiselect.numMembers": "{memberOptions, number} di {totalCount, number} membri",
-  "multiselect.numPeopleRemaining": "Usa ↑↓ per navigare, ↵ per scegliere. Puoi aggiungere {num, number} più {num, plural, one {person} altre {people}}. ",
   "multiselect.numRemaining": "Si possono ancora aggiungere {num, number}",
   "multiselect.placeholder": "Cercare ed aggiungere membri",
   "multiselect.selectChannels": "Usa ↑↓ per navigare, ↵ per selezionare.",
diff --git a/webapp/channels/src/images/icons/lamp.svg b/webapp/channels/src/images/icons/lamp.svg
new file mode 100644
index 0000000000..8d7686b196
--- /dev/null
+++ b/webapp/channels/src/images/icons/lamp.svg
@@ -0,0 +1,15 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7775_24321)">
+<path d="M8 2C8.27614 2 8.5 2.22386 8.5 2.5V3.5C8.5 3.77614 8.27614 4 8 4C7.72386 4 7.5 3.77614 7.5 3.5V2.5C7.5 2.22386 7.72386 2 8 2Z" fill="#E91E63"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 13.831C4.77045 13.4212 4.15668 12.8306 3.71883 12.1143C3.23744 11.3268 2.98829 10.4192 3.00007 9.49628L3.0001 9.49409C3.0227 8.17716 3.55571 6.92045 4.48678 5.98883C5.41785 5.05721 6.67425 4.52346 7.99116 4.50008C7.99707 4.49997 8.00299 4.49997 8.0089 4.50008C9.32531 4.52343 10.5813 5.05677 11.5123 5.98776C12.4433 6.91875 12.9766 8.17472 13 9.49113L13 9.49332C13.0123 10.4168 12.7634 11.3249 12.282 12.1131C11.8441 12.83 11.23 13.421 10.5 13.8311V16.5C10.5 16.8978 10.342 17.2794 10.0607 17.5607C9.77936 17.842 9.39783 18 9 18H7C6.60217 18 6.22064 17.842 5.93934 17.5607C5.65804 17.2794 5.5 16.8978 5.5 16.5V13.831ZM6.5 14V15H9.5V14H6.5ZM6.5 16V16.5C6.5 16.6326 6.55268 16.7598 6.64645 16.8536C6.74022 16.9473 6.86739 17 7 17H9C9.13261 17 9.25978 16.9473 9.35355 16.8536C9.44732 16.7598 9.5 16.6326 9.5 16.5V16H6.5ZM5.19409 6.69572C5.93986 5.94951 6.94549 5.5211 8.00004 5.50009C9.05418 5.52108 10.0595 5.94917 10.8052 6.69487C11.5527 7.44239 11.981 8.45076 12.0001 9.50771C12.0097 10.2424 11.8116 10.9648 11.4286 11.5918C11.0653 12.1866 10.5495 12.6726 9.93569 13H6.06438C5.45091 12.6728 4.93539 12.1872 4.57207 11.5928C4.18911 10.9663 3.99081 10.2444 3.99998 9.51014C4.01841 8.45275 4.4465 7.44377 5.19409 6.69572Z" fill="#E91E63"/>
+<path d="M1 9C0.723858 9 0.5 9.22386 0.5 9.5C0.5 9.77614 0.723858 10 1 10H2C2.27614 10 2.5 9.77614 2.5 9.5C2.5 9.22386 2.27614 9 2 9H1Z" fill="#E91E63"/>
+<path d="M2.13947 4.15356C2.3308 3.95445 2.64732 3.94814 2.84644 4.13947L3.57977 4.84414C3.77889 5.03547 3.7852 5.35199 3.59386 5.5511C3.40253 5.75022 3.08601 5.75653 2.8869 5.5652L2.15356 4.86053C1.95445 4.6692 1.94814 4.35268 2.13947 4.15356Z" fill="#E91E63"/>
+<path d="M14 9C13.7239 9 13.5 9.22386 13.5 9.5C13.5 9.77614 13.7239 10 14 10H15C15.2761 10 15.5 9.77614 15.5 9.5C15.5 9.22386 15.2761 9 15 9H14Z" fill="#E91E63"/>
+<path d="M13.8605 4.15356C14.0518 4.35268 14.0455 4.6692 13.8464 4.86053L13.113 5.5652C12.9139 5.75653 12.5974 5.75022 12.4061 5.5511C12.2147 5.35199 12.2211 5.03547 12.4202 4.84414L13.1535 4.13947C13.3526 3.94814 13.6691 3.95445 13.8605 4.15356Z" fill="#E91E63"/>
+</g>
+<defs>
+<clipPath id="clip0_7775_24321">
+<rect width="16" height="16" fill="white" transform="translate(0 2)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 75632bc509..5ea6c96c7a 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -980,6 +980,10 @@
         flex: 1 1 auto;
     }
 
+    &.disable-list {
+        height: unset;
+    }
+
     .multi-select__wrapper {
         display: flex;
         height: 1px;
@@ -1040,6 +1044,16 @@
     }
 }
 
+.create-new-channel {
+    height: 60px;
+    margin: 20px;
+    display: flex;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #f2f2f2;
+}
+
 .team-selector-modal,
 .channel-selector-modal {
     .more-modal__row {
diff --git a/webapp/channels/src/sass/components/_react-select.scss b/webapp/channels/src/sass/components/_react-select.scss
index 6a9b1561c4..f53034659e 100644
--- a/webapp/channels/src/sass/components/_react-select.scss
+++ b/webapp/channels/src/sass/components/_react-select.scss
@@ -1,4 +1,7 @@
 .react-select {
+    &.error {
+        border-color: var(--danger-color) !important;
+    }
     .a11y--focused {
         box-shadow: none;
     }
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 4ef81d30a6..5e1576928e 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -21,6 +21,7 @@ import audioIcon from 'images/icons/audio.svg';
 import codeIcon from 'images/icons/code.svg';
 import excelIcon from 'images/icons/excel.svg';
 import genericIcon from 'images/icons/generic.svg';
+import lampIcon from 'images/icons/lamp.svg';
 import patchIcon from 'images/icons/patch.svg';
 import pdfIcon from 'images/icons/pdf.svg';
 import pptIcon from 'images/icons/ppt.svg';
@@ -2119,6 +2120,7 @@ export const Constants = {
     RECENT_EMOJI_KEY: 'recentEmojis',
     DEFAULT_WEBHOOK_LOGO: logoWebhook,
     TRANSCRIPT_ICON: transcriptIcon,
+    LAMP_ICON: lampIcon,
     MHPNS_US: 'https://push.mattermost.com',
     MHPNS_DE: 'https://hpns-de.mattermost.com',
     MTPNS: 'https://push-test.mattermost.com',

From 76ef4a38e8ceaf660428135148a86095dcc6a415 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 12:03:21 +0200
Subject: [PATCH 03/32] Fix: test

---
 .../src/components/multiselect/multiselect.tsx       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 343ffc7014..fd5d8008f9 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -38,7 +38,7 @@ type Actions = {
 }
 
 export type Props<T extends Value> = {
-    actions: Actions;
+    actions?: Actions;
     ariaLabelRenderer: getOptionValue<T>;
     backButtonClick?: () => void;
     backButtonClass?: string;
@@ -69,7 +69,7 @@ export type Props<T extends Value> = {
     placeholderText?: string;
     saving?: boolean;
     showError?: boolean;
-    changeMessageColor: string;
+    changeMessageColor?: string;
     submitImmediatelyOn?: (value: T) => boolean;
     totalCount?: number;
     users?: unknown[];
@@ -81,7 +81,7 @@ export type Props<T extends Value> = {
     savingEnabled?: boolean;
     handleCancel?: () => void;
     customNoOptionsMessage?: React.ReactNode;
-    exitParentModal: () => void;
+    exitParentModal?: () => void;
 }
 
 export type State = {
@@ -119,12 +119,14 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
     }
 
     public openModal = (): void => {
-        this.props.exitParentModal();
+        if (this.props.exitParentModal) {
+            this.props.exitParentModal();
+        }
         const newModal = {
             modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
             dialogType: NewChannelModal,
         };
-        this.props.actions.openModal(newModal);
+        this.props.actions?.openModal(newModal);
     };
 
     public componentDidMount() {

From a59837db9c8a854a03cb5fa5934c17cc67b07731 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 12:52:04 +0200
Subject: [PATCH 04/32] Fix: Modal css, tests, snap

---
 .../__snapshots__/channel_invite_modal.test.tsx.snap       | 6 ++++++
 .../__snapshots__/more_direct_channels.test.tsx.snap       | 2 ++
 webapp/channels/src/components/multiselect/multiselect.tsx | 7 ++++---
 webapp/channels/src/sass/components/_modal.scss            | 4 ++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
index 7111e7e536..985d0a6381 100644
--- a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
@@ -66,7 +66,9 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        changeMessageColor=""
         customNoOptionsMessage={null}
+        disableMultiSelectList={false}
         focusOnLoad={true}
         handleAdd={[Function]}
         handleCancel={[Function]}
@@ -205,7 +207,9 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        changeMessageColor=""
         customNoOptionsMessage={null}
+        disableMultiSelectList={false}
         focusOnLoad={true}
         handleAdd={[Function]}
         handleCancel={[Function]}
@@ -366,7 +370,9 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        changeMessageColor=""
         customNoOptionsMessage={null}
+        disableMultiSelectList={false}
         focusOnLoad={true}
         handleAdd={[Function]}
         handleCancel={[Function]}
diff --git a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
index 6073e4686f..535cbcaf3c 100644
--- a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
@@ -56,6 +56,7 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
+      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
@@ -346,6 +347,7 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
+      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index fd5d8008f9..0cc9b1fc42 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -104,7 +104,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         focusOnLoad: true,
         savingEnabled: true,
         showInputByDefault: false,
-        changeMessageColor: false,
+        changeMessageColor: '',
         disableMultiSelectList: false,
     };
 
@@ -533,8 +533,9 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
                                 {numRemainingText}
                             </div>
-
-                            {memberCount}
+                            <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
+                                {memberCount}
+                            </div>
                         </div>
                     </div>
                     {this.props.disableMultiSelectList && this.props.values.length === 7 ? (
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 5ea6c96c7a..1e6548a0ba 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -1046,9 +1046,9 @@
 
 .create-new-channel {
     height: 60px;
-    margin: 20px;
+    margin: 27px;
     display: flex;
-    border-radius: 4px;
+    border-radius: 8px;
     align-items: center;
     justify-content: space-around;
     background-color: #f2f2f2;

From 71c5e7af9f3b71a67ac97f24cf6d9f2e5b3a53c5 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 13:13:06 +0200
Subject: [PATCH 05/32] Fix: snap

---
 .../add_groups_to_channel_modal.test.tsx.snap |  2 +
 .../add_groups_to_channel_modal.tsx           |  3 +-
 ...dd_user_to_group_multiselect.test.tsx.snap |  6 ++
 .../add_users_to_team_modal.test.tsx.snap     |  4 +
 .../add_users_to_role_modal.test.tsx.snap     | 12 +++
 .../channel_selector_modal.test.tsx.snap      |  4 +
 .../__snapshots__/multiselect.test.tsx.snap   | 75 ++++++++++++-------
 7 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
index a95bd53ae8..996646bfa4 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`components/AddGroupsToChannelModal should match snapshot 1`] = `
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
index a6bfce7679..41751bce23 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
@@ -15,10 +15,11 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 import MultiSelect from 'components/multiselect/multiselect';
 import type {Value} from 'components/multiselect/multiselect';
 
-import groupsAvatar from 'images/groups-avatar.png';
 import Constants from 'utils/constants';
 import {localizeMessage} from 'utils/utils';
 
+import groupsAvatar from 'images/groups-avatar.png';
+
 const GROUPS_PER_PAGE = 50;
 const MAX_SELECTABLE_VALUES = 10;
 
diff --git a/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap b/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
index 679a617e2b..321d635248 100644
--- a/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
@@ -5,6 +5,8 @@ exports[`component/add_user_to_group_multiselect should match snapshot with diff
   ariaLabelRenderer={[Function]}
   buttonSubmitLoadingText="Updating..."
   buttonSubmitText="Update Group"
+  changeMessageColor=""
+  disableMultiSelectList={false}
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
@@ -90,6 +92,8 @@ exports[`component/add_user_to_group_multiselect should match snapshot with prof
   ariaLabelRenderer={[Function]}
   buttonSubmitLoadingText="Creating..."
   buttonSubmitText="Create Group"
+  changeMessageColor=""
+  disableMultiSelectList={false}
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
@@ -175,6 +179,8 @@ exports[`component/add_user_to_group_multiselect should match snapshot without a
   ariaLabelRenderer={[Function]}
   buttonSubmitLoadingText="Creating..."
   buttonSubmitText="Create Group"
+  changeMessageColor=""
+  disableMultiSelectList={false}
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
diff --git a/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
index 24f15d8c80..4ee84c49c5 100644
--- a/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -286,6 +288,8 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
index ce6dd9e4ea..7378fab39d 100644
--- a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`admin_console/add_users_to_role_modal search should not include bot use
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -240,6 +242,8 @@ exports[`admin_console/add_users_to_role_modal should exclude user 1`] = `
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -377,6 +381,8 @@ exports[`admin_console/add_users_to_role_modal should have single passed value 1
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -558,6 +564,8 @@ exports[`admin_console/add_users_to_role_modal should include additional user 1`
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -780,6 +788,8 @@ exports[`admin_console/add_users_to_role_modal should include additional user 2`
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -1002,6 +1012,8 @@ exports[`admin_console/add_users_to_role_modal should not include bot user 1`] =
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
index 00d6a640a3..02b2d485e9 100644
--- a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
@@ -53,6 +53,8 @@ exports[`components/ChannelSelectorModal exclude already selected 1`] = `
     <MultiSelect
       ariaLabelRenderer={[Function]}
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -204,6 +206,8 @@ exports[`components/ChannelSelectorModal should match snapshot 1`] = `
     <MultiSelect
       ariaLabelRenderer={[Function]}
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
index ea47aa545e..61c34af9a7 100644
--- a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
@@ -83,6 +83,7 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
           styles={
             Object {
               "container": [Function],
+              "control": [Function],
             }
           }
           value={
@@ -120,16 +121,22 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
       >
-        <MemoizedFormattedMessage
-          defaultMessage="{memberOptions, number} of {totalCount, number} members"
-          id="multiselect.numMembers"
-          values={
-            Object {
-              "memberOptions": 5,
-              "totalCount": 8,
-            }
-          }
+        <div
+          style={Object {}}
         />
+        <div
+          style={Object {}}
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="{options}/7 users"
+            id="multiselect.numMembers"
+            values={
+              Object {
+                "options": 1,
+              }
+            }
+          />
+        </div>
       </div>
     </div>
     <MultiSelectList
@@ -285,6 +292,7 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
           styles={
             Object {
               "container": [Function],
+              "control": [Function],
             }
           }
           value={
@@ -322,16 +330,22 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
       >
-        <MemoizedFormattedMessage
-          defaultMessage="{memberOptions, number} of {totalCount, number} members"
-          id="multiselect.numMembers"
-          values={
-            Object {
-              "memberOptions": 5,
-              "totalCount": 8,
-            }
-          }
+        <div
+          style={Object {}}
         />
+        <div
+          style={Object {}}
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="{options}/7 users"
+            id="multiselect.numMembers"
+            values={
+              Object {
+                "options": 1,
+              }
+            }
+          />
+        </div>
       </div>
     </div>
     <MultiSelectList
@@ -478,6 +492,7 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
           styles={
             Object {
               "container": [Function],
+              "control": [Function],
             }
           }
           value={
@@ -515,16 +530,22 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
       >
-        <MemoizedFormattedMessage
-          defaultMessage="{memberOptions, number} of {totalCount, number} members"
-          id="multiselect.numMembers"
-          values={
-            Object {
-              "memberOptions": 3,
-              "totalCount": 8,
-            }
-          }
+        <div
+          style={Object {}}
         />
+        <div
+          style={Object {}}
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="{options}/7 users"
+            id="multiselect.numMembers"
+            values={
+              Object {
+                "options": 1,
+              }
+            }
+          />
+        </div>
       </div>
     </div>
     <MultiSelectList

From d1b2aa0f2b8b041ef209c26a02d97ed252836cce Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 13:27:41 +0200
Subject: [PATCH 06/32] Fix: snap

---
 .../__snapshots__/add_groups_to_team_modal.test.tsx.snap        | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
index 81eefd6f49..f2ab772eea 100644
--- a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`components/AddGroupsToTeamModal should match snapshot 1`] = `
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}

From 882050971f77e05c52d4cab57a55807fedfa6b53 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Tue, 23 Jul 2024 09:33:22 +0200
Subject: [PATCH 07/32] Fix: show modal when 7 user in pm

Changelog: fixed
---
 .../more_direct_channels/list/list.tsx        |  2 +-
 .../components/multiselect/multiselect.tsx    | 48 ++++++++++---------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index 8a8f68634f..f0ec2dd211 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -17,7 +17,7 @@ import ListItem from '../list_item';
 import type {Option, OptionValue} from '../types';
 import {optionValue} from '../types';
 
-const MAX_SELECTABLE_VALUES = Constants.MAX_USERS_IN_GM - 1;
+const MAX_SELECTABLE_VALUES = Constants.MAX_USERS_IN_GM;
 export const USERS_PER_PAGE = 50;
 
 export type Props = {
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 0cc9b1fc42..8c99caf3ed 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -484,7 +484,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         return (
             <>
-                <div className={(this.props.disableMultiSelectList && this.props.values.length === 7) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
+                <div className={(this.props.disableMultiSelectList && this.props.values.length === 8) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -538,27 +538,31 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             </div>
                         </div>
                     </div>
-                    {this.props.disableMultiSelectList && this.props.values.length === 7 ? (
-                        <div className='create-new-channel'>
-                            <img src={lampIcon()}/>
-                            <FormattedMessage
-                                id='multiselect.new_channel'
-                                defaultMessage='Create a channel to communicate with more people'
-                            />
-                            <a
-                                href='#'
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    this.openModal();
-                                }}
-                            >
-                                <FormattedMessage
-                                    id='multiselect.new_channel_create'
-                                    defaultMessage='Create a channel'
-                                />
-                            </a>
-                        </div>
-                    ) : (multiSelectList)
+                    {
+                        this.props.disableMultiSelectList && this.props.values.length >= 7 ? (
+                            <>
+                                {this.props.values.length === 7 && multiSelectList}
+                                <div className='create-new-channel'>
+                                    <img src={lampIcon()}/>
+                                    <FormattedMessage
+                                        id='multiselect.new_channel'
+                                        defaultMessage='Create a channel to communicate with more people'
+                                    />
+                                    <a
+                                        href='#'
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            this.openModal();
+                                        }}
+                                    >
+                                        <FormattedMessage
+                                            id='multiselect.new_channel_create'
+                                            defaultMessage='Create a channel'
+                                        />
+                                    </a>
+                                </div>
+                            </>
+                        ) : (multiSelectList)
                     }
                     <div
                         id='multiSelectMessageNote'

From be596919bafe47762373b56c1943025f155a8288 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Tue, 23 Jul 2024 09:57:31 +0200
Subject: [PATCH 08/32] Fix: Change trad and text position in modal

Changelog: fixed
---
 webapp/channels/src/i18n/de.json                | 2 +-
 webapp/channels/src/i18n/en.json                | 2 +-
 webapp/channels/src/i18n/es.json                | 2 +-
 webapp/channels/src/i18n/fr.json                | 2 +-
 webapp/channels/src/i18n/it.json                | 2 +-
 webapp/channels/src/sass/components/_modal.scss | 8 +++++++-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/webapp/channels/src/i18n/de.json b/webapp/channels/src/i18n/de.json
index a092907c61..081cb15c33 100644
--- a/webapp/channels/src/i18n/de.json
+++ b/webapp/channels/src/i18n/de.json
@@ -4440,7 +4440,7 @@
   "multiselect.noMorePeople": "Eine persönliche Nachricht ist auf 7 Personen begrenzt.",
   "multiselect.numMembers": "{options}/7 Benutzer",
   "multiselect.numPeopleRemaining": "Verwenden Sie die ↑↓ Pfeiltasten auf der Tastatur, ENTER zum Auswählen.",
-  "multiselect.new_channel": "Erstellen Sie einen Kanal, um mit mehr Personen zu kommunizieren",
+  "multiselect.new_channel": "Mehr als sieben Personen? Erstellen Sie stattdessen einen Kanal",
   "multiselect.new_channel_create": "Einen Kanal erstellen",
   "multiselect.maxGroupMembers": "Es können nicht mehr als 256 Mitglieder auf einmal zu einer Gruppe hinzugefügt werden.",
   "multiselect.numGroupsRemaining": "Verwende ↑↓ zum Navigieren, ↵ zur Auswahl. Du kannst {num, number} weitere {num, plural, one {Gruppe} other {Gruppen}} hinzufügen. ",
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index e810e39173..f6d9348f1b 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4414,7 +4414,7 @@
   "multiselect.noMorePeople": "A personal message is limited to 7 people.",
   "multiselect.numMembers": "{options}/7 users",
   "multiselect.numPeopleRemaining": "Use the ↑↓ arrows on the keyboard, ENTER to select.",
-  "multiselect.new_channel": "Create a channel to communicate with more people",
+  "multiselect.new_channel": "More than 7 people? Create a channel instead",
   "multiselect.new_channel_create": "Create a channel",
   "multiselect.maxGroupMembers": "No more than 256 members can be added to a group at once.",
   "multiselect.numGroupsRemaining": "Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {group} other {groups}}. ",
diff --git a/webapp/channels/src/i18n/es.json b/webapp/channels/src/i18n/es.json
index d7899fe0cd..734c789c97 100644
--- a/webapp/channels/src/i18n/es.json
+++ b/webapp/channels/src/i18n/es.json
@@ -3813,7 +3813,7 @@
   "multiselect.noMorePeople": "Un mensaje personal está limitado a 7 personas.",
   "multiselect.numMembers": "{options}/7 usuarios",
   "multiselect.numPeopleRemaining": "Usa las flechas ↑↓ del teclado, ENTER para seleccionar.",
-  "multiselect.new_channel": "Crear un canal para comunicarse con más personas",
+  "multiselect.new_channel": "¿Más de 7 personas? Crea un canal",
   "multiselect.new_channel_create": "Crear un canal",
   "multiselect.numGroupsRemaining": "Utiliza ↑↓ para navegar, ↵ para seleccionar. Puedes agregar {num, number} {num, plural, one {grupo} other {grupos}} más. ",
   "multiselect.numRemaining": "Se puede añadir hasta {max, number} a la vez. Te quedan {num, number}.",
diff --git a/webapp/channels/src/i18n/fr.json b/webapp/channels/src/i18n/fr.json
index f9914b383d..2b99300304 100644
--- a/webapp/channels/src/i18n/fr.json
+++ b/webapp/channels/src/i18n/fr.json
@@ -3757,7 +3757,7 @@
   "multiselect.numRemaining": "Vous pouvez ajouter jusqu'à {max, number} à la fois. Il vous reste {num, number}.",
   "multiselect.placeholder": "Rechercher des membres",
   "multiselect.placeholder.peopleOrGroups": "Rechercher des personnes ou des groupes",
-  "multiselect.new_channel": "Créer un canal pour échanger avec plus de personnes",
+  "multiselect.new_channel": "Plus de 7 personnes ? Créez plutôt un canal",
   "multiselect.new_channel_create": "Créer un canal",
   "multiselect.saveDetailsButton": "Enregistrer les détails",
   "multiselect.savingDetailsButton": "Enregistrement...",
diff --git a/webapp/channels/src/i18n/it.json b/webapp/channels/src/i18n/it.json
index 55ed577acc..a3b959c6f0 100644
--- a/webapp/channels/src/i18n/it.json
+++ b/webapp/channels/src/i18n/it.json
@@ -2910,7 +2910,7 @@
   "multiselect.noMorePeople": "Un messaggio personale è limitato a 7 persone.",
   "multiselect.numMembers": "{options}/7 utenti",
   "multiselect.numPeopleRemaining": "Usa le frecce ↑↓ della tastiera, ENTER per selezionare.",
-  "multiselect.new_channel": "Crea un canale per comunicare con più persone",
+  "multiselect.new_channel": "Più di 7 persone? Create invece un canale",
   "multiselect.new_channel_create": "Crea un canale",
   "multiselect.numGroupsRemaining": "Usa ↑↓ per navigare, ↵ per scegliere. Puoi aggiungere {num, number} {num, plural, one {group} other {groups}}. ",
   "multiselect.numRemaining": "Si possono ancora aggiungere {num, number}",
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 1e6548a0ba..66795fea79 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -1050,8 +1050,14 @@
     display: flex;
     border-radius: 8px;
     align-items: center;
-    justify-content: space-around;
+    justify-content: flex-start;
     background-color: #f2f2f2;
+    padding-left: 20px;
+    gap: 10px;
+}
+
+.create-new-channel > :last-child {
+    margin-left: 100px;
 }
 
 .team-selector-modal,

From ed1a0ea0cc89de700c9a5ad879ebbd39a7723266 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Wed, 24 Jul 2024 08:59:53 +0200
Subject: [PATCH 09/32] Fix: Change create channel modal position

Changelog: fixed
---
 .../components/multiselect/multiselect.tsx    | 53 ++++++++++---------
 .../channels/src/sass/components/_modal.scss  |  2 +-
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 8c99caf3ed..4682764534 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -536,33 +536,38 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
                                 {memberCount}
                             </div>
+
                         </div>
-                    </div>
-                    {
-                        this.props.disableMultiSelectList && this.props.values.length >= 7 ? (
-                            <>
-                                {this.props.values.length === 7 && multiSelectList}
-                                <div className='create-new-channel'>
-                                    <img src={lampIcon()}/>
-                                    <FormattedMessage
-                                        id='multiselect.new_channel'
-                                        defaultMessage='Create a channel to communicate with more people'
-                                    />
-                                    <a
-                                        href='#'
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            this.openModal();
-                                        }}
-                                    >
+                        {
+                            (this.props.disableMultiSelectList && this.props.values.length >= 7) ? (
+                                <>
+                                    <div className='create-new-channel'>
+                                        <img src={lampIcon()}/>
                                         <FormattedMessage
-                                            id='multiselect.new_channel_create'
-                                            defaultMessage='Create a channel'
+                                            id='multiselect.new_channel'
+                                            defaultMessage='Create a channel to communicate with more people'
                                         />
-                                    </a>
-                                </div>
-                            </>
-                        ) : (multiSelectList)
+                                        <a
+                                            href='#'
+                                            onClick={(e) => {
+                                                e.preventDefault();
+                                                this.openModal();
+                                            }}
+                                        >
+                                            <FormattedMessage
+                                                id='multiselect.new_channel_create'
+                                                defaultMessage='Create a channel'
+                                            />
+                                        </a>
+                                    </div>
+                                </>
+                            ) : null
+                        }
+                    </div>
+                    {
+                        (!this.props.disableMultiSelectList || this.props.values.length <= 7) ? (
+                            multiSelectList
+                        ) : null
                     }
                     <div
                         id='multiSelectMessageNote'
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 66795fea79..e2b686fa74 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -1046,7 +1046,7 @@
 
 .create-new-channel {
     height: 60px;
-    margin: 27px;
+    margin: 10px;
     display: flex;
     border-radius: 8px;
     align-items: center;

From eab575be1f77819dae2c645dd22911be87d3196f Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Thu, 25 Jul 2024 16:31:42 +0200
Subject: [PATCH 10/32] Fix: use constants for max users

---
 .../src/components/more_direct_channels/list/list.tsx    | 5 ++++-
 .../channels/src/components/multiselect/multiselect.tsx  | 9 +++++----
 webapp/channels/src/i18n/de.json                         | 2 +-
 webapp/channels/src/i18n/en.json                         | 2 +-
 webapp/channels/src/i18n/es.json                         | 2 +-
 webapp/channels/src/i18n/fr.json                         | 2 +-
 webapp/channels/src/i18n/it.json                         | 2 +-
 7 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index f0ec2dd211..36aef73e84 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -128,7 +128,10 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
                 props.values.length === MAX_SELECTABLE_VALUES ? (
                     <FormattedMessage
                         id='multiselect.noMorePeople'
-                        defaultMessage='A personal message is limited to 7 people.'
+                        defaultMessage='A personal message is limited to {maxUsers} people.'
+                        values={{
+                            maxUsers: (Constants.MAX_USERS_IN_GM - 1),
+                        }}
                     />
                 ) : (
                     <FormattedMessage
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 4682764534..18025c00f6 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -473,8 +473,9 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
             memberCount = (
                 <FormattedMessage
                     id='multiselect.numMembers'
-                    defaultMessage='{options}/7 users'
+                    defaultMessage='{options}/{maxUsers} users'
                     values={{
+                        maxUsers: Constants.MAX_USERS_IN_GM - 1,
                         options: this.props.values.length,
                     }}
                 />
@@ -484,7 +485,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         return (
             <>
-                <div className={(this.props.disableMultiSelectList && this.props.values.length === 8) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
+                <div className={(this.props.disableMultiSelectList && this.props.values.length === Constants.MAX_USERS_IN_GM) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -539,7 +540,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
                         </div>
                         {
-                            (this.props.disableMultiSelectList && this.props.values.length >= 7) ? (
+                            (this.props.disableMultiSelectList && this.props.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
                                 <>
                                     <div className='create-new-channel'>
                                         <img src={lampIcon()}/>
@@ -565,7 +566,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                         }
                     </div>
                     {
-                        (!this.props.disableMultiSelectList || this.props.values.length <= 7) ? (
+                        (!this.props.disableMultiSelectList || this.props.values.length <= (Constants.MAX_USERS_IN_GM - 1)) ? (
                             multiSelectList
                         ) : null
                     }
diff --git a/webapp/channels/src/i18n/de.json b/webapp/channels/src/i18n/de.json
index 081cb15c33..699310f1dc 100644
--- a/webapp/channels/src/i18n/de.json
+++ b/webapp/channels/src/i18n/de.json
@@ -4438,7 +4438,7 @@
   "multiselect.list.notFound": "Für die Suchanfrage <b>{searchQuery}</b> wurden keine Ergebnisse gefunden",
   "multiselect.loading": "Lade...",
   "multiselect.noMorePeople": "Eine persönliche Nachricht ist auf 7 Personen begrenzt.",
-  "multiselect.numMembers": "{options}/7 Benutzer",
+  "multiselect.numMembers": "{options}/{maxUsers} Benutzer",
   "multiselect.numPeopleRemaining": "Verwenden Sie die ↑↓ Pfeiltasten auf der Tastatur, ENTER zum Auswählen.",
   "multiselect.new_channel": "Mehr als sieben Personen? Erstellen Sie stattdessen einen Kanal",
   "multiselect.new_channel_create": "Einen Kanal erstellen",
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index f6d9348f1b..c3af3329da 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4412,7 +4412,7 @@
   "multiselect.list.notFound": "No results found matching <b>{searchQuery}</b>",
   "multiselect.loading": "Loading...",
   "multiselect.noMorePeople": "A personal message is limited to 7 people.",
-  "multiselect.numMembers": "{options}/7 users",
+  "multiselect.numMembers": "{options}/{maxUsers} users",
   "multiselect.numPeopleRemaining": "Use the ↑↓ arrows on the keyboard, ENTER to select.",
   "multiselect.new_channel": "More than 7 people? Create a channel instead",
   "multiselect.new_channel_create": "Create a channel",
diff --git a/webapp/channels/src/i18n/es.json b/webapp/channels/src/i18n/es.json
index 734c789c97..60c11beb45 100644
--- a/webapp/channels/src/i18n/es.json
+++ b/webapp/channels/src/i18n/es.json
@@ -3811,7 +3811,7 @@
   "multiselect.list.notFound": "No se encontraron resultados que encajen con **{searchQuery}**",
   "multiselect.loading": "Cargando...",
   "multiselect.noMorePeople": "Un mensaje personal está limitado a 7 personas.",
-  "multiselect.numMembers": "{options}/7 usuarios",
+  "multiselect.numMembers": "{options}/{maxUsers} usuarios",
   "multiselect.numPeopleRemaining": "Usa las flechas ↑↓ del teclado, ENTER para seleccionar.",
   "multiselect.new_channel": "¿Más de 7 personas? Crea un canal",
   "multiselect.new_channel_create": "Crear un canal",
diff --git a/webapp/channels/src/i18n/fr.json b/webapp/channels/src/i18n/fr.json
index 2b99300304..a9bfb116fc 100644
--- a/webapp/channels/src/i18n/fr.json
+++ b/webapp/channels/src/i18n/fr.json
@@ -3752,7 +3752,7 @@
   "multiselect.loading": "Chargement…",
   "multiselect.noMorePeople": "Un message personnel est limité à 7 personnes.",
   "multiselect.numGroupsRemaining": "Utilisez les flèches ↑↓ pour parcourir, ↵ pour sélectionner. Vous pouvez encore ajouter {num, number} {num, plural, one {groupe} other {groupes}}. ",
-  "multiselect.numMembers": "{options}/7 utilisateurs",
+  "multiselect.numMembers": "{options}/{maxUsers} utilisateurs",
   "multiselect.numPeopleRemaining": "Utilisez les flèches ↑↓ du clavier, ENTER pour sélectionner.",
   "multiselect.numRemaining": "Vous pouvez ajouter jusqu'à {max, number} à la fois. Il vous reste {num, number}.",
   "multiselect.placeholder": "Rechercher des membres",
diff --git a/webapp/channels/src/i18n/it.json b/webapp/channels/src/i18n/it.json
index a3b959c6f0..5c1773fca9 100644
--- a/webapp/channels/src/i18n/it.json
+++ b/webapp/channels/src/i18n/it.json
@@ -2908,7 +2908,7 @@
   "multiselect.list.notFound": "Nessun elemento trovato corrispondenti a <b>{searchQuery}</b>",
   "multiselect.loading": "Caricamento...",
   "multiselect.noMorePeople": "Un messaggio personale è limitato a 7 persone.",
-  "multiselect.numMembers": "{options}/7 utenti",
+  "multiselect.numMembers": "{options}/{maxUsers} utenti",
   "multiselect.numPeopleRemaining": "Usa le frecce ↑↓ della tastiera, ENTER per selezionare.",
   "multiselect.new_channel": "Più di 7 persone? Create invece un canale",
   "multiselect.new_channel_create": "Crea un canale",

From e93b55ae433818a60a3d1ce286a25861dc6c3992 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 09:51:38 +0200
Subject: [PATCH 11/32] Fix: move modal in more direct channels and pass it in
 children

Changelog:fixed
---
 .../components/more_direct_channels/index.ts  |   2 +
 .../more_direct_channels/list/list.tsx        | 113 +++++++++---------
 .../more_direct_channels.tsx                  |  46 ++++++-
 .../components/multiselect/multiselect.tsx    |  43 +------
 4 files changed, 107 insertions(+), 97 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/index.ts b/webapp/channels/src/components/more_direct_channels/index.ts
index f5b6d62f6e..498f988a98 100644
--- a/webapp/channels/src/components/more_direct_channels/index.ts
+++ b/webapp/channels/src/components/more_direct_channels/index.ts
@@ -29,6 +29,7 @@ import {
 import {openDirectChannelToUserId, openGroupChannelToUserIds} from 'actions/channel_actions';
 import {loadStatusesForProfilesList, loadProfilesMissingStatus} from 'actions/status_actions';
 import {loadProfilesForGroupChannels} from 'actions/user_actions';
+import {openModal} from 'actions/views/modals';
 import {setModalSearchTerm} from 'actions/views/search';
 
 import type {GlobalState} from 'types/store';
@@ -86,6 +87,7 @@ const makeMapStateToProps = () => {
 function mapDispatchToProps(dispatch: Dispatch) {
     return {
         actions: bindActionCreators({
+            openModal,
             getProfiles,
             getProfilesInTeam,
             loadProfilesMissingStatus,
diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index 36aef73e84..a7eccf8488 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -2,12 +2,13 @@
 // See LICENSE.txt for license information.
 
 import _ from 'lodash';
+import type {ReactNode} from 'react';
 import React, {useCallback, useEffect, useMemo} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 
-import MultiSelect from 'components/multiselect/index';
+import MultiSelect from 'components/multiselect';
 
 import Constants from 'utils/constants';
 
@@ -22,6 +23,7 @@ export const USERS_PER_PAGE = 50;
 
 export type Props = {
     addValue: (value: OptionValue) => void;
+    children: ReactNode;
     currentUserId: string;
     handleDelete: (values: OptionValue[]) => void;
     handlePageChange: (page: number, prevPage: number) => void;
@@ -35,7 +37,6 @@ export type Props = {
     totalCount: number;
     users: UserProfile[];
     emptyGroupChannelsIds: string[];
-    exitParentModal: () => void;
 
     /**
      * An array of values that have been selected by the user in the multiselect.
@@ -103,62 +104,66 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
     }, [props.emptyGroupChannelsIds, props.actions, previousEmptyGroupIds]);
 
     return (
-        <MultiSelect<OptionValue>
-            ref={ref}
-            options={options}
-            optionRenderer={renderOptionValue}
-            intl={intl}
-            selectedItemRef={props.selectedItemRef}
-            values={props.values}
-            valueRenderer={renderValue}
-            ariaLabelRenderer={renderAriaLabel}
-            perPage={USERS_PER_PAGE}
-            handlePageChange={props.handlePageChange}
-            handleInput={props.search}
-            handleDelete={props.handleDelete}
-            handleAdd={props.addValue}
-            handleSubmit={props.handleSubmit}
-            noteText={note}
-            exitParentModal={props.exitParentModal}
-            disableMultiSelectList={true}
-            maxValues={MAX_SELECTABLE_VALUES}
-            changeMessageColor='red'
-            showError={props.values.length === MAX_SELECTABLE_VALUES}
-            numRemainingText={
-                props.values.length === MAX_SELECTABLE_VALUES ? (
+        <>
+            <MultiSelect<OptionValue>
+                ref={ref}
+                options={options}
+                optionRenderer={renderOptionValue}
+                intl={intl}
+                selectedItemRef={props.selectedItemRef}
+                values={props.values}
+                valueRenderer={renderValue}
+                ariaLabelRenderer={renderAriaLabel}
+                perPage={USERS_PER_PAGE}
+                handlePageChange={props.handlePageChange}
+                handleInput={props.search}
+                handleDelete={props.handleDelete}
+                handleAdd={props.addValue}
+                handleSubmit={props.handleSubmit}
+                noteText={note}
+                disableMultiSelectList={true}
+                maxValues={MAX_SELECTABLE_VALUES}
+                changeMessageColor='red'
+                showError={props.values.length === MAX_SELECTABLE_VALUES}
+                numRemainingText={
+                    props.values.length === MAX_SELECTABLE_VALUES ? (
+                        <FormattedMessage
+                            id='multiselect.noMorePeople'
+                            defaultMessage='A personal message is limited to {maxUsers} people.'
+                            values={{
+                                maxUsers: (Constants.MAX_USERS_IN_GM - 1),
+                            }}
+                        />
+                    ) : (
+                        <FormattedMessage
+                            id='multiselect.numPeopleRemaining'
+                            defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
+                        />
+                    )
+                }
+                buttonSubmitText={
                     <FormattedMessage
-                        id='multiselect.noMorePeople'
-                        defaultMessage='A personal message is limited to {maxUsers} people.'
-                        values={{
-                            maxUsers: (Constants.MAX_USERS_IN_GM - 1),
-                        }}
+                        id='multiselect.go'
+                        defaultMessage='Go'
                     />
-                ) : (
+                }
+                buttonSubmitLoadingText={
                     <FormattedMessage
-                        id='multiselect.numPeopleRemaining'
-                        defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
+                        id='multiselect.loading'
+                        defaultMessage='Loading...'
                     />
-                )
-            }
-            buttonSubmitText={
-                <FormattedMessage
-                    id='multiselect.go'
-                    defaultMessage='Go'
-                />
-            }
-            buttonSubmitLoadingText={
-                <FormattedMessage
-                    id='multiselect.loading'
-                    defaultMessage='Loading...'
-                />
-            }
-            submitImmediatelyOn={handleSubmitImmediatelyOn}
-            saving={props.saving}
-            loading={props.loading}
-            users={props.users}
-            totalCount={props.totalCount}
-            placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
-        />
+                }
+                submitImmediatelyOn={handleSubmitImmediatelyOn}
+                saving={props.saving}
+                loading={props.loading}
+                users={props.users}
+                totalCount={props.totalCount}
+                placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
+
+            >
+                {props.children}
+            </MultiSelect>
+        </>
     );
 });
 
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index a93f3d8f70..3f5644a2cb 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -12,9 +12,12 @@ import type {UserProfile} from '@mattermost/types/users';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import type MultiSelect from 'components/multiselect/multiselect';
+import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
 
 import {getHistory} from 'utils/browser_history';
-import Constants from 'utils/constants';
+import Constants, {ModalIdentifiers} from 'utils/constants';
+
+import type {ModalData} from 'types/actions';
 
 import List from './list';
 import {USERS_PER_PAGE} from './list/list';
@@ -61,6 +64,7 @@ export type Props = {
         searchProfiles: (term: string, options: any) => Promise<ActionResult<UserProfile[]>>;
         searchGroupChannels: (term: string) => Promise<ActionResult<Channel[]>>;
         setModalSearchTerm: (term: string) => void;
+        openModal: <P>(modalData: ModalData<P>) => void;
     };
 }
 
@@ -264,10 +268,20 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
         this.setState({values});
     };
 
+    lampIcon = () => Constants.LAMP_ICON;
+
+    openModal = (): void => {
+        this.handleExit();
+        const newModal = {
+            modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
+            dialogType: NewChannelModal,
+        };
+        this.props.actions?.openModal(newModal);
+    };
+
     render() {
         const body = (
             <List
-                exitParentModal={this.handleExit}
                 addValue={this.addValue}
                 currentUserId={this.props.currentUserId}
                 handleDelete={this.handleDelete}
@@ -281,7 +295,33 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
                 totalCount={this.props.totalCount}
                 users={this.props.users}
                 values={this.state.values}
-            />
+            >
+                {
+                    (this.state.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
+                        <>
+                            <div className='create-new-channel'>
+                                <img src={this.lampIcon()}/>
+                                <FormattedMessage
+                                    id='multiselect.new_channel'
+                                    defaultMessage='Create a channel to communicate with more people'
+                                />
+                                <a
+                                    href='#'
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        this.openModal();
+                                    }}
+                                >
+                                    <FormattedMessage
+                                        id='multiselect.new_channel_create'
+                                        defaultMessage='Create a channel'
+                                    />
+                                </a>
+                            </div>
+                        </>
+                    ) : null
+                }
+            </List>
         );
 
         return (
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 18025c00f6..b114e8da09 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -10,12 +10,11 @@ import ReactSelect, {components} from 'react-select';
 import type {getOptionValue} from 'react-select/src/builtins';
 import type {InputActionMeta} from 'react-select/src/types';
 
-import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
 import SaveButton from 'components/save_button';
 import CloseCircleSolidIcon from 'components/widgets/icons/close_circle_solid_icon';
 import Avatar from 'components/widgets/users/avatar';
 
-import {Constants, A11yCustomEventTypes, ModalIdentifiers} from 'utils/constants';
+import {Constants, A11yCustomEventTypes} from 'utils/constants';
 import {imageURLForUser, getDisplayName, localizeMessage} from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
@@ -81,7 +80,7 @@ export type Props<T extends Value> = {
     savingEnabled?: boolean;
     handleCancel?: () => void;
     customNoOptionsMessage?: React.ReactNode;
-    exitParentModal?: () => void;
+    children?: ReactNode;
 }
 
 export type State = {
@@ -118,17 +117,6 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         };
     }
 
-    public openModal = (): void => {
-        if (this.props.exitParentModal) {
-            this.props.exitParentModal();
-        }
-        const newModal = {
-            modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
-            dialogType: NewChannelModal,
-        };
-        this.props.actions?.openModal(newModal);
-    };
-
     public componentDidMount() {
         const inputRef: unknown = this.reactSelectRef.current && this.reactSelectRef.current.select.inputRef;
 
@@ -481,7 +469,6 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                 />
             );
         }
-        const lampIcon = () => Constants.LAMP_ICON;
 
         return (
             <>
@@ -539,31 +526,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             </div>
 
                         </div>
-                        {
-                            (this.props.disableMultiSelectList && this.props.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
-                                <>
-                                    <div className='create-new-channel'>
-                                        <img src={lampIcon()}/>
-                                        <FormattedMessage
-                                            id='multiselect.new_channel'
-                                            defaultMessage='Create a channel to communicate with more people'
-                                        />
-                                        <a
-                                            href='#'
-                                            onClick={(e) => {
-                                                e.preventDefault();
-                                                this.openModal();
-                                            }}
-                                        >
-                                            <FormattedMessage
-                                                id='multiselect.new_channel_create'
-                                                defaultMessage='Create a channel'
-                                            />
-                                        </a>
-                                    </div>
-                                </>
-                            ) : null
-                        }
+                        {this.props.children}
                     </div>
                     {
                         (!this.props.disableMultiSelectList || this.props.values.length <= (Constants.MAX_USERS_IN_GM - 1)) ? (

From 6d25be79d9a6edfda0356182d5d6b6b4366adad2 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 09:55:18 +0200
Subject: [PATCH 12/32] Fix: optional children

---
 .../channels/src/components/more_direct_channels/list/list.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index a7eccf8488..4243ff60d7 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -23,7 +23,7 @@ export const USERS_PER_PAGE = 50;
 
 export type Props = {
     addValue: (value: OptionValue) => void;
-    children: ReactNode;
+    children?: ReactNode;
     currentUserId: string;
     handleDelete: (values: OptionValue[]) => void;
     handlePageChange: (page: number, prevPage: number) => void;

From 410dfb292078fb28f2eacde7c46f7645dde9b90c Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 10:20:59 +0200
Subject: [PATCH 13/32] Fix: snap

---
 .../__snapshots__/more_direct_channels.test.tsx.snap     | 2 --
 .../more_direct_channels/more_direct_channels.test.tsx   | 1 +
 .../multiselect/__snapshots__/multiselect.test.tsx.snap  | 9 ++++++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
index 535cbcaf3c..6073e4686f 100644
--- a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
@@ -56,7 +56,6 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
-      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
@@ -347,7 +346,6 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
-      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx
index 13abb78651..e49d728cc8 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx
@@ -58,6 +58,7 @@ describe('components/MoreDirectChannels', () => {
                     process.nextTick(() => resolve({data: true}));
                 });
             }),
+            openModal: jest.fn().mockResolvedValue({data: true}),
             getProfilesInTeam: jest.fn().mockResolvedValue({data: true}),
             loadProfilesMissingStatus: jest.fn().mockResolvedValue({data: true}),
             searchProfiles: jest.fn().mockResolvedValue({data: true}),
diff --git a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
index 61c34af9a7..86d895b765 100644
--- a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
@@ -128,10 +128,11 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
           style={Object {}}
         >
           <MemoizedFormattedMessage
-            defaultMessage="{options}/7 users"
+            defaultMessage="{options}/{maxUsers} users"
             id="multiselect.numMembers"
             values={
               Object {
+                "maxUsers": 7,
                 "options": 1,
               }
             }
@@ -337,10 +338,11 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
           style={Object {}}
         >
           <MemoizedFormattedMessage
-            defaultMessage="{options}/7 users"
+            defaultMessage="{options}/{maxUsers} users"
             id="multiselect.numMembers"
             values={
               Object {
+                "maxUsers": 7,
                 "options": 1,
               }
             }
@@ -537,10 +539,11 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
           style={Object {}}
         >
           <MemoizedFormattedMessage
-            defaultMessage="{options}/7 users"
+            defaultMessage="{options}/{maxUsers} users"
             id="multiselect.numMembers"
             values={
               Object {
+                "maxUsers": 7,
                 "options": 1,
               }
             }

From 1ac893c77694ea9bd0d2e27970811215345fb704 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 13:51:51 +0200
Subject: [PATCH 14/32] Fix: errors + max user in gm in parent compo

---
 .../more_direct_channels/list/list.tsx        | 110 +++++++++---------
 .../more_direct_channels.tsx                  |  37 +++---
 .../components/multiselect/multiselect.tsx    |  14 +--
 3 files changed, 74 insertions(+), 87 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index 4243ff60d7..5c4c6accc2 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -104,66 +104,64 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
     }, [props.emptyGroupChannelsIds, props.actions, previousEmptyGroupIds]);
 
     return (
-        <>
-            <MultiSelect<OptionValue>
-                ref={ref}
-                options={options}
-                optionRenderer={renderOptionValue}
-                intl={intl}
-                selectedItemRef={props.selectedItemRef}
-                values={props.values}
-                valueRenderer={renderValue}
-                ariaLabelRenderer={renderAriaLabel}
-                perPage={USERS_PER_PAGE}
-                handlePageChange={props.handlePageChange}
-                handleInput={props.search}
-                handleDelete={props.handleDelete}
-                handleAdd={props.addValue}
-                handleSubmit={props.handleSubmit}
-                noteText={note}
-                disableMultiSelectList={true}
-                maxValues={MAX_SELECTABLE_VALUES}
-                changeMessageColor='red'
-                showError={props.values.length === MAX_SELECTABLE_VALUES}
-                numRemainingText={
-                    props.values.length === MAX_SELECTABLE_VALUES ? (
-                        <FormattedMessage
-                            id='multiselect.noMorePeople'
-                            defaultMessage='A personal message is limited to {maxUsers} people.'
-                            values={{
-                                maxUsers: (Constants.MAX_USERS_IN_GM - 1),
-                            }}
-                        />
-                    ) : (
-                        <FormattedMessage
-                            id='multiselect.numPeopleRemaining'
-                            defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
-                        />
-                    )
-                }
-                buttonSubmitText={
+        <MultiSelect<OptionValue>
+            ref={ref}
+            options={options}
+            optionRenderer={renderOptionValue}
+            intl={intl}
+            selectedItemRef={props.selectedItemRef}
+            values={props.values}
+            valueRenderer={renderValue}
+            ariaLabelRenderer={renderAriaLabel}
+            perPage={USERS_PER_PAGE}
+            handlePageChange={props.handlePageChange}
+            handleInput={props.search}
+            handleDelete={props.handleDelete}
+            handleAdd={props.addValue}
+            handleSubmit={props.handleSubmit}
+            noteText={note}
+            disableMultiSelectList={props.values.length > (Constants.MAX_USERS_IN_GM - 1)}
+            maxValues={MAX_SELECTABLE_VALUES}
+            changeMessageColor='red'
+            showError={props.values.length === MAX_SELECTABLE_VALUES}
+            numRemainingText={
+                props.values.length === MAX_SELECTABLE_VALUES ? (
                     <FormattedMessage
-                        id='multiselect.go'
-                        defaultMessage='Go'
+                        id='multiselect.noMorePeople'
+                        defaultMessage='A personal message is limited to {maxUsers} people.'
+                        values={{
+                            maxUsers: (Constants.MAX_USERS_IN_GM - 1),
+                        }}
                     />
-                }
-                buttonSubmitLoadingText={
+                ) : (
                     <FormattedMessage
-                        id='multiselect.loading'
-                        defaultMessage='Loading...'
+                        id='multiselect.numPeopleRemaining'
+                        defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
                     />
-                }
-                submitImmediatelyOn={handleSubmitImmediatelyOn}
-                saving={props.saving}
-                loading={props.loading}
-                users={props.users}
-                totalCount={props.totalCount}
-                placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
-
-            >
-                {props.children}
-            </MultiSelect>
-        </>
+                )
+            }
+            buttonSubmitText={
+                <FormattedMessage
+                    id='multiselect.go'
+                    defaultMessage='Go'
+                />
+            }
+            buttonSubmitLoadingText={
+                <FormattedMessage
+                    id='multiselect.loading'
+                    defaultMessage='Loading...'
+                />
+            }
+            submitImmediatelyOn={handleSubmitImmediatelyOn}
+            saving={props.saving}
+            loading={props.loading}
+            users={props.users}
+            totalCount={props.totalCount}
+            placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
+
+        >
+            {props.children}
+        </MultiSelect>
     );
 });
 
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index 3f5644a2cb..8f69fa5968 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -298,27 +298,26 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
             >
                 {
                     (this.state.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
-                        <>
-                            <div className='create-new-channel'>
-                                <img src={this.lampIcon()}/>
+                        <div className='create-new-channel'>
+                            <img src={this.lampIcon()}/>
+                            <FormattedMessage
+                                id='multiselect.new_channel'
+                                defaultMessage='Create a channel to communicate with more people'
+                            />
+                            <a
+                                href='#'
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    this.openModal();
+                                }}
+                            >
                                 <FormattedMessage
-                                    id='multiselect.new_channel'
-                                    defaultMessage='Create a channel to communicate with more people'
+                                    id='multiselect.new_channel_create'
+                                    defaultMessage='Create a channel'
                                 />
-                                <a
-                                    href='#'
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        this.openModal();
-                                    }}
-                                >
-                                    <FormattedMessage
-                                        id='multiselect.new_channel_create'
-                                        defaultMessage='Create a channel'
-                                    />
-                                </a>
-                            </div>
-                        </>
+                            </a>
+                        </div>
+
                     ) : null
                 }
             </List>
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index b114e8da09..befca9cff5 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -17,8 +17,6 @@ import Avatar from 'components/widgets/users/avatar';
 import {Constants, A11yCustomEventTypes} from 'utils/constants';
 import {imageURLForUser, getDisplayName, localizeMessage} from 'utils/utils';
 
-import type {ModalData} from 'types/actions';
-
 import MultiSelectList from './multiselect_list';
 
 export type Value = {
@@ -31,13 +29,7 @@ export type Value = {
     disabled?: boolean;
 };
 
-type Actions = {
-    openModal: <P>(modalData: ModalData<P>) => void;
-    closeModal: (modalId: string) => void;
-}
-
 export type Props<T extends Value> = {
-    actions?: Actions;
     ariaLabelRenderer: getOptionValue<T>;
     backButtonClick?: () => void;
     backButtonClass?: string;
@@ -472,7 +464,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         return (
             <>
-                <div className={(this.props.disableMultiSelectList && this.props.values.length === Constants.MAX_USERS_IN_GM) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
+                <div className={(this.props.disableMultiSelectList) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -529,9 +521,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                         {this.props.children}
                     </div>
                     {
-                        (!this.props.disableMultiSelectList || this.props.values.length <= (Constants.MAX_USERS_IN_GM - 1)) ? (
-                            multiSelectList
-                        ) : null
+                        this.props.disableMultiSelectList ? null : multiSelectList
                     }
                     <div
                         id='multiSelectMessageNote'

From 03a9ca6219649ea2fccad62d3dbe4b6efa9f0795 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Thu, 18 Jul 2024 11:12:43 +0200
Subject: [PATCH 15/32] Fix: Change message when 7 user in pm

---
 .../more_direct_channels/list/list.tsx        | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index c04182cbb8..c44446e758 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -120,13 +120,20 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
             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,
-                    }}
-                />
+                props.values.length === MAX_SELECTABLE_VALUES ? (
+                    <FormattedMessage
+                        id='multiselect.noMorePeople'
+                        defaultMessage='Un message personnel est limité à 7 personnes.'
+                    />
+                ) : (
+                    <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,
+                        }}
+                    />
+                )
             }
             buttonSubmitText={
                 <FormattedMessage

From 1425a89b4760840cdc0735cd19341fec38b67707 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 11:24:39 +0200
Subject: [PATCH 16/32] Feat: modal for max user in pm

---
 .../more_direct_channels/list/list.tsx        | 14 +--
 .../more_direct_channels.tsx                  |  1 +
 .../src/components/multiselect/index.ts       | 21 +++++
 .../components/multiselect/multiselect.tsx    | 93 +++++++++++++++----
 webapp/channels/src/i18n/de.json              |  7 +-
 webapp/channels/src/i18n/en.json              |  7 +-
 webapp/channels/src/i18n/es.json              |  7 +-
 webapp/channels/src/i18n/fr.json              |  7 +-
 webapp/channels/src/i18n/it.json              |  7 +-
 webapp/channels/src/images/icons/lamp.svg     | 15 +++
 .../channels/src/sass/components/_modal.scss  | 14 +++
 .../src/sass/components/_react-select.scss    |  3 +
 webapp/channels/src/utils/constants.tsx       |  2 +
 13 files changed, 163 insertions(+), 35 deletions(-)
 create mode 100644 webapp/channels/src/components/multiselect/index.ts
 create mode 100644 webapp/channels/src/images/icons/lamp.svg

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index c44446e758..8a8f68634f 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -7,7 +7,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 
-import MultiSelect from 'components/multiselect/multiselect';
+import MultiSelect from 'components/multiselect/index';
 
 import Constants from 'utils/constants';
 
@@ -35,6 +35,7 @@ export type Props = {
     totalCount: number;
     users: UserProfile[];
     emptyGroupChannelsIds: string[];
+    exitParentModal: () => void;
 
     /**
      * An array of values that have been selected by the user in the multiselect.
@@ -118,20 +119,21 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
             handleAdd={props.addValue}
             handleSubmit={props.handleSubmit}
             noteText={note}
+            exitParentModal={props.exitParentModal}
+            disableMultiSelectList={true}
             maxValues={MAX_SELECTABLE_VALUES}
+            changeMessageColor='red'
+            showError={props.values.length === MAX_SELECTABLE_VALUES}
             numRemainingText={
                 props.values.length === MAX_SELECTABLE_VALUES ? (
                     <FormattedMessage
                         id='multiselect.noMorePeople'
-                        defaultMessage='Un message personnel est limité à 7 personnes.'
+                        defaultMessage='A personal message is limited to 7 people.'
                     />
                 ) : (
                     <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,
-                        }}
+                        defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
                     />
                 )
             }
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index ceee0a6f4a..a93f3d8f70 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -267,6 +267,7 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
     render() {
         const body = (
             <List
+                exitParentModal={this.handleExit}
                 addValue={this.addValue}
                 currentUserId={this.props.currentUserId}
                 handleDelete={this.handleDelete}
diff --git a/webapp/channels/src/components/multiselect/index.ts b/webapp/channels/src/components/multiselect/index.ts
new file mode 100644
index 0000000000..54d0ad24f7
--- /dev/null
+++ b/webapp/channels/src/components/multiselect/index.ts
@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import type {Dispatch} from 'redux';
+
+import {openModal, closeModal} from 'actions/views/modals';
+
+import MultiSelect from './multiselect';
+
+function mapDispatchToProps(dispatch: Dispatch) {
+    return {
+        actions: bindActionCreators({
+            openModal,
+            closeModal,
+        }, dispatch),
+    };
+}
+
+export default connect(null, mapDispatchToProps)(MultiSelect);
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 5fc694a025..343ffc7014 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -10,13 +10,16 @@ import ReactSelect, {components} from 'react-select';
 import type {getOptionValue} from 'react-select/src/builtins';
 import type {InputActionMeta} from 'react-select/src/types';
 
+import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
 import SaveButton from 'components/save_button';
 import CloseCircleSolidIcon from 'components/widgets/icons/close_circle_solid_icon';
 import Avatar from 'components/widgets/users/avatar';
 
-import {Constants, A11yCustomEventTypes} from 'utils/constants';
+import {Constants, A11yCustomEventTypes, ModalIdentifiers} from 'utils/constants';
 import {imageURLForUser, getDisplayName, localizeMessage} from 'utils/utils';
 
+import type {ModalData} from 'types/actions';
+
 import MultiSelectList from './multiselect_list';
 
 export type Value = {
@@ -29,7 +32,13 @@ export type Value = {
     disabled?: boolean;
 };
 
+type Actions = {
+    openModal: <P>(modalData: ModalData<P>) => void;
+    closeModal: (modalId: string) => void;
+}
+
 export type Props<T extends Value> = {
+    actions: Actions;
     ariaLabelRenderer: getOptionValue<T>;
     backButtonClick?: () => void;
     backButtonClass?: string;
@@ -59,16 +68,20 @@ export type Props<T extends Value> = {
     perPage: number;
     placeholderText?: string;
     saving?: boolean;
+    showError?: boolean;
+    changeMessageColor: string;
     submitImmediatelyOn?: (value: T) => boolean;
     totalCount?: number;
     users?: unknown[];
     valueWithImage: boolean;
+    disableMultiSelectList?: boolean;
     valueRenderer?: (props: {data: T}) => any;
     values: T[];
     focusOnLoad?: boolean;
     savingEnabled?: boolean;
     handleCancel?: () => void;
     customNoOptionsMessage?: React.ReactNode;
+    exitParentModal: () => void;
 }
 
 export type State = {
@@ -91,6 +104,8 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         focusOnLoad: true,
         savingEnabled: true,
         showInputByDefault: false,
+        changeMessageColor: false,
+        disableMultiSelectList: false,
     };
 
     public constructor(props: Props<T>) {
@@ -103,6 +118,15 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         };
     }
 
+    public openModal = (): void => {
+        this.props.exitParentModal();
+        const newModal = {
+            modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
+            dialogType: NewChannelModal,
+        };
+        this.props.actions.openModal(newModal);
+    };
+
     public componentDidMount() {
         const inputRef: unknown = this.reactSelectRef.current && this.reactSelectRef.current.select.inputRef;
 
@@ -447,18 +471,18 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
             memberCount = (
                 <FormattedMessage
                     id='multiselect.numMembers'
-                    defaultMessage='{memberOptions, number} of {totalCount, number} members'
+                    defaultMessage='{options}/7 users'
                     values={{
-                        memberOptions: optionsToDisplay.length,
-                        totalCount: this.props.totalCount,
+                        options: this.props.values.length,
                     }}
                 />
             );
         }
+        const lampIcon = () => Constants.LAMP_ICON;
 
         return (
             <>
-                <div className='filtered-user-list'>
+                <div className={(this.props.disableMultiSelectList && this.props.values.length === 7) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -466,7 +490,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                                 ref={this.reactSelectRef as React.RefObject<any>} // type of ref on @types/react-select is outdated
                                 isMulti={true}
                                 options={this.props.options}
-                                styles={styles}
+                                styles={styles(this.props.showError)}
                                 components={{
                                     Menu: nullComponent,
                                     IndicatorsContainer: nullComponent,
@@ -487,7 +511,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                                 getOptionLabel={this.props.ariaLabelRenderer}
                                 aria-label={this.props.placeholderText}
                                 className={this.state.a11yActive ? 'multi-select__focused' : ''}
-                                classNamePrefix='react-select-auto react-select'
+                                classNamePrefix={this.props.showError ? 'react-select-auto react-select error' : 'react-select-auto react-select'}
                             />
                             {this.props.saveButtonPosition === 'top' &&
                                 <SaveButton
@@ -504,18 +528,42 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             id='multiSelectHelpMemberInfo'
                             className='multi-select__help'
                         >
-                            {numRemainingText}
+                            <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
+                                {numRemainingText}
+                            </div>
+
                             {memberCount}
                         </div>
                     </div>
-                    {multiSelectList}
+                    {this.props.disableMultiSelectList && this.props.values.length === 7 ? (
+                        <div className='create-new-channel'>
+                            <img src={lampIcon()}/>
+                            <FormattedMessage
+                                id='multiselect.new_channel'
+                                defaultMessage='Create a channel to communicate with more people'
+                            />
+                            <a
+                                href='#'
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    this.openModal();
+                                }}
+                            >
+                                <FormattedMessage
+                                    id='multiselect.new_channel_create'
+                                    defaultMessage='Create a channel'
+                                />
+                            </a>
+                        </div>
+                    ) : (multiSelectList)
+                    }
                     <div
                         id='multiSelectMessageNote'
                         className='multi-select__help'
                     >
                         {noteTextContainer}
                     </div>
-                    {this.props.saveButtonPosition === 'top' &&
+                    {this.props.saveButtonPosition === 'top' && !this.props.disableMultiSelectList &&
                         <div className='filter-controls'>
                             {previousButton}
                             {nextButton}
@@ -572,14 +620,21 @@ const paddedComponent = (WrappedComponent: any) => {
     };
 };
 
-const styles = {
-    container: () => {
-        return {
-            display: 'flex',
-            overflow: 'hidden',
-            flex: 'auto',
-        };
-    },
-};
+const styles = (showError: boolean | undefined) => ({
+    container: (base: React.CSSProperties) => ({
+        ...base,
+        display: 'flex',
+        overflow: 'hidden',
+        flex: 'auto',
+    }),
+    control: (base: React.CSSProperties) => ({
+        ...base,
+        borderColor: 'red',
+        boxShadow: showError ? '0 0 0 1px red' : 'none',
+        '&:hover': {
+            borderColor: 'red',
+        },
+    }),
+});
 
 export default MultiSelect;
diff --git a/webapp/channels/src/i18n/de.json b/webapp/channels/src/i18n/de.json
index 3249ea3def..b2bf130215 100644
--- a/webapp/channels/src/i18n/de.json
+++ b/webapp/channels/src/i18n/de.json
@@ -4437,10 +4437,13 @@
   "multiselect.go": "Los",
   "multiselect.list.notFound": "Für die Suchanfrage <b>{searchQuery}</b> wurden keine Ergebnisse gefunden",
   "multiselect.loading": "Lade...",
+  "multiselect.noMorePeople": "Eine persönliche Nachricht ist auf 7 Personen begrenzt.",
+  "multiselect.numMembers": "{options}/7 Benutzer",
+  "multiselect.numPeopleRemaining": "Verwenden Sie die ↑↓ Pfeiltasten auf der Tastatur, ENTER zum Auswählen.",
+  "multiselect.new_channel": "Erstellen Sie einen Kanal, um mit mehr Personen zu kommunizieren",
+  "multiselect.new_channel_create": "Einen Kanal erstellen",
   "multiselect.maxGroupMembers": "Es können nicht mehr als 256 Mitglieder auf einmal zu einer Gruppe hinzugefügt werden.",
   "multiselect.numGroupsRemaining": "Verwende ↑↓ zum Navigieren, ↵ zur Auswahl. Du kannst {num, number} weitere {num, plural, one {Gruppe} other {Gruppen}} hinzufügen. ",
-  "multiselect.numMembers": "{memberOptions, number} von {totalCount, number} Benutzern",
-  "multiselect.numPeopleRemaining": "Verwende ↑↓ zum Navigieren, ↵ zur Auswahl. Du kannst {num, number} weitere {num, plural, one {Person} other {Personen}} hinzufügen. ",
   "multiselect.numRemaining": "Es können maximal {max, number} gleichzeitig hinzugefügt werden. Es können {num, number} weitere hinzugefügt werden.",
   "multiselect.placeholder": "Mitglieder suchen",
   "multiselect.placeholder.peopleOrGroups": "Suche nach Personen oder Gruppen",
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index f93c5ed47f..f6d1f60bdd 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4411,10 +4411,13 @@
   "multiselect.go": "Go",
   "multiselect.list.notFound": "No results found matching <b>{searchQuery}</b>",
   "multiselect.loading": "Loading...",
+  "multiselect.noMorePeople": "A personal message is limited to 7 people.",
+  "multiselect.numMembers": "{options}/7 users",
+  "multiselect.numPeopleRemaining": "Use the ↑↓ arrows on the keyboard, ENTER to select.",
+  "multiselect.new_channel": "Create a channel to communicate with more people",
+  "multiselect.new_channel_create": "Create a channel",
   "multiselect.maxGroupMembers": "No more than 256 members can be added to a group at once.",
   "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}}. ",
   "multiselect.numRemaining": "Up to {max, number} can be added at a time. You have {num, number} remaining.",
   "multiselect.placeholder": "Search for people",
   "multiselect.placeholder.peopleOrGroups": "Search for people or groups",
diff --git a/webapp/channels/src/i18n/es.json b/webapp/channels/src/i18n/es.json
index c7c062b383..f149d2a394 100644
--- a/webapp/channels/src/i18n/es.json
+++ b/webapp/channels/src/i18n/es.json
@@ -3810,9 +3810,12 @@
   "multiselect.go": "Ir",
   "multiselect.list.notFound": "No se encontraron resultados que encajen con **{searchQuery}**",
   "multiselect.loading": "Cargando...",
+  "multiselect.noMorePeople": "Un mensaje personal está limitado a 7 personas.",
+  "multiselect.numMembers": "{options}/7 usuarios",
+  "multiselect.numPeopleRemaining": "Usa las flechas ↑↓ del teclado, ENTER para seleccionar.",
+  "multiselect.new_channel": "Crear un canal para comunicarse con más personas",
+  "multiselect.new_channel_create": "Crear un canal",
   "multiselect.numGroupsRemaining": "Utiliza ↑↓ para navegar, ↵ para seleccionar. Puedes agregar {num, number} {num, plural, one {grupo} other {grupos}} más. ",
-  "multiselect.numMembers": "{memberOptions, number} de {totalCount, number} miembros",
-  "multiselect.numPeopleRemaining": "Utiliza ↑↓ para navegar, ↵ para seleccionar. Puedes agregar {num, number} {num, plural, one {persona} other {personas}} más. ",
   "multiselect.numRemaining": "Se puede añadir hasta {max, number} a la vez. Te quedan {num, number}.",
   "multiselect.placeholder": "Buscar personas",
   "multiselect.saveDetailsButton": "Guardar Detalles",
diff --git a/webapp/channels/src/i18n/fr.json b/webapp/channels/src/i18n/fr.json
index 0f737d5d5f..1db529ec9d 100644
--- a/webapp/channels/src/i18n/fr.json
+++ b/webapp/channels/src/i18n/fr.json
@@ -3750,12 +3750,15 @@
   "multiselect.go": "Aller à",
   "multiselect.list.notFound": "Aucun résultat trouvé pour <b>{searchQuery}</b>",
   "multiselect.loading": "Chargement…",
+  "multiselect.noMorePeople": "Un message personnel est limité à 7 personnes.",
   "multiselect.numGroupsRemaining": "Utilisez les flèches ↑↓ pour parcourir, ↵ pour sélectionner. Vous pouvez encore ajouter {num, number} {num, plural, one {groupe} other {groupes}}. ",
-  "multiselect.numMembers": "{memberOptions, number} de {totalCount, number} membres",
-  "multiselect.numPeopleRemaining": "Utilisez les flèches ↑↓ pour parcourir, ↵ pour sélectionner. Vous pouvez encore ajouter {num, number} {num, plural, one {personne} other {personnes}}. ",
+  "multiselect.numMembers": "{options}/7 utilisateurs",
+  "multiselect.numPeopleRemaining": "Utilisez les flèches ↑↓ du clavier, ENTER pour sélectionner.",
   "multiselect.numRemaining": "Vous pouvez ajouter jusqu'à {max, number} à la fois. Il vous reste {num, number}.",
   "multiselect.placeholder": "Rechercher des membres",
   "multiselect.placeholder.peopleOrGroups": "Rechercher des personnes ou des groupes",
+  "multiselect.new_channel": "Créer un canal pour échanger avec plus de personnes",
+  "multiselect.new_channel_create": "Créer un canal",
   "multiselect.saveDetailsButton": "Enregistrer les détails",
   "multiselect.savingDetailsButton": "Enregistrement...",
   "multiselect.selectChannels": "Utilisez ↑↓ pour parcourir, ↵ pour sélectionner.",
diff --git a/webapp/channels/src/i18n/it.json b/webapp/channels/src/i18n/it.json
index 113cd4ebe9..73d58642ab 100644
--- a/webapp/channels/src/i18n/it.json
+++ b/webapp/channels/src/i18n/it.json
@@ -2908,9 +2908,12 @@
   "multiselect.go": "Vai",
   "multiselect.list.notFound": "Nessun elemento trovato corrispondenti a <b>{searchQuery}</b>",
   "multiselect.loading": "Caricamento...",
+  "multiselect.noMorePeople": "Un messaggio personale è limitato a 7 persone.",
+  "multiselect.numMembers": "{options}/7 utenti",
+  "multiselect.numPeopleRemaining": "Usa le frecce ↑↓ della tastiera, ENTER per selezionare.",
+  "multiselect.new_channel": "Crea un canale per comunicare con più persone",
+  "multiselect.new_channel_create": "Crea un canale",
   "multiselect.numGroupsRemaining": "Usa ↑↓ per navigare, ↵ per scegliere. Puoi aggiungere {num, number} {num, plural, one {group} other {groups}}. ",
-  "multiselect.numMembers": "{memberOptions, number} di {totalCount, number} membri",
-  "multiselect.numPeopleRemaining": "Usa ↑↓ per navigare, ↵ per scegliere. Puoi aggiungere {num, number} più {num, plural, one {person} altre {people}}. ",
   "multiselect.numRemaining": "Si possono ancora aggiungere {num, number}",
   "multiselect.placeholder": "Cercare ed aggiungere membri",
   "multiselect.selectChannels": "Usa ↑↓ per navigare, ↵ per selezionare.",
diff --git a/webapp/channels/src/images/icons/lamp.svg b/webapp/channels/src/images/icons/lamp.svg
new file mode 100644
index 0000000000..8d7686b196
--- /dev/null
+++ b/webapp/channels/src/images/icons/lamp.svg
@@ -0,0 +1,15 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7775_24321)">
+<path d="M8 2C8.27614 2 8.5 2.22386 8.5 2.5V3.5C8.5 3.77614 8.27614 4 8 4C7.72386 4 7.5 3.77614 7.5 3.5V2.5C7.5 2.22386 7.72386 2 8 2Z" fill="#E91E63"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 13.831C4.77045 13.4212 4.15668 12.8306 3.71883 12.1143C3.23744 11.3268 2.98829 10.4192 3.00007 9.49628L3.0001 9.49409C3.0227 8.17716 3.55571 6.92045 4.48678 5.98883C5.41785 5.05721 6.67425 4.52346 7.99116 4.50008C7.99707 4.49997 8.00299 4.49997 8.0089 4.50008C9.32531 4.52343 10.5813 5.05677 11.5123 5.98776C12.4433 6.91875 12.9766 8.17472 13 9.49113L13 9.49332C13.0123 10.4168 12.7634 11.3249 12.282 12.1131C11.8441 12.83 11.23 13.421 10.5 13.8311V16.5C10.5 16.8978 10.342 17.2794 10.0607 17.5607C9.77936 17.842 9.39783 18 9 18H7C6.60217 18 6.22064 17.842 5.93934 17.5607C5.65804 17.2794 5.5 16.8978 5.5 16.5V13.831ZM6.5 14V15H9.5V14H6.5ZM6.5 16V16.5C6.5 16.6326 6.55268 16.7598 6.64645 16.8536C6.74022 16.9473 6.86739 17 7 17H9C9.13261 17 9.25978 16.9473 9.35355 16.8536C9.44732 16.7598 9.5 16.6326 9.5 16.5V16H6.5ZM5.19409 6.69572C5.93986 5.94951 6.94549 5.5211 8.00004 5.50009C9.05418 5.52108 10.0595 5.94917 10.8052 6.69487C11.5527 7.44239 11.981 8.45076 12.0001 9.50771C12.0097 10.2424 11.8116 10.9648 11.4286 11.5918C11.0653 12.1866 10.5495 12.6726 9.93569 13H6.06438C5.45091 12.6728 4.93539 12.1872 4.57207 11.5928C4.18911 10.9663 3.99081 10.2444 3.99998 9.51014C4.01841 8.45275 4.4465 7.44377 5.19409 6.69572Z" fill="#E91E63"/>
+<path d="M1 9C0.723858 9 0.5 9.22386 0.5 9.5C0.5 9.77614 0.723858 10 1 10H2C2.27614 10 2.5 9.77614 2.5 9.5C2.5 9.22386 2.27614 9 2 9H1Z" fill="#E91E63"/>
+<path d="M2.13947 4.15356C2.3308 3.95445 2.64732 3.94814 2.84644 4.13947L3.57977 4.84414C3.77889 5.03547 3.7852 5.35199 3.59386 5.5511C3.40253 5.75022 3.08601 5.75653 2.8869 5.5652L2.15356 4.86053C1.95445 4.6692 1.94814 4.35268 2.13947 4.15356Z" fill="#E91E63"/>
+<path d="M14 9C13.7239 9 13.5 9.22386 13.5 9.5C13.5 9.77614 13.7239 10 14 10H15C15.2761 10 15.5 9.77614 15.5 9.5C15.5 9.22386 15.2761 9 15 9H14Z" fill="#E91E63"/>
+<path d="M13.8605 4.15356C14.0518 4.35268 14.0455 4.6692 13.8464 4.86053L13.113 5.5652C12.9139 5.75653 12.5974 5.75022 12.4061 5.5511C12.2147 5.35199 12.2211 5.03547 12.4202 4.84414L13.1535 4.13947C13.3526 3.94814 13.6691 3.95445 13.8605 4.15356Z" fill="#E91E63"/>
+</g>
+<defs>
+<clipPath id="clip0_7775_24321">
+<rect width="16" height="16" fill="white" transform="translate(0 2)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 75632bc509..5ea6c96c7a 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -980,6 +980,10 @@
         flex: 1 1 auto;
     }
 
+    &.disable-list {
+        height: unset;
+    }
+
     .multi-select__wrapper {
         display: flex;
         height: 1px;
@@ -1040,6 +1044,16 @@
     }
 }
 
+.create-new-channel {
+    height: 60px;
+    margin: 20px;
+    display: flex;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #f2f2f2;
+}
+
 .team-selector-modal,
 .channel-selector-modal {
     .more-modal__row {
diff --git a/webapp/channels/src/sass/components/_react-select.scss b/webapp/channels/src/sass/components/_react-select.scss
index 6a9b1561c4..f53034659e 100644
--- a/webapp/channels/src/sass/components/_react-select.scss
+++ b/webapp/channels/src/sass/components/_react-select.scss
@@ -1,4 +1,7 @@
 .react-select {
+    &.error {
+        border-color: var(--danger-color) !important;
+    }
     .a11y--focused {
         box-shadow: none;
     }
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 3cbaa36f84..bde98db565 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -21,6 +21,7 @@ import audioIcon from 'images/icons/audio.svg';
 import codeIcon from 'images/icons/code.svg';
 import excelIcon from 'images/icons/excel.svg';
 import genericIcon from 'images/icons/generic.svg';
+import lampIcon from 'images/icons/lamp.svg';
 import patchIcon from 'images/icons/patch.svg';
 import pdfIcon from 'images/icons/pdf.svg';
 import pptIcon from 'images/icons/ppt.svg';
@@ -2122,6 +2123,7 @@ export const Constants = {
     RECENT_EMOJI_KEY: 'recentEmojis',
     DEFAULT_WEBHOOK_LOGO: logoWebhook,
     TRANSCRIPT_ICON: transcriptIcon,
+    LAMP_ICON: lampIcon,
     MHPNS_US: 'https://push.mattermost.com',
     MHPNS_DE: 'https://hpns-de.mattermost.com',
     MTPNS: 'https://push-test.mattermost.com',

From a13805012459fff984a32ed9aa93853d88705765 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 12:03:21 +0200
Subject: [PATCH 17/32] Fix: test

---
 .../src/components/multiselect/multiselect.tsx       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 343ffc7014..fd5d8008f9 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -38,7 +38,7 @@ type Actions = {
 }
 
 export type Props<T extends Value> = {
-    actions: Actions;
+    actions?: Actions;
     ariaLabelRenderer: getOptionValue<T>;
     backButtonClick?: () => void;
     backButtonClass?: string;
@@ -69,7 +69,7 @@ export type Props<T extends Value> = {
     placeholderText?: string;
     saving?: boolean;
     showError?: boolean;
-    changeMessageColor: string;
+    changeMessageColor?: string;
     submitImmediatelyOn?: (value: T) => boolean;
     totalCount?: number;
     users?: unknown[];
@@ -81,7 +81,7 @@ export type Props<T extends Value> = {
     savingEnabled?: boolean;
     handleCancel?: () => void;
     customNoOptionsMessage?: React.ReactNode;
-    exitParentModal: () => void;
+    exitParentModal?: () => void;
 }
 
 export type State = {
@@ -119,12 +119,14 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
     }
 
     public openModal = (): void => {
-        this.props.exitParentModal();
+        if (this.props.exitParentModal) {
+            this.props.exitParentModal();
+        }
         const newModal = {
             modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
             dialogType: NewChannelModal,
         };
-        this.props.actions.openModal(newModal);
+        this.props.actions?.openModal(newModal);
     };
 
     public componentDidMount() {

From 490b1c37db5e1987cfa5f1bc115123de6b0704f1 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 12:52:04 +0200
Subject: [PATCH 18/32] Fix: Modal css, tests, snap

---
 .../__snapshots__/channel_invite_modal.test.tsx.snap       | 6 ++++++
 .../__snapshots__/more_direct_channels.test.tsx.snap       | 2 ++
 webapp/channels/src/components/multiselect/multiselect.tsx | 7 ++++---
 webapp/channels/src/sass/components/_modal.scss            | 4 ++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
index 7111e7e536..985d0a6381 100644
--- a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
@@ -66,7 +66,9 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        changeMessageColor=""
         customNoOptionsMessage={null}
+        disableMultiSelectList={false}
         focusOnLoad={true}
         handleAdd={[Function]}
         handleCancel={[Function]}
@@ -205,7 +207,9 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        changeMessageColor=""
         customNoOptionsMessage={null}
+        disableMultiSelectList={false}
         focusOnLoad={true}
         handleAdd={[Function]}
         handleCancel={[Function]}
@@ -366,7 +370,9 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
         ariaLabelRenderer={[Function]}
         backButtonClass="btn-tertiary tertiary-button"
         backButtonClick={[Function]}
+        changeMessageColor=""
         customNoOptionsMessage={null}
+        disableMultiSelectList={false}
         focusOnLoad={true}
         handleAdd={[Function]}
         handleCancel={[Function]}
diff --git a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
index 6073e4686f..535cbcaf3c 100644
--- a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
@@ -56,6 +56,7 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
+      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
@@ -346,6 +347,7 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
+      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index fd5d8008f9..0cc9b1fc42 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -104,7 +104,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         focusOnLoad: true,
         savingEnabled: true,
         showInputByDefault: false,
-        changeMessageColor: false,
+        changeMessageColor: '',
         disableMultiSelectList: false,
     };
 
@@ -533,8 +533,9 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
                                 {numRemainingText}
                             </div>
-
-                            {memberCount}
+                            <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
+                                {memberCount}
+                            </div>
                         </div>
                     </div>
                     {this.props.disableMultiSelectList && this.props.values.length === 7 ? (
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 5ea6c96c7a..1e6548a0ba 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -1046,9 +1046,9 @@
 
 .create-new-channel {
     height: 60px;
-    margin: 20px;
+    margin: 27px;
     display: flex;
-    border-radius: 4px;
+    border-radius: 8px;
     align-items: center;
     justify-content: space-around;
     background-color: #f2f2f2;

From a8b8e0a4b824515d2d4c313efd58b508d84e5598 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 13:13:06 +0200
Subject: [PATCH 19/32] Fix: snap

---
 .../add_groups_to_channel_modal.test.tsx.snap |  2 +
 .../add_groups_to_channel_modal.tsx           |  3 +-
 ...dd_user_to_group_multiselect.test.tsx.snap |  6 ++
 .../add_users_to_team_modal.test.tsx.snap     |  4 +
 .../add_users_to_role_modal.test.tsx.snap     | 12 +++
 .../channel_selector_modal.test.tsx.snap      |  4 +
 .../__snapshots__/multiselect.test.tsx.snap   | 75 ++++++++++++-------
 7 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
index a95bd53ae8..996646bfa4 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`components/AddGroupsToChannelModal should match snapshot 1`] = `
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
index a6bfce7679..41751bce23 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
@@ -15,10 +15,11 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 import MultiSelect from 'components/multiselect/multiselect';
 import type {Value} from 'components/multiselect/multiselect';
 
-import groupsAvatar from 'images/groups-avatar.png';
 import Constants from 'utils/constants';
 import {localizeMessage} from 'utils/utils';
 
+import groupsAvatar from 'images/groups-avatar.png';
+
 const GROUPS_PER_PAGE = 50;
 const MAX_SELECTABLE_VALUES = 10;
 
diff --git a/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap b/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
index 679a617e2b..321d635248 100644
--- a/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap
@@ -5,6 +5,8 @@ exports[`component/add_user_to_group_multiselect should match snapshot with diff
   ariaLabelRenderer={[Function]}
   buttonSubmitLoadingText="Updating..."
   buttonSubmitText="Update Group"
+  changeMessageColor=""
+  disableMultiSelectList={false}
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
@@ -90,6 +92,8 @@ exports[`component/add_user_to_group_multiselect should match snapshot with prof
   ariaLabelRenderer={[Function]}
   buttonSubmitLoadingText="Creating..."
   buttonSubmitText="Create Group"
+  changeMessageColor=""
+  disableMultiSelectList={false}
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
@@ -175,6 +179,8 @@ exports[`component/add_user_to_group_multiselect should match snapshot without a
   ariaLabelRenderer={[Function]}
   buttonSubmitLoadingText="Creating..."
   buttonSubmitText="Create Group"
+  changeMessageColor=""
+  disableMultiSelectList={false}
   focusOnLoad={false}
   handleAdd={[Function]}
   handleDelete={[Function]}
diff --git a/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
index 24f15d8c80..4ee84c49c5 100644
--- a/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -286,6 +288,8 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
index ce6dd9e4ea..7378fab39d 100644
--- a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/__snapshots__/add_users_to_role_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`admin_console/add_users_to_role_modal search should not include bot use
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -240,6 +242,8 @@ exports[`admin_console/add_users_to_role_modal should exclude user 1`] = `
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -377,6 +381,8 @@ exports[`admin_console/add_users_to_role_modal should have single passed value 1
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -558,6 +564,8 @@ exports[`admin_console/add_users_to_role_modal should include additional user 1`
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -780,6 +788,8 @@ exports[`admin_console/add_users_to_role_modal should include additional user 2`
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -1002,6 +1012,8 @@ exports[`admin_console/add_users_to_role_modal should not include bot user 1`] =
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
index 00d6a640a3..02b2d485e9 100644
--- a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
@@ -53,6 +53,8 @@ exports[`components/ChannelSelectorModal exclude already selected 1`] = `
     <MultiSelect
       ariaLabelRenderer={[Function]}
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
@@ -204,6 +206,8 @@ exports[`components/ChannelSelectorModal should match snapshot 1`] = `
     <MultiSelect
       ariaLabelRenderer={[Function]}
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}
diff --git a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
index ea47aa545e..61c34af9a7 100644
--- a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
@@ -83,6 +83,7 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
           styles={
             Object {
               "container": [Function],
+              "control": [Function],
             }
           }
           value={
@@ -120,16 +121,22 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
       >
-        <MemoizedFormattedMessage
-          defaultMessage="{memberOptions, number} of {totalCount, number} members"
-          id="multiselect.numMembers"
-          values={
-            Object {
-              "memberOptions": 5,
-              "totalCount": 8,
-            }
-          }
+        <div
+          style={Object {}}
         />
+        <div
+          style={Object {}}
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="{options}/7 users"
+            id="multiselect.numMembers"
+            values={
+              Object {
+                "options": 1,
+              }
+            }
+          />
+        </div>
       </div>
     </div>
     <MultiSelectList
@@ -285,6 +292,7 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
           styles={
             Object {
               "container": [Function],
+              "control": [Function],
             }
           }
           value={
@@ -322,16 +330,22 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
       >
-        <MemoizedFormattedMessage
-          defaultMessage="{memberOptions, number} of {totalCount, number} members"
-          id="multiselect.numMembers"
-          values={
-            Object {
-              "memberOptions": 5,
-              "totalCount": 8,
-            }
-          }
+        <div
+          style={Object {}}
         />
+        <div
+          style={Object {}}
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="{options}/7 users"
+            id="multiselect.numMembers"
+            values={
+              Object {
+                "options": 1,
+              }
+            }
+          />
+        </div>
       </div>
     </div>
     <MultiSelectList
@@ -478,6 +492,7 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
           styles={
             Object {
               "container": [Function],
+              "control": [Function],
             }
           }
           value={
@@ -515,16 +530,22 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
       >
-        <MemoizedFormattedMessage
-          defaultMessage="{memberOptions, number} of {totalCount, number} members"
-          id="multiselect.numMembers"
-          values={
-            Object {
-              "memberOptions": 3,
-              "totalCount": 8,
-            }
-          }
+        <div
+          style={Object {}}
         />
+        <div
+          style={Object {}}
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="{options}/7 users"
+            id="multiselect.numMembers"
+            values={
+              Object {
+                "options": 1,
+              }
+            }
+          />
+        </div>
       </div>
     </div>
     <MultiSelectList

From 8574a4e1a8a95cc8ede806fadd1d60d99e52698d Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 19 Jul 2024 13:27:41 +0200
Subject: [PATCH 20/32] Fix: snap

---
 .../__snapshots__/add_groups_to_team_modal.test.tsx.snap        | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
index 81eefd6f49..f2ab772eea 100644
--- a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
@@ -59,6 +59,8 @@ exports[`components/AddGroupsToTeamModal should match snapshot 1`] = `
       ariaLabelRenderer={[Function]}
       buttonSubmitLoadingText="Adding..."
       buttonSubmitText="Add"
+      changeMessageColor=""
+      disableMultiSelectList={false}
       focusOnLoad={true}
       handleAdd={[Function]}
       handleDelete={[Function]}

From 7bb296b6e1efa99f6a7fe0355cc65019978cab02 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Tue, 23 Jul 2024 09:33:22 +0200
Subject: [PATCH 21/32] Fix: show modal when 7 user in pm

Changelog: fixed
---
 .../more_direct_channels/list/list.tsx        |  2 +-
 .../components/multiselect/multiselect.tsx    | 48 ++++++++++---------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index 8a8f68634f..f0ec2dd211 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -17,7 +17,7 @@ import ListItem from '../list_item';
 import type {Option, OptionValue} from '../types';
 import {optionValue} from '../types';
 
-const MAX_SELECTABLE_VALUES = Constants.MAX_USERS_IN_GM - 1;
+const MAX_SELECTABLE_VALUES = Constants.MAX_USERS_IN_GM;
 export const USERS_PER_PAGE = 50;
 
 export type Props = {
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 0cc9b1fc42..8c99caf3ed 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -484,7 +484,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         return (
             <>
-                <div className={(this.props.disableMultiSelectList && this.props.values.length === 7) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
+                <div className={(this.props.disableMultiSelectList && this.props.values.length === 8) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -538,27 +538,31 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             </div>
                         </div>
                     </div>
-                    {this.props.disableMultiSelectList && this.props.values.length === 7 ? (
-                        <div className='create-new-channel'>
-                            <img src={lampIcon()}/>
-                            <FormattedMessage
-                                id='multiselect.new_channel'
-                                defaultMessage='Create a channel to communicate with more people'
-                            />
-                            <a
-                                href='#'
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    this.openModal();
-                                }}
-                            >
-                                <FormattedMessage
-                                    id='multiselect.new_channel_create'
-                                    defaultMessage='Create a channel'
-                                />
-                            </a>
-                        </div>
-                    ) : (multiSelectList)
+                    {
+                        this.props.disableMultiSelectList && this.props.values.length >= 7 ? (
+                            <>
+                                {this.props.values.length === 7 && multiSelectList}
+                                <div className='create-new-channel'>
+                                    <img src={lampIcon()}/>
+                                    <FormattedMessage
+                                        id='multiselect.new_channel'
+                                        defaultMessage='Create a channel to communicate with more people'
+                                    />
+                                    <a
+                                        href='#'
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            this.openModal();
+                                        }}
+                                    >
+                                        <FormattedMessage
+                                            id='multiselect.new_channel_create'
+                                            defaultMessage='Create a channel'
+                                        />
+                                    </a>
+                                </div>
+                            </>
+                        ) : (multiSelectList)
                     }
                     <div
                         id='multiSelectMessageNote'

From 7d23168691a69b756374eb9b9635eb66b7b366bb Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Tue, 23 Jul 2024 09:57:31 +0200
Subject: [PATCH 22/32] Fix: Change trad and text position in modal

Changelog: fixed
---
 webapp/channels/src/i18n/de.json                | 2 +-
 webapp/channels/src/i18n/en.json                | 2 +-
 webapp/channels/src/i18n/es.json                | 2 +-
 webapp/channels/src/i18n/fr.json                | 2 +-
 webapp/channels/src/i18n/it.json                | 2 +-
 webapp/channels/src/sass/components/_modal.scss | 8 +++++++-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/webapp/channels/src/i18n/de.json b/webapp/channels/src/i18n/de.json
index b2bf130215..93fbcb361c 100644
--- a/webapp/channels/src/i18n/de.json
+++ b/webapp/channels/src/i18n/de.json
@@ -4440,7 +4440,7 @@
   "multiselect.noMorePeople": "Eine persönliche Nachricht ist auf 7 Personen begrenzt.",
   "multiselect.numMembers": "{options}/7 Benutzer",
   "multiselect.numPeopleRemaining": "Verwenden Sie die ↑↓ Pfeiltasten auf der Tastatur, ENTER zum Auswählen.",
-  "multiselect.new_channel": "Erstellen Sie einen Kanal, um mit mehr Personen zu kommunizieren",
+  "multiselect.new_channel": "Mehr als sieben Personen? Erstellen Sie stattdessen einen Kanal",
   "multiselect.new_channel_create": "Einen Kanal erstellen",
   "multiselect.maxGroupMembers": "Es können nicht mehr als 256 Mitglieder auf einmal zu einer Gruppe hinzugefügt werden.",
   "multiselect.numGroupsRemaining": "Verwende ↑↓ zum Navigieren, ↵ zur Auswahl. Du kannst {num, number} weitere {num, plural, one {Gruppe} other {Gruppen}} hinzufügen. ",
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index f6d1f60bdd..f9f3b1a863 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4414,7 +4414,7 @@
   "multiselect.noMorePeople": "A personal message is limited to 7 people.",
   "multiselect.numMembers": "{options}/7 users",
   "multiselect.numPeopleRemaining": "Use the ↑↓ arrows on the keyboard, ENTER to select.",
-  "multiselect.new_channel": "Create a channel to communicate with more people",
+  "multiselect.new_channel": "More than 7 people? Create a channel instead",
   "multiselect.new_channel_create": "Create a channel",
   "multiselect.maxGroupMembers": "No more than 256 members can be added to a group at once.",
   "multiselect.numGroupsRemaining": "Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {group} other {groups}}. ",
diff --git a/webapp/channels/src/i18n/es.json b/webapp/channels/src/i18n/es.json
index f149d2a394..a9097a970c 100644
--- a/webapp/channels/src/i18n/es.json
+++ b/webapp/channels/src/i18n/es.json
@@ -3813,7 +3813,7 @@
   "multiselect.noMorePeople": "Un mensaje personal está limitado a 7 personas.",
   "multiselect.numMembers": "{options}/7 usuarios",
   "multiselect.numPeopleRemaining": "Usa las flechas ↑↓ del teclado, ENTER para seleccionar.",
-  "multiselect.new_channel": "Crear un canal para comunicarse con más personas",
+  "multiselect.new_channel": "¿Más de 7 personas? Crea un canal",
   "multiselect.new_channel_create": "Crear un canal",
   "multiselect.numGroupsRemaining": "Utiliza ↑↓ para navegar, ↵ para seleccionar. Puedes agregar {num, number} {num, plural, one {grupo} other {grupos}} más. ",
   "multiselect.numRemaining": "Se puede añadir hasta {max, number} a la vez. Te quedan {num, number}.",
diff --git a/webapp/channels/src/i18n/fr.json b/webapp/channels/src/i18n/fr.json
index 1db529ec9d..20d66f8cdd 100644
--- a/webapp/channels/src/i18n/fr.json
+++ b/webapp/channels/src/i18n/fr.json
@@ -3757,7 +3757,7 @@
   "multiselect.numRemaining": "Vous pouvez ajouter jusqu'à {max, number} à la fois. Il vous reste {num, number}.",
   "multiselect.placeholder": "Rechercher des membres",
   "multiselect.placeholder.peopleOrGroups": "Rechercher des personnes ou des groupes",
-  "multiselect.new_channel": "Créer un canal pour échanger avec plus de personnes",
+  "multiselect.new_channel": "Plus de 7 personnes ? Créez plutôt un canal",
   "multiselect.new_channel_create": "Créer un canal",
   "multiselect.saveDetailsButton": "Enregistrer les détails",
   "multiselect.savingDetailsButton": "Enregistrement...",
diff --git a/webapp/channels/src/i18n/it.json b/webapp/channels/src/i18n/it.json
index 73d58642ab..c0b25de713 100644
--- a/webapp/channels/src/i18n/it.json
+++ b/webapp/channels/src/i18n/it.json
@@ -2911,7 +2911,7 @@
   "multiselect.noMorePeople": "Un messaggio personale è limitato a 7 persone.",
   "multiselect.numMembers": "{options}/7 utenti",
   "multiselect.numPeopleRemaining": "Usa le frecce ↑↓ della tastiera, ENTER per selezionare.",
-  "multiselect.new_channel": "Crea un canale per comunicare con più persone",
+  "multiselect.new_channel": "Più di 7 persone? Create invece un canale",
   "multiselect.new_channel_create": "Crea un canale",
   "multiselect.numGroupsRemaining": "Usa ↑↓ per navigare, ↵ per scegliere. Puoi aggiungere {num, number} {num, plural, one {group} other {groups}}. ",
   "multiselect.numRemaining": "Si possono ancora aggiungere {num, number}",
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 1e6548a0ba..66795fea79 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -1050,8 +1050,14 @@
     display: flex;
     border-radius: 8px;
     align-items: center;
-    justify-content: space-around;
+    justify-content: flex-start;
     background-color: #f2f2f2;
+    padding-left: 20px;
+    gap: 10px;
+}
+
+.create-new-channel > :last-child {
+    margin-left: 100px;
 }
 
 .team-selector-modal,

From 2b4fecb6908e78eb51cbd2fe870310a77ec223c4 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Wed, 24 Jul 2024 08:59:53 +0200
Subject: [PATCH 23/32] Fix: Change create channel modal position

Changelog: fixed
---
 .../components/multiselect/multiselect.tsx    | 53 ++++++++++---------
 .../channels/src/sass/components/_modal.scss  |  2 +-
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 8c99caf3ed..4682764534 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -536,33 +536,38 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
                                 {memberCount}
                             </div>
+
                         </div>
-                    </div>
-                    {
-                        this.props.disableMultiSelectList && this.props.values.length >= 7 ? (
-                            <>
-                                {this.props.values.length === 7 && multiSelectList}
-                                <div className='create-new-channel'>
-                                    <img src={lampIcon()}/>
-                                    <FormattedMessage
-                                        id='multiselect.new_channel'
-                                        defaultMessage='Create a channel to communicate with more people'
-                                    />
-                                    <a
-                                        href='#'
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            this.openModal();
-                                        }}
-                                    >
+                        {
+                            (this.props.disableMultiSelectList && this.props.values.length >= 7) ? (
+                                <>
+                                    <div className='create-new-channel'>
+                                        <img src={lampIcon()}/>
                                         <FormattedMessage
-                                            id='multiselect.new_channel_create'
-                                            defaultMessage='Create a channel'
+                                            id='multiselect.new_channel'
+                                            defaultMessage='Create a channel to communicate with more people'
                                         />
-                                    </a>
-                                </div>
-                            </>
-                        ) : (multiSelectList)
+                                        <a
+                                            href='#'
+                                            onClick={(e) => {
+                                                e.preventDefault();
+                                                this.openModal();
+                                            }}
+                                        >
+                                            <FormattedMessage
+                                                id='multiselect.new_channel_create'
+                                                defaultMessage='Create a channel'
+                                            />
+                                        </a>
+                                    </div>
+                                </>
+                            ) : null
+                        }
+                    </div>
+                    {
+                        (!this.props.disableMultiSelectList || this.props.values.length <= 7) ? (
+                            multiSelectList
+                        ) : null
                     }
                     <div
                         id='multiSelectMessageNote'
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 66795fea79..e2b686fa74 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -1046,7 +1046,7 @@
 
 .create-new-channel {
     height: 60px;
-    margin: 27px;
+    margin: 10px;
     display: flex;
     border-radius: 8px;
     align-items: center;

From 58eab2f85cfac2bfc1b3bcccf931ebbb9ec202a6 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Thu, 25 Jul 2024 16:31:42 +0200
Subject: [PATCH 24/32] Fix: use constants for max users

---
 .../src/components/more_direct_channels/list/list.tsx    | 5 ++++-
 .../channels/src/components/multiselect/multiselect.tsx  | 9 +++++----
 webapp/channels/src/i18n/de.json                         | 2 +-
 webapp/channels/src/i18n/en.json                         | 2 +-
 webapp/channels/src/i18n/es.json                         | 2 +-
 webapp/channels/src/i18n/fr.json                         | 2 +-
 webapp/channels/src/i18n/it.json                         | 2 +-
 7 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index f0ec2dd211..36aef73e84 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -128,7 +128,10 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
                 props.values.length === MAX_SELECTABLE_VALUES ? (
                     <FormattedMessage
                         id='multiselect.noMorePeople'
-                        defaultMessage='A personal message is limited to 7 people.'
+                        defaultMessage='A personal message is limited to {maxUsers} people.'
+                        values={{
+                            maxUsers: (Constants.MAX_USERS_IN_GM - 1),
+                        }}
                     />
                 ) : (
                     <FormattedMessage
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 4682764534..18025c00f6 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -473,8 +473,9 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
             memberCount = (
                 <FormattedMessage
                     id='multiselect.numMembers'
-                    defaultMessage='{options}/7 users'
+                    defaultMessage='{options}/{maxUsers} users'
                     values={{
+                        maxUsers: Constants.MAX_USERS_IN_GM - 1,
                         options: this.props.values.length,
                     }}
                 />
@@ -484,7 +485,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         return (
             <>
-                <div className={(this.props.disableMultiSelectList && this.props.values.length === 8) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
+                <div className={(this.props.disableMultiSelectList && this.props.values.length === Constants.MAX_USERS_IN_GM) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -539,7 +540,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
                         </div>
                         {
-                            (this.props.disableMultiSelectList && this.props.values.length >= 7) ? (
+                            (this.props.disableMultiSelectList && this.props.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
                                 <>
                                     <div className='create-new-channel'>
                                         <img src={lampIcon()}/>
@@ -565,7 +566,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                         }
                     </div>
                     {
-                        (!this.props.disableMultiSelectList || this.props.values.length <= 7) ? (
+                        (!this.props.disableMultiSelectList || this.props.values.length <= (Constants.MAX_USERS_IN_GM - 1)) ? (
                             multiSelectList
                         ) : null
                     }
diff --git a/webapp/channels/src/i18n/de.json b/webapp/channels/src/i18n/de.json
index 93fbcb361c..5f330c4cc1 100644
--- a/webapp/channels/src/i18n/de.json
+++ b/webapp/channels/src/i18n/de.json
@@ -4438,7 +4438,7 @@
   "multiselect.list.notFound": "Für die Suchanfrage <b>{searchQuery}</b> wurden keine Ergebnisse gefunden",
   "multiselect.loading": "Lade...",
   "multiselect.noMorePeople": "Eine persönliche Nachricht ist auf 7 Personen begrenzt.",
-  "multiselect.numMembers": "{options}/7 Benutzer",
+  "multiselect.numMembers": "{options}/{maxUsers} Benutzer",
   "multiselect.numPeopleRemaining": "Verwenden Sie die ↑↓ Pfeiltasten auf der Tastatur, ENTER zum Auswählen.",
   "multiselect.new_channel": "Mehr als sieben Personen? Erstellen Sie stattdessen einen Kanal",
   "multiselect.new_channel_create": "Einen Kanal erstellen",
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index f9f3b1a863..dcd3144fa1 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4412,7 +4412,7 @@
   "multiselect.list.notFound": "No results found matching <b>{searchQuery}</b>",
   "multiselect.loading": "Loading...",
   "multiselect.noMorePeople": "A personal message is limited to 7 people.",
-  "multiselect.numMembers": "{options}/7 users",
+  "multiselect.numMembers": "{options}/{maxUsers} users",
   "multiselect.numPeopleRemaining": "Use the ↑↓ arrows on the keyboard, ENTER to select.",
   "multiselect.new_channel": "More than 7 people? Create a channel instead",
   "multiselect.new_channel_create": "Create a channel",
diff --git a/webapp/channels/src/i18n/es.json b/webapp/channels/src/i18n/es.json
index a9097a970c..15a4c839e6 100644
--- a/webapp/channels/src/i18n/es.json
+++ b/webapp/channels/src/i18n/es.json
@@ -3811,7 +3811,7 @@
   "multiselect.list.notFound": "No se encontraron resultados que encajen con **{searchQuery}**",
   "multiselect.loading": "Cargando...",
   "multiselect.noMorePeople": "Un mensaje personal está limitado a 7 personas.",
-  "multiselect.numMembers": "{options}/7 usuarios",
+  "multiselect.numMembers": "{options}/{maxUsers} usuarios",
   "multiselect.numPeopleRemaining": "Usa las flechas ↑↓ del teclado, ENTER para seleccionar.",
   "multiselect.new_channel": "¿Más de 7 personas? Crea un canal",
   "multiselect.new_channel_create": "Crear un canal",
diff --git a/webapp/channels/src/i18n/fr.json b/webapp/channels/src/i18n/fr.json
index 20d66f8cdd..ed1b0fb167 100644
--- a/webapp/channels/src/i18n/fr.json
+++ b/webapp/channels/src/i18n/fr.json
@@ -3752,7 +3752,7 @@
   "multiselect.loading": "Chargement…",
   "multiselect.noMorePeople": "Un message personnel est limité à 7 personnes.",
   "multiselect.numGroupsRemaining": "Utilisez les flèches ↑↓ pour parcourir, ↵ pour sélectionner. Vous pouvez encore ajouter {num, number} {num, plural, one {groupe} other {groupes}}. ",
-  "multiselect.numMembers": "{options}/7 utilisateurs",
+  "multiselect.numMembers": "{options}/{maxUsers} utilisateurs",
   "multiselect.numPeopleRemaining": "Utilisez les flèches ↑↓ du clavier, ENTER pour sélectionner.",
   "multiselect.numRemaining": "Vous pouvez ajouter jusqu'à {max, number} à la fois. Il vous reste {num, number}.",
   "multiselect.placeholder": "Rechercher des membres",
diff --git a/webapp/channels/src/i18n/it.json b/webapp/channels/src/i18n/it.json
index c0b25de713..5611007862 100644
--- a/webapp/channels/src/i18n/it.json
+++ b/webapp/channels/src/i18n/it.json
@@ -2909,7 +2909,7 @@
   "multiselect.list.notFound": "Nessun elemento trovato corrispondenti a <b>{searchQuery}</b>",
   "multiselect.loading": "Caricamento...",
   "multiselect.noMorePeople": "Un messaggio personale è limitato a 7 persone.",
-  "multiselect.numMembers": "{options}/7 utenti",
+  "multiselect.numMembers": "{options}/{maxUsers} utenti",
   "multiselect.numPeopleRemaining": "Usa le frecce ↑↓ della tastiera, ENTER per selezionare.",
   "multiselect.new_channel": "Più di 7 persone? Create invece un canale",
   "multiselect.new_channel_create": "Crea un canale",

From cde8bec863bd2944aa139033cf51fbb6fd0180f4 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 09:51:38 +0200
Subject: [PATCH 25/32] Fix: move modal in more direct channels and pass it in
 children

Changelog:fixed
---
 .../components/more_direct_channels/index.ts  |   2 +
 .../more_direct_channels/list/list.tsx        | 113 +++++++++---------
 .../more_direct_channels.tsx                  |  46 ++++++-
 .../components/multiselect/multiselect.tsx    |  43 +------
 4 files changed, 107 insertions(+), 97 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/index.ts b/webapp/channels/src/components/more_direct_channels/index.ts
index f5b6d62f6e..498f988a98 100644
--- a/webapp/channels/src/components/more_direct_channels/index.ts
+++ b/webapp/channels/src/components/more_direct_channels/index.ts
@@ -29,6 +29,7 @@ import {
 import {openDirectChannelToUserId, openGroupChannelToUserIds} from 'actions/channel_actions';
 import {loadStatusesForProfilesList, loadProfilesMissingStatus} from 'actions/status_actions';
 import {loadProfilesForGroupChannels} from 'actions/user_actions';
+import {openModal} from 'actions/views/modals';
 import {setModalSearchTerm} from 'actions/views/search';
 
 import type {GlobalState} from 'types/store';
@@ -86,6 +87,7 @@ const makeMapStateToProps = () => {
 function mapDispatchToProps(dispatch: Dispatch) {
     return {
         actions: bindActionCreators({
+            openModal,
             getProfiles,
             getProfilesInTeam,
             loadProfilesMissingStatus,
diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index 36aef73e84..a7eccf8488 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -2,12 +2,13 @@
 // See LICENSE.txt for license information.
 
 import _ from 'lodash';
+import type {ReactNode} from 'react';
 import React, {useCallback, useEffect, useMemo} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {UserProfile} from '@mattermost/types/users';
 
-import MultiSelect from 'components/multiselect/index';
+import MultiSelect from 'components/multiselect';
 
 import Constants from 'utils/constants';
 
@@ -22,6 +23,7 @@ export const USERS_PER_PAGE = 50;
 
 export type Props = {
     addValue: (value: OptionValue) => void;
+    children: ReactNode;
     currentUserId: string;
     handleDelete: (values: OptionValue[]) => void;
     handlePageChange: (page: number, prevPage: number) => void;
@@ -35,7 +37,6 @@ export type Props = {
     totalCount: number;
     users: UserProfile[];
     emptyGroupChannelsIds: string[];
-    exitParentModal: () => void;
 
     /**
      * An array of values that have been selected by the user in the multiselect.
@@ -103,62 +104,66 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
     }, [props.emptyGroupChannelsIds, props.actions, previousEmptyGroupIds]);
 
     return (
-        <MultiSelect<OptionValue>
-            ref={ref}
-            options={options}
-            optionRenderer={renderOptionValue}
-            intl={intl}
-            selectedItemRef={props.selectedItemRef}
-            values={props.values}
-            valueRenderer={renderValue}
-            ariaLabelRenderer={renderAriaLabel}
-            perPage={USERS_PER_PAGE}
-            handlePageChange={props.handlePageChange}
-            handleInput={props.search}
-            handleDelete={props.handleDelete}
-            handleAdd={props.addValue}
-            handleSubmit={props.handleSubmit}
-            noteText={note}
-            exitParentModal={props.exitParentModal}
-            disableMultiSelectList={true}
-            maxValues={MAX_SELECTABLE_VALUES}
-            changeMessageColor='red'
-            showError={props.values.length === MAX_SELECTABLE_VALUES}
-            numRemainingText={
-                props.values.length === MAX_SELECTABLE_VALUES ? (
+        <>
+            <MultiSelect<OptionValue>
+                ref={ref}
+                options={options}
+                optionRenderer={renderOptionValue}
+                intl={intl}
+                selectedItemRef={props.selectedItemRef}
+                values={props.values}
+                valueRenderer={renderValue}
+                ariaLabelRenderer={renderAriaLabel}
+                perPage={USERS_PER_PAGE}
+                handlePageChange={props.handlePageChange}
+                handleInput={props.search}
+                handleDelete={props.handleDelete}
+                handleAdd={props.addValue}
+                handleSubmit={props.handleSubmit}
+                noteText={note}
+                disableMultiSelectList={true}
+                maxValues={MAX_SELECTABLE_VALUES}
+                changeMessageColor='red'
+                showError={props.values.length === MAX_SELECTABLE_VALUES}
+                numRemainingText={
+                    props.values.length === MAX_SELECTABLE_VALUES ? (
+                        <FormattedMessage
+                            id='multiselect.noMorePeople'
+                            defaultMessage='A personal message is limited to {maxUsers} people.'
+                            values={{
+                                maxUsers: (Constants.MAX_USERS_IN_GM - 1),
+                            }}
+                        />
+                    ) : (
+                        <FormattedMessage
+                            id='multiselect.numPeopleRemaining'
+                            defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
+                        />
+                    )
+                }
+                buttonSubmitText={
                     <FormattedMessage
-                        id='multiselect.noMorePeople'
-                        defaultMessage='A personal message is limited to {maxUsers} people.'
-                        values={{
-                            maxUsers: (Constants.MAX_USERS_IN_GM - 1),
-                        }}
+                        id='multiselect.go'
+                        defaultMessage='Go'
                     />
-                ) : (
+                }
+                buttonSubmitLoadingText={
                     <FormattedMessage
-                        id='multiselect.numPeopleRemaining'
-                        defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
+                        id='multiselect.loading'
+                        defaultMessage='Loading...'
                     />
-                )
-            }
-            buttonSubmitText={
-                <FormattedMessage
-                    id='multiselect.go'
-                    defaultMessage='Go'
-                />
-            }
-            buttonSubmitLoadingText={
-                <FormattedMessage
-                    id='multiselect.loading'
-                    defaultMessage='Loading...'
-                />
-            }
-            submitImmediatelyOn={handleSubmitImmediatelyOn}
-            saving={props.saving}
-            loading={props.loading}
-            users={props.users}
-            totalCount={props.totalCount}
-            placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
-        />
+                }
+                submitImmediatelyOn={handleSubmitImmediatelyOn}
+                saving={props.saving}
+                loading={props.loading}
+                users={props.users}
+                totalCount={props.totalCount}
+                placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
+
+            >
+                {props.children}
+            </MultiSelect>
+        </>
     );
 });
 
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index a93f3d8f70..3f5644a2cb 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -12,9 +12,12 @@ import type {UserProfile} from '@mattermost/types/users';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
 import type MultiSelect from 'components/multiselect/multiselect';
+import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
 
 import {getHistory} from 'utils/browser_history';
-import Constants from 'utils/constants';
+import Constants, {ModalIdentifiers} from 'utils/constants';
+
+import type {ModalData} from 'types/actions';
 
 import List from './list';
 import {USERS_PER_PAGE} from './list/list';
@@ -61,6 +64,7 @@ export type Props = {
         searchProfiles: (term: string, options: any) => Promise<ActionResult<UserProfile[]>>;
         searchGroupChannels: (term: string) => Promise<ActionResult<Channel[]>>;
         setModalSearchTerm: (term: string) => void;
+        openModal: <P>(modalData: ModalData<P>) => void;
     };
 }
 
@@ -264,10 +268,20 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
         this.setState({values});
     };
 
+    lampIcon = () => Constants.LAMP_ICON;
+
+    openModal = (): void => {
+        this.handleExit();
+        const newModal = {
+            modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
+            dialogType: NewChannelModal,
+        };
+        this.props.actions?.openModal(newModal);
+    };
+
     render() {
         const body = (
             <List
-                exitParentModal={this.handleExit}
                 addValue={this.addValue}
                 currentUserId={this.props.currentUserId}
                 handleDelete={this.handleDelete}
@@ -281,7 +295,33 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
                 totalCount={this.props.totalCount}
                 users={this.props.users}
                 values={this.state.values}
-            />
+            >
+                {
+                    (this.state.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
+                        <>
+                            <div className='create-new-channel'>
+                                <img src={this.lampIcon()}/>
+                                <FormattedMessage
+                                    id='multiselect.new_channel'
+                                    defaultMessage='Create a channel to communicate with more people'
+                                />
+                                <a
+                                    href='#'
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        this.openModal();
+                                    }}
+                                >
+                                    <FormattedMessage
+                                        id='multiselect.new_channel_create'
+                                        defaultMessage='Create a channel'
+                                    />
+                                </a>
+                            </div>
+                        </>
+                    ) : null
+                }
+            </List>
         );
 
         return (
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index 18025c00f6..b114e8da09 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -10,12 +10,11 @@ import ReactSelect, {components} from 'react-select';
 import type {getOptionValue} from 'react-select/src/builtins';
 import type {InputActionMeta} from 'react-select/src/types';
 
-import NewChannelModal from 'components/new_channel_modal/new_channel_modal';
 import SaveButton from 'components/save_button';
 import CloseCircleSolidIcon from 'components/widgets/icons/close_circle_solid_icon';
 import Avatar from 'components/widgets/users/avatar';
 
-import {Constants, A11yCustomEventTypes, ModalIdentifiers} from 'utils/constants';
+import {Constants, A11yCustomEventTypes} from 'utils/constants';
 import {imageURLForUser, getDisplayName, localizeMessage} from 'utils/utils';
 
 import type {ModalData} from 'types/actions';
@@ -81,7 +80,7 @@ export type Props<T extends Value> = {
     savingEnabled?: boolean;
     handleCancel?: () => void;
     customNoOptionsMessage?: React.ReactNode;
-    exitParentModal?: () => void;
+    children?: ReactNode;
 }
 
 export type State = {
@@ -118,17 +117,6 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
         };
     }
 
-    public openModal = (): void => {
-        if (this.props.exitParentModal) {
-            this.props.exitParentModal();
-        }
-        const newModal = {
-            modalId: ModalIdentifiers.NEW_CHANNEL_MODAL,
-            dialogType: NewChannelModal,
-        };
-        this.props.actions?.openModal(newModal);
-    };
-
     public componentDidMount() {
         const inputRef: unknown = this.reactSelectRef.current && this.reactSelectRef.current.select.inputRef;
 
@@ -481,7 +469,6 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                 />
             );
         }
-        const lampIcon = () => Constants.LAMP_ICON;
 
         return (
             <>
@@ -539,31 +526,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                             </div>
 
                         </div>
-                        {
-                            (this.props.disableMultiSelectList && this.props.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
-                                <>
-                                    <div className='create-new-channel'>
-                                        <img src={lampIcon()}/>
-                                        <FormattedMessage
-                                            id='multiselect.new_channel'
-                                            defaultMessage='Create a channel to communicate with more people'
-                                        />
-                                        <a
-                                            href='#'
-                                            onClick={(e) => {
-                                                e.preventDefault();
-                                                this.openModal();
-                                            }}
-                                        >
-                                            <FormattedMessage
-                                                id='multiselect.new_channel_create'
-                                                defaultMessage='Create a channel'
-                                            />
-                                        </a>
-                                    </div>
-                                </>
-                            ) : null
-                        }
+                        {this.props.children}
                     </div>
                     {
                         (!this.props.disableMultiSelectList || this.props.values.length <= (Constants.MAX_USERS_IN_GM - 1)) ? (

From 61098df56b1c8c084bd8c6170a991099b1ba11a9 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 09:55:18 +0200
Subject: [PATCH 26/32] Fix: optional children

---
 .../channels/src/components/more_direct_channels/list/list.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index a7eccf8488..4243ff60d7 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -23,7 +23,7 @@ export const USERS_PER_PAGE = 50;
 
 export type Props = {
     addValue: (value: OptionValue) => void;
-    children: ReactNode;
+    children?: ReactNode;
     currentUserId: string;
     handleDelete: (values: OptionValue[]) => void;
     handlePageChange: (page: number, prevPage: number) => void;

From b34d97d5527ce9b6057f36d363e323a81e395194 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 10:20:59 +0200
Subject: [PATCH 27/32] Fix: snap

---
 .../__snapshots__/more_direct_channels.test.tsx.snap     | 2 --
 .../more_direct_channels/more_direct_channels.test.tsx   | 1 +
 .../multiselect/__snapshots__/multiselect.test.tsx.snap  | 9 ++++++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
index 535cbcaf3c..6073e4686f 100644
--- a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
@@ -56,7 +56,6 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
-      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
@@ -347,7 +346,6 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
     <Connect(Component)
       addValue={[Function]}
       currentUserId="current_user_id"
-      exitParentModal={[Function]}
       handleDelete={[Function]}
       handlePageChange={[Function]}
       handleSubmit={[Function]}
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx
index 13abb78651..e49d728cc8 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.test.tsx
@@ -58,6 +58,7 @@ describe('components/MoreDirectChannels', () => {
                     process.nextTick(() => resolve({data: true}));
                 });
             }),
+            openModal: jest.fn().mockResolvedValue({data: true}),
             getProfilesInTeam: jest.fn().mockResolvedValue({data: true}),
             loadProfilesMissingStatus: jest.fn().mockResolvedValue({data: true}),
             searchProfiles: jest.fn().mockResolvedValue({data: true}),
diff --git a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
index 61c34af9a7..86d895b765 100644
--- a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
@@ -128,10 +128,11 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
           style={Object {}}
         >
           <MemoizedFormattedMessage
-            defaultMessage="{options}/7 users"
+            defaultMessage="{options}/{maxUsers} users"
             id="multiselect.numMembers"
             values={
               Object {
+                "maxUsers": 7,
                 "options": 1,
               }
             }
@@ -337,10 +338,11 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
           style={Object {}}
         >
           <MemoizedFormattedMessage
-            defaultMessage="{options}/7 users"
+            defaultMessage="{options}/{maxUsers} users"
             id="multiselect.numMembers"
             values={
               Object {
+                "maxUsers": 7,
                 "options": 1,
               }
             }
@@ -537,10 +539,11 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
           style={Object {}}
         >
           <MemoizedFormattedMessage
-            defaultMessage="{options}/7 users"
+            defaultMessage="{options}/{maxUsers} users"
             id="multiselect.numMembers"
             values={
               Object {
+                "maxUsers": 7,
                 "options": 1,
               }
             }

From bf1b7c87a94dc635b37a1e7ca2e43bf4700b4136 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Fri, 26 Jul 2024 13:51:51 +0200
Subject: [PATCH 28/32] Feat: modal for max user in pm

Changelog: added
---
 .../more_direct_channels/list/list.tsx        | 110 +++++++++---------
 .../more_direct_channels.tsx                  |  37 +++---
 .../components/multiselect/multiselect.tsx    |  14 +--
 3 files changed, 74 insertions(+), 87 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/list/list.tsx b/webapp/channels/src/components/more_direct_channels/list/list.tsx
index 4243ff60d7..5c4c6accc2 100644
--- a/webapp/channels/src/components/more_direct_channels/list/list.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx
@@ -104,66 +104,64 @@ const List = React.forwardRef((props: Props, ref?: React.Ref<MultiSelect<OptionV
     }, [props.emptyGroupChannelsIds, props.actions, previousEmptyGroupIds]);
 
     return (
-        <>
-            <MultiSelect<OptionValue>
-                ref={ref}
-                options={options}
-                optionRenderer={renderOptionValue}
-                intl={intl}
-                selectedItemRef={props.selectedItemRef}
-                values={props.values}
-                valueRenderer={renderValue}
-                ariaLabelRenderer={renderAriaLabel}
-                perPage={USERS_PER_PAGE}
-                handlePageChange={props.handlePageChange}
-                handleInput={props.search}
-                handleDelete={props.handleDelete}
-                handleAdd={props.addValue}
-                handleSubmit={props.handleSubmit}
-                noteText={note}
-                disableMultiSelectList={true}
-                maxValues={MAX_SELECTABLE_VALUES}
-                changeMessageColor='red'
-                showError={props.values.length === MAX_SELECTABLE_VALUES}
-                numRemainingText={
-                    props.values.length === MAX_SELECTABLE_VALUES ? (
-                        <FormattedMessage
-                            id='multiselect.noMorePeople'
-                            defaultMessage='A personal message is limited to {maxUsers} people.'
-                            values={{
-                                maxUsers: (Constants.MAX_USERS_IN_GM - 1),
-                            }}
-                        />
-                    ) : (
-                        <FormattedMessage
-                            id='multiselect.numPeopleRemaining'
-                            defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
-                        />
-                    )
-                }
-                buttonSubmitText={
+        <MultiSelect<OptionValue>
+            ref={ref}
+            options={options}
+            optionRenderer={renderOptionValue}
+            intl={intl}
+            selectedItemRef={props.selectedItemRef}
+            values={props.values}
+            valueRenderer={renderValue}
+            ariaLabelRenderer={renderAriaLabel}
+            perPage={USERS_PER_PAGE}
+            handlePageChange={props.handlePageChange}
+            handleInput={props.search}
+            handleDelete={props.handleDelete}
+            handleAdd={props.addValue}
+            handleSubmit={props.handleSubmit}
+            noteText={note}
+            disableMultiSelectList={props.values.length > (Constants.MAX_USERS_IN_GM - 1)}
+            maxValues={MAX_SELECTABLE_VALUES}
+            changeMessageColor='red'
+            showError={props.values.length === MAX_SELECTABLE_VALUES}
+            numRemainingText={
+                props.values.length === MAX_SELECTABLE_VALUES ? (
                     <FormattedMessage
-                        id='multiselect.go'
-                        defaultMessage='Go'
+                        id='multiselect.noMorePeople'
+                        defaultMessage='A personal message is limited to {maxUsers} people.'
+                        values={{
+                            maxUsers: (Constants.MAX_USERS_IN_GM - 1),
+                        }}
                     />
-                }
-                buttonSubmitLoadingText={
+                ) : (
                     <FormattedMessage
-                        id='multiselect.loading'
-                        defaultMessage='Loading...'
+                        id='multiselect.numPeopleRemaining'
+                        defaultMessage='Use the ↑↓ arrows on the keyboard, ENTER to select.'
                     />
-                }
-                submitImmediatelyOn={handleSubmitImmediatelyOn}
-                saving={props.saving}
-                loading={props.loading}
-                users={props.users}
-                totalCount={props.totalCount}
-                placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
-
-            >
-                {props.children}
-            </MultiSelect>
-        </>
+                )
+            }
+            buttonSubmitText={
+                <FormattedMessage
+                    id='multiselect.go'
+                    defaultMessage='Go'
+                />
+            }
+            buttonSubmitLoadingText={
+                <FormattedMessage
+                    id='multiselect.loading'
+                    defaultMessage='Loading...'
+                />
+            }
+            submitImmediatelyOn={handleSubmitImmediatelyOn}
+            saving={props.saving}
+            loading={props.loading}
+            users={props.users}
+            totalCount={props.totalCount}
+            placeholderText={intl.formatMessage({id: 'multiselect.placeholder', defaultMessage: 'Search and add members'})}
+
+        >
+            {props.children}
+        </MultiSelect>
     );
 });
 
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index 3f5644a2cb..8f69fa5968 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -298,27 +298,26 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
             >
                 {
                     (this.state.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
-                        <>
-                            <div className='create-new-channel'>
-                                <img src={this.lampIcon()}/>
+                        <div className='create-new-channel'>
+                            <img src={this.lampIcon()}/>
+                            <FormattedMessage
+                                id='multiselect.new_channel'
+                                defaultMessage='Create a channel to communicate with more people'
+                            />
+                            <a
+                                href='#'
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    this.openModal();
+                                }}
+                            >
                                 <FormattedMessage
-                                    id='multiselect.new_channel'
-                                    defaultMessage='Create a channel to communicate with more people'
+                                    id='multiselect.new_channel_create'
+                                    defaultMessage='Create a channel'
                                 />
-                                <a
-                                    href='#'
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        this.openModal();
-                                    }}
-                                >
-                                    <FormattedMessage
-                                        id='multiselect.new_channel_create'
-                                        defaultMessage='Create a channel'
-                                    />
-                                </a>
-                            </div>
-                        </>
+                            </a>
+                        </div>
+
                     ) : null
                 }
             </List>
diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index b114e8da09..befca9cff5 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -17,8 +17,6 @@ import Avatar from 'components/widgets/users/avatar';
 import {Constants, A11yCustomEventTypes} from 'utils/constants';
 import {imageURLForUser, getDisplayName, localizeMessage} from 'utils/utils';
 
-import type {ModalData} from 'types/actions';
-
 import MultiSelectList from './multiselect_list';
 
 export type Value = {
@@ -31,13 +29,7 @@ export type Value = {
     disabled?: boolean;
 };
 
-type Actions = {
-    openModal: <P>(modalData: ModalData<P>) => void;
-    closeModal: (modalId: string) => void;
-}
-
 export type Props<T extends Value> = {
-    actions?: Actions;
     ariaLabelRenderer: getOptionValue<T>;
     backButtonClick?: () => void;
     backButtonClass?: string;
@@ -472,7 +464,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
 
         return (
             <>
-                <div className={(this.props.disableMultiSelectList && this.props.values.length === Constants.MAX_USERS_IN_GM) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
+                <div className={(this.props.disableMultiSelectList) ? 'filtered-user-list disable-list' : 'filtered-user-list'}>
                     <div className='filter-row filter-row--full'>
                         <div className='multi-select__container react-select'>
                             <ReactSelect
@@ -529,9 +521,7 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                         {this.props.children}
                     </div>
                     {
-                        (!this.props.disableMultiSelectList || this.props.values.length <= (Constants.MAX_USERS_IN_GM - 1)) ? (
-                            multiSelectList
-                        ) : null
+                        this.props.disableMultiSelectList ? null : multiSelectList
                     }
                     <div
                         id='multiSelectMessageNote'

From 405940170dde6541f5899c39098ca5865f624e7e Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Wed, 7 Aug 2024 08:55:16 +0200
Subject: [PATCH 29/32] Added: Create channel tip compo

Changelog: added
---
 .../create_channel_tip/create_channel_tip.tsx | 44 +++++++++++++++++++
 .../more_direct_channels.tsx                  | 30 +++----------
 2 files changed, 50 insertions(+), 24 deletions(-)
 create mode 100644 webapp/channels/src/components/create_channel_tip/create_channel_tip.tsx

diff --git a/webapp/channels/src/components/create_channel_tip/create_channel_tip.tsx b/webapp/channels/src/components/create_channel_tip/create_channel_tip.tsx
new file mode 100644
index 0000000000..af889cd80b
--- /dev/null
+++ b/webapp/channels/src/components/create_channel_tip/create_channel_tip.tsx
@@ -0,0 +1,44 @@
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import type {OptionValue} from 'components/more_direct_channels/types';
+
+import Constants from 'utils/constants';
+
+interface Props {
+    values: OptionValue[];
+    openModal: () => void;
+}
+
+const CreateChannelTip: React.FC<Props> = ({values, openModal}) => {
+    const lampIcon = () => Constants.LAMP_ICON;
+
+    return (
+        (values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
+            <div className='create-new-channel'>
+                <img src={lampIcon()}/>
+                <FormattedMessage
+                    id='multiselect.new_channel'
+                    defaultMessage='Create a channel to communicate with more people'
+                />
+                <a
+                    href='#'
+                    onClick={(e) => {
+                        e.preventDefault();
+                        openModal();
+                    }}
+                >
+                    <FormattedMessage
+                        id='multiselect.new_channel_create'
+                        defaultMessage='Create a channel'
+                    />
+                </a>
+            </div>
+
+        ) : null
+
+    );
+};
+
+export default CreateChannelTip;
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index 8f69fa5968..44b0a87177 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -28,6 +28,8 @@ import {
 import type {
     OptionValue} from './types';
 
+import CreateChannelTip from '../create_channel_tip/create_channel_tip';
+
 export type Props = {
     currentUserId: string;
     currentTeamId: string;
@@ -296,30 +298,10 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
                 users={this.props.users}
                 values={this.state.values}
             >
-                {
-                    (this.state.values.length >= (Constants.MAX_USERS_IN_GM - 1)) ? (
-                        <div className='create-new-channel'>
-                            <img src={this.lampIcon()}/>
-                            <FormattedMessage
-                                id='multiselect.new_channel'
-                                defaultMessage='Create a channel to communicate with more people'
-                            />
-                            <a
-                                href='#'
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    this.openModal();
-                                }}
-                            >
-                                <FormattedMessage
-                                    id='multiselect.new_channel_create'
-                                    defaultMessage='Create a channel'
-                                />
-                            </a>
-                        </div>
-
-                    ) : null
-                }
+                <CreateChannelTip
+                    values={this.state.values}
+                    openModal={this.openModal}
+                />
             </List>
         );
 

From ad2a975d863e73d1e26790e166b61cf17b759013 Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Wed, 7 Aug 2024 08:59:40 +0200
Subject: [PATCH 30/32] FIx: Remove useless div

---
 .../src/components/multiselect/multiselect.tsx         | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/webapp/channels/src/components/multiselect/multiselect.tsx b/webapp/channels/src/components/multiselect/multiselect.tsx
index befca9cff5..3d550e3cfb 100644
--- a/webapp/channels/src/components/multiselect/multiselect.tsx
+++ b/webapp/channels/src/components/multiselect/multiselect.tsx
@@ -509,14 +509,10 @@ export class MultiSelect<T extends Value> extends React.PureComponent<Props<T>,
                         <div
                             id='multiSelectHelpMemberInfo'
                             className='multi-select__help'
+                            style={this.props.showError ? {color: this.props.changeMessageColor} : {}}
                         >
-                            <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
-                                {numRemainingText}
-                            </div>
-                            <div style={this.props.showError ? {color: this.props.changeMessageColor} : {}}>
-                                {memberCount}
-                            </div>
-
+                            {numRemainingText}
+                            {memberCount}
                         </div>
                         {this.props.children}
                     </div>

From d5452bdc34233c63c3daae925acfcbb83834181e Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Wed, 7 Aug 2024 09:20:34 +0200
Subject: [PATCH 31/32] Fix: modal for dark theme

---
 webapp/channels/src/sass/components/_modal.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index e2b686fa74..0230b6de08 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -1054,10 +1054,12 @@
     background-color: #f2f2f2;
     padding-left: 20px;
     gap: 10px;
+    background-color: var(--ik-illustration-grey-15);
+    color: var(--center-channel-color);
 }
 
 .create-new-channel > :last-child {
-    margin-left: 100px;
+    margin-left: 50px;
 }
 
 .team-selector-modal,

From 58bb3e6539eb62445b044a901bd4f9055a7c787c Mon Sep 17 00:00:00 2001
From: Boris <Trombert>
Date: Wed, 7 Aug 2024 10:07:18 +0200
Subject: [PATCH 32/32] Fix: snap

---
 .../more_direct_channels.test.tsx.snap        | 99 ++++++++++++++++++-
 .../__snapshots__/multiselect.test.tsx.snap   | 78 ++++++---------
 2 files changed, 127 insertions(+), 50 deletions(-)

diff --git a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
index 6073e4686f..2ae86905e8 100644
--- a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
@@ -269,7 +269,12 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
         ]
       }
       values={Array []}
-    />
+    >
+      <CreateChannelTip
+        openModal={[Function]}
+        values={Array []}
+      />
+    </Connect(Component)>
   </ModalBody>
   <ModalFooter
     bsClass="modal-footer"
@@ -566,7 +571,97 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
           },
         ]
       }
-    />
+    >
+      <CreateChannelTip
+        openModal={[Function]}
+        values={
+          Array [
+            Object {
+              "auth_service": "",
+              "bot_description": "",
+              "create_at": 0,
+              "delete_at": 0,
+              "email": "",
+              "first_name": "",
+              "id": "user_id_1",
+              "is_bot": false,
+              "label": "some-user",
+              "last_activity_at": 0,
+              "last_name": "",
+              "last_password_update": 0,
+              "last_picture_update": 0,
+              "locale": "",
+              "mfa_active": false,
+              "nickname": "",
+              "notify_props": Object {
+                "calls_desktop_sound": "true",
+                "channel": "false",
+                "comments": "never",
+                "desktop": "default",
+                "desktop_sound": "false",
+                "email": "false",
+                "first_name": "false",
+                "highlight_keys": "",
+                "mark_unread": "mention",
+                "mention_keys": "",
+                "push": "none",
+                "push_status": "offline",
+              },
+              "password": "",
+              "position": "",
+              "props": Object {},
+              "roles": "",
+              "terms_of_service_create_at": 0,
+              "terms_of_service_id": "",
+              "update_at": 0,
+              "username": "some-user",
+              "value": "user_id_1",
+            },
+            Object {
+              "auth_service": "",
+              "bot_description": "",
+              "create_at": 0,
+              "delete_at": 0,
+              "email": "",
+              "first_name": "",
+              "id": "user_id_2",
+              "is_bot": false,
+              "label": "some-user",
+              "last_activity_at": 0,
+              "last_name": "",
+              "last_password_update": 0,
+              "last_picture_update": 0,
+              "locale": "",
+              "mfa_active": false,
+              "nickname": "",
+              "notify_props": Object {
+                "calls_desktop_sound": "true",
+                "channel": "false",
+                "comments": "never",
+                "desktop": "default",
+                "desktop_sound": "false",
+                "email": "false",
+                "first_name": "false",
+                "highlight_keys": "",
+                "mark_unread": "mention",
+                "mention_keys": "",
+                "push": "none",
+                "push_status": "offline",
+              },
+              "password": "",
+              "position": "",
+              "props": Object {},
+              "roles": "",
+              "terms_of_service_create_at": 0,
+              "terms_of_service_id": "",
+              "update_at": 0,
+              "username": "some-user",
+              "value": "user_id_2",
+            },
+          ]
+        }
+      />
+    </Connect(Component)>
   </ModalBody>
   <ModalFooter
     bsClass="modal-footer"
diff --git a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
index 86d895b765..028e74ea2e 100644
--- a/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
+++ b/webapp/channels/src/components/multiselect/__snapshots__/multiselect.test.tsx.snap
@@ -120,24 +120,18 @@ exports[`components/multiselect/multiselect MultiSelectList should match snapsho
       <div
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
+        style={Object {}}
       >
-        <div
-          style={Object {}}
-        />
-        <div
-          style={Object {}}
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="{options}/{maxUsers} users"
-            id="multiselect.numMembers"
-            values={
-              Object {
-                "maxUsers": 7,
-                "options": 1,
-              }
+        <MemoizedFormattedMessage
+          defaultMessage="{options}/{maxUsers} users"
+          id="multiselect.numMembers"
+          values={
+            Object {
+              "maxUsers": 7,
+              "options": 1,
             }
-          />
-        </div>
+          }
+        />
       </div>
     </div>
     <MultiSelectList
@@ -330,24 +324,18 @@ exports[`components/multiselect/multiselect should match snapshot 1`] = `
       <div
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
+        style={Object {}}
       >
-        <div
-          style={Object {}}
-        />
-        <div
-          style={Object {}}
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="{options}/{maxUsers} users"
-            id="multiselect.numMembers"
-            values={
-              Object {
-                "maxUsers": 7,
-                "options": 1,
-              }
+        <MemoizedFormattedMessage
+          defaultMessage="{options}/{maxUsers} users"
+          id="multiselect.numMembers"
+          values={
+            Object {
+              "maxUsers": 7,
+              "options": 1,
             }
-          />
-        </div>
+          }
+        />
       </div>
     </div>
     <MultiSelectList
@@ -531,24 +519,18 @@ exports[`components/multiselect/multiselect should match snapshot for page 2 1`]
       <div
         className="multi-select__help"
         id="multiSelectHelpMemberInfo"
+        style={Object {}}
       >
-        <div
-          style={Object {}}
-        />
-        <div
-          style={Object {}}
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="{options}/{maxUsers} users"
-            id="multiselect.numMembers"
-            values={
-              Object {
-                "maxUsers": 7,
-                "options": 1,
-              }
+        <MemoizedFormattedMessage
+          defaultMessage="{options}/{maxUsers} users"
+          id="multiselect.numMembers"
+          values={
+            Object {
+              "maxUsers": 7,
+              "options": 1,
             }
-          />
-        </div>
+          }
+        />
       </div>
     </div>
     <MultiSelectList