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

Refactor/new menu item (#1448)

Browse Source 
* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests
This commit is contained in:
Lucas Bordeau
2023-09-06 16:41:26 +02:00
committed by GitHub
parent 5c7660f588
commit 28ca9a9e49
96 changed files with 816 additions and 918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
View File

@ -35,11 +35,7 @@ export const FilterByName: Story = {
const filterButton = await canvas.findByText('Filter');
await userEvent.click(filterButton);
const nameFilterButton = (
await canvas.findAllByTestId('dropdown-menu-item')
).find((item) => {
return item.textContent === 'Name';
});
const nameFilterButton = await canvas.findByTestId('select-filter-0');
assert(nameFilterButton);
@ -70,11 +66,9 @@ export const FilterByAccountOwner: Story = {
const filterButton = await canvas.findByText('Filter');
await userEvent.click(filterButton);
const accountOwnerFilterButton = (
await canvas.findAllByTestId('dropdown-menu-item')
).find((item) => {
return item.textContent === 'Account owner';
});
const accountOwnerFilterButton = await canvas.findByTestId(
'select-filter-5',
);
assert(accountOwnerFilterButton);
@ -89,11 +83,11 @@ export const FilterByAccountOwner: Story = {
await sleep(1000);
const charlesChip = (
await canvas.findAllByTestId('dropdown-menu-item')
).find((item) => {
return item.textContent?.includes('Charles Test');
});
const charlesChip = (await canvas.findAllByTestId('menu-item')).find(
(item) => {
return item.textContent?.includes('Charles Test');
},
);
assert(charlesChip);

5
front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
View File

@ -33,9 +33,8 @@ export const SortByName: Story = {
const sortButton = await canvas.findByText('Sort');
await userEvent.click(sortButton);
const nameSortButton = canvas.getByText('Name', {
selector: 'li > div > div',
});
const nameSortButton = await canvas.findByTestId('select-sort-0');
await userEvent.click(nameSortButton);
expect(await canvas.getByTestId('remove-icon-name')).toBeInTheDocument();

15
front/src/pages/companies/companies-filters.tsx
View File

@ -8,7 +8,6 @@ import {
IconUsers,
} from '@/ui/icon/index';
import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { icon } from '@/ui/theme/constants/icon';
import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect';
import { Company } from '~/generated/graphql';
@ -16,39 +15,37 @@ export const companiesFilters: FilterDefinitionByEntity<Company>[] = [
{
key: 'name',
label: 'Name',
icon: (
<IconBuildingSkyscraper size={icon.size.md} stroke={icon.stroke.sm} />
),
Icon: IconBuildingSkyscraper,
type: 'text',
},
{
key: 'employees',
label: 'Employees',
icon: <IconUsers size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconUsers,
type: 'number',
},
{
key: 'domainName',
label: 'URL',
icon: <IconLink size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconLink,
type: 'text',
},
{
key: 'address',
label: 'Address',
icon: <IconMap size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconMap,
type: 'text',
},
{
key: 'createdAt',
label: 'Created at',
icon: <IconCalendarEvent size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconCalendarEvent,
type: 'date',
},
{
key: 'accountOwnerId',
label: 'Account owner',
icon: <IconUser size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconUser,
type: 'entity',
entitySelectComponent: (
<FilterDropdownUserSearchSelect context={TableRecoilScopeContext} />

10
front/src/pages/companies/companies-sorts.tsx
View File

@ -12,26 +12,26 @@ export const availableSorts: SortType<Companies_Order_By>[] = [
{
key: 'name',
label: 'Name',
icon: <IconBuildingSkyscraper size={16} />,
Icon: IconBuildingSkyscraper,
},
{
key: 'employees',
label: 'Employees',
icon: <IconUsers size={16} />,
Icon: IconUsers,
},
{
key: 'domainName',
label: 'Url',
icon: <IconLink size={16} />,
Icon: IconLink,
},
{
key: 'address',
label: 'Address',
icon: <IconMap size={16} />,
Icon: IconMap,
},
{
key: 'createdAt',
label: 'Creation',
icon: <IconCalendarEvent size={16} />,
Icon: IconCalendarEvent,
},
];

14
front/src/pages/companies/constants/companyShowFieldDefinition.tsx
View File

@ -23,7 +23,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'domainName',
name: 'Domain name',
icon: <IconLink />,
Icon: IconLink,
type: 'url',
metadata: {
fieldName: 'domainName',
@ -33,7 +33,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'accountOwner',
name: 'Account owner',
icon: <IconUserCircle />,
Icon: IconUserCircle,
type: 'relation',
metadata: {
fieldName: 'accountOwner',
@ -43,7 +43,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'employees',
name: 'Employees',
icon: <IconUsers />,
Icon: IconUsers,
type: 'number',
metadata: {
fieldName: 'employees',
@ -53,7 +53,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'address',
name: 'Address',
icon: <IconMap />,
Icon: IconMap,
type: 'text',
metadata: {
fieldName: 'address',
@ -63,7 +63,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'idealCustomerProfile',
name: 'ICP',
icon: <IconTarget />,
Icon: IconTarget,
type: 'boolean',
metadata: {
fieldName: 'idealCustomerProfile',
@ -72,7 +72,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'xUrl',
name: 'Twitter',
icon: <IconBrandX />,
Icon: IconBrandX,
type: 'url',
metadata: {
fieldName: 'xUrl',
@ -82,7 +82,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'createdAt',
name: 'Created at',
icon: <IconCalendar />,
Icon: IconCalendar,
type: 'date',
metadata: {
fieldName: 'createdAt',

11
front/src/pages/opportunities/opportunities-filters.tsx
View File

@ -7,7 +7,6 @@ import {
IconCurrencyDollar,
IconUser,
} from '@/ui/icon/index';
import { icon } from '@/ui/theme/constants/icon';
import { PipelineProgress } from '~/generated/graphql';
import { FilterDropdownPeopleSearchSelect } from '../../modules/people/components/FilterDropdownPeopleSearchSelect';
@ -17,21 +16,19 @@ export const opportunitiesFilters: FilterDefinitionByEntity<PipelineProgress>[]
{
key: 'amount',
label: 'Amount',
icon: <IconCurrencyDollar size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconCurrencyDollar,
type: 'number',
},
{
key: 'closeDate',
label: 'Close date',
icon: <IconCalendarEvent size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconCalendarEvent,
type: 'date',
},
{
key: 'companyId',
label: 'Company',
icon: (
<IconBuildingSkyscraper size={icon.size.md} stroke={icon.stroke.sm} />
),
Icon: IconBuildingSkyscraper,
type: 'entity',
entitySelectComponent: (
<FilterDropdownCompanySearchSelect
@ -42,7 +39,7 @@ export const opportunitiesFilters: FilterDefinitionByEntity<PipelineProgress>[]
{
key: 'pointOfContactId',
label: 'Point of contact',
icon: <IconUser size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconUser,
type: 'entity',
entitySelectComponent: (
<FilterDropdownPeopleSearchSelect

6
front/src/pages/opportunities/opportunities-sorts.tsx
View File

@ -6,16 +6,16 @@ export const opportunitiesSorts = [
{
key: 'createdAt',
label: 'Creation',
icon: <IconCalendarEvent size={16} />,
Icon: IconCalendarEvent,
},
{
key: 'amount',
label: 'Amount',
icon: <IconCurrencyDollar size={16} />,
Icon: IconCurrencyDollar,
},
{
key: 'closeDate',
label: 'Expected close date',
icon: <IconCalendarEvent size={16} />,
Icon: IconCalendarEvent,
},
] satisfies Array<SortType<PipelineProgresses_Order_By>>;

14
front/src/pages/people/__stories__/People.filterBy.stories.tsx
View File

@ -35,11 +35,7 @@ export const Email: Story = {
const filterButton = await canvas.findByText('Filter');
await userEvent.click(filterButton);
const emailFilterButton = (
await canvas.findAllByTestId('dropdown-menu-item')
).find((item) => {
return item.textContent?.includes('Email');
});
const emailFilterButton = await canvas.findByTestId('select-filter-2');
assert(emailFilterButton);
@ -70,11 +66,7 @@ export const CompanyName: Story = {
const filterButton = await canvas.findByText('Filter');
await userEvent.click(filterButton);
const companyFilterButton = (
await canvas.findAllByTestId('dropdown-menu-item')
).find((item) => {
return item.textContent?.includes('Company');
});
const companyFilterButton = await canvas.findByTestId('select-filter-3');
assert(companyFilterButton);
@ -87,7 +79,7 @@ export const CompanyName: Story = {
await sleep(500);
const qontoChip = (await canvas.findAllByTestId('dropdown-menu-item')).find(
const qontoChip = (await canvas.findAllByTestId('menu-item')).find(
(item) => {
return item.textContent?.includes('Qonto');
},

8
front/src/pages/people/__stories__/People.sortBy.stories.tsx
View File

@ -34,9 +34,7 @@ export const Email: Story = {
const sortButton = await canvas.findByText('Sort');
await userEvent.click(sortButton);
const emailSortButton = canvas.getByText('Email', {
selector: 'li > div > div',
});
const emailSortButton = await canvas.findByTestId('select-sort-2');
await userEvent.click(emailSortButton);
expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
@ -52,9 +50,7 @@ export const Cancel: Story = {
const sortButton = await canvas.findByText('Sort');
await userEvent.click(sortButton);
const emailSortButton = canvas.getByText('Email', {
selector: 'li > div > div',
});
const emailSortButton = await canvas.findByTestId('select-sort-2');
await userEvent.click(emailSortButton);
expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();

16
front/src/pages/people/constants/personShowFieldDefinition.tsx
View File

@ -23,7 +23,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'email',
name: 'Email',
icon: <IconMail />,
Icon: IconMail,
type: 'text',
metadata: {
fieldName: 'email',
@ -33,7 +33,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'company',
name: 'Company',
icon: <IconBuildingSkyscraper />,
Icon: IconBuildingSkyscraper,
type: 'relation',
metadata: {
fieldName: 'company',
@ -44,7 +44,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'phone',
name: 'Phone',
icon: <IconPhone />,
Icon: IconPhone,
type: 'phone',
metadata: {
fieldName: 'phone',
@ -54,7 +54,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'jobTitle',
name: 'Job Title',
icon: <IconBriefcase />,
Icon: IconBriefcase,
type: 'text',
metadata: {
fieldName: 'jobTitle',
@ -64,7 +64,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'city',
name: 'City',
icon: <IconMap />,
Icon: IconMap,
type: 'text',
metadata: {
fieldName: 'city',
@ -74,7 +74,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'linkedinUrl',
name: 'Linkedin URL',
icon: <IconBrandLinkedin />,
Icon: IconBrandLinkedin,
type: 'url',
metadata: {
fieldName: 'linkedinUrl',
@ -84,7 +84,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'xUrl',
name: 'X URL',
icon: <IconBrandX />,
Icon: IconBrandX,
type: 'url',
metadata: {
fieldName: 'xUrl',
@ -94,7 +94,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
{
key: 'createdAt',
name: 'Created at',
icon: <IconCalendar />,
Icon: IconCalendar,
type: 'date',
metadata: {
fieldName: 'createdAt',

17
front/src/pages/people/people-filters.tsx
View File

@ -9,34 +9,31 @@ import {
IconUser,
} from '@/ui/icon/index';
import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { icon } from '@/ui/theme/constants/icon';
import { Person } from '~/generated/graphql';
export const peopleFilters: FilterDefinitionByEntity<Person>[] = [
{
key: 'firstName',
label: 'First name',
icon: <IconUser size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconUser,
type: 'text',
},
{
key: 'lastName',
label: 'Last name',
icon: <IconUser size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconUser,
type: 'text',
},
{
key: 'email',
label: 'Email',
icon: <IconMail size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconMail,
type: 'text',
},
{
key: 'companyId',
label: 'Company',
icon: (
<IconBuildingSkyscraper size={icon.size.md} stroke={icon.stroke.sm} />
),
Icon: IconBuildingSkyscraper,
type: 'entity',
entitySelectComponent: (
<FilterDropdownCompanySearchSelect context={TableRecoilScopeContext} />
@ -45,19 +42,19 @@ export const peopleFilters: FilterDefinitionByEntity<Person>[] = [
{
key: 'phone',
label: 'Phone',
icon: <IconPhone size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconPhone,
type: 'text',
},
{
key: 'createdAt',
label: 'Created at',
icon: <IconCalendarEvent size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconCalendarEvent,
type: 'date',
},
{
key: 'city',
label: 'City',
icon: <IconMap size={icon.size.md} stroke={icon.stroke.sm} />,
Icon: IconMap,
type: 'text',
},
];

13
front/src/pages/people/people-sorts.tsx
View File

@ -16,7 +16,7 @@ export const availableSorts: SortType<People_Order_By>[] = [
{
key: 'fullname',
label: 'People',
icon: <IconUser size={16} />,
Icon: IconUser,
orderByTemplate: (order: Order_By) => [
{ firstName: order },
@ -26,28 +26,27 @@ export const availableSorts: SortType<People_Order_By>[] = [
{
key: 'company_name',
label: 'Company',
icon: <IconBuildingSkyscraper size={16} />,
Icon: IconBuildingSkyscraper,
orderByTemplate: (order: Order_By) => [{ company: { name: order } }],
},
{
key: 'email',
label: 'Email',
icon: <IconMail size={16} />,
Icon: IconMail,
},
{
key: 'phone',
label: 'Phone',
icon: <IconPhone size={16} />,
Icon: IconPhone,
},
{
key: 'createdAt',
label: 'Created at',
icon: <IconCalendarEvent size={16} />,
Icon: IconCalendarEvent,
},
{
key: 'city',
label: 'City',
icon: <IconMap size={16} />,
Icon: IconMap,
},
];

2
front/src/pages/tasks/tasks-filters.tsx
View File

@ -8,7 +8,7 @@ export const tasksFilters: FilterDefinitionByEntity<Activity>[] = [
{
key: 'assigneeId',
label: 'Assignee',
icon: <IconUser />,
Icon: IconUser,
type: 'entity',
entitySelectComponent: (
<FilterDropdownUserSearchSelect context={TasksRecoilScopeContext} />