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/show-page/components/ShowPageSubContainer.tsx

@@ -4,6 +4,7 @@ import { isNewViewableRecordLoadingState } from '@/object-record/record-right-dr
 import { CardComponents } from '@/object-record/record-show/components/CardComponents';
 import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
 import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
+import { RecordLayout } from '@/object-record/record-show/types/RecordLayout';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
@@ -23,12 +24,12 @@ const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   overflow: auto;
 `;
 
-const StyledTabListContainer = styled.div`
+const StyledTabListContainer = styled.div<{ shouldDisplay: boolean }>`
   align-items: center;
   padding-left: ${({ theme }) => theme.spacing(2)};
   border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
   box-sizing: border-box;
-  display: flex;
+  display: ${({ shouldDisplay }) => (shouldDisplay ? 'flex' : 'none')};
   gap: ${({ theme }) => theme.spacing(2)};
   height: 40px;
 `;
@@ -56,6 +57,7 @@ const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>`
 export const TAB_LIST_COMPONENT_ID = 'show-page-right-tab-list';
 
 type ShowPageSubContainerProps = {
+  layout: RecordLayout;
   tabs: SingleTabProps[];
   targetableObject: Pick<
     ActivityTargetableObject,
@@ -68,6 +70,7 @@ type ShowPageSubContainerProps = {
 
 export const ShowPageSubContainer = ({
   tabs,
+  layout,
   targetableObject,
   loading,
   isInRightDrawer = false,
@@ -120,16 +123,18 @@ export const ShowPageSubContainer = ({
     recordStoreFamilyState(targetableObject.id),
   );
 
+  const visibleTabs = tabs.filter((tab) => !tab.hide);
+
   return (
     <>
-      {!isMobile && !isInRightDrawer && (
+      {!layout.hideSummaryAndFields && !isMobile && !isInRightDrawer && (
         <ShowPageLeftContainer forceMobile={isMobile}>
           {summaryCard}
           {fieldsCard}
         </ShowPageLeftContainer>
       )}
       <StyledShowPageRightContainer isMobile={isMobile}>
-        <StyledTabListContainer>
+        <StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
           <TabList
             behaveAsLinks={!isInRightDrawer}
             loading={loading || isNewViewableRecordLoading}

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>