First working version of new dropdown UI (#360)

* First working version of new dropdown UI

* Removed consolelog

* Fixed test storybook

* Cleaned optional args

front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx

@@ -1,6 +1,7 @@
 import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
+import assert from 'assert';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { getRenderWrapperForPage } from '~/testing/renderWrappers';
@@ -62,9 +63,16 @@ export const FilterByAccountOwner: Story = {
       delay: 200,
     });
 
-    const charlesChip = canvas.getByText('Charles Test', {
-      selector: 'li > span',
-    });
+    const charlesChip = canvas
+      .getAllByTestId('dropdown-menu-item')
+      .find((item) => {
+        return item.textContent === 'Charles Test';
+      });
+
+    expect(charlesChip).toBeInTheDocument();
+
+    assert(charlesChip);
+
     await userEvent.click(charlesChip);
 
     expect(await canvas.findByText('Airbnb')).toBeInTheDocument();

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

@@ -164,11 +164,18 @@ export const accountOwnerFilter = {
   type: 'relation',
   searchConfig: {
     query: SEARCH_USER_QUERY,
-    template: (searchString: string) => ({
-      displayName: {
-        contains: `%${searchString}%`,
-        mode: QueryMode.Insensitive,
-      },
+    template: (searchString: string, currentSelectedId?: string) => ({
+      OR: [
+        {
+          displayName: {
+            contains: `%${searchString}%`,
+            mode: QueryMode.Insensitive,
+          },
+        },
+        {
+          id: currentSelectedId ? { equals: currentSelectedId } : undefined,
+        },
+      ],
     }),
     resultMapper: (data: any) => ({
       value: data,

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

@@ -1,6 +1,7 @@
 import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
+import assert from 'assert';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { getRenderWrapperForPage } from '~/testing/renderWrappers';
@@ -59,7 +60,16 @@ export const CompanyName: Story = {
       delay: 200,
     });
 
-    const qontoChip = canvas.getByText('Qonto', { selector: 'li > span' });
+    const qontoChip = canvas
+      .getAllByTestId('dropdown-menu-item')
+      .find((item) => {
+        return item.textContent === 'Qonto';
+      });
+
+    expect(qontoChip).toBeInTheDocument();
+
+    assert(qontoChip);
+
     await userEvent.click(qontoChip);
 
     expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();

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

@@ -100,8 +100,18 @@ export const companyFilter = {
   type: 'relation',
   searchConfig: {
     query: SEARCH_COMPANY_QUERY,
-    template: (searchString: string) => ({
-      name: { contains: `%${searchString}%`, mode: QueryMode.Insensitive },
+    template: (searchString: string, currentSelectedId?: string) => ({
+      OR: [
+        {
+          name: {
+            contains: `%${searchString}%`,
+            mode: QueryMode.Insensitive,
+          },
+        },
+        {
+          id: currentSelectedId ? { equals: currentSelectedId } : undefined,
+        },
+      ],
     }),
     resultMapper: (data) => ({
       value: data,