Skip to content

Commit

Permalink
Use StudioContentMenu in SettingsModal
Browse files Browse the repository at this point in the history
  • Loading branch information
standeren committed Oct 30, 2024
1 parent 06fb2ef commit 062b5a9
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 49 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

.leftNavWrapper {
overflow-y: auto;
width: 250px;
}

.contentWrapper {
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
},
Expand All @@ -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': {
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 { StudioContentMenuButtonTabProps } 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 = (): StudioContentMenuButtonTabProps<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 };
};
4 changes: 2 additions & 2 deletions frontend/app-development/types/SettingsModalHandle.ts
Original file line number Diff line number Diff line change
@@ -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;
};
1 change: 1 addition & 0 deletions frontend/app-development/types/SettingsModalTabId.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type SettingsModalTabId = 'about' | 'setup' | 'policy' | 'access_control';

0 comments on commit 062b5a9

Please sign in to comment.