chore: Create/Edit room consistency

apps/meteor/app/api/server/v1/rooms.ts

@@ -322,7 +322,7 @@ API.v1.addRoute(
 	{
 		async post() {
 			// eslint-disable-next-line @typescript-eslint/naming-convention
-			const { prid, pmid, reply, t_name, users, encrypted } = this.bodyParams;
+			const { prid, pmid, reply, t_name, users, encrypted, topic } = this.bodyParams;
 			if (!prid) {
 				return API.v1.failure('Body parameter "prid" is required.');
 			}
@@ -344,6 +344,7 @@ API.v1.addRoute(
 				reply,
 				users: users?.filter(isTruthy) || [],
 				encrypted,
+				topic,
 			});
 
 			return API.v1.success({ discussion });

apps/meteor/app/discussion/server/methods/createDiscussion.ts

@@ -62,6 +62,7 @@ type CreateDiscussionProperties = {
 	users: Array<Exclude<IUser['username'], undefined>>;
 	user: IUser;
 	encrypted?: boolean;
+	topic?: string;
 };
 
 const create = async ({
@@ -72,6 +73,7 @@ const create = async ({
 	users,
 	user,
 	encrypted,
+	topic,
 }: CreateDiscussionProperties): Promise<IRoom & { rid: string }> => {
 	// if you set both, prid and pmid, and the rooms dont match... should throw an error)
 	let message: null | IMessage = null;
@@ -145,7 +147,7 @@ const create = async ({
 
 	const type = await roomCoordinator.getRoomDirectives(parentRoom.t).getDiscussionType(parentRoom);
 	const description = parentRoom.encrypted ? '' : message?.msg;
-	const topic = parentRoom.name;
+	const discussionTopic = topic || parentRoom.name;
 
 	if (!type) {
 		throw new Meteor.Error('error-invalid-type', 'Cannot define discussion room type', {
@@ -163,7 +165,7 @@ const create = async ({
 		{
 			fname: discussionName,
 			description, // TODO discussions remove
-			topic, // TODO discussions remove
+			topic: discussionTopic,
 			prid,
 			encrypted,
 		},
@@ -203,7 +205,7 @@ declare module '@rocket.chat/ui-contexts' {
 
 export const createDiscussion = async (
 	userId: string,
-	{ prid, pmid, t_name: discussionName, reply, users, encrypted }: Omit<CreateDiscussionProperties, 'user'>,
+	{ prid, pmid, t_name: discussionName, reply, users, encrypted, topic }: Omit<CreateDiscussionProperties, 'user'>,
 ): Promise<
 	IRoom & {
 		rid: string;
@@ -229,7 +231,7 @@ export const createDiscussion = async (
 		});
 	}
 
-	return create({ prid, pmid, t_name: discussionName, reply, users, user, encrypted });
+	return create({ prid, pmid, t_name: discussionName, reply, users, user, encrypted, topic });
 };
 
 Meteor.methods<ServerMethods>({

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -32,6 +32,7 @@ type CreateDiscussionFormValues = {
 	encrypted: boolean;
 	usernames: Array<IUser['username']>;
 	firstMessage: string;
+	topic: string;
 };
 
 type CreateDiscussionProps = {
@@ -49,6 +50,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 		handleSubmit,
 		control,
 		watch,
+		register,
 	} = useForm({
 		mode: 'onBlur',
 		defaultValues: {
@@ -57,6 +59,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 			encrypted: false,
 			usernames: [],
 			firstMessage: '',
+			topic: '',
 		},
 	});
 
@@ -72,21 +75,23 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 		},
 	});
 
-	const handleCreate = async ({ name, parentRoom, encrypted, usernames, firstMessage }: CreateDiscussionFormValues) => {
+	const handleCreate = async ({ name, parentRoom, encrypted, usernames, firstMessage, topic }: CreateDiscussionFormValues) => {
 		createDiscussionMutation.mutate({
 			prid: defaultParentRoom || parentRoom,
 			t_name: name,
 			users: usernames,
 			reply: encrypted ? undefined : firstMessage,
+			topic,
 			...(parentMessageId && { pmid: parentMessageId }),
 		});
 	};
 
-	const targetChannelField = useUniqueId();
-	const encryptedField = useUniqueId();
-	const discussionField = useUniqueId();
-	const usersField = useUniqueId();
-	const firstMessageField = useUniqueId();
+	const parentRoomId = useUniqueId();
+	const encryptedId = useUniqueId();
+	const discussionNameId = useUniqueId();
+	const membersId = useUniqueId();
+	const firstMessageId = useUniqueId();
+	const topicId = useUniqueId();
 
 	return (
 		<Modal
@@ -101,7 +106,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 				<Box mbe={24}>{t('Discussion_description')}</Box>
 				<FieldGroup>
 					<Field>
-						<FieldLabel htmlFor={targetChannelField} required>
+						<FieldLabel htmlFor={parentRoomId} required>
 							{t('Discussion_target_channel')}
 						</FieldLabel>
 						<FieldRow>
@@ -123,36 +128,26 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 											onBlur={onBlur}
 											onChange={onChange}
 											value={value}
-											id={targetChannelField}
-											placeholder={t('Discussion_target_channel_description')}
+											id={parentRoomId}
+											placeholder={t('Search_options')}
 											disabled={Boolean(defaultParentRoom)}
 											aria-invalid={Boolean(errors.parentRoom)}
 											aria-required='true'
-											aria-describedby={`${targetChannelField}-error`}
+											aria-describedby={`${parentRoomId}-error`}
 										/>
 									)}
 								/>
 							)}
 						</FieldRow>
 						{errors.parentRoom && (
-							<FieldError aria-live='assertive' id={`${targetChannelField}-error`}>
+							<FieldError aria-live='assertive' id={`${parentRoomId}-error`}>
 								{errors.parentRoom.message}
 							</FieldError>
 						)}
 					</Field>
 					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={encryptedField}>{t('Encrypted')}</FieldLabel>
-							<Controller
-								control={control}
-								name='encrypted'
-								render={({ field: { value, ...field } }) => <ToggleSwitch id={encryptedField} {...field} checked={value} />}
-							/>
-						</FieldRow>
-					</Field>
-					<Field>
-						<FieldLabel htmlFor={discussionField} required>
-							{t('Discussion_name')}
+						<FieldLabel htmlFor={discussionNameId} required>
+							{t('Name')}
 						</FieldLabel>
 						<FieldRow>
 							<Controller
@@ -161,61 +156,87 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 								rules={{ required: t('Field_required') }}
 								render={({ field }) => (
 									<TextInput
-										id={discussionField}
+										id={discussionNameId}
 										{...field}
-										placeholder={t('New_discussion_name')}
 										aria-invalid={Boolean(errors.name)}
 										aria-required='true'
-										aria-describedby={`${discussionField}-error`}
+										aria-describedby={`${discussionNameId}-error ${discussionNameId}-hint`}
 										addon={<Icon name='baloons' size='x20' />}
 									/>
 								)}
 							/>
 						</FieldRow>
 						{errors.name && (
-							<FieldError aria-live='assertive' id={`${discussionField}-error`}>
+							<FieldError aria-live='assertive' id={`${discussionNameId}-error`}>
 								{errors.name.message}
 							</FieldError>
 						)}
 					</Field>
 					<Field>
-						<FieldLabel htmlFor={usersField}>{t('Invite_Users')}</FieldLabel>
+						<FieldLabel htmlFor={topicId}>{t('Topic')}</FieldLabel>
+						<FieldRow>
+							<TextInput id={topicId} aria-describedby={`${topicId}-hint`} {...register('topic')} />
+						</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={usersField}
+										id={membersId}
 										name={name}
 										onChange={onChange}
 										value={value}
 										onBlur={onBlur}
-										placeholder={t('Username_Placeholder')}
+										placeholder={t('Add_people')}
 									/>
 								)}
 							/>
 						</FieldRow>
 					</Field>
 					<Field>
-						<FieldLabel htmlFor={firstMessageField}>{t('Discussion_first_message_title')}</FieldLabel>
+						<FieldLabel htmlFor={firstMessageId}>{t('Discussion_first_message_title')}</FieldLabel>
 						<FieldRow>
 							<Controller
 								control={control}
 								name='firstMessage'
 								render={({ field }) => (
 									<TextAreaInput
-										id={firstMessageField}
+										id={firstMessageId}
 										{...field}
-										placeholder={t('New_discussion_first_message')}
 										rows={5}
 										disabled={encrypted}
-										aria-describedby={`${firstMessageField}-hint`}
+										aria-describedby={`${firstMessageId}-hint ${firstMessageId}-encrypted-hint`}
 									/>
 								)}
 							/>
 						</FieldRow>
-						{encrypted && <FieldHint id={`${firstMessageField}-hint`}>{t('Discussion_first_message_disabled_due_to_e2e')}</FieldHint>}
+						{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>
+						{encrypted ? (
+							<FieldHint id={`${encryptedId}-hint`}>{t('Encrypted_messages', { roomType: 'discussion' })}</FieldHint>
+						) : (
+							<FieldHint id={`${encryptedId}-hint`}>{t('Encrypted_messages_false')}</FieldHint>
+						)}
 					</Field>
 				</FieldGroup>
 			</Modal.Content>

apps/meteor/client/components/InfoPanel/InfoPanelActionGroup.tsx

@@ -6,7 +6,7 @@ import Section from './InfoPanelSection';
 
 const InfoPanelActionGroup: FC<ComponentProps<typeof ButtonGroup>> = (props) => (
 	<Section>
-		<ButtonGroup align='center' {...props} />
+		<ButtonGroup align='center' stretch {...props} />
 	</Section>
 );