[Tasks] Removing task list empty state (#1090)

* [Tasks] Removing task list empty state

* separate no-tasks story in a different file to handle cache issues

front/src/modules/activities/components/TaskGroups.tsx

@@ -39,6 +39,11 @@ const StyledEmptyTaskGroupSubTitle = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export function TaskGroups() {
   const { todayOrPreviousTasks, upcomingTasks, unscheduledTasks } = useTasks();
   const theme = useTheme();
@@ -65,10 +70,10 @@ export function TaskGroups() {
   }
 
   return (
-    <>
+    <StyledContainer>
       <TaskList title="Today" tasks={todayOrPreviousTasks ?? []} />
       <TaskList title="Upcoming" tasks={upcomingTasks ?? []} />
       <TaskList title="Unscheduled" tasks={unscheduledTasks ?? []} />
-    </>
+    </StyledContainer>
   );
 }

front/src/modules/activities/components/TaskList.tsx

@@ -36,26 +36,21 @@ const StyledTaskRows = styled.div`
   width: 100%;
 `;
 
-const StyledEmptyListMessage = styled.div`
-  color: ${({ theme }) => theme.font.color.secondary};
-  padding: ${({ theme }) => theme.spacing(4)};
-`;
-
 export function TaskList({ title, tasks }: OwnProps) {
   return (
-    <StyledContainer>
-      <StyledTitle>
-        {title} <StyledCount>{tasks ? tasks.length : 0}</StyledCount>
-      </StyledTitle>
-      {tasks && tasks.length > 0 ? (
-        <StyledTaskRows>
-          {tasks.map((task) => (
-            <TaskRow key={task.id} task={task} />
-          ))}
-        </StyledTaskRows>
-      ) : (
-        <StyledEmptyListMessage>No task in this section</StyledEmptyListMessage>
+    <>
+      {tasks && tasks.length > 0 && (
+        <StyledContainer>
+          <StyledTitle>
+            {title} <StyledCount>{tasks.length}</StyledCount>
+          </StyledTitle>
+          <StyledTaskRows>
+            {tasks.map((task) => (
+              <TaskRow key={task.id} task={task} />
+            ))}
+          </StyledTaskRows>
+        </StyledContainer>
       )}
-    </StyledContainer>
+    </>
   );
 }

front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TasksContext } from '@/activities/states/TasksContext';
+import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { TaskGroups } from '../TaskGroups';
+
+const meta: Meta<typeof TaskGroups> = {
+  title: 'Modules/Activity/TaskGroups',
+  component: TaskGroups,
+  decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator],
+  parameters: {
+    msw: graphqlMocks,
+    recoilScopeContext: TasksContext,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TaskGroups>;
+
+export const Default: Story = {};

front/src/modules/activities/components/__stories__/TaskGroupsWithoutTasks.stories.tsx

@@ -0,0 +1,47 @@
+import { getOperationName } from '@apollo/client/utilities';
+import type { Meta, StoryObj } from '@storybook/react';
+import { graphql } from 'msw';
+
+import { GET_ACTIVITIES } from '@/activities/queries';
+import { TasksContext } from '@/activities/states/TasksContext';
+import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { TaskGroups } from '../TaskGroups';
+
+const meta: Meta<typeof TaskGroups> = {
+  title: 'Modules/Activity/TaskGroupsWithoutTasks',
+  component: TaskGroups,
+  decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator],
+  parameters: {
+    msw: graphqlMocks,
+    recoilScopeContext: TasksContext,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TaskGroups>;
+
+export const Default: Story = {
+  parameters: {
+    msw: [
+      ...graphqlMocks.filter(
+        (graphqlMock) =>
+          graphqlMock.info.operationName !== getOperationName(GET_ACTIVITIES),
+      ),
+      ...[
+        graphql.query(
+          getOperationName(GET_ACTIVITIES) ?? '',
+          (_req, res, ctx) => {
+            return res(
+              ctx.data({
+                findManyActivities: [],
+              }),
+            );
+          },
+        ),
+      ],
+    ],
+  },
+};

front/src/modules/activities/components/__stories__/TaskList.stories.tsx

@@ -36,10 +36,3 @@ export const Default: Story = {
     tasks: mockedActivities,
   },
 };
-
-export const Empty: Story = {
-  args: {
-    title: 'No tasks',
-    tasks: [],
-  },
-};