Data settings new layout - anchor navigation (#8334)

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’écran 2024-11-07 à 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>
2024-11-22 03:17:40 +03:00 · 2024-11-11 14:06:38 +01:00 · 2024-11-11 14:06:38 +01:00 · bec4da496d
commit bec4da496d
parent 9d6a850ee8
13 changed files with 143 additions and 74 deletions
--- a/.github/workflows/ci-tinybird.yaml
+++ b/.github/workflows/ci-tinybird.yaml
@ -14,6 +14,7 @@ jobs:
  ci:
    timeout-minutes: 10
    runs-on: ubuntu-latest
+    uses: tinybirdco/ci/.github/workflows/ci.yml@main
    steps:
      - name: Check for changed files
        id: changed-files
@ -28,7 +29,6 @@ jobs:
        run: echo "No relevant changes. Skipping CI."

      - name: Check twenty-tinybird package
-        uses: tinybirdco/ci/.github/workflows/ci.yml@main
        with:
          data_project_dir: packages/twenty-tinybird
          tb_admin_token: ${{ secrets.TB_ADMIN_TOKEN }}
--- a/.github/workflows/ci-website.yaml
+++ b/.github/workflows/ci-website.yaml
@ -1,5 +1,4 @@
 name: CI Website
-timeout-minutes: 10
 on:
  push:
    branches:
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@ -64,7 +64,9 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
      {tabs.length > 1 && (
        <StyledCalenderContainer>
          <TabList
-            tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabListInstanceId={
+              SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID
+            }
            tabs={tabs}
          />
        </StyledCalenderContainer>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@ -63,7 +63,9 @@ export const SettingsAccountsMessageChannelsContainer = () => {
      {tabs.length > 1 && (
        <StyledMessageContainer>
          <TabList
-            tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabListInstanceId={
+              SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID
+            }
            tabs={tabs}
          />
        </StyledMessageContainer>
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
@ -84,7 +84,7 @@ export const SettingsServerlessFunctionCodeEditorTab = ({

  const HeaderTabList = (
    <StyledTabList
-      tabListId={SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}
+      tabListInstanceId={SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}
      tabs={files
        .filter((file) => file.path !== '.env')
        .map((file) => {
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
@ -131,8 +131,9 @@ export const ShowPageSubContainer = ({
      <StyledShowPageRightContainer isMobile={isMobile}>
        <StyledTabListContainer>
          <TabList
+            behaveAsLinks={!isInRightDrawer}
            loading={loading || isNewViewableRecordLoading}
-            tabListId={`${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}`}
+            tabListInstanceId={`${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}`}
            tabs={tabs}
          />
        </StyledTabListContainer>
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
+++ b/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,14 @@ type TabProps = {
  onClick?: () => void;
  disabled?: boolean;
  pill?: string | ReactElement;
+  to?: string;
 };

-const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
+const StyledTab = styled.button<{
+  active?: boolean;
+  disabled?: boolean;
+  to?: string;
+}>`
  align-items: center;
  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
  border-color: ${({ theme, active }) =>
@ -26,6 +32,10 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
        ? theme.font.color.light
        : theme.font.color.secondary};
  cursor: pointer;
+  background-color: transparent;
+  border-left: none;
+  border-right: none;
+  border-top: none;

  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
@ -33,6 +43,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 +72,7 @@ export const Tab = ({
  className,
  disabled,
  pill,
+  to,
 }: TabProps) => {
  const theme = useTheme();
  return (
@ -70,6 +82,8 @@ export const Tab = ({
      className={className}
      disabled={disabled}
      data-testid={'tab-' + id}
+      as={to ? Link : 'button'}
+      to={to}
    >
      <StyledHover>
        {Icon && <Icon size={theme.icon.size.md} />}
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
@ -7,6 +7,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';

+import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect';
 import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
 import { Tab } from './Tab';

@ -21,10 +22,11 @@ export type SingleTabProps = {
 };

 type TabListProps = {
-  tabListId: string;
+  tabListInstanceId: string;
  tabs: SingleTabProps[];
  loading?: boolean;
  className?: string;
+  behaveAsLinks?: boolean;
 };

 const StyledContainer = styled.div`
@ -38,13 +40,14 @@ const StyledContainer = styled.div`

 export const TabList = ({
  tabs,
-  tabListId,
+  tabListInstanceId,
  loading,
  className,
+  behaveAsLinks = true,
 }: TabListProps) => {
  const initialActiveTabId = tabs.find((tab) => !tab.hide)?.id || '';

-  const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
+  const { activeTabIdState, setActiveTabId } = useTabList(tabListInstanceId);

  const activeTabId = useRecoilValue(activeTabIdState);

@ -53,7 +56,11 @@ export const TabList = ({
  }, [initialActiveTabId, setActiveTabId]);

  return (
-    <TabListScope tabListScopeId={tabListId}>
+    <TabListScope tabListScopeId={tabListInstanceId}>
+      <TabListFromUrlOptionalEffect
+        componentInstanceId={tabListInstanceId}
+        tabListIds={tabs.map((tab) => tab.id)}
+      />
      <ScrollWrapper enableYScroll={false} contextProviderName="tabList">
        <StyledContainer className={className}>
          {tabs
@ -65,11 +72,14 @@ export const TabList = ({
                title={tab.title}
                Icon={tab.Icon}
                active={tab.id === activeTabId}
-                onClick={() => {
-                  setActiveTabId(tab.id);
-                }}
                disabled={tab.disabled ?? loading}
                pill={tab.pill}
+                to={behaveAsLinks ? `#${tab.id}` : undefined}
+                onClick={() => {
+                  if (!behaveAsLinks) {
+                    setActiveTabId(tab.id);
+                  }
+                }}
              />
            ))}
        </StyledContainer>
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabListFromUrlOptionalEffect.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabListFromUrlOptionalEffect.tsx
@ -0,0 +1,33 @@
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+type TabListFromUrlOptionalEffectProps = {
+  componentInstanceId: string;
+  tabListIds: string[];
+};
+
+export const TabListFromUrlOptionalEffect = ({
+  componentInstanceId,
+  tabListIds,
+}: TabListFromUrlOptionalEffectProps) => {
+  const location = useLocation();
+  const { activeTabIdState } = useTabList(componentInstanceId);
+  const { setActiveTabId } = useTabList(componentInstanceId);
+
+  const hash = location.hash.replace('#', '');
+  const activeTabId = useRecoilValue(activeTabIdState);
+
+  useEffect(() => {
+    if (hash === activeTabId) {
+      return;
+    }
+
+    if (tabListIds.includes(hash)) {
+      setActiveTabId(hash);
+    }
+  }, [hash, activeTabId, setActiveTabId, tabListIds]);
+
+  return <></>;
+};
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/stories/Tablist.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/stories/Tablist.stories.tsx
@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
-import { ComponentDecorator, IconCheckbox } from 'twenty-ui';
+import { ComponentWithRouterDecorator, IconCheckbox } from 'twenty-ui';

 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';

@ -39,7 +39,7 @@ const meta: Meta<typeof TabList> = {
  title: 'UI/Layout/Tab/TabList',
  component: TabList,
  args: {
-    tabListId: 'tab-list-id',
+    tabListInstanceId: 'tab-list-id',
    tabs: tabs,
  },
  decorators: [
@ -48,7 +48,7 @@ const meta: Meta<typeof TabList> = {
        <Story />
      </RecoilScope>
    ),
-    ComponentDecorator,
+    ComponentWithRouterDecorator,
  ],
 };

--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
@ -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>
+    </>
  );
 };
--- a/packages/twenty-front/src/pages/settings/data-model/constants/SettingsObjectDetailTabs.ts
+++ b/packages/twenty-front/src/pages/settings/data-model/constants/SettingsObjectDetailTabs.ts
@ -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;
--- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
@ -263,7 +263,7 @@ export const SettingsServerlessFunctionDetail = () => {
      >
        <SettingsPageContainer>
          <Section>
-            <TabList tabListId={TAB_LIST_COMPONENT_ID} tabs={tabs} />
+            <TabList tabListInstanceId={TAB_LIST_COMPONENT_ID} tabs={tabs} />
          </Section>
          {renderActiveTabContent()}
        </SettingsPageContainer>