Data settings new layout - anchor navigation (#8334)

Follow-up of #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 <[email protected]> Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: Weiko <[email protected]> Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Nov 11, 2024 · bec4da4 · bec4da4
1 parent 9d6a850
commit bec4da4
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 74 deletions.
diff --git 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 }}

diff --git 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:

diff --git a/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/...nt/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>

diff --git a/...ont/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx b/...ont/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>

diff --git a/...settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx b/...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) => {

diff --git 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>

diff --git 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,13 +32,18 @@ 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)};
   justify-content: center;
   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} />}

diff --git 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>

diff --git 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 <></>;
+};
diff --git 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,
   ],
 };