Data settings new layout - anchor navigation

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactElement } from 'react';
+import { Link } from 'react-router-dom';
 import { IconComponent, Pill } from 'twenty-ui';
 
 type TabProps = {
@@ -12,9 +13,10 @@ type TabProps = {
   onClick?: () => void;
   disabled?: boolean;
   pill?: string | ReactElement;
+  to: string;
 };
 
-const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
+const StyledTab = styled(Link)<{ active?: boolean; disabled?: boolean }>`
   align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-color: ${({ theme, active }) =>
@@ -33,6 +35,7 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
   margin-bottom: 0;
   padding: ${({ theme }) => theme.spacing(2) + ' 0'};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
+  text-decoration: none;
 `;
 
 const StyledHover = styled.span`
@@ -61,6 +64,7 @@ export const Tab = ({
   className,
   disabled,
   pill,
+  to,
 }: TabProps) => {
   const theme = useTheme();
   return (
@@ -70,6 +74,7 @@ export const Tab = ({
       className={className}
       disabled={disabled}
       data-testid={'tab-' + id}
+      to={to}
     >
       <StyledHover>
         {Icon && <Icon size={theme.icon.size.md} />}

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -68,6 +68,7 @@ export const TabList = ({
                 }}
                 disabled={tab.disabled ?? loading}
                 pill={tab.pill}
+                to={`#${tab.id}`}
               />
             ))}
         </StyledContainer>

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

@@ -30,6 +30,8 @@ import {
   MAIN_COLORS,
   UndecoratedLink,
 } from 'twenty-ui';
+import { OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
+import { SettingsObjectDetailsPageTabFromUrlEffect } from '~/pages/settings/data-model/SettingsObjectDetailsPageTabFromUrlEffect';
 import { updatedObjectSlugState } from '~/pages/settings/data-model/states/updatedObjectSlugState';
 
 const StyledTabListContainer = styled.div`
@@ -49,6 +51,7 @@ const StyledTabListContainer = styled.div`
 
 const StyledContentContainer = styled.div`
   flex: 1;
+  overflow-y: auto;
   width: 100%;
   padding-left: 0;
 `;
@@ -63,11 +66,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,8 +80,9 @@ export const SettingsObjectDetailPage = () => {
     findActiveObjectMetadataItemBySlug(objectSlug) ??
     findActiveObjectMetadataItemBySlug(updatedObjectSlug);
 
-  const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const { activeTabIdState } = useTabList(OBJECT_DETAIL_TABS.TAB_LIST_ID);
   const activeTabId = useRecoilValue(activeTabIdState);
+  console.log('activetabid', activeTabId);
 
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
   const isUniqueIndexesEnabled = useIsFeatureEnabled(
@@ -105,19 +104,19 @@ export const SettingsObjectDetailPage = () => {
 
   const tabs = [
     {
-      id: FIELDS_TAB_ID,
+      id: OBJECT_DETAIL_TABS.TABS_IDS.FIELDS,
       title: 'Fields',
       Icon: IconListDetails,
       hide: false,
     },
     {
-      id: SETTINGS_TAB_ID,
+      id: OBJECT_DETAIL_TABS.TABS_IDS.SETTINGS,
       title: 'Settings',
       Icon: IconSettings,
       hide: false,
     },
     {
-      id: INDEXES_TAB_ID,
+      id: OBJECT_DETAIL_TABS.TABS_IDS.INDEXES,
       title: 'Indexes',
       Icon: IconCodeCircle,
       hide: !isAdvancedModeEnabled || !isUniqueIndexesEnabled,
@@ -126,12 +125,13 @@ export const SettingsObjectDetailPage = () => {
   ];
 
   const renderActiveTabContent = () => {
+    console.log('activeTabId:', activeTabId);
     switch (activeTabId) {
-      case FIELDS_TAB_ID:
+      case OBJECT_DETAIL_TABS.TABS_IDS.FIELDS:
         return <ObjectFields objectMetadataItem={objectMetadataItem} />;
-      case SETTINGS_TAB_ID:
+      case OBJECT_DETAIL_TABS.TABS_IDS.SETTINGS:
         return <ObjectSettings objectMetadataItem={objectMetadataItem} />;
-      case INDEXES_TAB_ID:
+      case OBJECT_DETAIL_TABS.TABS_IDS.INDEXES:
         return <ObjectIndexes objectMetadataItem={objectMetadataItem} />;
       default:
         return <></>;
@@ -141,49 +141,50 @@ 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}
+    <>
+      <SettingsObjectDetailsPageTabFromUrlEffect />
+      <SubMenuTopBarContainer
+        links={[
+          {
+            children: 'Workspace',
+            href: getSettingsPagePath(SettingsPath.Workspace),
+          },
+          { children: 'Objects', href: '/settings/objects' },
+          {
+            children: objectMetadataItem.labelPlural,
+          },
+        ]}
+        actionButton={
+          activeTabId === 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
+              tabListId={OBJECT_DETAIL_TABS.TAB_LIST_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>
+    </>
   );
 };

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailsPageTabFromUrlEffect.tsx

@@ -0,0 +1,41 @@
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
+
+type TabId =
+  (typeof OBJECT_DETAIL_TABS.TABS_IDS)[keyof typeof OBJECT_DETAIL_TABS.TABS_IDS];
+
+const validHashes = [
+  OBJECT_DETAIL_TABS.TABS_IDS.FIELDS,
+  OBJECT_DETAIL_TABS.TABS_IDS.SETTINGS,
+  OBJECT_DETAIL_TABS.TABS_IDS.INDEXES,
+];
+
+export const SettingsObjectDetailsPageTabFromUrlEffect = () => {
+  const location = useLocation();
+  const { activeTabIdState } = useTabList(OBJECT_DETAIL_TABS.TAB_LIST_ID);
+  const { setActiveTabId } = useTabList(OBJECT_DETAIL_TABS.TAB_LIST_ID);
+
+  const hash = location.hash.replace('#', '');
+  const activeTabId = useRecoilValue(activeTabIdState);
+  useEffect(() => {
+    console.log(
+      'hash',
+      hash,
+      'activeTabId',
+      activeTabId,
+      'isvalid',
+      validHashes.includes(hash as TabId),
+    );
+    if (hash === activeTabId) return;
+
+    if (validHashes.includes(hash as TabId)) {
+      console.log('setting active tab id', hash);
+      setActiveTabId(hash as TabId);
+    }
+  }, [hash, activeTabId, setActiveTabId]);
+
+  return <></>;
+};

packages/twenty-front/src/pages/settings/data-model/constants/SettingsObjectDetailTabs.ts

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