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

Merged
kodiakhq merged 12 commits into from
Jan 29, 2026
Merged

refactor: standardize CreateDiscussion modal using GenericModal #38334

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 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
81f95cb
Merge branch 'develop' into refactor/38333-create-discussion-generic-…
kodiakhq[bot] 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
286 changes: 134 additions & 152 deletions apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,21 @@
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 { GenericModal } from '@rocket.chat/ui-client';
import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
import { useMutation } from '@tanstack/react-query';
import { useId } from 'react';
import type { ReactElement } from 'react';
import { useForm, Controller } from 'react-hook-form';

import { goToRoomById } from '../../lib/utils/goToRoomById';
Expand All @@ -48,8 +40,7 @@ type CreateDiscussionProps = {
nameSuggestion?: string;
};

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

const {
Expand Down Expand Up @@ -100,164 +91,155 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
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`}
/>
)}
/>
)}
</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>
<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>
{!defaultParentRoom && (
<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`}
/>
)}
/>
</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} />}
/>
</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} />}
/>
</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
6 changes: 4 additions & 2 deletions packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ type GenericModalProps = RequiredModalProps & {
title?: string | ReactElement;
icon?: IconName | ReactElement | null;
confirmDisabled?: boolean;
confirmLoading?: boolean;
tagline?: ReactNode;
onCancel?: () => Promise<void> | void;
onClose?: () => Promise<void> | void;
Expand Down Expand Up @@ -89,6 +90,7 @@ const GenericModal = ({
onConfirm,
dontAskAgain,
confirmDisabled,
confirmLoading,
tagline,
wrapperFunction,
annotation,
Expand Down Expand Up @@ -152,12 +154,12 @@ const GenericModal = ({
</Button>
)}
{wrapperFunction && (
<Button {...getButtonProps(variant)} type='submit' disabled={confirmDisabled}>
<Button {...getButtonProps(variant)} type='submit' disabled={confirmDisabled} loading={confirmLoading}>
{confirmText ?? t('Ok')}
</Button>
)}
{!wrapperFunction && onConfirm && (
<Button {...getButtonProps(variant)} onClick={handleConfirm} disabled={confirmDisabled}>
<Button {...getButtonProps(variant)} onClick={handleConfirm} disabled={confirmDisabled} loading={confirmLoading}>
{confirmText ?? t('Ok')}
</Button>
)}
Expand Down
Loading