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/object-record/record-show/components/RecordShowContainer.tsx

@@ -35,7 +35,7 @@ export const RecordShowContainer = ({
     objectRecordId,
   });
 
-  const tabs = useRecordShowContainerTabs(
+  const { layout, tabs } = useRecordShowContainerTabs(
     loading,
     objectNameSingular as CoreObjectNameSingular,
     isInRightDrawer,
@@ -61,6 +61,7 @@ export const RecordShowContainer = ({
       <ShowPageContainer>
         <ShowPageSubContainer
           tabs={tabs}
+          layout={layout}
           targetableObject={{
             id: objectRecordId,
             targetObjectNameSingular: objectMetadataItem?.nameSingular,

packages/twenty-front/src/modules/object-record/record-show/constants/BaseRecordLayout.ts

@@ -1,6 +1,6 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { CardType } from '@/object-record/record-show/types/CardType';
-import { RecordLayoutTab } from '@/ui/layout/tab/types/RecordLayoutTab';
+import { RecordLayout } from '@/object-record/record-show/types/RecordLayout';
 import {
   IconCheckbox,
   IconList,
@@ -9,7 +9,8 @@ import {
   IconTimelineEvent,
 } from 'twenty-ui';
 
-export const BASE_RECORD_LAYOUT: Record<string, RecordLayoutTab> = {
+export const BASE_RECORD_LAYOUT: RecordLayout = {
+  tabs: {
     fields: {
       title: 'Fields',
       Icon: IconList,
@@ -80,4 +81,5 @@ export const BASE_RECORD_LAYOUT: Record<string, RecordLayoutTab> = {
         ifRelationsMissing: ['attachments'],
       },
     },
+  },
 };

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts

@@ -23,7 +23,7 @@ export const useRecordShowContainerTabs = (
   targetObjectNameSingular: CoreObjectNameSingular,
   isInRightDrawer: boolean,
   objectMetadataItem: ObjectMetadataItem,
-): SingleTabProps[] => {
+): { layout: RecordLayout; tabs: SingleTabProps[] } => {
   const isMobile = useIsMobile();
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
@@ -34,6 +34,7 @@ export const useRecordShowContainerTabs = (
     Record<CoreObjectNameSingular, RecordLayout>
   > = {
     [CoreObjectNameSingular.Note]: {
+      tabs: {
         richText: {
           title: 'Note',
           position: 0,
@@ -51,7 +52,9 @@ export const useRecordShowContainerTabs = (
         tasks: null,
         notes: null,
       },
+    },
     [CoreObjectNameSingular.Task]: {
+      tabs: {
         richText: {
           title: 'Note',
           position: 0,
@@ -69,7 +72,9 @@ export const useRecordShowContainerTabs = (
         tasks: null,
         notes: null,
       },
+    },
     [CoreObjectNameSingular.Company]: {
+      tabs: {
         emails: {
           title: 'Emails',
           position: 600,
@@ -99,7 +104,9 @@ export const useRecordShowContainerTabs = (
           },
         },
       },
+    },
     [CoreObjectNameSingular.Person]: {
+      tabs: {
         emails: {
           title: 'Emails',
           position: 600,
@@ -129,7 +136,10 @@ export const useRecordShowContainerTabs = (
           },
         },
       },
+    },
     [CoreObjectNameSingular.Workflow]: {
+      hideSummaryAndFields: true,
+      tabs: {
         workflow: {
           title: 'Flow',
           position: 0,
@@ -145,8 +155,11 @@ export const useRecordShowContainerTabs = (
           },
         },
         timeline: null,
+        fields: null,
+      },
     },
     [CoreObjectNameSingular.WorkflowVersion]: {
+      tabs: {
         workflowVersion: {
           title: 'Flow',
           position: 0,
@@ -163,7 +176,9 @@ export const useRecordShowContainerTabs = (
         },
         timeline: null,
       },
+    },
     [CoreObjectNameSingular.WorkflowRun]: {
+      tabs: {
         workflowRunOutput: {
           title: 'Output',
           position: 0,
@@ -194,15 +209,22 @@ export const useRecordShowContainerTabs = (
         },
         timeline: null,
       },
+    },
   };
 
   // Merge base layout with object-specific layout
-  const tabDefinitions: RecordLayout = {
+  const recordLayout: RecordLayout = {
     ...BASE_RECORD_LAYOUT,
     ...(OBJECT_SPECIFIC_LAYOUTS[targetObjectNameSingular] || {}),
+    tabs: {
+      ...BASE_RECORD_LAYOUT.tabs,
+      ...(OBJECT_SPECIFIC_LAYOUTS[targetObjectNameSingular]?.tabs || {}),
+    },
   };
 
-  return Object.entries(tabDefinitions)
+  return {
+    layout: recordLayout,
+    tabs: Object.entries(recordLayout.tabs)
       .filter(
         (entry): entry is [string, NonNullable<RecordLayoutTab>] =>
           entry[1] !== null && entry[1] !== undefined,
@@ -264,5 +286,6 @@ export const useRecordShowContainerTabs = (
             requiredObjectsInactive ||
             relationsDontExist,
         };
-    });
+      }),
+  };
 };

packages/twenty-front/src/modules/object-record/record-show/types/RecordLayout.ts

@@ -1,3 +1,6 @@
 import { RecordLayoutTab } from '@/ui/layout/tab/types/RecordLayoutTab';
 
-export type RecordLayout = Record<string, RecordLayoutTab | null>;
+export type RecordLayout = {
+  hideSummaryAndFields?: boolean;
+  tabs: Record<string, RecordLayoutTab | null>;
+};

packages/twenty-front/src/modules/object-record/record-show/types/RecordLayoutMap.ts

@@ -0,0 +1,3 @@
+import { RecordLayout } from '@/object-record/record-show/types/RecordLayout';
+
+export type RecordLayoutMap = Record<string, RecordLayout | null>;

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,9 +70,7 @@ export const TabList = ({
       />
       <ScrollWrapper enableYScroll={false} contextProviderName="tabList">
         <StyledContainer className={className}>
-          {tabs
+          {visibleTabs.map((tab) => (
-            .filter((tab) => !tab.hide)
-            .map((tab) => (
             <Tab
               id={tab.id}
               key={tab.id}