feat: CreateTeamModal and EditRoomInfo add sidepanel fields to th…

…e UI
RocketChat · Sep 6, 2024 · 18abb53 · 18abb53
1 parent fb05fd7
commit 18abb53
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 4 deletions.
diff --git a/apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx b/apps/meteor/client/sidebarv2/header/CreateTeamModal.tsx
@@ -1,3 +1,4 @@
+import type { SidepanelItem } from '@rocket.chat/core-typings';
 import {
 	Box,
 	Button,
@@ -40,6 +41,8 @@ type CreateTeamModalInputs = {
 	encrypted: boolean;
 	broadcast: boolean;
 	members?: string[];
+	showDiscussions?: boolean;
+	showChannels?: boolean;
 };
 
 type CreateTeamModalProps = { onClose: () => void };
@@ -50,6 +53,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms');
 	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
 	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
+
 	const dispatchToastMessage = useToastMessageDispatch();
 	const canCreateTeam = usePermission('create-team');
 	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
@@ -94,6 +98,8 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 			encrypted: (e2eEnabledForPrivateByDefault as boolean) ?? false,
 			broadcast: false,
 			members: [],
+			showChannels: false,
+			showDiscussions: false,
 		},
 	});
 
@@ -123,7 +129,10 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 		topic,
 		broadcast,
 		encrypted,
+		showChannels,
+		showDiscussions,
 	}: CreateTeamModalInputs): Promise<void> => {
+		const sidepanelItem = [showChannels && 'channels', showDiscussions && 'discussions'].filter(Boolean) as [SidepanelItem, SidepanelItem?];
 		const params = {
 			name,
 			members,
@@ -136,6 +145,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 					encrypted,
 				},
 			},
+			...((showChannels || showDiscussions) && { sidepanel: { items: sidepanelItem } }),
 		};
 
 		try {
@@ -157,6 +167,8 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 	const encryptedId = useUniqueId();
 	const broadcastId = useUniqueId();
 	const addMembersId = useUniqueId();
+	const showChannelsId = useUniqueId();
+	const showDiscussionsId = useUniqueId();
 
 	return (
 		<Modal
@@ -237,6 +249,48 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 				<Accordion>
 					<AccordionItem title={t('Advanced_settings')}>
 						<FieldGroup>
+							<Box is='h5' fontScale='h5' color='titles-labels'>
+								{t('Navigation')}
+							</Box>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={showChannelsId}>{t('Channels')}</FieldLabel>
+									<Controller
+										control={control}
+										name='showChannels'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												aria-describedby={`${showChannelsId}-hint`}
+												id={showChannelsId}
+												onChange={onChange}
+												checked={value}
+												ref={ref}
+											/>
+										)}
+									/>
+								</FieldRow>
+								<FieldDescription id={`${showChannelsId}-hint`}>{t('Show_channels_description')}</FieldDescription>
+							</Field>
+
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={showDiscussionsId}>{t('Discussions')}</FieldLabel>
+									<Controller
+										control={control}
+										name='showDiscussions'
+										render={({ field: { onChange, value, ref } }): ReactElement => (
+											<ToggleSwitch
+												aria-describedby={`${showDiscussionsId}-hint`}
+												id={showDiscussionsId}
+												onChange={onChange}
+												checked={value}
+												ref={ref}
+											/>
+										)}
+									/>
+								</FieldRow>
+								<FieldDescription id={`${showDiscussionsId}-hint`}>{t('Show_discussions_description')}</FieldDescription>
+							</Field>
 							<Box is='h5' fontScale='h5' color='titles-labels'>
 								{t('Security_and_permissions')}
 							</Box>

diff --git a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable complexity */
-import type { IRoomWithRetentionPolicy } from '@rocket.chat/core-typings';
+import type { IRoomWithRetentionPolicy, SidepanelItem } from '@rocket.chat/core-typings';
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import {
@@ -21,6 +21,7 @@ import {
 	Box,
 	TextAreaInput,
 	AccordionItem,
+	Divider,
 } from '@rocket.chat/fuselage';
 import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
@@ -76,7 +77,7 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 	const dispatchToastMessage = useToastMessageDispatch();
 	const isFederated = useMemo(() => isRoomFederated(room), [room]);
 	// eslint-disable-next-line no-nested-ternary
-	const roomType = 'prid' in room ? 'discussion' : room.teamId ? 'team' : 'channel';
+	const roomType = 'prid' in room ? 'discussion' : room.teamMain ? 'team' : 'channel';
 
 	const retentionPolicy = useRetentionPolicy(room);
 	const retentionMaxAgeDefault = msToTimeUnit(TIMEUNIT.days, Number(useSetting<number>(getRetentionSetting(room.t)))) ?? 30;
@@ -118,6 +119,8 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 		retentionOverrideGlobal,
 		roomType: roomTypeP,
 		reactWhenReadOnly,
+		showChannels,
+		showDiscussions,
 	} = watch();
 
 	const {
@@ -158,13 +161,23 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 			retentionIgnoreThreads,
 			...formData
 		}) => {
-			const data = getDirtyFields(formData, dirtyFields);
+			const data = getDirtyFields<Partial<typeof defaultValues>>(formData, dirtyFields);
 			delete data.archived;
+			delete data.showChannels;
+			delete data.showDiscussions;
+
+			const sidepanelItems = [showChannels && 'channels', showDiscussions && 'discussions'].filter(Boolean) as [
+				SidepanelItem,
+				SidepanelItem?,
+			];
+
+			const sidepanel = sidepanelItems.length > 0 ? { items: sidepanelItems } : null;
 
 			try {
 				await saveAction({
 					rid: room._id,
 					...data,
+					...(roomType === 'team' ? { sidepanel } : null),
 					...((data.joinCode || 'joinCodeRequired' in data) && { joinCode: joinCodeRequired ? data.joinCode : '' }),
 					...((data.systemMessages || !hideSysMes) && {
 						systemMessages: hideSysMes && data.systemMessages,
@@ -224,6 +237,8 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 	const retentionExcludePinnedField = useUniqueId();
 	const retentionFilesOnlyField = useUniqueId();
 	const retentionIgnoreThreads = useUniqueId();
+	const showDiscussionsField = useUniqueId();
+	const showChannelsField = useUniqueId();
 
 	const showAdvancedSettings = canViewEncrypted || canViewReadOnly || readOnly || canViewArchived || canViewJoinCode || canViewHideSysMes;
 	const showRetentionPolicy = canEditRoomRetentionPolicy && retentionPolicy?.enabled;
@@ -355,6 +370,46 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 						<Accordion>
 							{showAdvancedSettings && (
 								<AccordionItem title={t('Advanced_settings')}>
+									{roomType === 'team' && (
+										<>
+											<FieldGroup>
+												<Box is='h5' fontScale='h5' color='titles-labels'>
+													{t('Navigation')}
+												</Box>
+												<Field>
+													<FieldRow>
+														<FieldLabel htmlFor={showChannelsField}>{t('Channels')}</FieldLabel>
+														<Controller
+															control={control}
+															name='showChannels'
+															render={({ field: { value, ...field } }) => (
+																<ToggleSwitch id={showChannelsField} checked={value} {...field} />
+															)}
+														/>
+													</FieldRow>
+													<FieldRow>
+														<FieldHint id={`${showChannelsField}-hint`}>{t('Show_channels_description')}</FieldHint>
+													</FieldRow>
+												</Field>
+												<Field>
+													<FieldRow>
+														<FieldLabel htmlFor={showDiscussionsField}>{t('Discussions')}</FieldLabel>
+														<Controller
+															control={control}
+															name='showDiscussions'
+															render={({ field: { value, ...field } }) => (
+																<ToggleSwitch id={showDiscussionsField} checked={value} {...field} />
+															)}
+														/>
+													</FieldRow>
+													<FieldRow>
+														<FieldHint id={`${showDiscussionsField}-hint`}>{t('Show_discussions_description')}</FieldHint>
+													</FieldRow>
+												</Field>
+											</FieldGroup>
+											<Divider mb={24} />
+										</>
+									)}
 									<FieldGroup>
 										<Box is='h5' fontScale='h5' color='titles-labels'>
 											{t('Security_and_permissions')}

diff --git a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/useEditRoomInitialValues.ts b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/useEditRoomInitialValues.ts
@@ -10,7 +10,20 @@ export const useEditRoomInitialValues = (room: IRoomWithRetentionPolicy) => {
 	const retentionPolicy = useRetentionPolicy(room);
 	const canEditRoomRetentionPolicy = usePermission('edit-room-retention-policy', room._id);
 
-	const { t, ro, archived, topic, description, announcement, joinCodeRequired, sysMes, encrypted, retention, reactWhenReadOnly } = room;
+	const {
+		t,
+		ro,
+		archived,
+		topic,
+		description,
+		announcement,
+		joinCodeRequired,
+		sysMes,
+		encrypted,
+		retention,
+		reactWhenReadOnly,
+		sidepanel,
+	} = room;
 
 	return useMemo(
 		() => ({
@@ -37,6 +50,8 @@ export const useEditRoomInitialValues = (room: IRoomWithRetentionPolicy) => {
 					retentionFilesOnly: retention?.filesOnly ?? retentionPolicy.filesOnly,
 					retentionIgnoreThreads: retention?.ignoreThreads ?? retentionPolicy.ignoreThreads,
 				}),
+			showDiscussions: sidepanel?.items.includes('discussions'),
+			showChannels: sidepanel?.items.includes('channels'),
 		}),
 		[
 			announcement,
@@ -53,6 +68,7 @@ export const useEditRoomInitialValues = (room: IRoomWithRetentionPolicy) => {
 			encrypted,
 			reactWhenReadOnly,
 			canEditRoomRetentionPolicy,
+			sidepanel,
 		],
 	);
 };