From bb94c9c67a06a13461374cce1f27e1f7a28e64f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Fri, 30 Aug 2024 00:55:30 -0300
Subject: [PATCH] feat: add `sidepanelNavigation` to Feature preview list
 (#33156)

---
 .changeset/brown-singers-appear.md            |  7 ++++++
 .../AccountFeaturePreviewPage.tsx             | 25 +++++++++++++++++--
 packages/i18n/src/locales/en.i18n.json        |  6 ++++-
 .../src/hooks/useFeaturePreviewList.ts        | 20 ++++++++++++++-
 4 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/brown-singers-appear.md

diff --git a/.changeset/brown-singers-appear.md b/.changeset/brown-singers-appear.md
new file mode 100644
index 000000000000..8a9a69f225ac
--- /dev/null
+++ b/.changeset/brown-singers-appear.md
@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-client': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+added `sidepanelNavigation` to feature preview list
diff --git a/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx b/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx
index c8cd7138e5a6..dd9ab6a90959 100644
--- a/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx
+++ b/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>
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index 159c1641e05e..b28b1fc2bfde 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -6533,5 +6533,9 @@
   "Sidebar_Sections_Order_Description": "Select the categories in your preferred order",
   "Incoming_Calls": "Incoming calls",
   "Advanced_settings": "Advanced settings",
-  "Security_and_permissions": "Security and permissions"
+  "Security_and_permissions": "Security and permissions",
+  "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.",
+  "Show_channels_description": "Show team channels in second sidebar",
+  "Show_discussions_description": "Show team discussions in second sidebar"
 }
diff --git a/packages/ui-client/src/hooks/useFeaturePreviewList.ts b/packages/ui-client/src/hooks/useFeaturePreviewList.ts
index 4e79eebbd13a..172045197f8c 100644
--- a/packages/ui-client/src/hooks/useFeaturePreviewList.ts
+++ b/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: false,
+		enableQuery: {
+			name: 'newNavigation',
+			value: true,
+		},
+	},
 ];
 
 export const enabledDefaultFeatures = defaultFeaturesPreview.filter((feature) => feature.enabled);