mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-25 13:02:15 +03:00
[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
This commit is contained in:
parent
2d35db14c0
commit
35395c2e67
front/src
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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 = {};
|
@ -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: [],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
@ -36,10 +36,3 @@ export const Default: Story = {
|
|||||||
tasks: mockedActivities,
|
tasks: mockedActivities,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Empty: Story = {
|
|
||||||
args: {
|
|
||||||
title: 'No tasks',
|
|
||||||
tasks: [],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
@ -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>
|
||||||
|
);
|
@ -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],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
];
|
];
|
||||||
|
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user