Hide tabs (#7841)

@FelixMalfait WDYT?
We can refactor shouldDisplay Files/Tasks/Notes Tab etc into a hook.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx

@@ -1,28 +1,15 @@
 import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu';
-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 { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
+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 { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { ShowPageActivityContainer } from '@/ui/layout/show-page/components/ShowPageActivityContainer';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-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';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
@@ -46,19 +33,6 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
-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) : ''};
-`;
-
 const StyledButtonContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.secondary};
@@ -127,72 +101,19 @@ export const ShowPageSubContainer = ({
   );
 
   const renderActiveTabContent = () => {
-    switch (activeTabId) {
-      case 'timeline':
-        return (
-          <>
-            <TimelineActivities
-              targetableObject={targetableObject}
-              isInRightDrawer={isInRightDrawer}
-            />
-          </>
-        );
-      case 'richText':
-        return (
-          (targetableObject.targetObjectNameSingular ===
-            CoreObjectNameSingular.Note ||
-            targetableObject.targetObjectNameSingular ===
-              CoreObjectNameSingular.Task) && (
-            <ShowPageActivityContainer targetableObject={targetableObject} />
-          )
-        );
-      case 'fields':
-        return (
-          <StyledGreyBox isInRightDrawer={isInRightDrawer}>
-            {fieldsCard}
-          </StyledGreyBox>
-        );
-      case 'tasks':
-        return <ObjectTasks targetableObject={targetableObject} />;
-      case 'notes':
-        return <Notes targetableObject={targetableObject} />;
-      case 'files':
-        return <Attachments targetableObject={targetableObject} />;
-      case 'emails':
-        return <EmailThreads targetableObject={targetableObject} />;
-      case 'calendar':
-        return <Calendar targetableObject={targetableObject} />;
-      case 'workflow':
-        return (
-          <>
-            <WorkflowVisualizerEffect workflowId={targetableObject.id} />
+    const activeTab = tabs.find((tab) => tab.id === activeTabId);
+    if (!activeTab?.cards?.length) return null;
 
-            <WorkflowVisualizer targetableObject={targetableObject} />
-          </>
-        );
-      case 'workflowVersion':
-        return (
-          <>
-            <WorkflowVersionVisualizerEffect
-              workflowVersionId={targetableObject.id}
-            />
-
-            <WorkflowVersionVisualizer
-              workflowVersionId={targetableObject.id}
-            />
-          </>
-        );
-      case 'workflowRunFlow':
-        return (
-          <WorkflowRunVersionVisualizer workflowRunId={targetableObject.id} />
-        );
-      case 'workflowRunOutput':
-        return (
-          <WorkflowRunOutputVisualizer workflowRunId={targetableObject.id} />
-        );
-      default:
-        return <></>;
-    }
+    return activeTab.cards.map((card, index) => {
+      const CardComponent = CardComponents[card.type];
+      return CardComponent ? (
+        <CardComponent
+          key={`${activeTab.id}-card-${index}`}
+          targetableObject={targetableObject}
+          isInRightDrawer={isInRightDrawer}
+        />
+      ) : null;
+    });
   };
 
   const [recordFromStore] = useRecoilState<ObjectRecord | null>(

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

@@ -7,6 +7,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
+import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
 import { Tab } from './Tab';
 
 export type SingleTabProps = {
@@ -16,6 +17,7 @@ export type SingleTabProps = {
   hide?: boolean;
   disabled?: boolean;
   pill?: string | React.ReactElement;
+  cards?: LayoutCard[];
 };
 
 type TabListProps = {

packages/twenty-front/src/modules/ui/layout/tab/types/LayoutCard.ts

@@ -0,0 +1,5 @@
+import { CardType } from '@/object-record/record-show/types/CardType';
+
+export type LayoutCard = {
+  type: CardType;
+};

packages/twenty-front/src/modules/ui/layout/tab/types/RecordLayoutTab.ts

@@ -0,0 +1,11 @@
+import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
+import { TabVisibilityConfig } from '@/ui/layout/tab/types/TabVisibilityConfig';
+import { IconComponent } from 'twenty-ui';
+
+export type RecordLayoutTab = {
+  title: string;
+  position: number;
+  Icon: IconComponent;
+  hide: TabVisibilityConfig;
+  cards: LayoutCard[];
+};

packages/twenty-front/src/modules/ui/layout/tab/types/TabVisibilityConfig.ts

@@ -0,0 +1,11 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FeatureFlagKey } from '@/workspace/types/FeatureFlagKey';
+
+export type TabVisibilityConfig = {
+  ifMobile: boolean;
+  ifDesktop: boolean;
+  ifInRightDrawer: boolean;
+  ifFeaturesDisabled: FeatureFlagKey[];
+  ifRequiredObjectsInactive: CoreObjectNameSingular[];
+  ifRelationsMissing: string[];
+};