Refactor/new menu item (#1448)

* 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

front/src/pages/people/__stories__/People.filterBy.stories.tsx

@@ -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');
       },

front/src/pages/people/__stories__/People.sortBy.stories.tsx

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

front/src/pages/people/constants/personShowFieldDefinition.tsx

@@ -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',

front/src/pages/people/people-filters.tsx

@@ -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',
   },
 ];

front/src/pages/people/people-sorts.tsx

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