Filter the opportunities "Point of contact" field (#3191)

* Filter the opportunities "Point of contact" field

Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/companies/components/AddPersonToCompany.tsx

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import { v4 } from 'uuid';
+
+import { FieldDoubleText } from '@/object-record/field/types/FieldDoubleText';
+import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
+import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { Person } from '@/people/types/Person';
+import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+
+export const StyledInputContainer = styled.div`
+  background-color: transparent;
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(0.5)};
+  width: ${({ theme }) => theme.spacing(62.5)};
+  & input,
+  div {
+    background-color: ${({ theme }) => theme.background.primary};
+    width: 100%;
+  }
+  div {
+    border-radius: ${({ theme }) => theme.spacing(1)};
+    overflow: hidden;
+  }
+  input {
+    display: flex;
+    flex-grow: 1;
+    padding: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+type AddPersonToCompanyProps = {
+  companyId: string;
+  onEntitySelected: (entity?: EntityForSelect | undefined) => void;
+  closeDropdown?: () => void;
+};
+
+export const AddPersonToCompany = ({
+  companyId,
+  onEntitySelected,
+  closeDropdown,
+}: AddPersonToCompanyProps) => {
+  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
+
+  const handleEscape = () => {
+    goBackToPreviousHotkeyScope();
+    closeDropdown?.();
+  };
+
+  const { createOneRecord: createPerson } = useCreateOneRecord<Person>({
+    objectNameSingular: 'person',
+  });
+
+  const handleCreatePerson = async ({
+    firstValue,
+    secondValue,
+  }: FieldDoubleText) => {
+    if (!firstValue && !secondValue) return;
+
+    const person = await createPerson({
+      companyId,
+      id: v4(),
+      name: {
+        firstName: firstValue,
+        lastName: secondValue,
+      },
+    });
+
+    if (person) {
+      const entityForSelect: EntityForSelect = {
+        id: person.id,
+        name: person.name?.firstName ?? '',
+        avatarUrl: person.avatarUrl ?? '',
+        avatarType: 'rounded',
+        record: person,
+      };
+      onEntitySelected(entityForSelect);
+    }
+    goBackToPreviousHotkeyScope();
+    closeDropdown?.();
+  };
+
+  return (
+    <StyledInputContainer>
+      <DoubleTextInput
+        firstValue=""
+        secondValue=""
+        firstValuePlaceholder="First Name"
+        secondValuePlaceholder="Last Name"
+        onClickOutside={handleEscape}
+        onEnter={handleCreatePerson}
+        onEscape={handleEscape}
+        hotkeyScope={RelationPickerHotkeyScope.AddNew}
+      />
+    </StyledInputContainer>
+  );
+};

packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx

@@ -1,13 +1,20 @@
-import { useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
 
+import { AddPersonToCompany } from '@/companies/components/AddPersonToCompany';
+import { companyProgressesFamilyState } from '@/companies/states/companyProgressesFamilyState';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { FieldDefinition } from '@/object-record/field/types/FieldDefinition';
 import { FieldRelationMetadata } from '@/object-record/field/types/FieldMetadata';
+import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { IconForbid } from '@/ui/display/icon';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { isDefined } from '~/utils/isDefined';
 
 export type RelationPickerProps = {
   recordId?: string;
@@ -35,10 +42,24 @@ export const RelationPicker = ({
     searchQuery,
   } = useRelationPicker();
 
+  const [showAddNewDropdown, setShowAddNewDropdown] = useState(false);
+
+  const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
+
   useEffect(() => {
     setRelationPickerSearchFilter(initialSearchFilter ?? '');
   }, [initialSearchFilter, setRelationPickerSearchFilter]);
 
+  const boardCardId = useContext(BoardCardIdContext);
+  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
+
+  const [companyProgress] = useRecoilState(
+    companyProgressesFamilyState(boardCardId ?? ''),
+  );
+
+  const { company } = companyProgress ?? {};
+  const companyId = company?.id;
+
   const { objectNameSingular: relationObjectNameSingular } =
     useObjectNameSingularFromPlural({
       objectNamePlural:
@@ -69,16 +90,41 @@ export const RelationPicker = ({
   const handleEntitySelected = (selectedEntity: any | null | undefined) =>
     onSubmit(selectedEntity ?? null);
 
+  const entitiesToSelect = entities.entitiesToSelect.filter((entity) =>
+    weAreInOpportunitiesPageCard ? entity.record.companyId === companyId : true,
+  );
+
+  const weAreAddingNewPerson =
+    weAreInOpportunitiesPageCard && showAddNewDropdown && companyId;
+
   return (
-    <SingleEntitySelect
+    <>
-      EmptyIcon={IconForbid}
+      {!weAreAddingNewPerson ? (
-      emptyLabel={'No ' + fieldDefinition.label}
+        <SingleEntitySelect
-      entitiesToSelect={entities.entitiesToSelect}
+          EmptyIcon={IconForbid}
-      loading={entities.loading}
+          emptyLabel={'No ' + fieldDefinition.label}
-      onCancel={onCancel}
+          entitiesToSelect={entitiesToSelect}
-      onEntitySelected={handleEntitySelected}
+          loading={entities.loading}
-      selectedEntity={entities.selectedEntities[0]}
+          onCancel={onCancel}
-      width={width}
+          onEntitySelected={handleEntitySelected}
-    />
+          selectedEntity={entities.selectedEntities[0]}
+          width={width}
+          onCreate={() => {
+            if (weAreInOpportunitiesPageCard) {
+              setShowAddNewDropdown(true);
+              setHotkeyScopeAndMemorizePreviousScope(
+                RelationPickerHotkeyScope.AddNew,
+              );
+            }
+          }}
+        />
+      ) : (
+        <AddPersonToCompany
+          companyId={companyId}
+          onEntitySelected={handleEntitySelected}
+          closeDropdown={() => setShowAddNewDropdown(false)}
+        />
+      )}
+    </>
   );
 };

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx

@@ -30,7 +30,14 @@ export const SingleEntitySelect = ({
     refs: [containerRef],
     callback: (event) => {
       event.stopImmediatePropagation();
-      onCancel?.();
+
+      const weAreNotInAnHTMLInput = !(
+        event.target instanceof HTMLInputElement &&
+        event.target.tagName === 'INPUT'
+      );
+      if (weAreNotInAnHTMLInput && onCancel) {
+        onCancel();
+      }
     },
   });
 

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx

@@ -1,7 +1,8 @@
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { Key } from 'ts-key-enum';
 
+import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
 import { IconPlus } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@@ -14,6 +15,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { assertNotNull } from '~/utils/assert';
+import { isDefined } from '~/utils/isDefined';
 
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
@@ -69,6 +71,12 @@ export const SingleEntitySelectMenuItems = ({
 
   const selectableItemIds = entitiesInDropdown.map((entity) => entity.id);
 
+  const boardCardId = useContext(BoardCardIdContext);
+  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
+
+  const hideSearchResults =
+    weAreInOpportunitiesPageCard && !entitiesInDropdown.length;
+
   return (
     <div ref={containerRef}>
       <SelectableList
@@ -86,33 +94,39 @@ export const SingleEntitySelectMenuItems = ({
           }
         }}
       >
-        <DropdownMenuItemsContainer hasMaxHeight>
+        {!hideSearchResults && (
-          {loading ? (
+          <>
-            <DropdownMenuSkeletonItem />
+            <DropdownMenuItemsContainer hasMaxHeight>
-          ) : entitiesInDropdown.length === 0 && !isAllEntitySelectShown ? (
+              {loading ? (
-            <MenuItem text="No result" />
+                <DropdownMenuSkeletonItem />
-          ) : (
+              ) : entitiesInDropdown.length === 0 && !isAllEntitySelectShown ? (
-            <>
+                <MenuItem text="No result" />
-              {isAllEntitySelectShown &&
+              ) : (
-                selectAllLabel &&
+                <>
-                onAllEntitySelected && (
+                  {isAllEntitySelectShown &&
-                  <MenuItemSelect
+                    selectAllLabel &&
-                    key="select-all"
+                    onAllEntitySelected && (
-                    onClick={() => onAllEntitySelected()}
+                      <MenuItemSelect
-                    LeftIcon={SelectAllIcon}
+                        key="select-all"
-                    text={selectAllLabel}
+                        onClick={() => onAllEntitySelected()}
-                    selected={!!isAllEntitySelected}
+                        LeftIcon={SelectAllIcon}
-                  />
+                        text={selectAllLabel}
-                )}
+                        selected={!!isAllEntitySelected}
-              {emptyLabel && (
+                      />
-                <MenuItemSelect
+                    )}
-                  key="select-none"
+                  {emptyLabel && (
-                  onClick={() => onEntitySelected()}
+                    <MenuItemSelect
-                  LeftIcon={EmptyIcon}
+                      key="select-none"
-                  text={emptyLabel}
+                      onClick={() => onEntitySelected()}
-                  selected={!selectedEntity}
+                      LeftIcon={EmptyIcon}
-                />
+                      text={emptyLabel}
+                      selected={!selectedEntity}
+                    />
+                  )}
+                </>
               )}
+            </DropdownMenuItemsContainer>
+            <DropdownMenuItemsContainer hasMaxHeight>
               {entitiesInDropdown?.map((entity) => (
                 <SelectableMenuItemSelect
                   key={entity.id}
@@ -121,21 +135,19 @@ export const SingleEntitySelectMenuItems = ({
                   selectedEntity={selectedEntity}
                 />
               ))}
-            </>
-          )}
-        </DropdownMenuItemsContainer>
-        {showCreateButton && (
-          <>
-            <DropdownMenuItemsContainer hasMaxHeight>
-              <DropdownMenuSeparator />
-              <CreateNewButton
-                onClick={onCreate}
-                LeftIcon={IconPlus}
-                text="Add New"
-              />
             </DropdownMenuItemsContainer>
           </>
         )}
+        {(hideSearchResults || showCreateButton) && !loading && (
+          <DropdownMenuItemsContainer hasMaxHeight>
+            {entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
+            <CreateNewButton
+              onClick={onCreate}
+              LeftIcon={IconPlus}
+              text="Add New"
+            />
+          </DropdownMenuItemsContainer>
+        )}
       </SelectableList>
     </div>
   );

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx

@@ -1,3 +1,6 @@
+import { useContext } from 'react';
+
+import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import {
   SingleEntitySelectMenuItems,
   SingleEntitySelectMenuItemsProps,
@@ -35,13 +38,20 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
 
   const showCreateButton = isDefined(onCreate) && searchFilter !== '';
 
+  const boardCardId = useContext(BoardCardIdContext);
+  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
+  const hideSearchInput =
+    weAreInOpportunitiesPageCard && !entitiesToSelect.length && !selectedEntity;
+
   return (
     <>
-      <DropdownMenuSearchInput
+      {!hideSearchInput && (
-        value={searchFilter}
+        <DropdownMenuSearchInput
-        onChange={handleSearchFilterChange}
+          value={searchFilter}
-        autoFocus
+          onChange={handleSearchFilterChange}
-      />
+          autoFocus
+        />
+      )}
       <DropdownMenuSeparator />
       <SingleEntitySelectMenuItems
         {...{

packages/twenty-front/src/modules/object-record/relation-picker/types/RelationPickerHotkeyScope.ts

@@ -1,3 +1,4 @@
 export enum RelationPickerHotkeyScope {
   RelationPicker = 'relation-picker',
+  AddNew = 'add-new',
 }