On Company Show, I can select an existing person and add it to the company (#1201)

* On Company Show, I can select an existing person and add it to the company

Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add excludePersonIds

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add hotkey support

* Fix popin placement and fix company show mobile

* Fix popin placement and fix company show mobile

---------

Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
+import { flip, offset, useFloating } from '@floating-ui/react';
+import { IconPlus } from '@tabler/icons-react';
+
+import {
+  PeoplePicker,
+  PersonForSelect,
+} from '@/people/components/PeoplePicker';
+import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
+import { ButtonSize } from '@/ui/button/components/Button';
+import { IconButton } from '@/ui/button/components/IconButton';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';
+
+const StyledContainer = styled.div`
+  position: relative;
+`;
+
+export function AddPersonToCompany({
+  companyId,
+  peopleIds,
+}: {
+  companyId: string;
+  peopleIds?: string[];
+}) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [updatePerson] = useUpdateOnePersonMutation();
+  const { refs, floatingStyles } = useFloating({
+    placement: 'right-start',
+    middleware: [flip(), offset({ mainAxis: -20, crossAxis: 25 })],
+  });
+
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  function handlePersonSelected(companyId: string) {
+    return async (newPerson: PersonForSelect | null) => {
+      if (newPerson) {
+        await updatePerson({
+          variables: {
+            where: {
+              id: newPerson.id,
+            },
+            data: {
+              company: { connect: { id: companyId } },
+            },
+          },
+          refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+        });
+        handleClosePicker();
+      }
+    };
+  }
+
+  function handleClosePicker() {
+    if (isDropdownOpen) {
+      setIsDropdownOpen(false);
+      goBackToPreviousHotkeyScope();
+    }
+  }
+
+  function handleOpenPicker() {
+    if (!isDropdownOpen) {
+      setIsDropdownOpen(true);
+      setHotkeyScopeAndMemorizePreviousScope(
+        RelationPickerHotkeyScope.RelationPicker,
+      );
+    }
+  }
+
+  return (
+    <RecoilScope>
+      <StyledContainer>
+        <div ref={refs.setReference}>
+          <IconButton
+            icon={<IconPlus size={14} />}
+            onClick={handleOpenPicker}
+            size={ButtonSize.Small}
+            variant={'transparent'}
+          />
+        </div>
+
+        {isDropdownOpen && (
+          <div ref={refs.setFloating} style={floatingStyles}>
+            <PeoplePicker
+              personId={''}
+              onSubmit={handlePersonSelected(companyId)}
+              onCancel={handleClosePicker}
+              excludePersonIds={peopleIds}
+            />
+          </div>
+        )}
+      </StyledContainer>
+    </RecoilScope>
+  );
+}

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

@@ -3,12 +3,13 @@ import styled from '@emotion/styled';
 import { PeopleCard } from '@/people/components/PeopleCard';
 import { Company, useGetPeopleQuery } from '~/generated/graphql';
 
+import { AddPersonToCompany } from './AddPersonToCompany';
+
 export type CompanyTeamPropsType = {
   company: Pick<Company, 'id'>;
 };
 
 const StyledContainer = styled.div`
-  align-items: flex-start;
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -17,13 +18,10 @@ const StyledContainer = styled.div`
 
 const StyledTitleContainer = styled.div`
   align-items: center;
-  backdrop-filter: blur(5px);
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   justify-content: space-between;
   padding-bottom: ${({ theme }) => theme.spacing(0)};
-  padding-left: ${({ theme }) => theme.spacing(3)};
-  padding-right: ${({ theme }) => theme.spacing(3)};
   padding-top: ${({ theme }) => theme.spacing(3)};
 `;
 
@@ -55,12 +53,15 @@ export function CompanyTeam({ company }: CompanyTeamPropsType) {
     },
   });
 
+  const peopleIds = data?.people?.map(({ id }) => id);
+
   return (
     <>
       {Boolean(data?.people?.length) && (
         <StyledContainer>
           <StyledTitleContainer>
             <StyledTitle>Team</StyledTitle>
+            <AddPersonToCompany companyId={company.id} peopleIds={peopleIds} />
           </StyledTitleContainer>
           <StyledListContainer>
             {data?.people?.map((person, id) => (