admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refacto board (#661)

Browse Source 
* Refacto pipeline progress board to be entity agnostic

* Abstract hooks as well

* Move files

* Pass specific components as props

* Move board hook to the generic component

* Make dnd and update logic part of the board

* Remove useless call and getch pipelineProgress from hook

* Minot

* improve typing

* Revert "improve typing"

This reverts commit 49bf7929b6231747cc460cbb98f68c3c10424659.

* wip

* Get board from initial component

* Move files again

* Lint

* Fix story

* Lint

* Mock pipeline progress

* Fix storybook

* WIP refactor recoil

* Checkpoint: compilation

* Fix dnd

* Fix unselect card

* Checkpoint: compilation

* Checkpoint: New card OK

* Checkpoint: feature complete

* Fix latency for delete

* Linter

* Fix rebase

* Move files

* lint

* Update Stories tests

* lint

* Fix test

* Refactor hook for company progress indexing

* Remove useless type

* Move boardState

* remove gardcoded Id

* Nit

* Fix

* Rename state
This commit is contained in:
Emilien Chauvet
2023-07-14 17:51:16 -07:00
committed by GitHub
parent e93a96b3b1
commit 0a319bcf86
47 changed files with 975 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
front/src/testing/decorators.tsx
View File

@ -1,7 +1,16 @@
import { useEffect } from 'react';
import { ApolloProvider } from '@apollo/client';
import { Decorator } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { pipeline } from '@/companies/__stories__/mock-data';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import { BoardCardContext } from '@/pipeline-progress/states/BoardCardContext';
import { BoardColumnContext } from '@/pipeline-progress/states/BoardColumnContext';
import { pipelineProgressIdScopedState } from '@/pipeline-progress/states/pipelineProgressIdScopedState';
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
import { HookCompanyBoard } from '~/pages/opportunities/HookCompanyBoard';
import { RecoilScope } from '../modules/recoil-scope/components/RecoilScope';
import { CellContext } from '../modules/ui/tables/states/CellContext';
import { RowContext } from '../modules/ui/tables/states/RowContext';
@ -30,3 +39,41 @@ export const CellPositionDecorator: Decorator = (Story) => (
</RecoilScope>
</RecoilScope>
);
export const BoardDecorator: Decorator = (Story) => (
<>
<HookCompanyBoard />
<RecoilScope SpecificContext={CompanyBoardContext}>
<Story />
</RecoilScope>
</>
);
function HookLoadFakeBoardContextState() {
const [, setPipelineProgressId] = useRecoilScopedState(
pipelineProgressIdScopedState,
BoardCardContext,
);
const pipelineProgress =
pipeline?.pipelineStages?.[0]?.pipelineProgresses?.[0];
useEffect(() => {
setPipelineProgressId(pipelineProgress?.id || '');
}, [pipelineProgress?.id, setPipelineProgressId]);
return <></>;
}
export const BoardCardDecorator: Decorator = (Story) => {
return (
<>
<HookCompanyBoard />
<RecoilScope SpecificContext={CompanyBoardContext}>
<RecoilScope SpecificContext={BoardColumnContext}>
<RecoilScope SpecificContext={BoardCardContext}>
<HookLoadFakeBoardContextState />
<Story />
</RecoilScope>
</RecoilScope>
</RecoilScope>
</>
);
};

16
front/src/testing/graphqlMocks.ts
View File

@ -5,7 +5,10 @@ import { CREATE_EVENT } from '@/analytics/services';
import { GET_CLIENT_CONFIG } from '@/client-config/queries';
import { GET_COMPANIES } from '@/companies/services';
import { GET_PEOPLE, UPDATE_PERSON } from '@/people/services';
import { GET_PIPELINES } from '@/pipeline-progress/queries';
import {
GET_PIPELINE_PROGRESS,
GET_PIPELINES,
} from '@/pipeline-progress/queries';
import {
SEARCH_COMPANY_QUERY,
SEARCH_USER_QUERY,
@ -20,6 +23,7 @@ import {
import { mockedCompaniesData } from './mock-data/companies';
import { mockedPeopleData } from './mock-data/people';
import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
import { mockedPipelinesData } from './mock-data/pipelines';
import { mockedUsersData } from './mock-data/users';
import { filterAndSortData, updateOneFromData } from './mock-data';
@ -113,6 +117,16 @@ export const graphqlMocks = [
}),
);
}),
graphql.query(
getOperationName(GET_PIPELINE_PROGRESS) ?? '',
(req, res, ctx) => {
return res(
ctx.data({
findManyPipelineProgress: mockedPipelineProgressData,
}),
);
},
),
graphql.mutation(getOperationName(CREATE_EVENT) ?? '', (req, res, ctx) => {
return res(
ctx.data({

35
front/src/testing/mock-data/pipeline-progress.ts
View File

@ -2,7 +2,7 @@ import { PipelineProgress, User } from '../../generated/graphql';
type MockedPipelineProgress = Pick<
PipelineProgress,
'id' | 'amount' | 'closeDate'
'id' | 'amount' | 'closeDate' | 'progressableId'
> & {
accountOwner: Pick<
User,
@ -10,17 +10,34 @@ type MockedPipelineProgress = Pick<
> | null;
};
const accountOwner = {
email: 'charles@test.com',
displayName: 'Charles Test',
firstName: 'Charles',
lastName: 'Test',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
};
export const mockedPipelineProgressData: Array<MockedPipelineProgress> = [
{
id: '0ac8761c-1ad6-11ee-be56-0242ac120002',
amount: 78,
accountOwner: {
email: 'charles@test.com',
displayName: 'Charles Test',
firstName: 'Charles',
lastName: 'Test',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
__typename: 'User',
},
closeDate: '2021-10-01T00:00:00.000Z',
progressableId: '0',
accountOwner: accountOwner,
},
{
id: 'fe256b39-3ec3-4fe7-8998-b76aa0bfb600',
progressableId: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
amount: 7,
closeDate: '2021-10-01T00:00:00.000Z',
accountOwner,
},
{
id: '4a886c90-f4f2-4984-8222-882ebbb905d6',
progressableId: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
amount: 100,
closeDate: '2021-10-01T00:00:00.000Z',
accountOwner,
},
];