Fixes before 0-35 release

twentyhq · Dec 20, 2024 · 65469bb · 65469bb
1 parent 8f3fbec
commit 65469bb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 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,6 +9,7 @@ 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';
@@ -64,9 +65,9 @@ export const ShowPageSubContainer = ({
   isInRightDrawer = false,
   isNewRightDrawerItemLoading = false,
 }: ShowPageSubContainerProps) => {
-  const { activeTabId } = useTabList(
-    `${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}-${targetableObject.id}`,
-  );
+  const tabListComponentId = `${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}-${targetableObject.id}`;
+
+  const { activeTabId } = useTabList(tabListComponentId);
 
   const isMobile = useIsMobile();
 
@@ -125,10 +126,15 @@ 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={`${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}-${targetableObject.id}`}
+            tabListInstanceId={tabListComponentId}
             tabs={tabs}
           />
         </StyledTabListContainer>

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

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,4 +1,3 @@
-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';
@@ -60,10 +59,6 @@ export const TabList = ({
 
   return (
     <TabListScope tabListScopeId={tabListInstanceId}>
-      <TabListFromUrlOptionalEffect
-        componentInstanceId={tabListInstanceId}
-        tabListIds={tabs.map((tab) => tab.id)}
-      />
       <ScrollWrapper
         defaultEnableYScroll={false}
         contextProviderName="tabList"