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">
2024-11-29 18:11:44 +01:00
parent ebc381f009
commit 29eb9fe77b
7 changed files with 323 additions and 282 deletions
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/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,
--- a/packages/twenty-front/src/modules/object-record/record-show/constants/BaseRecordLayout.ts
+++ b/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'],
      },
    },
+  },
 };
--- a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts
+++ b/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,
        };
-    });
+      }),
+  };
 };
--- a/packages/twenty-front/src/modules/object-record/record-show/types/RecordLayout.ts
+++ b/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>;
+};
--- a/packages/twenty-front/src/modules/object-record/record-show/types/RecordLayoutMap.ts
+++ b/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>;
--- 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
@ -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}
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/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
-            .filter((tab) => !tab.hide)
-            .map((tab) => (
+          {visibleTabs.map((tab) => (
            <Tab
              id={tab.id}
              key={tab.id}