feat: add sidepanelNavigagtion feature preview

apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx

@@ -24,6 +24,21 @@ import { useForm } from 'react-hook-form';
 
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
 
+const handleEnableQuery = (features: FeaturePreviewProps[]) => {
+	return features.map((item) => {
+		if (item.enableQuery) {
+			const expected = item.enableQuery.value;
+			const received = features.find((el) => el.name === item.enableQuery?.name)?.value;
+			if (expected !== received) {
+				item.disabled = true;
+				item.value = false;
+			} else {
+				item.disabled = false;
+			}
+		}
+		return item;
+	});
+};
 const AccountFeaturePreviewPage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -71,7 +86,7 @@ const AccountFeaturePreviewPage = () => {
 	};
 
 	const grouppedFeaturesPreview = Object.entries(
-		featuresPreview.reduce((result, currentValue) => {
+		handleEnableQuery(featuresPreview).reduce((result, currentValue) => {
 			(result[currentValue.group] = result[currentValue.group] || []).push(currentValue);
 			return result;
 		}, {} as Record<FeaturePreviewProps['group'], FeaturePreviewProps[]>),
@@ -108,7 +123,13 @@ const AccountFeaturePreviewPage = () => {
 													<Field>
 														<FieldRow>
 															<FieldLabel htmlFor={feature.name}>{t(feature.i18n)}</FieldLabel>
-															<ToggleSwitch id={feature.name} checked={feature.value} name={feature.name} onChange={handleFeatures} />
+															<ToggleSwitch
+																id={feature.name}
+																checked={feature.value}
+																name={feature.name}
+																onChange={handleFeatures}
+																disabled={feature.disabled}
+															/>
 														</FieldRow>
 														{feature.description && <FieldHint mbs={12}>{t(feature.description)}</FieldHint>}
 													</Field>

packages/i18n/src/locales/en.i18n.json

@@ -6483,5 +6483,7 @@
   "Workspace_and_user_settings": "Workspace and user settings",
   "Sidebar_Sections_Order": "Sidebar sections order",
   "Sidebar_Sections_Order_Description": "Select the categories in your preferred order",
-  "Incoming_Calls": "Incoming calls"
+  "Incoming_Calls": "Incoming calls",
+  "Sidepanel_navigation": "Sidepanel navigation for teams",
+  "Sidepanel_navigation_description": "Option to open a sidepanel with channels and/or discussions associated with the team. This allows team owners to customize communication methods to best meet their team’s needs. This feature is only available when Enhanced navigation experience is enabled."
 }

packages/ui-client/src/hooks/useFeaturePreviewList.ts

@@ -6,7 +6,8 @@ export type FeaturesAvailable =
 	| 'navigationBar'
 	| 'enable-timestamp-message-parser'
 	| 'contextualbarResizable'
-	| 'newNavigation';
+	| 'newNavigation'
+	| 'sidepanelNavigation';
 
 export type FeaturePreviewProps = {
 	name: FeaturesAvailable;
@@ -16,6 +17,11 @@ export type FeaturePreviewProps = {
 	imageUrl?: string;
 	value: boolean;
 	enabled: boolean;
+	disabled?: boolean;
+	enableQuery?: {
+		name: FeaturesAvailable;
+		value: boolean;
+	};
 };
 
 export const defaultFeaturesPreview: FeaturePreviewProps[] = [
@@ -60,6 +66,18 @@ export const defaultFeaturesPreview: FeaturePreviewProps[] = [
 		value: false,
 		enabled: true,
 	},
+	{
+		name: 'sidepanelNavigation',
+		i18n: 'Sidepanel_navigation',
+		description: 'Sidepanel_navigation_description',
+		group: 'Navigation',
+		value: false,
+		enabled: true,
+		enableQuery: {
+			name: 'newNavigation',
+			value: true,
+		},
+	},
 ];
 
 export const enabledDefaultFeatures = defaultFeaturesPreview.filter((feature) => feature.enabled);