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/modules/users/components/FilterDropdownUserSearchSelect.tsx

@@ -0,0 +1,41 @@
+import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
+import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
+import { Entity } from '@/relation-picker/types/EntityTypeForSelect';
+import { FilterDropdownEntitySearchSelect } from '@/ui/components/table/table-header/FilterDropdownEntitySearchSelect';
+import { TableContext } from '@/ui/tables/states/TableContext';
+import { useSearchUserQuery } from '~/generated/graphql';
+
+export function FilterDropdownUserSearchSelect() {
+  const filterDropdownSearchInput = useRecoilScopedValue(
+    filterDropdownSearchInputScopedState,
+    TableContext,
+  );
+
+  const [filterDropdownSelectedEntityId] = useRecoilScopedState(
+    filterDropdownSelectedEntityIdScopedState,
+    TableContext,
+  );
+
+  const usersForSelect = useFilteredSearchEntityQuery({
+    queryHook: useSearchUserQuery,
+    searchOnFields: ['firstName', 'lastName'],
+    orderByField: 'lastName',
+    selectedIds: filterDropdownSelectedEntityId
+      ? [filterDropdownSelectedEntityId]
+      : [],
+    mappingFunction: (entity) => ({
+      id: entity.id,
+      entityType: Entity.User,
+      name: `${entity.displayName}`,
+      avatarType: 'rounded',
+    }),
+    searchFilter: filterDropdownSearchInput,
+  });
+
+  return (
+    <FilterDropdownEntitySearchSelect entitiesForSelect={usersForSelect} />
+  );
+}

front/src/modules/users/services/index.ts

@@ -6,6 +6,8 @@ export const GET_CURRENT_USER = gql`
       id
       email
       displayName
+      firstName
+      lastName
       workspaceMember {
         id
         workspace {
@@ -25,6 +27,8 @@ export const GET_USERS = gql`
       id
       email
       displayName
+      firstName
+      lastName
     }
   }
 `;