Hide tabs (twentyhq#7841)

@FelixMalfait WDYT? We can refactor shouldDisplay Files/Tasks/Notes Tab etc into a hook. --------- Co-authored-by: Félix Malfait <[email protected]>
Vardhaman619 · Nov 11, 2024 · c19e54f · c19e54f
1 parent 6d62dd9
commit c19e54f
Show file tree

Hide file tree

Showing 11 changed files with 490 additions and 193 deletions.
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
@@ -0,0 +1,106 @@
+import { Calendar } from '@/activities/calendar/components/Calendar';
+import { EmailThreads } from '@/activities/emails/components/EmailThreads';
+import { Attachments } from '@/activities/files/components/Attachments';
+import { Notes } from '@/activities/notes/components/Notes';
+import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks';
+import { TimelineActivities } from '@/activities/timeline-activities/components/TimelineActivities';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
+import { CardType } from '@/object-record/record-show/types/CardType';
+import { ShowPageActivityContainer } from '@/ui/layout/show-page/components/ShowPageActivityContainer';
+import { WorkflowRunOutputVisualizer } from '@/workflow/components/WorkflowRunOutputVisualizer';
+import { WorkflowRunVersionVisualizer } from '@/workflow/components/WorkflowRunVersionVisualizer';
+import { WorkflowVersionVisualizer } from '@/workflow/components/WorkflowVersionVisualizer';
+import { WorkflowVersionVisualizerEffect } from '@/workflow/components/WorkflowVersionVisualizerEffect';
+import { WorkflowVisualizer } from '@/workflow/components/WorkflowVisualizer';
+import { WorkflowVisualizerEffect } from '@/workflow/components/WorkflowVisualizerEffect';
+import styled from '@emotion/styled';
+
+const StyledGreyBox = styled.div<{ isInRightDrawer?: boolean }>`
+  background: ${({ theme, isInRightDrawer }) =>
+    isInRightDrawer ? theme.background.secondary : ''};
+  border: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? `1px solid ${theme.border.color.medium}` : ''};
+  border-radius: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? theme.border.radius.md : ''};
+  height: ${({ isInRightDrawer }) => (isInRightDrawer ? 'auto' : '100%')};
+
+  margin: ${({ isInRightDrawer, theme }) =>
+    isInRightDrawer ? theme.spacing(4) : ''};
+`;
+
+type CardComponentProps = {
+  targetableObject: Pick<
+    ActivityTargetableObject,
+    'targetObjectNameSingular' | 'id'
+  >;
+  isInRightDrawer?: boolean;
+};
+
+type CardComponentType = (props: CardComponentProps) => JSX.Element | null;
+
+export const CardComponents: Record<CardType, CardComponentType> = {
+  [CardType.TimelineCard]: ({ targetableObject, isInRightDrawer }) => (
+    <TimelineActivities
+      targetableObject={targetableObject}
+      isInRightDrawer={isInRightDrawer}
+    />
+  ),
+
+  [CardType.FieldCard]: ({ targetableObject, isInRightDrawer }) => (
+    <StyledGreyBox isInRightDrawer={isInRightDrawer}>
+      <FieldsCard
+        objectNameSingular={targetableObject.targetObjectNameSingular}
+        objectRecordId={targetableObject.id}
+      />
+    </StyledGreyBox>
+  ),
+
+  [CardType.RichTextCard]: ({ targetableObject }) => (
+    <ShowPageActivityContainer targetableObject={targetableObject} />
+  ),
+
+  [CardType.TaskCard]: ({ targetableObject }) => (
+    <ObjectTasks targetableObject={targetableObject} />
+  ),
+
+  [CardType.NoteCard]: ({ targetableObject }) => (
+    <Notes targetableObject={targetableObject} />
+  ),
+
+  [CardType.FileCard]: ({ targetableObject }) => (
+    <Attachments targetableObject={targetableObject} />
+  ),
+
+  [CardType.EmailCard]: ({ targetableObject }) => (
+    <EmailThreads targetableObject={targetableObject} />
+  ),
+
+  [CardType.CalendarCard]: ({ targetableObject }) => (
+    <Calendar targetableObject={targetableObject} />
+  ),
+
+  [CardType.WorkflowCard]: ({ targetableObject }) => (
+    <>
+      <WorkflowVisualizerEffect workflowId={targetableObject.id} />
+      <WorkflowVisualizer targetableObject={targetableObject} />
+    </>
+  ),
+
+  [CardType.WorkflowVersionCard]: ({ targetableObject }) => (
+    <>
+      <WorkflowVersionVisualizerEffect
+        workflowVersionId={targetableObject.id}
+      />
+      <WorkflowVersionVisualizer workflowVersionId={targetableObject.id} />
+    </>
+  ),
+
+  [CardType.WorkflowRunCard]: ({ targetableObject }) => (
+    <WorkflowRunVersionVisualizer workflowRunId={targetableObject.id} />
+  ),
+
+  [CardType.WorkflowRunOutputCard]: ({ targetableObject }) => (
+    <WorkflowRunOutputVisualizer workflowRunId={targetableObject.id} />
+  ),
+};
diff --git a/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -39,6 +39,7 @@ export const RecordShowContainer = ({
     loading,
     objectNameSingular as CoreObjectNameSingular,
     isInRightDrawer,
+    objectMetadataItem,
   );
 
   return (

diff --git 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
@@ -0,0 +1,83 @@
+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 {
+  IconCheckbox,
+  IconList,
+  IconNotes,
+  IconPaperclip,
+  IconTimelineEvent,
+} from 'twenty-ui';
+
+export const BASE_RECORD_LAYOUT: Record<string, RecordLayoutTab> = {
+  fields: {
+    title: 'Fields',
+    Icon: IconList,
+    position: 100,
+    cards: [{ type: CardType.FieldCard }],
+    hide: {
+      ifMobile: false,
+      ifDesktop: true,
+      ifInRightDrawer: false,
+      ifFeaturesDisabled: [],
+      ifRequiredObjectsInactive: [],
+      ifRelationsMissing: [],
+    },
+  },
+  timeline: {
+    title: 'Timeline',
+    Icon: IconTimelineEvent,
+    position: 200,
+    cards: [{ type: CardType.TimelineCard }],
+    hide: {
+      ifMobile: false,
+      ifDesktop: false,
+      ifInRightDrawer: true,
+      ifFeaturesDisabled: [],
+      ifRequiredObjectsInactive: [],
+      ifRelationsMissing: [],
+    },
+  },
+  tasks: {
+    title: 'Tasks',
+    Icon: IconCheckbox,
+    position: 300,
+    cards: [{ type: CardType.TaskCard }],
+    hide: {
+      ifMobile: false,
+      ifDesktop: false,
+      ifInRightDrawer: false,
+      ifFeaturesDisabled: [],
+      ifRequiredObjectsInactive: [CoreObjectNameSingular.Task],
+      ifRelationsMissing: ['taskTargets'],
+    },
+  },
+  notes: {
+    title: 'Notes',
+    Icon: IconNotes,
+    position: 400,
+    cards: [{ type: CardType.NoteCard }],
+    hide: {
+      ifMobile: false,
+      ifDesktop: false,
+      ifInRightDrawer: false,
+      ifFeaturesDisabled: [],
+      ifRequiredObjectsInactive: [CoreObjectNameSingular.Note],
+      ifRelationsMissing: ['noteTargets'],
+    },
+  },
+  files: {
+    title: 'Files',
+    Icon: IconPaperclip,
+    position: 500,
+    cards: [{ type: CardType.FileCard }],
+    hide: {
+      ifMobile: false,
+      ifDesktop: false,
+      ifInRightDrawer: false,
+      ifFeaturesDisabled: [],
+      ifRequiredObjectsInactive: [CoreObjectNameSingular.Attachment],
+      ifRelationsMissing: ['attachments'],
+    },
+  },
+};