Tablist fix (twentyhq#9216)

BOHEUS · Dec 23, 2024 · 49da7d2 · 49da7d2
1 parent b3c1f62
commit 49da7d2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
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
@@ -9,7 +9,6 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
-import { ShowPageTabListFromUrlOptionalEffect } from '@/ui/layout/show-page/components/ShowPageTabListFromUrlOptionalEffect';
 import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -126,16 +125,12 @@ export const ShowPageSubContainer = ({
       )}
       <StyledShowPageRightContainer isMobile={isMobile}>
         <StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
-          <ShowPageTabListFromUrlOptionalEffect
-            isInRightDrawer={isInRightDrawer}
-            componentInstanceId={tabListComponentId}
-            tabListIds={tabs.map((tab) => tab.id)}
-          />
           <TabList
             behaveAsLinks={!isInRightDrawer}
             loading={loading || isNewViewableRecordLoading}
             tabListInstanceId={tabListComponentId}
             tabs={tabs}
+            isInRightDrawer={isInRightDrawer}
           />
         </StyledTabListContainer>
         {(isMobile || isInRightDrawer) && summaryCard}

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
@@ -1,3 +1,4 @@
+import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
 import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
@@ -25,6 +26,7 @@ type TabListProps = {
   loading?: boolean;
   behaveAsLinks?: boolean;
   className?: string;
+  isInRightDrawer?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -41,6 +43,7 @@ export const TabList = ({
   tabListInstanceId,
   loading,
   behaveAsLinks = true,
+  isInRightDrawer,
   className,
 }: TabListProps) => {
   const visibleTabs = tabs.filter((tab) => !tab.hide);
@@ -59,6 +62,11 @@ export const TabList = ({
 
   return (
     <TabListScope tabListScopeId={tabListInstanceId}>
+      <TabListFromUrlOptionalEffect
+        isInRightDrawer={!!isInRightDrawer}
+        componentInstanceId={tabListInstanceId}
+        tabListIds={tabs.map((tab) => tab.id)}
+      />
       <ScrollWrapper
         defaultEnableYScroll={false}
         contextProviderName="tabList"

diff --git a/.../ShowPageTabListFromUrlOptionalEffect.tsx → ...mponents/TabListFromUrlOptionalEffect.tsx b/.../ShowPageTabListFromUrlOptionalEffect.tsx → ...mponents/TabListFromUrlOptionalEffect.tsx
@@ -2,17 +2,17 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-type ShowPageTabListFromUrlOptionalEffectProps = {
+type TabListFromUrlOptionalEffectProps = {
   componentInstanceId: string;
   tabListIds: string[];
   isInRightDrawer: boolean;
 };
 
-export const ShowPageTabListFromUrlOptionalEffect = ({
+export const TabListFromUrlOptionalEffect = ({
   componentInstanceId,
   tabListIds,
   isInRightDrawer,
-}: ShowPageTabListFromUrlOptionalEffectProps) => {
+}: TabListFromUrlOptionalEffectProps) => {
   const location = useLocation();
   const { activeTabId, setActiveTabId } = useTabList(componentInstanceId);