Don't show summary/fields on workflow record pages (#8804)

Hiding the left column on workflow pages


This raises additional questions: how do we edit the title then?
Probably need a significant refacto of PageHeader


<img width="1094" alt="Screenshot 2024-11-29 at 10 01 08"
src="https://github.com/user-attachments/assets/b98d55cb-5097-4e46-bac5-5570d9ca0ad8">

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

@@ -46,7 +46,9 @@ export const TabList = ({
   className,
   behaveAsLinks = true,
 }: TabListProps) => {
-  const initialActiveTabId = tabs.find((tab) => !tab.hide)?.id || '';
+  const visibleTabs = tabs.filter((tab) => !tab.hide);
+
+  const initialActiveTabId = visibleTabs[0]?.id || '';
 
   const { activeTabIdState, setActiveTabId } = useTabList(tabListInstanceId);
 
@@ -56,6 +58,10 @@ export const TabList = ({
     setActiveTabId(initialActiveTabId);
   }, [initialActiveTabId, setActiveTabId]);
 
+  if (visibleTabs.length <= 1) {
+    return null;
+  }
+
   return (
     <TabListScope tabListScopeId={tabListInstanceId}>
       <TabListFromUrlOptionalEffect
@@ -64,26 +70,24 @@ export const TabList = ({
       />
       <ScrollWrapper enableYScroll={false} contextProviderName="tabList">
         <StyledContainer className={className}>
-          {tabs
-            .filter((tab) => !tab.hide)
-            .map((tab) => (
-              <Tab
-                id={tab.id}
-                key={tab.id}
-                title={tab.title}
-                Icon={tab.Icon}
-                logo={tab.logo}
-                active={tab.id === activeTabId}
-                disabled={tab.disabled ?? loading}
-                pill={tab.pill}
-                to={behaveAsLinks ? `#${tab.id}` : undefined}
-                onClick={() => {
-                  if (!behaveAsLinks) {
-                    setActiveTabId(tab.id);
-                  }
-                }}
-              />
-            ))}
+          {visibleTabs.map((tab) => (
+            <Tab
+              id={tab.id}
+              key={tab.id}
+              title={tab.title}
+              Icon={tab.Icon}
+              logo={tab.logo}
+              active={tab.id === activeTabId}
+              disabled={tab.disabled ?? loading}
+              pill={tab.pill}
+              to={behaveAsLinks ? `#${tab.id}` : undefined}
+              onClick={() => {
+                if (!behaveAsLinks) {
+                  setActiveTabId(tab.id);
+                }
+              }}
+            />
+          ))}
         </StyledContainer>
       </ScrollWrapper>
     </TabListScope>