admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Data settings new layout - anchor navigation (#8334)

Browse Source 
Follow-up of https://github.com/twentyhq/twenty/pull/7979
Navigation between settings and fields tabs is now reflected in URL. 
<img width="1106" alt="Capture d’écran 2024-11-07 à 18 38 57"
src="https://github.com/user-attachments/assets/24b153ef-9e68-4aa2-8e3a-6bf70834c5ad">

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Weiko <corentin@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Marie
2024-11-11 14:06:38 +01:00
committed by GitHub
parent 9d6a850ee8
commit bec4da496d
13 changed files with 143 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
View File

@ -26,10 +26,11 @@ import {
IconPlus,
IconSettings,
IconTool,
isDefined,
MAIN_COLORS,
UndecoratedLink,
isDefined,
} from 'twenty-ui';
import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
import { updatedObjectSlugState } from '~/pages/settings/data-model/states/updatedObjectSlugState';
const StyledTabListContainer = styled.div`
@ -63,11 +64,6 @@ const StyledTitleContainer = styled.div`
display: flex;
`;
const TAB_LIST_COMPONENT_ID = 'object-details-tab-list';
const FIELDS_TAB_ID = 'fields';
const SETTINGS_TAB_ID = 'settings';
const INDEXES_TAB_ID = 'indexes';
export const SettingsObjectDetailPage = () => {
const navigate = useNavigate();
@ -82,7 +78,9 @@ export const SettingsObjectDetailPage = () => {
findActiveObjectMetadataItemBySlug(objectSlug) ??
findActiveObjectMetadataItemBySlug(updatedObjectSlug);
const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const { activeTabIdState } = useTabList(
SETTINGS_OBJECT_DETAIL_TABS.COMPONENT_INSTANCE_ID,
);
const activeTabId = useRecoilValue(activeTabIdState);
const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
@ -105,19 +103,19 @@ export const SettingsObjectDetailPage = () => {
const tabs = [
{
id: FIELDS_TAB_ID,
id: SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.FIELDS,
title: 'Fields',
Icon: IconListDetails,
hide: false,
},
{
id: SETTINGS_TAB_ID,
id: SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.SETTINGS,
title: 'Settings',
Icon: IconSettings,
hide: false,
},
{
id: INDEXES_TAB_ID,
id: SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.INDEXES,
title: 'Indexes',
Icon: IconCodeCircle,
hide: !isAdvancedModeEnabled || !isUniqueIndexesEnabled,
@ -127,11 +125,11 @@ export const SettingsObjectDetailPage = () => {
const renderActiveTabContent = () => {
switch (activeTabId) {
case FIELDS_TAB_ID:
case SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.FIELDS:
return <ObjectFields objectMetadataItem={objectMetadataItem} />;
case SETTINGS_TAB_ID:
case SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.SETTINGS:
return <ObjectSettings objectMetadataItem={objectMetadataItem} />;
case INDEXES_TAB_ID:
case SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.INDEXES:
return <ObjectIndexes objectMetadataItem={objectMetadataItem} />;
default:
return <></>;
@ -141,49 +139,51 @@ export const SettingsObjectDetailPage = () => {
const objectTypeLabel = getObjectTypeLabel(objectMetadataItem);
return (
<SubMenuTopBarContainer
title={
<StyledTitleContainer>
<H3Title title={objectMetadataItem.labelPlural} />
<StyledObjectTypeTag objectTypeLabel={objectTypeLabel} />
</StyledTitleContainer>
}
links={[
{
children: 'Workspace',
href: getSettingsPagePath(SettingsPath.Workspace),
},
{ children: 'Objects', href: '/settings/objects' },
{
children: objectMetadataItem.labelPlural,
},
]}
actionButton={
activeTabId === FIELDS_TAB_ID && (
<UndecoratedLink to={'./new-field/select'}>
<Button
title="New Field"
variant="primary"
size="small"
accent="blue"
Icon={IconPlus}
<>
<SubMenuTopBarContainer
links={[
{
children: 'Workspace',
href: getSettingsPagePath(SettingsPath.Workspace),
},
{ children: 'Objects', href: '/settings/objects' },
{
children: objectMetadataItem.labelPlural,
},
]}
actionButton={
activeTabId === SETTINGS_OBJECT_DETAIL_TABS.TABS_IDS.FIELDS && (
<UndecoratedLink to={'./new-field/select'}>
<Button
title="New Field"
variant="primary"
size="small"
accent="blue"
Icon={IconPlus}
/>
</UndecoratedLink>
)
}
>
<SettingsPageContainer>
<StyledTitleContainer>
<H3Title title={objectMetadataItem.labelPlural} />
<StyledObjectTypeTag objectTypeLabel={objectTypeLabel} />
</StyledTitleContainer>
<StyledTabListContainer>
<TabList
tabListInstanceId={
SETTINGS_OBJECT_DETAIL_TABS.COMPONENT_INSTANCE_ID
}
tabs={tabs}
className="tab-list"
/>
</UndecoratedLink>
)
}
>
<SettingsPageContainer>
<StyledTabListContainer>
<TabList
tabListId={TAB_LIST_COMPONENT_ID}
tabs={tabs}
className="tab-list"
/>
</StyledTabListContainer>
<StyledContentContainer>
{renderActiveTabContent()}
</StyledContentContainer>
</SettingsPageContainer>
</SubMenuTopBarContainer>
</StyledTabListContainer>
<StyledContentContainer>
{renderActiveTabContent()}
</StyledContentContainer>
</SettingsPageContainer>
</SubMenuTopBarContainer>
</>
);
};

8
packages/twenty-front/src/pages/settings/data-model/constants/SettingsObjectDetailTabs.ts Normal file
View File

@ -0,0 +1,8 @@
export const SETTINGS_OBJECT_DETAIL_TABS = {
COMPONENT_INSTANCE_ID: 'setting-object-details-tab-list',
TABS_IDS: {
FIELDS: 'fields',
SETTINGS: 'settings',
INDEXES: 'indexes',
},
} as const;