Tablist fix (#9216)

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"

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

@@ -0,0 +1,36 @@
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+type TabListFromUrlOptionalEffectProps = {
+  componentInstanceId: string;
+  tabListIds: string[];
+  isInRightDrawer: boolean;
+};
+
+export const TabListFromUrlOptionalEffect = ({
+  componentInstanceId,
+  tabListIds,
+  isInRightDrawer,
+}: TabListFromUrlOptionalEffectProps) => {
+  const location = useLocation();
+  const { activeTabId, setActiveTabId } = useTabList(componentInstanceId);
+
+  const hash = location.hash.replace('#', '');
+
+  useEffect(() => {
+    if (isInRightDrawer) {
+      return;
+    }
+
+    if (hash === activeTabId) {
+      return;
+    }
+
+    if (tabListIds.includes(hash)) {
+      setActiveTabId(hash);
+    }
+  }, [hash, activeTabId, setActiveTabId, tabListIds, isInRightDrawer]);
+
+  return <></>;
+};