1
1
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-25 13:02:15 +03:00

[Tasks] Removing task list empty state ()

* [Tasks] Removing task list empty state

* separate no-tasks story in a different file to handle cache issues
This commit is contained in:
Weiko 2023-08-06 00:05:40 +02:00 committed by GitHub
parent 2d35db14c0
commit 35395c2e67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 143 additions and 28 deletions

View File

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

View File

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

View File

@ -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 = {};

View File

@ -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: [],
}),
);
},
),
],
],
},
};

View File

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

View File

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

View File

@ -2,6 +2,7 @@ import { getOperationName } from '@apollo/client/utilities';
import { graphql } from 'msw'; import { graphql } from 'msw';
import { GET_ACTIVITIES } from '@/activities/queries'; import { GET_ACTIVITIES } from '@/activities/queries';
import { CREATE_ACTIVITY_WITH_COMMENT } from '@/activities/queries/create';
import { CREATE_EVENT } from '@/analytics/queries'; import { CREATE_EVENT } from '@/analytics/queries';
import { GET_CLIENT_CONFIG } from '@/client-config/queries'; import { GET_CLIENT_CONFIG } from '@/client-config/queries';
import { GET_COMPANIES } from '@/companies/queries'; import { GET_COMPANIES } from '@/companies/queries';
@ -25,7 +26,7 @@ import {
SearchUserQuery, SearchUserQuery,
} from '~/generated/graphql'; } from '~/generated/graphql';
import { mockedActivities } from './mock-data/activities'; import { mockedActivities, mockedTasks } from './mock-data/activities';
import { import {
mockedCompaniesData, mockedCompaniesData,
mockedCompanyViewFields, 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],
}),
);
},
),
]; ];

View File

@ -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> = [ export const mockedActivities: Array<MockedActivity> = [
{ {
id: '89bb825c-171e-4bcc-9cf7-43448d6fb230', id: '89bb825c-171e-4bcc-9cf7-43448d6fb230',