From 35395c2e67e99e0610a1f9d716c8368c232b9bfe Mon Sep 17 00:00:00 2001 From: Weiko Date: Sun, 6 Aug 2023 00:05:40 +0200 Subject: [PATCH] [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 --- .../activities/components/TaskGroups.tsx | 9 +++- .../activities/components/TaskList.tsx | 31 +++++------- .../__stories__/TaskGroups.stories.tsx | 23 +++++++++ .../TaskGroupsWithoutTasks.stories.tsx | 47 +++++++++++++++++++ .../__stories__/TaskList.stories.tsx | 7 --- .../ComponentWithRecoilScopeDecorator.tsx | 12 +++++ front/src/testing/graphqlMocks.ts | 13 ++++- front/src/testing/mock-data/activities.ts | 29 ++++++++++++ 8 files changed, 143 insertions(+), 28 deletions(-) create mode 100644 front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx create mode 100644 front/src/modules/activities/components/__stories__/TaskGroupsWithoutTasks.stories.tsx create mode 100644 front/src/testing/decorators/ComponentWithRecoilScopeDecorator.tsx diff --git a/front/src/modules/activities/components/TaskGroups.tsx b/front/src/modules/activities/components/TaskGroups.tsx index f946ae7bad..d94ef1fd07 100644 --- 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 ( - <> + - + ); } diff --git a/front/src/modules/activities/components/TaskList.tsx b/front/src/modules/activities/components/TaskList.tsx index 966527fa31..f2503273e4 100644 --- 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 ( - - - {title} {tasks ? tasks.length : 0} - - {tasks && tasks.length > 0 ? ( - - {tasks.map((task) => ( - - ))} - - ) : ( - No task in this section + <> + {tasks && tasks.length > 0 && ( + + + {title} {tasks.length} + + + {tasks.map((task) => ( + + ))} + + )} - + ); } diff --git a/front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx b/front/src/modules/activities/components/__stories__/TaskGroups.stories.tsx new file mode 100644 index 0000000000..898675026c --- /dev/null +++ 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 = { + title: 'Modules/Activity/TaskGroups', + component: TaskGroups, + decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator], + parameters: { + msw: graphqlMocks, + recoilScopeContext: TasksContext, + }, +}; + +export default meta; +type Story = StoryObj; + +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 new file mode 100644 index 0000000000..b3f0dd0981 --- /dev/null +++ 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 = { + title: 'Modules/Activity/TaskGroupsWithoutTasks', + component: TaskGroups, + decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator], + parameters: { + msw: graphqlMocks, + recoilScopeContext: TasksContext, + }, +}; + +export default meta; +type Story = StoryObj; + +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 index b9e8c6f59f..295f74d621 100644 --- 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 new file mode 100644 index 0000000000..926d08f237 --- /dev/null +++ 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, +) => ( + + + +); diff --git a/front/src/testing/graphqlMocks.ts b/front/src/testing/graphqlMocks.ts index fcce1c913d..a531f698ca 100644 --- 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 index 632827f92c..6652e92f86 100644 --- 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 = [ + { + 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 = [ { id: '89bb825c-171e-4bcc-9cf7-43448d6fb230',