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
twentyhq · Jul 4, 2023 · 820ef18 · 820ef18
1 parent 580e602
commit 820ef18
Show file tree

Hide file tree

Showing 78 changed files with 1,633 additions and 1,231 deletions.
diff --git a/front/package.json b/front/package.json
@@ -21,6 +21,7 @@
     "framer-motion": "^10.12.17",
     "graphql": "^16.6.0",
     "hex-rgb": "^5.0.0",
+    "immer": "^10.0.2",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.26",

diff --git a/front/src/generated/graphql.tsx b/front/src/generated/graphql.tsx
@@ -22,6 +22,12 @@ export type AffectedRows = {
   count: Scalars['Int'];
 };
 
+export type Analytics = {
+  __typename?: 'Analytics';
+  /** Boolean that confirms query was dispatched */
+  success: Scalars['Boolean'];
+};
+
 export type AuthToken = {
   __typename?: 'AuthToken';
   expiresAt: Scalars['DateTime'];
@@ -641,12 +647,6 @@ export type EnumPipelineProgressableTypeFilter = {
   notIn?: InputMaybe<Array<PipelineProgressableType>>;
 };
 
-export type Event = {
-  __typename?: 'Event';
-  /** Boolean that confirms query was dispatched */
-  success: Scalars['Boolean'];
-};
-
 export type IntNullableFilter = {
   equals?: InputMaybe<Scalars['Int']>;
   gt?: InputMaybe<Scalars['Int']>;
@@ -682,7 +682,7 @@ export type LoginToken = {
 export type Mutation = {
   __typename?: 'Mutation';
   challenge: LoginToken;
-  createEvent: Event;
+  createEvent: Analytics;
   createOneComment: Comment;
   createOneCommentThread: CommentThread;
   createOneCompany: Company;
@@ -1544,6 +1544,14 @@ export type WorkspaceMember = {
   workspace: Workspace;
 };
 
+export type CreateEventMutationVariables = Exact<{
+  type: Scalars['String'];
+  data: Scalars['JSON'];
+}>;
+
+
+export type CreateEventMutation = { __typename?: 'Mutation', createEvent: { __typename?: 'Analytics', success: boolean } };
+
 export type ChallengeMutationVariables = Exact<{
   email: Scalars['String'];
   password: Scalars['String'];
@@ -1575,7 +1583,7 @@ export type CreateCommentMutationVariables = Exact<{
 }>;
 
 
-export type CreateCommentMutation = { __typename?: 'Mutation', createOneComment: { __typename?: 'Comment', id: string, createdAt: string, body: string, commentThreadId: string, author: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } } };
+export type CreateCommentMutation = { __typename?: 'Mutation', createOneComment: { __typename?: 'Comment', id: string, createdAt: string, body: string, commentThreadId: string, author: { __typename?: 'User', id: string, displayName: string, firstName: string, lastName: string, avatarUrl?: string | null } } };
 
 export type CreateCommentThreadWithCommentMutationVariables = Exact<{
   commentThreadId: Scalars['String'];
@@ -1595,14 +1603,14 @@ export type GetCommentThreadsByTargetsQueryVariables = Exact<{
 }>;
 
 
-export type GetCommentThreadsByTargetsQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, commentableId: string, commentableType: CommentableType }> | null }> };
+export type GetCommentThreadsByTargetsQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName: string, lastName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, commentableId: string, commentableType: CommentableType }> | null }> };
 
 export type GetCommentThreadQueryVariables = Exact<{
   commentThreadId: Scalars['String'];
 }>;
 
 
-export type GetCommentThreadQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', commentableId: string, commentableType: CommentableType }> | null }> };
+export type GetCommentThreadQuery = { __typename?: 'Query', findManyCommentThreads: Array<{ __typename?: 'CommentThread', id: string, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName: string, lastName: string, avatarUrl?: string | null } }> | null, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', commentableId: string, commentableType: CommentableType }> | null }> };
 
 export type AddCommentThreadTargetOnCommentThreadMutationVariables = Exact<{
   commentThreadId: Scalars['String'];
@@ -1636,7 +1644,7 @@ export type GetCompaniesQueryVariables = Exact<{
 }>;
 
 
-export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string } | null }> };
+export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string } | null }> };
 
 export type UpdateCompanyMutationVariables = Exact<{
   id?: InputMaybe<Scalars['String']>;
@@ -1649,7 +1657,7 @@ export type UpdateCompanyMutationVariables = Exact<{
 }>;
 
 
-export type UpdateCompanyMutation = { __typename?: 'Mutation', updateOneCompany?: { __typename?: 'Company', address: string, createdAt: string, domainName: string, employees?: number | null, id: string, name: string, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string } | null } | null };
+export type UpdateCompanyMutation = { __typename?: 'Mutation', updateOneCompany?: { __typename?: 'Company', address: string, createdAt: string, domainName: string, employees?: number | null, id: string, name: string, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string } | null } | null };
 
 export type InsertCompanyMutationVariables = Exact<{
   id: Scalars['String'];
@@ -1670,14 +1678,6 @@ export type DeleteCompaniesMutationVariables = Exact<{
 
 export type DeleteCompaniesMutation = { __typename?: 'Mutation', deleteManyCompany: { __typename?: 'AffectedRows', count: number } };
 
-export type CreateEventMutationVariables = Exact<{
-  type: Scalars['String'];
-  data: Scalars['JSON'];
-}>;
-
-
-export type CreateEventMutation = { __typename?: 'Mutation', createEvent: { __typename?: 'Event', success: boolean } };
-
 export type GetPipelinesQueryVariables = Exact<{
   where?: InputMaybe<PipelineWhereInput>;
 }>;
@@ -1770,7 +1770,7 @@ export type SearchUserQueryVariables = Exact<{
 }>;
 
 
-export type SearchUserQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'User', id: string, email: string, displayName: string }> };
+export type SearchUserQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string }> };
 
 export type EmptyQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -1791,14 +1791,48 @@ export type GetCurrentUserQueryVariables = Exact<{
 }>;
 
 
-export type GetCurrentUserQuery = { __typename?: 'Query', users: Array<{ __typename?: 'User', id: string, email: string, displayName: string, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName: string, displayName: string, logo?: string | null } } | null }> };
+export type GetCurrentUserQuery = { __typename?: 'Query', users: Array<{ __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName: string, displayName: string, logo?: string | null } } | null }> };
 
 export type GetUsersQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetUsersQuery = { __typename?: 'Query', findManyUser: Array<{ __typename?: 'User', id: string, email: string, displayName: string }> };
+export type GetUsersQuery = { __typename?: 'Query', findManyUser: Array<{ __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string }> };
+
 
+export const CreateEventDocument = gql`
+    mutation CreateEvent($type: String!, $data: JSON!) {
+  createEvent(type: $type, data: $data) {
+    success
+  }
+}
+    `;
+export type CreateEventMutationFn = Apollo.MutationFunction<CreateEventMutation, CreateEventMutationVariables>;
 
+/**
+ * __useCreateEventMutation__
+ *
+ * To run a mutation, you first call `useCreateEventMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateEventMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createEventMutation, { data, loading, error }] = useCreateEventMutation({
+ *   variables: {
+ *      type: // value for 'type'
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useCreateEventMutation(baseOptions?: Apollo.MutationHookOptions<CreateEventMutation, CreateEventMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateEventMutation, CreateEventMutationVariables>(CreateEventDocument, options);
+      }
+export type CreateEventMutationHookResult = ReturnType<typeof useCreateEventMutation>;
+export type CreateEventMutationResult = Apollo.MutationResult<CreateEventMutation>;
+export type CreateEventMutationOptions = Apollo.BaseMutationOptions<CreateEventMutation, CreateEventMutationVariables>;
 export const ChallengeDocument = gql`
     mutation Challenge($email: String!, $password: String!) {
   challenge(email: $email, password: $password) {
@@ -1945,6 +1979,8 @@ export const CreateCommentDocument = gql`
     author {
       id
       displayName
+      firstName
+      lastName
       avatarUrl
     }
     commentThreadId
@@ -2055,6 +2091,8 @@ export const GetCommentThreadsByTargetsDocument = gql`
       author {
         id
         displayName
+        firstName
+        lastName
         avatarUrl
       }
     }
@@ -2107,6 +2145,8 @@ export const GetCommentThreadDocument = gql`
       author {
         id
         displayName
+        firstName
+        lastName
         avatarUrl
       }
     }
@@ -2287,6 +2327,8 @@ export const GetCompaniesDocument = gql`
       id
       email
       displayName
+      firstName
+      lastName
     }
   }
 }
@@ -2330,6 +2372,8 @@ export const UpdateCompanyDocument = gql`
       id
       email
       displayName
+      firstName
+      lastName
     }
     address
     createdAt
@@ -2450,40 +2494,6 @@ export function useDeleteCompaniesMutation(baseOptions?: Apollo.MutationHookOpti
 export type DeleteCompaniesMutationHookResult = ReturnType<typeof useDeleteCompaniesMutation>;
 export type DeleteCompaniesMutationResult = Apollo.MutationResult<DeleteCompaniesMutation>;
 export type DeleteCompaniesMutationOptions = Apollo.BaseMutationOptions<DeleteCompaniesMutation, DeleteCompaniesMutationVariables>;
-export const CreateEventDocument = gql`
-    mutation CreateEvent($type: String!, $data: JSON!) {
-  createEvent(type: $type, data: $data) {
-    success
-  }
-}
-    `;
-export type CreateEventMutationFn = Apollo.MutationFunction<CreateEventMutation, CreateEventMutationVariables>;
-
-/**
- * __useCreateEventMutation__
- *
- * To run a mutation, you first call `useCreateEventMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useCreateEventMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [createEventMutation, { data, loading, error }] = useCreateEventMutation({
- *   variables: {
- *      type: // value for 'type'
- *      data: // value for 'data'
- *   },
- * });
- */
-export function useCreateEventMutation(baseOptions?: Apollo.MutationHookOptions<CreateEventMutation, CreateEventMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<CreateEventMutation, CreateEventMutationVariables>(CreateEventDocument, options);
-      }
-export type CreateEventMutationHookResult = ReturnType<typeof useCreateEventMutation>;
-export type CreateEventMutationResult = Apollo.MutationResult<CreateEventMutation>;
-export type CreateEventMutationOptions = Apollo.BaseMutationOptions<CreateEventMutation, CreateEventMutationVariables>;
 export const GetPipelinesDocument = gql`
     query GetPipelines($where: PipelineWhereInput) {
   findManyPipeline(where: $where) {
@@ -2877,6 +2887,8 @@ export const SearchUserDocument = gql`
     id
     email
     displayName
+    firstName
+    lastName
   }
 }
     `;
@@ -2989,6 +3001,8 @@ export const GetCurrentUserDocument = gql`
     id
     email
     displayName
+    firstName
+    lastName
     workspaceMember {
       id
       workspace {
@@ -3035,6 +3049,8 @@ export const GetUsersDocument = gql`
     id
     email
     displayName
+    firstName
+    lastName
   }
 }
     `;

diff --git a/front/src/modules/auth/services/update.ts b/front/src/modules/auth/services/update.ts
@@ -18,6 +18,8 @@ export const VERIFY = gql`
         id
         email
         displayName
+        firstName
+        lastName
         workspaceMember {
           id
           workspace {

diff --git a/front/src/modules/comments/components/__stories__/CommentHeader.stories.tsx b/front/src/modules/comments/components/__stories__/CommentHeader.stories.tsx
@@ -24,6 +24,8 @@ const mockComment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'> = {
   author: {
     id: v4(),
     displayName: mockUser.displayName ?? '',
+    firstName: mockUser.firstName ?? '',
+    lastName: mockUser.lastName ?? '',
     avatarUrl: mockUser.avatarUrl,
   },
   createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
@@ -37,6 +39,8 @@ const mockCommentWithLongName: Pick<
   author: {
     id: v4(),
     displayName: mockUser.displayName + ' with a very long suffix' ?? '',
+    firstName: mockUser.firstName ?? '',
+    lastName: mockUser.lastName ?? '',
     avatarUrl: mockUser.avatarUrl,
   },
   createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',

diff --git a/front/src/modules/comments/services/create.ts b/front/src/modules/comments/services/create.ts
@@ -23,6 +23,8 @@ export const CREATE_COMMENT = gql`
       author {
         id
         displayName
+        firstName
+        lastName
         avatarUrl
       }
       commentThreadId

diff --git a/front/src/modules/comments/services/select.ts b/front/src/modules/comments/services/select.ts
@@ -22,6 +22,8 @@ export const GET_COMMENT_THREADS_BY_TARGETS = gql`
         author {
           id
           displayName
+          firstName
+          lastName
           avatarUrl
         }
       }
@@ -46,6 +48,8 @@ export const GET_COMMENT_THREAD = gql`
         author {
           id
           displayName
+          firstName
+          lastName
           avatarUrl
         }
       }

diff --git a/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx b/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx
@@ -41,7 +41,7 @@ export function CompanyAccountOwnerPicker({ company }: OwnProps) {
       avatarType: 'rounded',
     }),
     orderByField: 'displayName',
-    searchOnFields: ['displayName'],
+    searchOnFields: ['firstName', 'lastName'],
   });
 
   async function handleEntitySelected(selectedUser: UserForSelect) {

diff --git a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx
@@ -0,0 +1,43 @@
+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 { getLogoUrlFromDomainName } from '@/utils/utils';
+import { useSearchCompanyQuery } from '~/generated/graphql';
+
+export function FilterDropdownCompanySearchSelect() {
+  const filterDropdownSearchInput = useRecoilScopedValue(
+    filterDropdownSearchInputScopedState,
+    TableContext,
+  );
+
+  const [filterDropdownSelectedEntityId] = useRecoilScopedState(
+    filterDropdownSelectedEntityIdScopedState,
+    TableContext,
+  );
+
+  const usersForSelect = useFilteredSearchEntityQuery({
+    queryHook: useSearchCompanyQuery,
+    searchOnFields: ['name'],
+    orderByField: 'name',
+    selectedIds: filterDropdownSelectedEntityId
+      ? [filterDropdownSelectedEntityId]
+      : [],
+    mappingFunction: (company) => ({
+      id: company.id,
+      entityType: Entity.User,
+      name: `${company.name}`,
+      avatarType: 'squared',
+      avatarUrl: getLogoUrlFromDomainName(company.domainName),
+    }),
+    searchFilter: filterDropdownSearchInput,
+  });
+
+  return (
+    <FilterDropdownEntitySearchSelect entitiesForSelect={usersForSelect} />
+  );
+}