Refactor/filters (#498)

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixes

* wip

* wip

* wip

* Use company filters

* Refactored FilterDropdown into multiple components

* Refactored entity search select in dropdown

* Renamed states

* Fixed people filters

* Removed unused code

* Cleaned states

* Cleaned state

* Better naming

* fixed rebase

* Fix

* Fixed stories and mocked data and displayName bug

* Fixed cancel sort

* Fixed naming

* Fixed dropdown height

* Fix

* Fixed lint

front/src/testing/mock-data/companies.ts

@@ -13,7 +13,7 @@ type MockedCompany = Pick<
 > & {
   accountOwner: Pick<
     User,
-    'id' | 'email' | 'displayName' | '__typename'
+    'id' | 'email' | 'displayName' | '__typename' | 'firstName' | 'lastName'
   > | null;
 };
 
@@ -29,6 +29,8 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     accountOwner: {
       email: 'charles@test.com',
       displayName: 'Charles Test',
+      firstName: 'Charles',
+      lastName: 'Test',
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
       __typename: 'User',
     },

front/src/testing/mock-data/index.ts

@@ -53,6 +53,13 @@ function filterData<DataT>(
 
           return filterElement.in.includes(itemValue);
         }
+        if (filterElement.notIn) {
+          const itemValue = item[key as keyof typeof item] as string;
+
+          if (filterElement.notIn.length === 0) return true;
+
+          return !filterElement.notIn.includes(itemValue);
+        }
       }
       return false;
     });
@@ -66,6 +73,14 @@ function filterData<DataT>(
         );
     }
 
+    if (where.AND && Array.isArray(where.AND)) {
+      isMatch =
+        isMatch ||
+        where.AND.every((andFilter) =>
+          filterData<DataT>(data, andFilter).includes(item),
+        );
+    }
+
     return isMatch;
   });
 }

front/src/testing/mock-data/users.ts

@@ -2,7 +2,13 @@ import { User, Workspace, WorkspaceMember } from '~/generated/graphql';
 
 type MockedUser = Pick<
   User,
-  'id' | 'email' | 'displayName' | 'avatarUrl' | '__typename'
+  | 'id'
+  | 'email'
+  | 'displayName'
+  | 'avatarUrl'
+  | '__typename'
+  | 'firstName'
+  | 'lastName'
 > & {
   workspaceMember: Pick<WorkspaceMember, 'id' | '__typename'> & {
     workspace: Pick<
@@ -18,6 +24,8 @@ export const mockedUsersData: Array<MockedUser> = [
     __typename: 'User',
     email: 'charles@test.com',
     displayName: 'Charles Test',
+    firstName: 'Charles',
+    lastName: 'Test',
     avatarUrl:
       'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4',
     workspaceMember: {
@@ -37,6 +45,8 @@ export const mockedUsersData: Array<MockedUser> = [
     __typename: 'User',
     email: 'felix@test.com',
     displayName: 'Felix Test',
+    firstName: 'Felix',
+    lastName: 'Test',
     workspaceMember: {
       __typename: 'WorkspaceMember',
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',

front/src/testing/renderWrappers.tsx

@@ -3,9 +3,14 @@ import { MemoryRouter } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
 import { RecoilRoot } from 'recoil';
 
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
+import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
 import { DefaultLayout } from '@/ui/layout/DefaultLayout';
+import { TableContext } from '@/ui/tables/states/TableContext';
+import { companiesFilters } from '~/pages/companies/companies-filters';
 import { UserProvider } from '~/providers/user/UserProvider';
 
+import { mockedCompaniesData } from './mock-data/companies';
 import { ComponentStorybookLayout } from './ComponentStorybookLayout';
 import { FullHeightStorybookLayout } from './FullHeightStorybookLayout';
 import { mockedClient } from './mockedClient';
@@ -42,3 +47,24 @@ export function getRenderWrapperForComponent(children: React.ReactElement) {
     );
   };
 }
+
+export function getRenderWrapperForEntityTableComponent(
+  children: React.ReactElement,
+) {
+  return function Render() {
+    return (
+      <RecoilRoot>
+        <ApolloProvider client={mockedClient}>
+          <RecoilScope SpecificContext={TableContext}>
+            <HooksEntityTable
+              availableTableFilters={companiesFilters}
+              numberOfColumns={5}
+              numberOfRows={mockedCompaniesData.length}
+            />
+            <ComponentStorybookLayout>{children}</ComponentStorybookLayout>
+          </RecoilScope>
+        </ApolloProvider>
+      </RecoilRoot>
+    );
+  };
+}