Sammy/t 240 frontend filtering search is refactored (#122)

* refactor: use AnyEntity instead of any

* refactor: remove any and brand company type

* refactor: add typename for user and people

* bugfix: await company to be created before displaying it

* feature: await deletion before removing the lines

* refactor: remove default tyep for filters

* refactor: remove default type AnyEntity

* refactor: remove USers from filterable types

* refactor: do not depend on Filter types in Table

* Add tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/companies/Companies.tsx

@@ -25,10 +25,7 @@ import {
   Companies_Bool_Exp,
   Companies_Order_By,
 } from '../../generated/graphql';
-import {
-  FilterConfigType,
-  SelectedFilterType,
-} from '../../components/table/table-header/interface';
+import { SelectedFilterType } from '../../components/table/table-header/interface';
 import { useSearch } from '../../services/search/search';
 import ActionBar from '../../components/table/action-bar/ActionBar';
 
@@ -66,7 +63,7 @@ function Companies() {
     }
   }, [loading, setInternalData, data]);
 
-  const addEmptyRow = useCallback(() => {
+  const addEmptyRow = useCallback(async () => {
     const newCompany: Company = {
       id: uuidv4(),
       name: '',
@@ -76,14 +73,15 @@ function Companies() {
       pipes: [],
       creationDate: new Date(),
       accountOwner: null,
+      __typename: 'companies',
     };
-    insertCompany(newCompany);
+    await insertCompany(newCompany);
     setInternalData([newCompany, ...internalData]);
     refetch();
   }, [internalData, setInternalData, refetch]);
 
-  const deleteRows = useCallback(() => {
-    deleteCompanies(selectedRowIds);
+  const deleteRows = useCallback(async () => {
+    await deleteCompanies(selectedRowIds);
     setInternalData([
       ...internalData.filter((row) => !selectedRowIds.includes(row.id)),
     ]);
@@ -111,7 +109,7 @@ function Companies() {
             viewName="All Companies"
             viewIcon={<FaList />}
             availableSorts={availableSorts}
-            availableFilters={availableFilters as Array<FilterConfigType>}
+            availableFilters={availableFilters}
             filterSearchResults={filterSearchResults}
             onSortsUpdate={updateSorts}
             onFiltersUpdate={updateFilters}

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

@@ -5,6 +5,8 @@ import { lightTheme } from '../../../layout/styles/themes';
 import { GET_COMPANIES } from '../../../services/companies';
 import { mockData } from '../__tests__/__data__/mock-data';
 import { MockedProvider } from '@apollo/client/testing';
+import { SEARCH_COMPANY_QUERY } from '../../../services/search/search';
+import { mockCompanySearchData } from '../../../services/search/__data__/mock-search-data';
 
 const component = {
   title: 'Companies',
@@ -42,6 +44,27 @@ const mocks = [
       },
     },
   },
+  {
+    request: {
+      query: SEARCH_COMPANY_QUERY,
+      variables: { where: { name: { _ilike: '%%' } }, limit: 5 },
+    },
+    result: mockCompanySearchData,
+  },
+  {
+    request: {
+      query: GET_COMPANIES,
+      variables: {
+        orderBy: [{ created_at: 'desc' }],
+        where: { domain_name: { _eq: 'linkedin-searched.com' } },
+      },
+    },
+    result: {
+      data: {
+        companies: mockData,
+      },
+    },
+  },
 ];
 
 export const CompaniesDefault = () => (

front/src/pages/companies/__tests__/Companies.test.tsx

@@ -136,3 +136,28 @@ it('Checks insert data is appending a new line', async () => {
     expect(tableRows.length).toBe(7);
   });
 });
+
+it('Checks filters are working', async () => {
+  const { getByText } = render(<CompaniesDefault />);
+
+  await waitFor(() => {
+    expect(getByText('Airbnb')).toBeDefined();
+  });
+
+  const filterDropdown = getByText('Filter');
+  fireEvent.click(filterDropdown);
+
+  await waitFor(() => {
+    expect(getByText('Url')).toBeDefined();
+  });
+
+  const urlFilter = getByText('Url');
+  fireEvent.click(urlFilter);
+
+  await waitFor(() => {
+    expect(getByText('linkedin-searched.com')).toBeDefined();
+  });
+
+  const filterByLinkedinOption = getByText('linkedin-searched.com');
+  fireEvent.click(filterByLinkedinOption);
+});

front/src/pages/companies/__tests__/__data__/mock-data.ts

@@ -7,7 +7,7 @@ export const mockData: Array<GraphqlQueryCompany> = [
     name: 'Airbnb',
     created_at: '2023-04-26T10:08:54.724515+00:00',
     address: '17 rue de clignancourt',
-    employees: 12,
+    employees: '12',
     account_owner: null,
     __typename: 'companies',
   },
@@ -16,8 +16,8 @@ export const mockData: Array<GraphqlQueryCompany> = [
     domain_name: 'aircall.io',
     name: 'Aircall',
     created_at: '2023-04-26T10:12:42.33625+00:00',
-    address: null,
-    employees: 1,
+    address: '',
+    employees: '1',
     account_owner: null,
     __typename: 'companies',
   },
@@ -26,8 +26,8 @@ export const mockData: Array<GraphqlQueryCompany> = [
     domain_name: 'algolia.com',
     name: 'Algolia',
     created_at: '2023-04-26T10:10:32.530184+00:00',
-    address: null,
-    employees: 1,
+    address: '',
+    employees: '1',
     account_owner: null,
     __typename: 'companies',
   },
@@ -36,8 +36,8 @@ export const mockData: Array<GraphqlQueryCompany> = [
     domain_name: 'apple.com',
     name: 'Apple',
     created_at: '2023-03-21T06:30:25.39474+00:00',
-    address: null,
-    employees: 10,
+    address: '',
+    employees: '10',
     account_owner: null,
     __typename: 'companies',
   },
@@ -47,7 +47,7 @@ export const mockData: Array<GraphqlQueryCompany> = [
     name: 'BeReal',
     created_at: '2023-04-26T10:13:29.712485+00:00',
     address: '10 rue de la Paix',
-    employees: 1,
+    employees: '1',
     account_owner: null,
     __typename: 'companies',
   },
@@ -56,8 +56,8 @@ export const mockData: Array<GraphqlQueryCompany> = [
     domain_name: 'claap.com',
     name: 'Claap',
     created_at: '2023-04-26T10:09:25.656555+00:00',
-    address: null,
-    employees: 1,
+    address: '',
+    employees: '1',
     account_owner: null,
     __typename: 'companies',
   },

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

@@ -82,7 +82,7 @@ export const availableFilters = [
         value: mapToCompany(company),
       }),
     },
-    selectedValueRender: (company) => company.name,
+    selectedValueRender: (company) => company.name || '',
     operands: [
       {
         label: 'Equal',
@@ -99,7 +99,7 @@ export const availableFilters = [
         }),
       },
     ],
-  } as FilterConfigType<Company, Company>,
+  } satisfies FilterConfigType<Company, Company>,
   {
     key: 'company_domain_name',
     label: 'Url',
@@ -114,7 +114,7 @@ export const availableFilters = [
         value: mapToCompany(company),
       }),
     },
-    selectedValueRender: (company) => company.domainName,
+    selectedValueRender: (company) => company.domainName || '',
     operands: [
       {
         label: 'Equal',
@@ -131,7 +131,7 @@ export const availableFilters = [
         }),
       },
     ],
-  } as FilterConfigType<Company, Company>,
+  } satisfies FilterConfigType<Company, Company>,
 ];
 
 const columnHelper = createColumnHelper<Company>();
@@ -253,6 +253,7 @@ export const useCompaniesColumns = () => {
                 company.accountOwner.id = relation.id;
               } else {
                 company.accountOwner = {
+                  __typename: 'users',
                   id: relation.id,
                   email: relation.email,
                   displayName: relation.displayName,

front/src/pages/people/People.tsx

@@ -19,10 +19,7 @@ import {
 } from '../../services/people';
 import { useSearch } from '../../services/search/search';
 import { People_Bool_Exp } from '../../generated/graphql';
-import {
-  FilterConfigType,
-  SelectedFilterType,
-} from '../../components/table/table-header/interface';
+import { SelectedFilterType } from '../../components/table/table-header/interface';
 import {
   reduceFiltersToWhere,
   reduceSortsToOrderBy,
@@ -64,7 +61,8 @@ function People() {
   }, [loading, setInternalData, data]);
 
   const addEmptyRow = useCallback(async () => {
-    const newCompany: Person = {
+    const newPerson: Person = {
+      __typename: 'people',
       id: uuidv4(),
       firstname: '',
       lastname: '',
@@ -75,13 +73,13 @@ function People() {
       creationDate: new Date(),
       city: '',
     };
-    await insertPerson(newCompany);
-    setInternalData([newCompany, ...internalData]);
+    await insertPerson(newPerson);
+    setInternalData([newPerson, ...internalData]);
     refetch();
   }, [internalData, setInternalData, refetch]);
 
-  const deleteRows = useCallback(() => {
-    deletePeople(selectedRowIds);
+  const deleteRows = useCallback(async () => {
+    await deletePeople(selectedRowIds);
     setInternalData([
       ...internalData.filter((row) => !selectedRowIds.includes(row.id)),
     ]);
@@ -109,7 +107,7 @@ function People() {
             viewName="All People"
             viewIcon={<FaList />}
             availableSorts={availableSorts}
-            availableFilters={availableFilters as Array<FilterConfigType>}
+            availableFilters={availableFilters}
             filterSearchResults={filterSearchResults}
             onSortsUpdate={updateSorts}
             onFiltersUpdate={updateFilters}

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

@@ -227,7 +227,7 @@ export const availableFilters = [
   companyFilter,
   emailFilter,
   cityFilter,
-];
+] satisfies FilterConfigType<Person, any>[];
 
 const columnHelper = createColumnHelper<Person>();