Add back pickers on all pages, fix command menu (#2662)

* Add back pickers on all pages, fix command menu

* Fix lint

front/src/modules/companies/components/AddPersonToCompany.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useMutation, useQuery } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import { flip, offset, useFloating } from '@floating-ui/react';
@@ -8,11 +8,14 @@ import { v4 } from 'uuid';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { IconPlus } from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { RelationPicker } from '@/ui/input/components/internal/relation-picker/components/RelationPicker';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { DoubleTextInput } from '@/ui/object/field/meta-types/input/components/internal/DoubleTextInput';
 import { FieldDoubleText } from '@/ui/object/field/types/FieldDoubleText';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 const StyledContainer = styled.div`
   position: static;
@@ -65,43 +68,29 @@ export const AddPersonToCompany = ({
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  // TODO: refactor with useObjectMetadataItem V2 with typed hooks
   const { findManyQuery, updateOneMutation, createOneMutation } =
     useObjectMetadataItem({
       objectNameSingular: 'person',
     });
 
-  const { data: peopleNotInCompany } = useQuery(findManyQuery, {
-    variables: {
-      filter: {
-        companyId: {
-          neq: companyId,
-        },
-      },
-    },
-  });
-
   const [updatePerson] = useMutation(updateOneMutation);
   const [createPerson] = useMutation(createOneMutation);
 
-  const handlePersonSelected = async ({
-    selectedPersonId,
-    companyId,
-  }: {
-    selectedPersonId: string;
-    companyId: string | null;
-  }) => {
-    await updatePerson({
-      variables: {
-        idToUpdate: selectedPersonId,
-        input: {
-          companyId: companyId,
+  const handlePersonSelected =
+    (companyId: string) => async (newPerson: EntityForSelect | null) => {
+      if (!newPerson) return;
+      await updatePerson({
+        variables: {
+          idToUpdate: newPerson.id,
+          input: {
+            companyId: companyId,
+          },
         },
-      },
-      refetchQueries: [getOperationName(findManyQuery) ?? ''],
-    });
-    handleClosePicker();
-  };
+        refetchQueries: [getOperationName(findManyQuery) ?? ''],
+      });
+
+      handleClosePicker();
+    };
 
   const handleClosePicker = () => {
     if (isDropdownOpen) {
@@ -111,21 +100,12 @@ export const AddPersonToCompany = ({
   };
 
   const handleOpenPicker = () => {
-    // TODO: TEMPORARY - example to implement when the picker is back
-    handleCreatePerson({
-      firstValue: 'John',
-      secondValue: 'Doe',
-    });
-    // handlePersonSelected({
-    //   companyId,
-    //   selectedPersonId: peopleNotInCompany.people.edges[0].node.id,
-    // });
-    // if (!isDropdownOpen) {
-    //   setIsDropdownOpen(true);
-    //   setHotkeyScopeAndMemorizePreviousScope(
-    //     RelationPickerHotkeyScope.RelationPicker,
-    //   );
-    // }
+    if (!isDropdownOpen) {
+      setIsDropdownOpen(true);
+      setHotkeyScopeAndMemorizePreviousScope(
+        RelationPickerHotkeyScope.RelationPicker,
+      );
+    }
   };
 
   const handleCreatePerson = async ({
@@ -178,14 +158,23 @@ export const AddPersonToCompany = ({
                 />
               </StyledInputContainer>
             ) : (
-              <>todo</>
-              // <PeoplePicker
-              //   personId={''}
-              //   onSubmit={handlePersonSelected(companyId)}
-              //   onCancel={handleClosePicker}
-              //   onCreate={() => setIsCreationDropdownOpen(true)}
-              //   excludePersonIds={peopleIds}
-              // />
+              <RelationPicker
+                recordId={''}
+                onSubmit={handlePersonSelected(companyId)}
+                onCancel={handleClosePicker}
+                excludeRecordIds={peopleIds ?? []}
+                fieldDefinition={{
+                  label: 'Person',
+                  iconName: 'IconUser',
+                  fieldMetadataId: '',
+                  type: FieldMetadataType.Relation,
+                  metadata: {
+                    relationObjectMetadataNameSingular: 'person',
+                    relationObjectMetadataNamePlural: 'people',
+                    fieldName: 'person',
+                  },
+                }}
+              />
             )}
           </div>
         )}

front/src/modules/companies/components/CompanyChip.tsx

@@ -18,7 +18,7 @@ export const CompanyChip = ({
 }: CompanyChipProps) => (
   <EntityChip
     entityId={id}
-    linkToEntity={`/objects/companies/${id}`}
+    linkToEntity={`/object/company/${id}`}
     name={name}
     avatarType="squared"
     avatarUrl={avatarUrl}

front/src/modules/companies/components/CompanyTeam.tsx

@@ -17,7 +17,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
 `;
 
 const StyledTitleContainer = styled.div`

front/src/modules/companies/components/HooksCompanyBoardEffect.tsx

@@ -9,8 +9,8 @@ import { PaginatedObjectTypeResults } from '@/object-record/types/PaginatedObjec
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 import { Opportunity } from '@/pipeline/types/Opportunity';
 import { PipelineStep } from '@/pipeline/types/PipelineStep';
-import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2';
-import { turnSortsIntoOrderByV2 } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2';
+import { turnFiltersIntoWhereClause } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClause';
+import { turnSortsIntoOrderBy } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { useBoardActionBarEntries } from '@/ui/object/record-board/hooks/useBoardActionBarEntries';
 import { useBoardContext } from '@/ui/object/record-board/hooks/useBoardContext';
 import { useBoardContextMenuEntries } from '@/ui/object/record-board/hooks/useBoardContextMenuEntries';
@@ -88,12 +88,12 @@ export const HooksCompanyBoardEffect = () => {
     ),
   });
 
-  const filter = turnFiltersIntoWhereClauseV2(
+  const filter = turnFiltersIntoWhereClause(
     mapViewFiltersToFilters(currentViewFilters),
     objectMetadataItem?.fields ?? [],
   );
 
-  const orderBy = turnSortsIntoOrderByV2(
+  const orderBy = turnSortsIntoOrderBy(
     mapViewSortsToSorts(currentViewSorts),
     objectMetadataItem?.fields ?? [],
   );

front/src/modules/companies/components/NewOpportunityButton.tsx

@@ -1,6 +1,12 @@
 import { useCallback, useContext, useState } from 'react';
+import { useQuery } from '@apollo/client';
 
+import { useCreateOpportunity } from '@/companies/hooks/useCreateOpportunity';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { NewButton } from '@/ui/object/record-board/components/NewButton';
@@ -8,13 +14,14 @@ import { BoardColumnContext } from '@/ui/object/record-board/contexts/BoardColum
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
-export const NewCompanyProgressButton = () => {
+export const NewOpportunityButton = () => {
   const [isCreatingCard, setIsCreatingCard] = useState(false);
   const column = useContext(BoardColumnContext);
 
   const pipelineStepId = column?.columnDefinition.id || '';
 
   const { enqueueSnackBar } = useSnackBar();
+  const { createOpportunity } = useCreateOpportunity();
 
   const {
     goBackToPreviousHotkeyScope,
@@ -33,7 +40,7 @@ export const NewCompanyProgressButton = () => {
       throw new Error('Pipeline stage id is not defined');
     }
 
-    //createCompanyProgress(company.id, pipelineStepId);
+    createOpportunity(company.id, pipelineStepId);
   };
 
   const handleNewClick = useCallback(() => {
@@ -52,23 +59,38 @@ export const NewCompanyProgressButton = () => {
     relationPickerSearchFilterScopedState,
   );
 
-  // const companies = useFilteredSearchCompanyQuery({
-  //   searchFilter: relationPickerSearchFilter,
-  // });
+  const { findManyQuery } = useObjectMetadataItem({
+    objectNameSingular: 'company',
+  });
+  const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
+  const { identifiersMapper, searchQuery } = useRelationPicker();
+
+  const filteredSearchEntityResults = useFilteredSearchEntityQuery({
+    queryHook: useFindManyQuery,
+    filters: [
+      {
+        fieldNames: searchQuery?.computeFilterFields?.('company') ?? [],
+        filter: relationPickerSearchFilter,
+      },
+    ],
+    orderByField: 'createdAt',
+    selectedIds: [],
+    mappingFunction: (record: any) => identifiersMapper?.(record, 'company'),
+    objectNamePlural: 'companies',
+  });
 
   return (
     <>
       {isCreatingCard ? (
-        <>TODO</>
+        <SingleEntitySelect
+          disableBackgroundBlur
+          entitiesToSelect={filteredSearchEntityResults.entitiesToSelect}
+          loading={filteredSearchEntityResults.loading}
+          onCancel={handleCancel}
+          onEntitySelected={handleEntitySelect}
+          selectedEntity={filteredSearchEntityResults.selectedEntities[0]}
+        />
       ) : (
-        // <SingleEntitySelect
-        //   disableBackgroundBlur
-        //   entitiesToSelect={companies.entitiesToSelect}
-        //   loading={companies.loading}
-        //   onCancel={handleCancel}
-        //   onEntitySelected={handleEntitySelect}
-        //   selectedEntity={companies.selectedEntities[0]}
-        // />
         <NewButton onClick={handleNewClick} />
       )}
     </>

front/src/modules/companies/components/OpportunityPicker.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useRecoilState } from 'recoil';
+import { useQuery } from '@apollo/client';
+import { useRecoilValue } from 'recoil';
 
-import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { currentPipelineStepsState } from '@/pipeline/states/currentPipelineStepsState';
+import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { IconChevronDown } from '@/ui/display/icon';
+import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
+import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
 import { useEntitySelectSearch } from '@/ui/input/relation-picker/hooks/useEntitySelectSearch';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -13,7 +18,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
-export type CompanyProgressPickerProps = {
+export type OpportunityPickerProps = {
   companyId: string | null;
   onSubmit: (
     newCompanyId: EntityForSelect | null,
@@ -22,19 +27,33 @@ export type CompanyProgressPickerProps = {
   onCancel?: () => void;
 };
 
-export const CompanyProgressPicker = ({
-  companyId,
+export const OpportunityPicker = ({
   onSubmit,
   onCancel,
-}: CompanyProgressPickerProps) => {
+}: OpportunityPickerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
 
-  // const companies = useFilteredSearchCompanyQuery({
-  //   searchFilter,
-  //   selectedIds: companyId ? [companyId] : [],
-  // });
+  const { findManyQuery } = useObjectMetadataItem({
+    objectNameSingular: 'company',
+  });
+  const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
+  const { identifiersMapper, searchQuery } = useRelationPicker();
+
+  const filteredSearchEntityResults = useFilteredSearchEntityQuery({
+    queryHook: useFindManyQuery,
+    filters: [
+      {
+        fieldNames: searchQuery?.computeFilterFields?.('company') ?? [],
+        filter: searchFilter,
+      },
+    ],
+    orderByField: 'createdAt',
+    selectedIds: [],
+    mappingFunction: (record: any) => identifiersMapper?.(record, 'company'),
+    objectNamePlural: 'companies',
+  });
 
   const [isProgressSelectionUnfolded, setIsProgressSelectionUnfolded] =
     useState(false);
@@ -43,12 +62,7 @@ export const CompanyProgressPicker = ({
     string | null
   >(null);
 
-  const [currentPipeline] = useRecoilState(currentPipelineState);
-
-  const currentPipelineSteps = useMemo(
-    () => currentPipeline?.pipelineSteps ?? [],
-    [currentPipeline],
-  );
+  const currentPipelineSteps = useRecoilValue(currentPipelineStepsState);
 
   const handlePipelineStepChange = (newPipelineStepId: string) => {
     setSelectedPipelineStepId(newPipelineStepId);
@@ -110,13 +124,13 @@ export const CompanyProgressPicker = ({
           />
           <DropdownMenuSeparator />
           <RecoilScope>
-            {/* <SingleEntitySelectBase
-              entitiesToSelect={companies.entitiesToSelect}
-              loading={companies.loading}
+            <SingleEntitySelectBase
+              entitiesToSelect={filteredSearchEntityResults.entitiesToSelect}
+              loading={filteredSearchEntityResults.loading}
               onCancel={onCancel}
               onEntitySelected={handleEntitySelected}
-              selectedEntity={companies.selectedEntities[0]}
-            /> */}
+              selectedEntity={filteredSearchEntityResults.selectedEntities[0]}
+            />
           </RecoilScope>
         </>
       )}

front/src/modules/companies/hooks/useCreateOpportunity.ts

@@ -0,0 +1,34 @@
+import { useRecoilCallback } from 'recoil';
+import { v4 } from 'uuid';
+
+import { useCreateOneObjectRecord } from '@/object-record/hooks/useCreateOneObjectRecord';
+import { Opportunity } from '@/pipeline/types/Opportunity';
+import { boardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/boardCardIdsByColumnIdFamilyState';
+
+export const useCreateOpportunity = () => {
+  const { createOneObject: createOneOpportunity } =
+    useCreateOneObjectRecord<Opportunity>({
+      objectNameSingular: 'opportunity',
+    });
+
+  const createOpportunity = useRecoilCallback(
+    ({ set }) =>
+      async (companyId: string, pipelineStepId: string) => {
+        const newUuid = v4();
+
+        set(boardCardIdsByColumnIdFamilyState(pipelineStepId), (oldValue) => [
+          ...oldValue,
+          newUuid,
+        ]);
+
+        await createOneOpportunity?.({
+          id: newUuid,
+          pipelineStepId,
+          companyId: companyId,
+        });
+      },
+    [createOneOpportunity],
+  );
+
+  return { createOpportunity };
+};