feat: Use StudioContentMenu in SettingsModal (#13899)

Co-authored-by: Jonas Dyrlie <[email protected]>
Co-authored-by: Lars <[email protected]>

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 '../../../../../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 { type SettingsModalHandle } from '../../../../../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 menuTabConfigs = 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)}
+        >
+          {menuTabConfigs.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,43 @@
+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 { StudioContentMenuButtonTabProps } from '@studio/components';
+
+const aboutTabId: SettingsModalTabId = 'about';
+const setupTabId: SettingsModalTabId = 'setup';
+const policyTabId: SettingsModalTabId = 'policy';
+const accessControlTabId: SettingsModalTabId = 'access_control';
+
+export const useSettingsModalMenuTabConfigs =
+  (): StudioContentMenuButtonTabProps<SettingsModalTabId>[] => {
+    const { t } = useTranslation();
+
+    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 />,
+      },
+    ];
+  };

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';