Use StudioContentMenu in SettingsModal

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/SettingsModal.module.css

@@ -13,6 +13,7 @@
 
 .leftNavWrapper {
   overflow-y: auto;
+  width: 250px;
 }
 
 .contentWrapper {

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/SettingsModal.tsx

@@ -1,33 +1,26 @@
 import type { ReactElement } from 'react';
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import classes from './SettingsModal.module.css';
-import {
-  CogIcon,
-  InformationSquareIcon,
-  TimerStartIcon,
-  ShieldLockIcon,
-  SidebarBothIcon,
-} from '@studio/icons';
-import { StudioModal } from '@studio/components';
-import type { LeftNavigationTab } from 'app-shared/types/LeftNavigationTab';
-import { LeftNavigationBar } from 'app-shared/components/LeftNavigationBar';
-import type { SettingsModalTab } from 'app-development/types/SettingsModalTab';
-import { createNavigationTab } from './utils';
+import { CogIcon } from '@studio/icons';
+import { StudioModal, StudioContentMenu } from '@studio/components';
+import type { SettingsModalTabId } from 'app-development/types/SettingsModalTabId';
 import { useTranslation } from 'react-i18next';
 import { PolicyTab } from './components/Tabs/PolicyTab';
 import { AboutTab } from './components/Tabs/AboutTab';
 import { AccessControlTab } from './components/Tabs/AccessControlTab';
 import { SetupTab } from './components/Tabs/SetupTab';
 import { type SettingsModalHandle } from 'app-development/types/SettingsModalHandle';
+import { useSettingsModalMenuTabConfigs } from './hooks/useSettingsModalMenuTabConfigs';
 
 export const SettingsModal = forwardRef<SettingsModalHandle, {}>(({}, ref): ReactElement => {
   const { t } = useTranslation();
 
-  const [currentTab, setCurrentTab] = useState<SettingsModalTab>('about');
+  const [currentTab, setCurrentTab] = useState<SettingsModalTabId>('about');
   const dialogRef = useRef<HTMLDialogElement>();
+  const { getMenuTabConfigs } = useSettingsModalMenuTabConfigs();
 
   const openSettings = useCallback(
-    (tab: SettingsModalTab = currentTab) => {
+    (tab: SettingsModalTabId = currentTab) => {
       setCurrentTab(tab);
       dialogRef.current?.showModal();
     },
@@ -38,38 +31,6 @@ export const SettingsModal = forwardRef<SettingsModalHandle, {}>(({}, ref): Reac
     openSettings,
   ]);
 
-  const aboutTabId: SettingsModalTab = 'about';
-  const setupTabId: SettingsModalTab = 'setup';
-  const policyTabId: SettingsModalTab = 'policy';
-  const accessControlTabId: SettingsModalTab = 'access_control';
-
-  const leftNavigationTabs: LeftNavigationTab[] = [
-    createNavigationTab(
-      <InformationSquareIcon className={classes.icon} />,
-      aboutTabId,
-      () => setCurrentTab(aboutTabId),
-      currentTab,
-    ),
-    createNavigationTab(
-      <SidebarBothIcon className={classes.icon} />,
-      setupTabId,
-      () => setCurrentTab(setupTabId),
-      currentTab,
-    ),
-    createNavigationTab(
-      <ShieldLockIcon className={classes.icon} />,
-      policyTabId,
-      () => setCurrentTab(policyTabId),
-      currentTab,
-    ),
-    createNavigationTab(
-      <TimerStartIcon className={classes.icon} />,
-      accessControlTabId,
-      () => setCurrentTab(accessControlTabId),
-      currentTab,
-    ),
-  ];
-
   const displayTabs = () => {
     switch (currentTab) {
       case 'about': {
@@ -98,7 +59,19 @@ export const SettingsModal = forwardRef<SettingsModalHandle, {}>(({}, ref): Reac
       contentClassName={classes.modalContent}
     >
       <div className={classes.leftNavWrapper}>
-        <LeftNavigationBar tabs={leftNavigationTabs} selectedTab={currentTab} />
+        <StudioContentMenu
+          selectedTabId={currentTab}
+          onChangeTab={(tabId: SettingsModalTabId) => setCurrentTab(tabId)}
+        >
+          {getMenuTabConfigs().map((contentTab) => (
+            <StudioContentMenu.ButtonTab
+              key={contentTab.tabId}
+              tabName={contentTab.tabName}
+              tabId={contentTab.tabId}
+              icon={contentTab.icon}
+            />
+          ))}
+        </StudioContentMenu>
       </div>
       <div className={classes.contentWrapper}>{displayTabs()}</div>
     </StudioModal.Dialog>

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/hooks/useSettingsModalMenuTabConfigs.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { SettingsModalTabId } from '../../../../../../types/SettingsModalTabId';
+import {
+  InformationSquareIcon,
+  SidebarBothIcon,
+  ShieldLockIcon,
+  TimerStartIcon,
+} from '@studio/icons';
+import { useTranslation } from 'react-i18next';
+import type { StudioMenuTabType } from '@studio/components';
+
+const aboutTabId: SettingsModalTabId = 'about';
+const setupTabId: SettingsModalTabId = 'setup';
+const policyTabId: SettingsModalTabId = 'policy';
+const accessControlTabId: SettingsModalTabId = 'access_control';
+
+export const useSettingsModalMenuTabConfigs = () => {
+  const { t } = useTranslation();
+
+  const getMenuTabConfigs = (): StudioMenuTabType<SettingsModalTabId>[] => {
+    return [
+      {
+        tabId: aboutTabId,
+        tabName: t(`settings_modal.left_nav_tab_${aboutTabId}`),
+        icon: <InformationSquareIcon />,
+      },
+      {
+        tabId: setupTabId,
+        tabName: t(`settings_modal.left_nav_tab_${setupTabId}`),
+        icon: <SidebarBothIcon />,
+      },
+      {
+        tabId: policyTabId,
+        tabName: t(`settings_modal.left_nav_tab_${policyTabId}`),
+        icon: <ShieldLockIcon />,
+      },
+      {
+        tabId: accessControlTabId,
+        tabName: t(`settings_modal.left_nav_tab_${accessControlTabId}`),
+        icon: <TimerStartIcon />,
+      },
+    ];
+  };
+
+  return { getMenuTabConfigs };
+};

frontend/app-development/types/SettingsModalHandle.ts

@@ -1,5 +1,5 @@
-import type { SettingsModalTab } from './SettingsModalTab';
+import type { SettingsModalTabId } from './SettingsModalTabId';
 
 export type SettingsModalHandle = {
-  openSettings: (tab?: SettingsModalTab) => void;
+  openSettings: (tab?: SettingsModalTabId) => void;
 };

frontend/app-development/types/SettingsModalTabId.ts

@@ -0,0 +1 @@
+export type SettingsModalTabId = 'about' | 'setup' | 'policy' | 'access_control';

frontend/libs/studio-components/src/components/StudioContentMenu/types/StudioMenuTabType.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export type StudioButtonTabType<TabId extends string> = {
+  icon: ReactNode;
+  tabName: string;
+  tabId: TabId;
+};
+
+export type StudioLinkTabType<TabId extends string> = StudioButtonTabType<TabId> & {
+  to: string;
+};
+
+export type StudioMenuTabType<TabId extends string> =
+  | StudioButtonTabType<TabId>
+  | StudioLinkTabType<TabId>;

frontend/libs/studio-pure-functions/src/ScopedStorage/ScopedStorage.ts

@@ -7,7 +7,6 @@ export interface ScopedStorageResult extends ScopedStorage {
   getItem: <T>(key: string) => T;
   removeItem: (key: string) => void;
 }
-
 export class ScopedStorageImpl implements ScopedStorage {
   private readonly storageKey: StorageKey;
   private readonly scopedStorage: ScopedStorage;