Feat/generic editable cell all types (#987)

* Added generic relation cell

* Deactivated debug

* Added default warning

* Put back display component

* Removed unused types

* wip

* Renamed to view field

* Use new view field structure to have chip working

* Finished

* Added a temp feature flag

* Added double text chip cell

* Ok

* Finished tables

* Fixed icon size

* Fixed bug on date field

* Use icon index

* Fix

* Fixed naming

* Fix

* removed file from merge

* Fixed tests

* Coverage

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

@@ -34,11 +34,11 @@ export const FilterByName: Story = {
     const filterButton = await canvas.findByText('Filter');
     await userEvent.click(filterButton);
 
-    const nameFilterButton = canvas
-      .queryAllByTestId('dropdown-menu-item')
-      .find((item) => {
-        return item.textContent === 'Name';
-      });
+    const nameFilterButton = (
+      await canvas.findAllByTestId('dropdown-menu-item')
+    ).find((item) => {
+      return item.textContent === 'Name';
+    });
 
     assert(nameFilterButton);
 
@@ -49,7 +49,7 @@ export const FilterByName: Story = {
       delay: 200,
     });
 
-    await sleep(1000);
+    await sleep(50);
 
     expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
     expect(await canvas.findByText('Aircall')).toBeInTheDocument();
@@ -88,11 +88,11 @@ export const FilterByAccountOwner: Story = {
 
     await sleep(1000);
 
-    const charlesChip = canvas
-      .getAllByTestId('dropdown-menu-item')
-      .find((item) => {
-        return item.textContent?.includes('Charles Test');
-      });
+    const charlesChip = (
+      await canvas.findAllByTestId('dropdown-menu-item')
+    ).find((item) => {
+      return item.textContent?.includes('Charles Test');
+    });
 
     assert(charlesChip);
 

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

@@ -34,22 +34,23 @@ export const Email: Story = {
     const filterButton = await canvas.findByText('Filter');
     await userEvent.click(filterButton);
 
-    const emailFilterButton = canvas
-      .getAllByTestId('dropdown-menu-item')
-      .find((item) => {
-        return item.textContent?.includes('Email');
-      });
+    const emailFilterButton = (
+      await canvas.findAllByTestId('dropdown-menu-item')
+    ).find((item) => {
+      return item.textContent?.includes('Email');
+    });
 
     assert(emailFilterButton);
 
     await userEvent.click(emailFilterButton);
 
     const emailInput = canvas.getByPlaceholderText('Email');
+
     await userEvent.type(emailInput, 'al', {
       delay: 200,
     });
 
-    await sleep(1000);
+    await sleep(50);
 
     expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
     await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
@@ -68,11 +69,11 @@ export const CompanyName: Story = {
     const filterButton = await canvas.findByText('Filter');
     await userEvent.click(filterButton);
 
-    const companyFilterButton = canvas
-      .getAllByTestId('dropdown-menu-item')
-      .find((item) => {
-        return item.textContent?.includes('Company');
-      });
+    const companyFilterButton = (
+      await canvas.findAllByTestId('dropdown-menu-item')
+    ).find((item) => {
+      return item.textContent?.includes('Company');
+    });
 
     assert(companyFilterButton);
 
@@ -85,11 +86,11 @@ export const CompanyName: Story = {
 
     await sleep(500);
 
-    const qontoChip = canvas
-      .getAllByTestId('dropdown-menu-item')
-      .find((item) => {
+    const qontoChip = (await canvas.findAllByTestId('dropdown-menu-item')).find(
+      (item) => {
         return item.textContent?.includes('Qonto');
-      });
+      },
+    );
 
     expect(qontoChip).toBeInTheDocument();
 

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

@@ -191,7 +191,7 @@ export const EditRelation: Story = {
 
     await step('Click on second row company cell', async () => {
       const secondRowCompanyCell = await canvas.findByText(
-        mockedPeopleData[1].company.name,
+        mockedPeopleData[2].company.name,
       );
 
       await userEvent.click(
@@ -262,11 +262,24 @@ export const SelectRelationWithKeys: Story = {
     });
 
     await userEvent.type(relationInput, '{arrowdown}');
+
+    await sleep(50);
+
     await userEvent.type(relationInput, '{arrowup}');
+
+    await sleep(50);
+
     await userEvent.type(relationInput, '{arrowdown}');
+
+    await sleep(50);
+
     await userEvent.type(relationInput, '{arrowdown}');
+
+    await sleep(50);
+
     await userEvent.type(relationInput, '{enter}');
-    sleep(25);
+
+    await sleep(50);
 
     const allAirbns = await canvas.findAllByText('Aircall');
     expect(allAirbns.length).toBe(1);