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

Add "show company / people" view and "Notes" concept (#528)

Browse Source 
* Begin adding show view and refactoring threads to become notes

* Progress on design

* Progress redesign timeline

* Dropdown button, design improvement

* Open comment thread edit mode in drawer

* Autosave local storage and commentThreadcount

* Improve display and fix missing key issue

* Remove some hardcoded CSS properties

* Create button

* Split company show into ui/business + fix eslint

* Fix font weight

* Begin auto-save on edit mode

* Save server-side query result to Apollo cache

* Fix save behavior

* Refetch timeline after creating note

* Rename createCommentThreadWithComment

* Improve styling

* Revert "Improve styling"

This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0.

* Improve CSS styling

* Bring back border radius inadvertently removed

* padding adjustment

* Improve blocknote design

* Improve edit mode display

* Remove Comments.tsx

* Remove irrelevant comment stories

* Removed un-necessary panel component

* stop using fragment, move trash icon

* Add a basic story for CompanyShow

* Add a basic People show view

* Fix storybook tests

* Add very basic Person story

* Refactor PR1

* Refactor part 2

* Refactor part 3

* Refactor part 4

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Félix Malfait
2023-07-10 07:25:34 +02:00
committed by GitHub
parent ca180acf9f
commit 94a913a41f
191 changed files with 5390 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
front/src/pages/companies/Companies.tsx
View File

@ -1,10 +1,8 @@
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { v4 as uuidv4 } from 'uuid';
import { isMockModeState } from '@/auth/states/isMockModeState';
import { GET_COMPANIES } from '@/companies/services';
import { useHotkeysScopeOnMountOnly } from '@/hotkeys/hooks/useHotkeysScopeOnMountOnly';
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@ -28,17 +26,10 @@ const StyledTableContainer = styled.div`
`;
export function Companies() {
const [isMockMode] = useRecoilState(isMockModeState);
const hotkeysEnabled = !isMockMode;
useHotkeysScopeOnMountOnly(
{
scope: InternalHotkeysScope.Table,
customScopes: { 'command-menu': true, goto: true },
},
hotkeysEnabled,
);
useHotkeysScopeOnMountOnly({
scope: InternalHotkeysScope.Table,
customScopes: { 'command-menu': true, goto: true },
});
const [insertCompany] = useInsertCompanyMutation();

75
front/src/pages/companies/CompanyShow.tsx Normal file
View File

@ -0,0 +1,75 @@
import { useParams } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { Timeline } from '@/comments/components/timeline/Timeline';
import { useCompanyQuery } from '@/companies/services';
import { useHotkeysScopeOnMountOnly } from '@/hotkeys/hooks/useHotkeysScopeOnMountOnly';
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
import { RawLink } from '@/ui/components/links/RawLink';
import { PropertyBox } from '@/ui/components/property-box/PropertyBox';
import { PropertyBoxItem } from '@/ui/components/property-box/PropertyBoxItem';
import { IconBuildingSkyscraper, IconLink, IconMap } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { ShowPageLeftContainer } from '@/ui/layout/show-page/containers/ShowPageLeftContainer';
import { ShowPageRightContainer } from '@/ui/layout/show-page/containers/ShowPageRightContainer';
import { ShowPageSummaryCard } from '@/ui/layout/show-page/ShowPageSummaryCard';
import { getLogoUrlFromDomainName } from '@/utils/utils';
import { CommentableType } from '~/generated/graphql';
export function CompanyShow() {
const companyId = useParams().companyId ?? '';
useHotkeysScopeOnMountOnly({
scope: InternalHotkeysScope.ShowPage,
customScopes: { 'command-menu': true, goto: true },
});
const { data } = useCompanyQuery(companyId);
const company = data?.findUniqueCompany;
const theme = useTheme();
return (
<WithTopBarContainer
title={company?.name ?? ''}
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
>
<>
<ShowPageLeftContainer>
<ShowPageSummaryCard
logoOrAvatar={getLogoUrlFromDomainName(company?.domainName ?? '')}
title={company?.name ?? 'No name'}
date={company?.createdAt ?? ''}
/>
<PropertyBox extraPadding={true}>
<>
<PropertyBoxItem
icon={<IconLink />}
value={
<RawLink
href={
company?.domainName
? 'https://' + company?.domainName
: ''
}
>
{company?.domainName}
</RawLink>
}
/>
<PropertyBoxItem
icon={<IconMap />}
value={company?.address ? company?.address : 'No address'}
/>
</>
</PropertyBox>
</ShowPageLeftContainer>
<ShowPageRightContainer>
<Timeline
entity={{ id: company?.id ?? '', type: CommentableType.Company }}
/>
</ShowPageRightContainer>
</>
</WithTopBarContainer>
);
}

38
front/src/pages/companies/__stories__/Companies.comments.stories.tsx
View File

@ -1,38 +0,0 @@
import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { Companies } from '../Companies';
import { Story } from './Companies.stories';
const meta: Meta<typeof Companies> = {
title: 'Pages/Companies/Comments',
component: Companies,
};
export default meta;
export const OpenCommentsSection: Story = {
render: getRenderWrapperForPage(<Companies />, '/companies'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const firstRow = await canvas.findByTestId('row-id-1');
expect(firstRow).toBeDefined();
const commentsChip = await within(firstRow).findByTestId('comment-chip');
expect(commentsChip).toBeDefined();
userEvent.click(commentsChip);
const commentSection = await canvas.findByText('Comments');
expect(commentSection).toBeDefined();
},
parameters: {
msw: graphqlMocks,
},
};

80
front/src/pages/companies/__stories__/Company.stories.tsx Normal file
View File

@ -0,0 +1,80 @@
import { getOperationName } from '@apollo/client/utilities';
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import { graphql } from 'msw';
import {
GET_COMMENT_THREAD,
GET_COMMENT_THREADS_BY_TARGETS,
} from '@/comments/services';
import { CREATE_COMMENT_THREAD_WITH_COMMENT } from '@/comments/services/create';
import { GET_COMPANY } from '@/companies/services';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedCommentThreads } from '~/testing/mock-data/comment-threads';
import { mockedCompaniesData } from '~/testing/mock-data/companies';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { CompanyShow } from '../CompanyShow';
const meta: Meta<typeof CompanyShow> = {
title: 'Pages/Companies/Company',
component: CompanyShow,
};
export default meta;
export type Story = StoryObj<typeof CompanyShow>;
export const Default: Story = {
render: getRenderWrapperForPage(
<CompanyShow />,
'/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const notesButton = await canvas.findByText('Notes');
await notesButton.click();
},
parameters: {
msw: [
...graphqlMocks,
graphql.mutation(
getOperationName(CREATE_COMMENT_THREAD_WITH_COMMENT) ?? '',
(req, res, ctx) => {
return res(
ctx.data({
createOneCommentThread: mockedCommentThreads[0],
}),
);
},
),
graphql.query(
getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
(req, res, ctx) => {
return res(
ctx.data({
findManyCommentThreads: mockedCommentThreads,
}),
);
},
),
graphql.query(
getOperationName(GET_COMMENT_THREAD) ?? '',
(req, res, ctx) => {
return res(
ctx.data({
findManyCommentThreads: mockedCommentThreads[0],
}),
);
},
),
graphql.query(getOperationName(GET_COMPANY) ?? '', (req, res, ctx) => {
return res(
ctx.data({
findUniqueCompany: mockedCompaniesData[0],
}),
);
}),
],
},
};

51
front/src/pages/people/PersonShow.tsx Normal file
View File

@ -0,0 +1,51 @@
import { useParams } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { Timeline } from '@/comments/components/timeline/Timeline';
import { usePersonQuery } from '@/people/services';
import { PropertyBox } from '@/ui/components/property-box/PropertyBox';
import { PropertyBoxItem } from '@/ui/components/property-box/PropertyBoxItem';
import { IconLink, IconUser } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { ShowPageLeftContainer } from '@/ui/layout/show-page/containers/ShowPageLeftContainer';
import { ShowPageRightContainer } from '@/ui/layout/show-page/containers/ShowPageRightContainer';
import { ShowPageSummaryCard } from '@/ui/layout/show-page/ShowPageSummaryCard';
import { CommentableType } from '~/generated/graphql';
export function PersonShow() {
const personId = useParams().personId ?? '';
const { data } = usePersonQuery(personId);
const person = data?.findUniquePerson;
const theme = useTheme();
return (
<WithTopBarContainer
title={person?.firstName ?? ''}
icon={<IconUser size={theme.icon.size.md} />}
>
<>
<ShowPageLeftContainer>
<ShowPageSummaryCard
title={person?.displayName ?? 'No name'}
date={person?.createdAt ?? ''}
/>
<PropertyBox extraPadding={true}>
<>
<PropertyBoxItem
icon={<IconLink />}
value={person?.firstName ?? 'No First name'}
/>
</>
</PropertyBox>
</ShowPageLeftContainer>
<ShowPageRightContainer>
<Timeline
entity={{ id: person?.id ?? '', type: CommentableType.Person }}
/>
</ShowPageRightContainer>
</>
</WithTopBarContainer>
);
}

38
front/src/pages/people/__stories__/People.comments.stories.tsx
View File

@ -1,38 +0,0 @@
import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { People } from '../People';
import { Story } from './People.stories';
const meta: Meta<typeof People> = {
title: 'Pages/People/Comments',
component: People,
};
export default meta;
export const OpenCommentsSection: Story = {
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const firstRow = await canvas.findByTestId('row-id-1');
expect(firstRow).toBeDefined();
const commentsChip = await within(firstRow).findByTestId('comment-chip');
expect(commentsChip).toBeDefined();
userEvent.click(commentsChip);
const commentSection = await canvas.findByText('Comments');
expect(commentSection).toBeDefined();
},
parameters: {
msw: graphqlMocks,
},
};

25
front/src/pages/people/__stories__/Person.stories.tsx Normal file
View File

@ -0,0 +1,25 @@
import type { Meta, StoryObj } from '@storybook/react';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { PersonShow } from '../PersonShow';
const meta: Meta<typeof PersonShow> = {
title: 'Pages/People/Person',
component: PersonShow,
};
export default meta;
export type Story = StoryObj<typeof PersonShow>;
export const Default: Story = {
render: getRenderWrapperForPage(
<PersonShow />,
'/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
),
parameters: {
msw: graphqlMocks,
},
};