feat: delete pipeline stage (#1412)

* feat: delete pipeline stage

Closes #1396

* refactor: code review

- Use string literal instead of enum

* docs: disable CircularProgressBar Chromatic snapshots

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -1,5 +1,6 @@
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProgress';
@@ -7,7 +8,7 @@ import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSear
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { IconPencil, IconPlus } from '@/ui/icon';
+import { IconPencil, IconPlus, IconTrash } from '@/ui/icon';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
@@ -19,6 +20,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
+import { boardColumnsState } from '../states/boardColumnsState';
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
 import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
@@ -30,22 +32,30 @@ const StyledMenuContainer = styled.div`
 `;
 
 type OwnProps = {
-  onClose: () => void;
-  title: string;
   color: string;
+  onClose: () => void;
+  onDelete?: (id: string) => void;
   onTitleEdit: (title: string, color: string) => void;
   stageId: string;
+  title: string;
 };
 
+type Menu = 'actions' | 'add' | 'title';
+
 export function BoardColumnMenu({
-  onClose,
-  onTitleEdit,
-  title,
   color,
+  onClose,
+  onDelete,
+  onTitleEdit,
   stageId,
+  title,
 }: OwnProps) {
-  const [openMenu, setOpenMenu] = useState('actions');
+  const [currentMenu, setCurrentMenu] = useState('actions');
+
+  const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
+
   const boardColumnMenuRef = useRef(null);
+
   const { enqueueSnackBar } = useSnackBar();
   const createCompanyProgress = useCreateCompanyProgress();
 
@@ -70,23 +80,31 @@ export function BoardColumnMenu({
     closeMenu();
   }
 
-  function closeMenu() {
-    goBackToPreviousHotkeyScope();
-    onClose();
-  }
-
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  function setMenu(menu: string) {
+  const closeMenu = useCallback(() => {
+    goBackToPreviousHotkeyScope();
+    onClose();
+  }, [goBackToPreviousHotkeyScope, onClose]);
+
+  const handleDelete = useCallback(() => {
+    setBoardColumns((previousBoardColumns) =>
+      previousBoardColumns.filter((column) => column.id !== stageId),
+    );
+    onDelete?.(stageId);
+    closeMenu();
+  }, [closeMenu, onDelete, setBoardColumns, stageId]);
+
+  function setMenu(menu: Menu) {
     if (menu === 'add') {
       setHotkeyScopeAndMemorizePreviousScope(
         RelationPickerHotkeyScope.RelationPicker,
       );
     }
-    setOpenMenu(menu);
+    setCurrentMenu(menu);
   }
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
@@ -108,19 +126,26 @@ export function BoardColumnMenu({
   return (
     <StyledMenuContainer ref={boardColumnMenuRef}>
       <StyledDropdownMenu>
-        {openMenu === 'actions' && (
+        {currentMenu === 'actions' && (
           <StyledDropdownMenuItemsContainer>
             <DropdownMenuSelectableItem onClick={() => setMenu('title')}>
               <IconPencil size={icon.size.md} stroke={icon.stroke.sm} />
               Rename
             </DropdownMenuSelectableItem>
+            <DropdownMenuSelectableItem
+              disabled={boardColumns.length <= 1}
+              onClick={handleDelete}
+            >
+              <IconTrash size={icon.size.md} stroke={icon.stroke.sm} />
+              Delete
+            </DropdownMenuSelectableItem>
             <DropdownMenuSelectableItem onClick={() => setMenu('add')}>
               <IconPlus size={icon.size.md} stroke={icon.stroke.sm} />
               New opportunity
             </DropdownMenuSelectableItem>
           </StyledDropdownMenuItemsContainer>
         )}
-        {openMenu === 'title' && (
+        {currentMenu === 'title' && (
           <BoardColumnEditTitleMenu
             color={color}
             onClose={closeMenu}
@@ -128,8 +153,7 @@ export function BoardColumnMenu({
             title={title}
           />
         )}
-
-        {openMenu === 'add' && (
+        {currentMenu === 'add' && (
           <SingleEntitySelect
             onEntitySelected={(value) => handleCompanySelected(value)}
             onCancel={closeMenu}