SC-37401 Rename and move useNewUI to rely on the useFlags instead (#3945)

GitOrigin-RevId: ecb36eaf195e93d61b4b3300104b8eca19ad8de4

Author: gregaubert

apps/sq-server/src/main/js/app/components/ComponentContainer.tsx

@@ -25,13 +25,13 @@ import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { useIntl } from 'react-intl';
 import { Navigate, Outlet } from 'react-router-dom';
+import { useFlags } from '~adapters/helpers/feature-flags';
 import { useCurrentBranchQuery } from '~adapters/queries/branch';
 import { CenteredLayout } from '~design-system';
 import { useLocation, useRouter } from '~shared/components/hoc/withRouter';
 import { isFile, isPortfolioLike } from '~shared/helpers/component';
 import { isDefined } from '~shared/helpers/types';
 import { getProjectOverviewUrl } from '~shared/helpers/urls';
-import { useNewUI } from '~shared/helpers/useNewUI';
 import { ComponentQualifier } from '~shared/types/component';
 import { HttpStatus } from '~shared/types/request';
 import { validateProjectAlmBinding } from '~sq-server-commons/api/alm-settings';
@@ -71,7 +71,7 @@ function ComponentContainer({ hasFeature }: Readonly<WithAvailableFeaturesProps>
   } = useLocation();
   const router = useRouter();
   const intl = useIntl();
-  const [newUI] = useNewUI();
+  const { frontEndEngineeringEnableSidebarNavigation } = useFlags();
 
   const [component, setComponent] = React.useState<Component>();
   const [projectComponent, setProjectComponent] = React.useState<Component>();
@@ -401,16 +401,20 @@ function ComponentContainer({ hasFeature }: Readonly<WithAvailableFeaturesProps>
           { project: component?.name ?? '' },
         )}
       />
-      {newUI && component && !isFile(component.qualifier) && <ComponentNav component={component} />}
+      {frontEndEngineeringEnableSidebarNavigation && component && !isFile(component.qualifier) && (
+        <ComponentNav component={component} />
+      )}
       <Layout.ContentGrid>
-        {!newUI && component && !isFile(component.qualifier) && (
-          <LegacyComponentNavCompatibleWithNewLayout
-            component={component}
-            isInProgress={isInProgress}
-            isPending={isPending}
-            projectBindingErrors={projectBindingErrors}
-          />
-        )}
+        {!frontEndEngineeringEnableSidebarNavigation &&
+          component &&
+          !isFile(component.qualifier) && (
+            <LegacyComponentNavCompatibleWithNewLayout
+              component={component}
+              isInProgress={isInProgress}
+              isPending={isPending}
+              projectBindingErrors={projectBindingErrors}
+            />
+          )}
         <Layout.PageGrid>
           <Layout.PageContent>
             {loading ? (

libs/shared/src/helpers/useNewUI.ts renamed to libs/sq-server-commons/src/helpers/useEnableSidebarNavigation.ts

@@ -18,14 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import useLocalStorage from './useLocalStorage';
+import useLocalStorage from '~shared/helpers/useLocalStorage';
 
-const NEW_UI_PREFERENCE = 'user.preferences.new_ui';
+const NEW_UI_PREFERENCE = 'user.preferences.enable-sidebar-navigation';
 
 /**
  * Thin wrapper around useLocalStorage to ensure we have a value and not have ot repeat the key
  */
-export function useNewUI() {
+export function useEnableSidebarNavigation() {
   const [value = false, setter] = useLocalStorage<boolean>(NEW_UI_PREFERENCE, false);
 
   return [value, setter] as [boolean, (v: boolean) => void];

libs/sq-server-commons/src/sq-server-adapters/helpers/feature-flags.ts

@@ -19,12 +19,19 @@
  */
 
 import { FlagSet } from '~shared/types/feature-flags';
+import { useEnableSidebarNavigation } from '../../helpers/useEnableSidebarNavigation';
+
+interface SQSFlagSet extends FlagSet {
+  frontEndEngineeringEnableSidebarNavigation?: boolean;
+}
 
 // SQS doesn't use LaunchDarkly for feature flags, so we just pass a default hardcoded flag set for
 // compatibility with SQC in shared code.
 // Add features flags here as needed in shared code, especially useful if you want a default value other than falsy for SQS.
-const defaultFlags: FlagSet = {};
+const defaultFlags: SQSFlagSet = {};
 
 export function useFlags(): FlagSet {
-  return defaultFlags;
+  const [frontEndEngineeringEnableSidebarNavigation] = useEnableSidebarNavigation();
+
+  return { ...defaultFlags, frontEndEngineeringEnableSidebarNavigation };
 }