Minor fixes empty state (#3703)

* Minor fixes for Timeline empty states
* Refactored TimelineCreateButtonGroup

packages/twenty-front/src/modules/activities/components/ActivityCreateButton.tsx

@@ -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>
-);

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

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>
     );
   }

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>
+  );
+};

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}
                   />

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`

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;