POC timeline activity (#5697)

TODO: 
- remove WorkspaceIsNotAuditLogged decorators on activity/activityTarget
to log task/note creations
- handle attachments
-  fix css and remove unnecessary styled components or duplicates

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

@@ -18,6 +18,7 @@ import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks';
 import { Timeline } from '@/activities/timeline/components/Timeline';
 import { TimelineQueryEffect } from '@/activities/timeline/components/TimelineQueryEffect';
 import { TimelineActivities } from '@/activities/timelineActivities/components/TimelineActivities';
+import { TimelineActivitiesQueryEffect } from '@/activities/timelineActivities/components/TimelineActivitiesQueryEffect';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { TabList } from '@/ui/layout/tab/components/TabList';
@@ -74,22 +75,21 @@ export const ShowPageRightContainer = ({
   );
   const activeTabId = useRecoilValue(activeTabIdState);
 
-  const shouldDisplayCalendarTab =
-    targetableObject.targetObjectNameSingular ===
-      CoreObjectNameSingular.Company ||
-    targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person;
+  const targetObjectNameSingular =
+    targetableObject.targetObjectNameSingular as CoreObjectNameSingular;
 
+  const isCompanyOrPerson = [
+    CoreObjectNameSingular.Company,
+    CoreObjectNameSingular.Person,
+  ].includes(targetObjectNameSingular);
+
+  const shouldDisplayCalendarTab = isCompanyOrPerson;
   const shouldDisplayLogTab = useIsFeatureEnabled('IS_EVENT_OBJECT_ENABLED');
-
-  const shouldDisplayEmailsTab =
-    (emails &&
-      targetableObject.targetObjectNameSingular ===
-        CoreObjectNameSingular.Company) ||
-    targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person;
+  const shouldDisplayEmailsTab = emails && isCompanyOrPerson;
 
   const isMobile = useIsMobile() || isRightDrawer;
 
-  const TASK_TABS = [
+  const tabs = [
     {
       id: 'summary',
       title: 'Summary',
@@ -102,24 +102,9 @@ export const ShowPageRightContainer = ({
       Icon: IconTimelineEvent,
       hide: !timeline || isRightDrawer,
     },
-    {
-      id: 'tasks',
-      title: 'Tasks',
-      Icon: IconCheckbox,
-      hide: !tasks,
-    },
-    {
-      id: 'notes',
-      title: 'Notes',
-      Icon: IconNotes,
-      hide: !notes,
-    },
-    {
-      id: 'files',
-      title: 'Files',
-      Icon: IconPaperclip,
-      hide: !notes,
-    },
+    { id: 'tasks', title: 'Tasks', Icon: IconCheckbox, hide: !tasks },
+    { id: 'notes', title: 'Notes', Icon: IconNotes, hide: !notes },
+    { id: 'files', title: 'Files', Icon: IconPaperclip, hide: !notes },
     {
       id: 'emails',
       title: 'Emails',
@@ -132,48 +117,51 @@ export const ShowPageRightContainer = ({
       Icon: IconCalendarEvent,
       hide: !shouldDisplayCalendarTab,
     },
-    {
-      id: 'logs',
-      title: 'Logs',
-      Icon: IconTimelineEvent,
-      hide: !shouldDisplayLogTab,
-      hasBetaPill: true,
-    },
   ];
 
+  const renderActiveTabContent = () => {
+    switch (activeTabId) {
+      case 'timeline':
+        return shouldDisplayLogTab ? (
+          <>
+            <TimelineActivitiesQueryEffect
+              targetableObject={targetableObject}
+            />
+            <TimelineActivities targetableObject={targetableObject} />
+          </>
+        ) : (
+          <>
+            <TimelineQueryEffect targetableObject={targetableObject} />
+            <Timeline loading={loading} targetableObject={targetableObject} />
+          </>
+        );
+      case 'summary':
+        return summary;
+      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} />;
+      default:
+        return <></>;
+    }
+  };
+
   return (
     <StyledShowPageRightContainer isMobile={isMobile}>
       <StyledTabListContainer>
         <TabList
           loading={loading}
           tabListId={TAB_LIST_COMPONENT_ID + isRightDrawer}
-          tabs={TASK_TABS}
+          tabs={tabs}
         />
       </StyledTabListContainer>
-      {activeTabId === 'summary' && summary}
-      {activeTabId === 'timeline' && (
-        <>
-          <TimelineQueryEffect targetableObject={targetableObject} />
-          <Timeline loading={loading} targetableObject={targetableObject} />
-        </>
-      )}
-      {activeTabId === 'tasks' && (
-        <ObjectTasks targetableObject={targetableObject} />
-      )}
-      {activeTabId === 'notes' && <Notes targetableObject={targetableObject} />}
-      {activeTabId === 'files' && (
-        <Attachments targetableObject={targetableObject} />
-      )}
-      {activeTabId === 'emails' && (
-        <EmailThreads targetableObject={targetableObject} />
-      )}
-      {activeTabId === 'calendar' && (
-        <Calendar targetableObject={targetableObject} />
-      )}
-      {activeTabId === 'logs' && (
-        <TimelineActivities targetableObject={targetableObject} />
-      )}
-      {}
+      {renderActiveTabContent()}
     </StyledShowPageRightContainer>
   );
 };