On Company Show, in team section, I can delete a person (#1206)

* On Company Show, in team section, I can detach a person from a company

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* On Company Show, in team section, I can detach a person from a company

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Temporary fix disconnect optional relations

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Refactor the PR logic

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* On Company Show, in team section, I can delete a person

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

* Fix styling

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

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Refactor the dropdown

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Update styling

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

---------

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

front/src/modules/people/components/PeopleCard.tsx

@@ -4,7 +4,7 @@ import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
-import { IconDotsVertical, IconLinkOff } from '@tabler/icons-react';
+import { IconDotsVertical, IconLinkOff, IconTrash } from '@tabler/icons-react';
 
 import { IconButton } from '@/ui/button/components/IconButton';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
@@ -12,7 +12,11 @@ import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMen
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
-import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';
+import {
+  Person,
+  useDeleteManyPersonMutation,
+  useUpdateOnePersonMutation,
+} from '~/generated/graphql';
 
 import { GET_PEOPLE } from '../graphql/queries/getPeople';
 
@@ -68,6 +72,10 @@ const StyledJobTitle = styled.div`
   }
 `;
 
+const StyledRemoveOption = styled.div`
+  color: ${({ theme }) => theme.color.red};
+`;
+
 export function PeopleCard({
   person,
   hasBottomBorder = true,
@@ -76,6 +84,8 @@ export function PeopleCard({
   const [isHovered, setIsHovered] = useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = useState(false);
   const [updatePerson] = useUpdateOnePersonMutation();
+  const [deletePerson] = useDeleteManyPersonMutation();
+
   const { refs, floatingStyles } = useFloating({
     strategy: 'absolute',
     middleware: [offset(10), flip()],
@@ -126,6 +136,15 @@ export function PeopleCard({
     });
   }
 
+  function handleDeletePerson() {
+    deletePerson({
+      variables: {
+        ids: person.id,
+      },
+      refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+    });
+  }
+
   return (
     <StyledCard
       isHovered={isHovered}
@@ -159,6 +178,14 @@ export function PeopleCard({
                   <IconButton icon={<IconLinkOff size={14} />} size="small" />
                   Detach relation
                 </DropdownMenuSelectableItem>
+                <DropdownMenuSelectableItem onClick={handleDeletePerson}>
+                  <IconButton
+                    icon={<IconTrash size={14} />}
+                    size="small"
+                    textColor="danger"
+                  />
+                  <StyledRemoveOption>Delete person</StyledRemoveOption>
+                </DropdownMenuSelectableItem>
               </DropdownMenuItemsContainer>
             </DropdownMenu>
           )}