From 06f59531f59ce78a46f881474210be7c10865a13 Mon Sep 17 00:00:00 2001 From: Bruno <93909709+bruno-keiko@users.noreply.github.com> Date: Mon, 24 Jun 2024 13:54:52 +0500 Subject: [PATCH] MM-57319 Direct Message modal message improvement (#27217) * Direct Message modal message improvement *Help text changed, create a modal link created * Updated the use of openModal to directly handle state updates in the component by using useDispatch hook. * FormattedMessage is used in DM modal help text * MM_NO_DOCKER updated to true in /server/config.mk file * DM modal help message bug fixed * bug: remainingRext function changed to RemainingComponent * code style changes * code style changes * code style changes * code style changes * code style changes * code style changes * RemainingText component changed deleted and added remainingText * code style changes * href and prevenDefault added to a tag * hideModal removed props and handled using dispach * handleHide removed from List component * MM_NO_DOCKER changed to false * remaining text changed * fixed bug * MM_NO_DOCKER ?= false * MM_NO_DOCKER ?= false * added missed semicolons * snapshot updated --------- Co-authored-by: Begench Co-authored-by: Mattermost Build --- .../more_direct_channels.test.tsx.snap | 2 + .../more_direct_channels/list/list.tsx | 58 +++++++++++++++---- .../more_direct_channels.tsx | 1 + webapp/channels/src/i18n/en.json | 1 + 4 files changed, 51 insertions(+), 11 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..8a817dd375 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 @@ -57,6 +57,7 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is addValue={[Function]} currentUserId="current_user_id" handleDelete={[Function]} + handleHide={[Function]} handlePageChange={[Function]} handleSubmit={[Function]} isExistingChannel={false} @@ -347,6 +348,7 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = ` addValue={[Function]} currentUserId="current_user_id" handleDelete={[Function]} + handleHide={[Function]} handlePageChange={[Function]} handleSubmit={[Function]} isExistingChannel={false} 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 cf45612781..53772e34df 100644 --- a/webapp/channels/src/components/more_direct_channels/list/list.tsx +++ b/webapp/channels/src/components/more_direct_channels/list/list.tsx @@ -3,12 +3,16 @@ import React, {useCallback, useMemo} from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; +import {useDispatch} from 'react-redux'; import type {UserProfile} from '@mattermost/types/users'; -import MultiSelect from 'components/multiselect/multiselect'; +import {openModal} from 'actions/views/modals'; -import Constants from 'utils/constants'; +import MultiSelect from 'components/multiselect/multiselect'; +import NewChannelModal from 'components/new_channel_modal/new_channel_modal'; + +import Constants, {ModalIdentifiers} from 'utils/constants'; import ListItem from '../list_item'; import {optionValue} from '../types'; @@ -23,6 +27,7 @@ type Props = { handleDelete: (values: OptionValue[]) => void; handlePageChange: (page: number, prevPage: number) => void; handleSubmit: (values?: OptionValue[]) => void; + handleHide: () => void; isExistingChannel: boolean; loading: boolean; options: Option[]; @@ -57,10 +62,18 @@ const List = React.forwardRef((props: Props, ref?: React.Ref { return value.id === props.currentUserId || Boolean(value.delete_at); }, [props.currentUserId]); + const handleCreateChannel = (e: React.MouseEvent) => { + e.preventDefault(); + props.handleHide(); + dispatch(openModal({modalId: ModalIdentifiers.NEW_CHANNEL_MODAL, dialogType: NewChannelModal})); + }; + const intl = useIntl(); let note; @@ -82,6 +95,37 @@ const List = React.forwardRef((props: Props, ref?: React.Ref props.values.length) { + remainingText = ( + + ); + } else { + remainingText = ( + create a channel to include more people.'} + values={{ + num: MAX_SELECTABLE_VALUES, + a: (chunks: React.ReactNode) => { + return ( + handleCreateChannel(e)} + >{chunks} + ); + }, + }} + /> + ); + } + const options = useMemo(() => { return props.options.map(optionValue); }, [props.options]); @@ -104,15 +148,7 @@ const List = React.forwardRef((props: Props, ref?: React.Ref - } + numRemainingText={remainingText} buttonSubmitText={ {searchQuery}", "multiselect.loading": "Loading...", "multiselect.maxGroupMembers": "No more than 256 members can be added to a group at once.", + "multiselect.maxPeople": "Use ↑↓ to browse, ↵ to select. You can't add more than 7 people. Please create a channel to include more people. ", "multiselect.numGroupsRemaining": "Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {group} other {groups}}. ", "multiselect.numMembers": "{memberOptions, number} of {totalCount, number} members", "multiselect.numPeopleRemaining": "Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {person} other {people}}. ",