fix: fix setting nav items from multiple places (#8435)

Co-authored-by: Aditya Singh <[email protected]>

Author: aks07

frontend/src/AppRoutes/index.tsx

@@ -191,7 +191,8 @@ function App(): JSX.Element {
 				// if the user is on basic plan then remove billing
 				if (isOnBasicPlan) {
 					updatedRoutes = updatedRoutes.filter(
-						(route) => route?.path !== ROUTES.BILLING,
+						(route) =>
+							route?.path !== ROUTES.BILLING && route?.path !== ROUTES.INTEGRATIONS,
 					);
 				}
 
@@ -204,7 +205,8 @@ function App(): JSX.Element {
 			} else {
 				// if not a cloud user then remove billing and add list licenses route
 				updatedRoutes = updatedRoutes.filter(
-					(route) => route?.path !== ROUTES.BILLING,
+					(route) =>
+						route?.path !== ROUTES.BILLING && route?.path !== ROUTES.INTEGRATIONS,
 				);
 				updatedRoutes = [...updatedRoutes, LIST_LICENSES];
 			}

frontend/src/container/SideNav/SideNav.tsx

@@ -195,11 +195,25 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		};
 	}, [checkScroll]);
 
+	const {
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+		isCommunityUser,
+		isCommunityEnterpriseUser,
+	} = useGetTenantLicense();
+
+	const [licenseTag, setLicenseTag] = useState('');
+	const isAdmin = user.role === USER_ROLES.ADMIN;
+	const isEditor = user.role === USER_ROLES.EDITOR;
+
 	useEffect(() => {
 		const navShortcuts = (userPreferences?.find(
 			(preference) => preference.name === USER_PREFERENCES.NAV_SHORTCUTS,
 		)?.value as unknown) as string[];
 
+		const shouldShowIntegrations =
+			(isCloudUser || isEnterpriseSelfHostedUser) && (isAdmin || isEditor);
+
 		if (navShortcuts && isArray(navShortcuts) && navShortcuts.length > 0) {
 			// nav shortcuts is array of strings
 			const pinnedItems = navShortcuts
@@ -211,11 +225,14 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			// Set pinned items in the order they were stored
 			setPinnedMenuItems(pinnedItems);
 
-			// Set secondary items with proper isPinned state
 			setSecondaryMenuItems(
 				defaultMoreMenuItems.map((item) => ({
 					...item,
 					isPinned: pinnedItems.some((pinned) => pinned.itemKey === item.itemKey),
+					isEnabled:
+						item.key === ROUTES.INTEGRATIONS
+							? shouldShowIntegrations
+							: item.isEnabled,
 				})),
 			);
 		} else {
@@ -225,17 +242,26 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			);
 			setPinnedMenuItems(defaultPinnedItems);
 
-			// Set secondary items with proper isPinned state
 			setSecondaryMenuItems(
 				defaultMoreMenuItems.map((item) => ({
 					...item,
 					isPinned: defaultPinnedItems.some(
 						(pinned) => pinned.itemKey === item.itemKey,
 					),
+					isEnabled:
+						item.key === ROUTES.INTEGRATIONS
+							? shouldShowIntegrations
+							: item.isEnabled,
 				})),
 			);
 		}
-	}, [userPreferences]);
+	}, [
+		userPreferences,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+		isAdmin,
+		isEditor,
+	]);
 
 	const isOnboardingV3Enabled = featureFlags?.find(
 		(flag) => flag.name === FeatureKeys.ONBOARDING_V3,
@@ -249,10 +275,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		(flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT,
 	)?.active;
 
-	const [licenseTag, setLicenseTag] = useState('');
-	const isAdmin = user.role === USER_ROLES.ADMIN;
-	const isEditor = user.role === USER_ROLES.EDITOR;
-
 	const userSettingsMenuItem = {
 		key: ROUTES.SETTINGS,
 		label: 'Settings',
@@ -375,13 +397,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
-	const {
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-		isCommunityUser,
-		isCommunityEnterpriseUser,
-	} = useGetTenantLicense();
-
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
 	const openInNewTab = (path: string): void => {
@@ -718,28 +733,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
-	useEffect(() => {
-		if ((isCloudUser || isEnterpriseSelfHostedUser) && (isAdmin || isEditor)) {
-			// enable integrations for cloud users
-			setSecondaryMenuItems((prevItems) =>
-				prevItems.map((item) => ({
-					...item,
-					isEnabled: item.key === ROUTES.INTEGRATIONS ? true : item.isEnabled,
-				})),
-			);
-
-			// enable integrations for pinned menu items
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			setPinnedMenuItems((prevItems) =>
-				prevItems.map((item) => ({
-					...item,
-					isEnabled: item.key === ROUTES.INTEGRATIONS ? true : item.isEnabled,
-				})),
-			);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isCloudUser, isEnterpriseSelfHostedUser]);
-
 	const onClickVersionHandler = useCallback((): void => {
 		if (isCloudUser) {
 			return;