From d7e4b4116f5e6fe0c9d0d015a85bcae6a39d7b27 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Wed, 31 Jan 2024 12:12:51 +0100
Subject: [PATCH] Minor fixes empty state (#3703)

* Minor fixes for Timeline empty states
* Refactored TimelineCreateButtonGroup
---
 .../components/ActivityCreateButton.tsx       | 30 -----------
 .../tasks/components/TaskGroups.tsx           |  2 +-
 .../timeline/components/Timeline.tsx          | 20 +------
 .../components/TimelineCreateButtonGroup.tsx  | 53 +++++++++++++++++++
 .../components/RecordTableWithWrappers.tsx    |  9 ++--
 .../components/EmptyPlaceholderStyled.tsx     |  1 -
 .../components/ShowPageRightContainer.tsx     |  2 +-
 7 files changed, 62 insertions(+), 55 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/activities/components/ActivityCreateButton.tsx
 create mode 100644 packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityCreateButton.tsx b/packages/twenty-front/src/modules/activities/components/ActivityCreateButton.tsx
deleted file mode 100644
index 8dd8dfcc1f..0000000000
--- a/packages/twenty-front/src/modules/activities/components/ActivityCreateButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  IconCheckbox,
-  IconNotes,
-  IconTimelineEvent,
-} from '@/ui/display/icon/index';
-import { Button } from '@/ui/input/button/components/Button';
-import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
-
-type ActivityCreateButtonProps = {
-  onNoteClick?: () => void;
-  onTaskClick?: () => void;
-  onActivityClick?: () => void;
-};
-
-export const ActivityCreateButton = ({
-  onNoteClick,
-  onTaskClick,
-  onActivityClick,
-}: ActivityCreateButtonProps) => (
-  <ButtonGroup variant={'secondary'}>
-    <Button Icon={IconNotes} title="Note" onClick={onNoteClick} />
-    <Button Icon={IconCheckbox} title="Task" onClick={onTaskClick} />
-    <Button
-      Icon={IconTimelineEvent}
-      title="Activity"
-      soon={true}
-      onClick={onActivityClick}
-    />
-  </ButtonGroup>
-);
diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
index 17bb16fa57..e2128bfc3c 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
@@ -63,7 +63,7 @@ export const TaskGroups = ({
         <StyledEmptyTextContainer>
           <StyledEmptyTitle>No Task</StyledEmptyTitle>
           <StyledEmptySubTitle>
-            There are no associated tasks with this record
+            There are no tasks for this user filter
           </StyledEmptySubTitle>
         </StyledEmptyTextContainer>
         <Button
diff --git a/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx b/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
index 63c5dec56e..b3badc84e9 100644
--- a/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
-import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
-import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { TimelineCreateButtonGroup } from '@/activities/timeline/components/TimelineCreateButtonGroup';
 import { useTimelineActivities } from '@/activities/timeline/hooks/useTimelineActivities';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
@@ -36,8 +35,6 @@ export const Timeline = ({
     targetableObject,
   });
 
-  const openCreateActivity = useOpenCreateActivityDrawer();
-
   const showEmptyState = initialized && activities.length === 0;
 
   const showLoadingState = !initialized;
@@ -57,20 +54,7 @@ export const Timeline = ({
             There are no activities associated with this record.{' '}
           </StyledEmptySubTitle>
         </StyledEmptyTextContainer>
-        <ActivityCreateButton
-          onNoteClick={() =>
-            openCreateActivity({
-              type: 'Note',
-              targetableObjects: [targetableObject],
-            })
-          }
-          onTaskClick={() =>
-            openCreateActivity({
-              type: 'Task',
-              targetableObjects: [targetableObject],
-            })
-          }
-        />
+        <TimelineCreateButtonGroup targetableObject={targetableObject} />
       </StyledEmptyContainer>
     );
   }
diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx
new file mode 100644
index 0000000000..b8542cd19f
--- /dev/null
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx
@@ -0,0 +1,53 @@
+import { useSetRecoilState } from 'recoil';
+import { Button, ButtonGroup } from 'tsup.ui.index';
+
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import {
+  IconCheckbox,
+  IconNotes,
+  IconPaperclip,
+} from '@/ui/display/icon/index';
+import { TAB_LIST_COMPONENT_ID } from '@/ui/layout/show-page/components/ShowPageRightContainer';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+
+export const TimelineCreateButtonGroup = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const setActiveTabId = useSetRecoilState(getActiveTabIdState());
+
+  const openCreateActivity = useOpenCreateActivityDrawer();
+
+  return (
+    <ButtonGroup variant={'secondary'}>
+      <Button
+        Icon={IconNotes}
+        title="Note"
+        onClick={() =>
+          openCreateActivity({
+            type: 'Note',
+            targetableObjects: [targetableObject],
+          })
+        }
+      />
+      <Button
+        Icon={IconCheckbox}
+        title="Task"
+        onClick={() =>
+          openCreateActivity({
+            type: 'Task',
+            targetableObjects: [targetableObject],
+          })
+        }
+      />
+      <Button
+        Icon={IconPaperclip}
+        title="File"
+        onClick={() => setActiveTabId('files')}
+      />
+    </ButtonGroup>
+  );
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
index 079ba4cbbe..e60fd4ba8d 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -80,6 +80,8 @@ export const RecordTableWithWrappers = ({
 
   const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular });
 
+  const objectLabel = foundObjectMetadataItem?.nameSingular;
+
   return (
     <EntityDeleteContext.Provider value={deleteOneRecord}>
       <ScrollWrapper>
@@ -112,16 +114,15 @@ export const RecordTableWithWrappers = ({
                   <AnimatedPlaceholder type="noRecord" />
                   <StyledEmptyTextContainer>
                     <StyledEmptyTitle>
-                      Add your first {foundObjectMetadataItem?.namePlural}
+                      Add your first {objectLabel}
                     </StyledEmptyTitle>
                     <StyledEmptySubTitle>
-                      Use our API or add your first{' '}
-                      {foundObjectMetadataItem?.namePlural} manually
+                      Use our API or add your first {objectLabel} manually
                     </StyledEmptySubTitle>
                   </StyledEmptyTextContainer>
                   <Button
                     Icon={IconPlus}
-                    title={`Add a ${foundObjectMetadataItem?.nameSingular}`}
+                    title={`Add a ${objectLabel}`}
                     variant={'secondary'}
                     onClick={createRecord}
                   />
diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
index 98702693bc..84c4f76da2 100644
--- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
@@ -26,7 +26,6 @@ export const StyledEmptyTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  line-height: ${({ theme }) => theme.text.lineHeight.lg};
 `;
 
 export const StyledEmptySubTitle = styled.div`
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
index 7de352e05e..d131d4e8ab 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@@ -38,7 +38,7 @@ const StyledTabListContainer = styled.div`
   height: 40px;
 `;
 
-const TAB_LIST_COMPONENT_ID = 'show-page-right-tab-list';
+export const TAB_LIST_COMPONENT_ID = 'show-page-right-tab-list';
 
 type ShowPageRightContainerProps = {
   targetableObject: ActivityTargetableObject;