Skip to content

refactor: standardize CreateDiscussion modal using GenericModal #38334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NAME-ASHWANIYADAV wants to merge 11 commits into
base: develop
Choose a base branch
from
+174 −170
Open

refactor: standardize CreateDiscussion modal using GenericModal #38334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
298ce8e
refactor(client): replace Modal with GenericModal in CreateDiscussion…
NAME-ASHWANIYADAV Jan 27, 2026
fef2dfe
fix(a11y): pass id prop to DefaultParentRoomField for proper label-in…
NAME-ASHWANIYADAV Jan 27, 2026
2b80a0e
fix(a11y): conditionally set aria-describedby based on rendered hint …
NAME-ASHWANIYADAV Jan 27, 2026
c0f6fde
fix: address PR review feedback for CreateDiscussion refactor
NAME-ASHWANIYADAV Jan 27, 2026
f9d1247
fix: address review comments and clean up unused code
NAME-ASHWANIYADAV Jan 27, 2026
53799b9
chore: add alert role in `FieldError`
dougfabris Jan 27, 2026
1f33626
chore: remove changeset
dougfabris Jan 27, 2026
2000012
Merge branch 'develop' into refactor/38333-create-discussion-generic-…
kodiakhq[bot] Jan 27, 2026
0556ad3
Merge branch 'develop' into pr/NAME-ASHWANIYADAV/38334
dougfabris Jan 29, 2026
5075d80
chore: update snapshot
dougfabris Jan 29, 2026
a75cd76
chore: update GenericModal dependent snapshots
dougfabris Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...meteor/client/components/ABAC/ABACUpsellModal/__snapshots__/ABACUpsellModal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ exports[`ABACUpsellModal should render the modal with correct content 1`] = `
<button
aria-label="Close"
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
tabindex="-1"
type="button"
>
<i
Expand Down
3 changes: 3 additions & 0 deletions apps/meteor/client/components/CreateDiscussion/CreateDiscussion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ export default {
layout: 'fullscreen',
actions: { argTypesRegex: '^on.*' },
},
args: {
onClose: () => undefined,
},
} satisfies Meta<typeof CreateDiscussion>;

export const Default: StoryFn<typeof CreateDiscussion> = (args) => <CreateDiscussion {...args} />;
294 changes: 138 additions & 156 deletions apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,22 @@
import type { IMessage, IRoom, IUser } from '@rocket.chat/core-typings';
import {
Modal,
Field,
FieldGroup,
ToggleSwitch,
TextInput,
TextAreaInput,
Button,
Icon,
Box,
FieldHint,
FieldLabel,
FieldRow,
FieldError,
ModalHeader,
ModalTitle,
ModalClose,
ModalContent,
ModalFooter,
ModalFooterControllers,
} from '@rocket.chat/fuselage';
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
import { GenericModal } from '@rocket.chat/ui-client';
import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
import { useMutation } from '@tanstack/react-query';
import { useId, useState } from 'react';
import type { ReactElement } from 'react';
import { useForm, Controller } from 'react-hook-form';

import { goToRoomById } from '../../lib/utils/goToRoomById';
Expand All @@ -50,14 +42,13 @@ type CreateDiscussionProps = {
nameSuggestion?: string;
};

// TODO: Replace `Modal` in favor of `GenericModal`
const CreateDiscussion = ({
onClose,
defaultParentRoom,
parentMessageId,
nameSuggestion,
encryptedParentRoom = false,
}: CreateDiscussionProps): ReactElement => {
}: CreateDiscussionProps) => {
const t = useTranslation();

const [encryptedDisabled, setEncryptedDisabled] = useState(encryptedParentRoom);
Expand Down Expand Up @@ -119,168 +110,159 @@ const CreateDiscussion = ({
const membersId = useId();
const firstMessageId = useId();
const topicId = useId();
const modalId = useId();

return (
<Modal
aria-labelledby={`${modalId}-title`}
<GenericModal
variant='warning'
icon={null}
title={t('Discussion_title')}
onCancel={onClose}
wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
confirmText={t('Create')}
cancelText={t('Cancel')}
confirmLoading={createDiscussionMutation.isPending}
>
<ModalHeader>
<ModalTitle id={`${modalId}-title`}>{t('Discussion_title')}</ModalTitle>
<ModalClose tabIndex={-1} onClick={onClose} />
</ModalHeader>
<ModalContent>
<Box mbe={24}>{t('Discussion_description')}</Box>
<FieldGroup>
<Field>
<FieldLabel htmlFor={parentRoomId} required>
{t('Discussion_target_channel')}
</FieldLabel>
<FieldRow>
{defaultParentRoom && (
<Controller
control={control}
name='parentRoom'
render={() => <DefaultParentRoomField defaultParentRoom={defaultParentRoom} />}
/>
)}
{!defaultParentRoom && (
<Controller
control={control}
name='parentRoom'
rules={{ required: t('Required_field', { field: t('Discussion_target_channel') }) }}
render={({ field: { name, onBlur, onChange, value } }) => (
<RoomAutoComplete
name={name}
onBlur={onBlur}
onChange={onChange}
value={value}
id={parentRoomId}
placeholder={t('Search_options')}
disabled={Boolean(defaultParentRoom)}
aria-invalid={Boolean(errors.parentRoom)}
aria-required='true'
aria-describedby={`${parentRoomId}-error`}
setSelectedRoom={onParentRoomChange}
renderRoomIcon={({ encrypted }) => (encrypted ? <Icon name='key' /> : null)}
/>
)}
/>
)}
</FieldRow>
{errors.parentRoom && (
<FieldError aria-live='assertive' id={`${parentRoomId}-error`}>
{errors.parentRoom.message}
</FieldError>
)}
</Field>
<Field>
<FieldLabel htmlFor={discussionNameId} required>
{t('Name')}
</FieldLabel>
<FieldRow>
<Box mbe={24}>{t('Discussion_description')}</Box>
<FieldGroup>
<Field>
<FieldLabel htmlFor={parentRoomId} required>
{t('Discussion_target_channel')}
</FieldLabel>
<FieldRow>
{defaultParentRoom && (
<Controller
name='name'
control={control}
rules={{ required: t('Required_field', { field: t('Name') }) }}
render={({ field }) => (
<TextInput
id={discussionNameId}
{...field}
aria-invalid={Boolean(errors.name)}
aria-required='true'
aria-describedby={`${discussionNameId}-error ${discussionNameId}-hint`}
addon={<Icon name='baloons' size='x20' />}
/>
)}
name='parentRoom'
render={() => <DefaultParentRoomField defaultParentRoom={defaultParentRoom} id={parentRoomId} />}
/>
</FieldRow>
{errors.name && (
<FieldError aria-live='assertive' id={`${discussionNameId}-error`}>
{errors.name.message}
</FieldError>
)}
</Field>
<Field>
<FieldLabel htmlFor={topicId}>{t('Topic')}</FieldLabel>
<FieldRow>
{!defaultParentRoom && (
<Controller
name='topic'
control={control}
render={({ field }) => <TextInput id={topicId} {...field} aria-describedby={`${topicId}-hint`} />}
/>
</FieldRow>
<FieldRow>
<FieldHint id={`${topicId}-hint`}>{t('Displayed_next_to_name')}</FieldHint>
</FieldRow>
</Field>
<Field>
<FieldLabel htmlFor={membersId}>{t('Members')}</FieldLabel>
<FieldRow>
<Controller
control={control}
name='usernames'
render={({ field: { name, onChange, value, onBlur } }) => (
<UserAutoCompleteMultiple
id={membersId}
name='parentRoom'
rules={{ required: t('Required_field', { field: t('Discussion_target_channel') }) }}
render={({ field: { name, onBlur, onChange, value } }) => (
<RoomAutoComplete
name={name}
onBlur={onBlur}
onChange={onChange}
value={value}
onBlur={onBlur}
placeholder={t('Add_people')}
/>
)}
/>
</FieldRow>
</Field>
<Field>
<FieldLabel htmlFor={firstMessageId}>{t('Discussion_first_message_title')}</FieldLabel>
<FieldRow>
<Controller
control={control}
name='firstMessage'
render={({ field }) => (
<TextAreaInput
id={firstMessageId}
{...field}
rows={5}
disabled={encrypted}
aria-describedby={`${firstMessageId}-hint ${firstMessageId}-encrypted-hint`}
id={parentRoomId}
placeholder={t('Search_options')}
disabled={Boolean(defaultParentRoom)}
aria-invalid={Boolean(errors.parentRoom)}
aria-required='true'
aria-describedby={`${parentRoomId}-error`}
setSelectedRoom={onParentRoomChange}
renderRoomIcon={({ encrypted }) => (encrypted ? <Icon name='key' /> : null)}
/>
)}
/>
</FieldRow>
{encrypted ? (
<FieldHint id={`${firstMessageId}-encrypted-hint`}>{t('Discussion_first_message_disabled_due_to_e2e')}</FieldHint>
) : (
<FieldHint id={`${firstMessageId}-hint`}>{t('First_message_hint')}</FieldHint>
)}
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={encryptedId}>{t('Encrypted')}</FieldLabel>
<Controller
control={control}
name='encrypted'
render={({ field: { value, ...field } }) => (
<ToggleSwitch id={encryptedId} {...field} checked={value} disabled={encryptedDisabled} />
)}
/>
</FieldRow>
<FieldHint id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate: true, encrypted })}</FieldHint>
</Field>
</FieldGroup>
</ModalContent>
<ModalFooter>
<ModalFooterControllers>
<Button onClick={onClose}>{t('Cancel')}</Button>
<Button type='submit' primary loading={createDiscussionMutation.isPending}>
{t('Create')}
</Button>
</ModalFooterControllers>
</ModalFooter>
</Modal>
</FieldRow>
{errors.parentRoom && (
<FieldError role='alert' id={`${parentRoomId}-error`}>
{errors.parentRoom.message}
</FieldError>
)}
</Field>
<Field>
<FieldLabel htmlFor={discussionNameId} required>
{t('Name')}
</FieldLabel>
<FieldRow>
<Controller
name='name'
control={control}
rules={{ required: t('Required_field', { field: t('Name') }) }}
render={({ field }) => (
<TextInput
id={discussionNameId}
{...field}
aria-invalid={Boolean(errors.name)}
aria-required='true'
aria-describedby={errors.name ? `${discussionNameId}-error` : undefined}
addon={<Icon name='baloons' size='x20' />}
/>
)}
/>
</FieldRow>
{errors.name && (
<FieldError role='alert' id={`${discussionNameId}-error`}>
{errors.name.message}
</FieldError>
)}
</Field>
<Field>
<FieldLabel htmlFor={topicId}>{t('Topic')}</FieldLabel>
<FieldRow>
<Controller
name='topic'
control={control}
render={({ field }) => <TextInput id={topicId} {...field} aria-describedby={`${topicId}-hint`} />}
/>
</FieldRow>
<FieldRow>
<FieldHint id={`${topicId}-hint`}>{t('Displayed_next_to_name')}</FieldHint>
</FieldRow>
</Field>
<Field>
<FieldLabel htmlFor={membersId}>{t('Members')}</FieldLabel>
<FieldRow>
<Controller
control={control}
name='usernames'
render={({ field: { name, onChange, value, onBlur } }) => (
<UserAutoCompleteMultiple
id={membersId}
name={name}
onChange={onChange}
value={value}
onBlur={onBlur}
placeholder={t('Add_people')}
/>
)}
/>
</FieldRow>
</Field>
<Field>
<FieldLabel htmlFor={firstMessageId}>{t('Discussion_first_message_title')}</FieldLabel>
<FieldRow>
<Controller
control={control}
name='firstMessage'
render={({ field }) => (
<TextAreaInput
id={firstMessageId}
{...field}
rows={5}
disabled={encrypted}
aria-describedby={encrypted ? `${firstMessageId}-encrypted-hint` : `${firstMessageId}-hint`}
/>
)}
/>
</FieldRow>
{encrypted ? (
<FieldHint id={`${firstMessageId}-encrypted-hint`}>{t('Discussion_first_message_disabled_due_to_e2e')}</FieldHint>
) : (
<FieldHint id={`${firstMessageId}-hint`}>{t('First_message_hint')}</FieldHint>
)}
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={encryptedId}>{t('Encrypted')}</FieldLabel>
<Controller
control={control}
name='encrypted'
render={({ field: { value, ...field } }) => (
<ToggleSwitch id={encryptedId} {...field} checked={value} disabled={encryptedDisabled} />
)}
/>
</FieldRow>
<FieldHint id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate: true, encrypted })}</FieldHint>
</Field>
</FieldGroup>
</GenericModal>
);
};

Expand Down
9 changes: 7 additions & 2 deletions apps/meteor/client/components/CreateDiscussion/DefaultParentRoomField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { Skeleton, TextInput, Callout } from '@rocket.chat/fuselage';
import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import type { ReactElement } from 'react';
import type { ComponentPropsWithoutRef } from 'react';
import { useMemo } from 'react';

import { roomCoordinator } from '../../lib/rooms/roomCoordinator';

const DefaultParentRoomField = ({ defaultParentRoom }: { defaultParentRoom: string }): ReactElement => {
type DefaultParentRoomFieldProps = {
defaultParentRoom: string;
} & Omit<ComponentPropsWithoutRef<typeof TextInput>, 'defaultValue' | 'disabled'>;

const DefaultParentRoomField = ({ defaultParentRoom, ...props }: DefaultParentRoomFieldProps) => {
const t = useTranslation();

const query = useMemo(
Expand Down Expand Up @@ -34,6 +38,7 @@ const DefaultParentRoomField = ({ defaultParentRoom }: { defaultParentRoom: stri

return (
<TextInput
{...props}
defaultValue={roomCoordinator.getRoomName(data.room.t, {
_id: data.room._id,
fname: data.room.fname,
Expand Down
Loading
Loading