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',