[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
twentyhq · Aug 5, 2023 · 35395c2 · 35395c2
1 parent 2d35db1
commit 35395c2
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 28 deletions.
diff --git a/front/src/modules/activities/components/TaskGroups.tsx b/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>
   );
 }
diff --git a/front/src/modules/activities/components/TaskList.tsx b/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>
+    </>
   );
 }
diff --git a/front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx b/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 = {};
diff --git a/front/src/modules/activities/components/__stories__/TaskGroupsWithoutTasks.stories.tsx b/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: [],
+              }),
+            );
+          },
+        ),
+      ],
+    ],
+  },
+};
diff --git a/front/src/modules/activities/components/__stories__/TaskList.stories.tsx b/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: [],
-  },
-};
diff --git a/front/src/testing/decorators/ComponentWithRecoilScopeDecorator.tsx b/front/src/testing/decorators/ComponentWithRecoilScopeDecorator.tsx
@@ -0,0 +1,12 @@
+import { Decorator } from '@storybook/react';
+
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+export const ComponentWithRecoilScopeDecorator: Decorator = (
+  Story,
+  context,
+) => (
+  <RecoilScope SpecificContext={context.parameters.recoilScopeContext}>
+    <Story />
+  </RecoilScope>
+);
diff --git a/front/src/testing/graphqlMocks.ts b/front/src/testing/graphqlMocks.ts
@@ -2,6 +2,7 @@ import { getOperationName } from '@apollo/client/utilities';
 import { graphql } from 'msw';
 
 import { GET_ACTIVITIES } from '@/activities/queries';
+import { CREATE_ACTIVITY_WITH_COMMENT } from '@/activities/queries/create';
 import { CREATE_EVENT } from '@/analytics/queries';
 import { GET_CLIENT_CONFIG } from '@/client-config/queries';
 import { GET_COMPANIES } from '@/companies/queries';
@@ -25,7 +26,7 @@ import {
   SearchUserQuery,
 } from '~/generated/graphql';
 
-import { mockedActivities } from './mock-data/activities';
+import { mockedActivities, mockedTasks } from './mock-data/activities';
 import {
   mockedCompaniesData,
   mockedCompanyViewFields,
@@ -238,4 +239,14 @@ export const graphqlMocks = [
       }),
     );
   }),
+  graphql.mutation(
+    getOperationName(CREATE_ACTIVITY_WITH_COMMENT) ?? '',
+    (req, res, ctx) => {
+      return res(
+        ctx.data({
+          createOneActivity: mockedTasks[0],
+        }),
+      );
+    },
+  ),
 ];
diff --git a/front/src/testing/mock-data/activities.ts b/front/src/testing/mock-data/activities.ts
@@ -48,6 +48,35 @@ type MockedActivity = Pick<
   >;
 };
 
+export const mockedTasks: Array<MockedActivity> = [
+  {
+    id: '89bb825c-171e-4bcc-9cf7-43448d6fb230',
+    createdAt: '2023-04-26T10:12:42.33625+00:00',
+    updatedAt: '2023-04-26T10:23:42.33625+00:00',
+    title: 'My very first task',
+    type: ActivityType.Task,
+    body: null,
+    dueAt: '2023-04-26T10:12:42.33625+00:00',
+    completedAt: null,
+    author: {
+      id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
+      firstName: 'Charles',
+      lastName: 'Test',
+      displayName: 'Charles Test',
+    },
+    assignee: {
+      id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
+      firstName: 'Charles',
+      lastName: 'Test',
+      displayName: 'Charles Test',
+    },
+    authorId: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
+    comments: [],
+    activityTargets: [],
+    __typename: 'Activity',
+  },
+];
+
 export const mockedActivities: Array<MockedActivity> = [
   {
     id: '89bb825c-171e-4bcc-9cf7-43448d6fb230',