116 lines
3.4 KiB
TypeScript
116 lines
3.4 KiB
TypeScript
import { t } from '@lingui/core/macro';
|
|
import { useEffect } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { H3Title, IconLockOpen, IconSettings, IconUserPlus } from 'twenty-ui';
|
|
|
|
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
|
import { RoleAssignment } from '@/settings/roles/role-assignment/components/RoleAssignment';
|
|
import { RolePermissions } from '@/settings/roles/role-permissions/components/RolePermissions';
|
|
import { RoleSettings } from '@/settings/roles/role-settings/components/RoleSettings';
|
|
import { SettingsPath } from '@/types/SettingsPath';
|
|
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
|
|
import { TabList } from '@/ui/layout/tab/components/TabList';
|
|
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
|
|
import { useGetRolesQuery } from '~/generated/graphql';
|
|
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
|
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
|
|
|
|
export const SETTINGS_ROLE_DETAIL_TABS = {
|
|
COMPONENT_INSTANCE_ID: 'settings-role-detail-tabs',
|
|
TABS_IDS: {
|
|
ASSIGNMENT: 'assignment',
|
|
PERMISSIONS: 'permissions',
|
|
SETTINGS: 'settings',
|
|
},
|
|
} as const;
|
|
|
|
export const SettingsRoleEdit = () => {
|
|
const { roleId = '' } = useParams();
|
|
const navigateSettings = useNavigateSettings();
|
|
const { data: rolesData, loading: rolesLoading } = useGetRolesQuery({
|
|
fetchPolicy: 'network-only',
|
|
});
|
|
|
|
const role = rolesData?.getRoles.find((r) => r.id === roleId);
|
|
|
|
const { activeTabId } = useTabList(
|
|
SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!rolesLoading && !role) {
|
|
navigateSettings(SettingsPath.Roles);
|
|
}
|
|
}, [role, navigateSettings, rolesLoading]);
|
|
|
|
const tabs = [
|
|
{
|
|
id: SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.ASSIGNMENT,
|
|
title: t`Assignment`,
|
|
Icon: IconUserPlus,
|
|
hide: false,
|
|
},
|
|
{
|
|
id: SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.PERMISSIONS,
|
|
title: t`Permissions`,
|
|
Icon: IconLockOpen,
|
|
hide: false,
|
|
},
|
|
{
|
|
id: SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.SETTINGS,
|
|
title: t`Settings`,
|
|
Icon: IconSettings,
|
|
hide: false,
|
|
},
|
|
];
|
|
|
|
const renderActiveTabContent = () => {
|
|
if (!role) {
|
|
return null;
|
|
}
|
|
|
|
switch (activeTabId) {
|
|
case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.ASSIGNMENT:
|
|
return <RoleAssignment role={role} />;
|
|
case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.PERMISSIONS:
|
|
return <RolePermissions role={role} />;
|
|
case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.SETTINGS:
|
|
return <RoleSettings role={role} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SubMenuTopBarContainer
|
|
title={role && <H3Title title={role.label} />}
|
|
links={[
|
|
{
|
|
children: 'Workspace',
|
|
href: getSettingsPath(SettingsPath.Workspace),
|
|
},
|
|
{
|
|
children: 'Roles',
|
|
href: getSettingsPath(SettingsPath.Roles),
|
|
},
|
|
{
|
|
children: role?.label,
|
|
},
|
|
]}
|
|
>
|
|
{!rolesLoading && role ? (
|
|
<SettingsPageContainer>
|
|
<TabList
|
|
tabListInstanceId={SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID}
|
|
tabs={tabs}
|
|
className="tab-list"
|
|
/>
|
|
{renderActiveTabContent()}
|
|
</SettingsPageContainer>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</SubMenuTopBarContainer>
|
|
);
|
|
};
|