feat: add board options dropdown and pipeline stage creation (#1399)

* feat: add board options dropdown and pipeline stage creation

Closes #1395

* refactor: code review

- remove useCallback

front/src/generated/graphql.tsx

@@ -1004,6 +1004,7 @@ export type Mutation = {
   createOneCompany: Company;
   createOnePerson: Person;
   createOnePipelineProgress: PipelineProgress;
+  createOnePipelineStage: PipelineStage;
   createOneView: View;
   createOneViewField: ViewField;
   deleteCurrentWorkspace: Workspace;
@@ -1130,6 +1131,11 @@ export type MutationCreateOnePipelineProgressArgs = {
 };
 
 
+export type MutationCreateOnePipelineStageArgs = {
+  data: PipelineStageCreateInput;
+};
+
+
 export type MutationCreateOneViewArgs = {
   data: ViewCreateInput;
 };
@@ -1654,6 +1660,10 @@ export type PipelineCreateNestedOneWithoutPipelineProgressesInput = {
   connect?: InputMaybe<PipelineWhereUniqueInput>;
 };
 
+export type PipelineCreateNestedOneWithoutPipelineStagesInput = {
+  connect?: InputMaybe<PipelineWhereUniqueInput>;
+};
+
 export type PipelineOrderByWithRelationInput = {
   createdAt?: InputMaybe<SortOrder>;
   icon?: InputMaybe<SortOrder>;
@@ -1707,6 +1717,10 @@ export type PipelineProgressCreateNestedManyWithoutPersonInput = {
   connect?: InputMaybe<Array<PipelineProgressWhereUniqueInput>>;
 };
 
+export type PipelineProgressCreateNestedManyWithoutPipelineStageInput = {
+  connect?: InputMaybe<Array<PipelineProgressWhereUniqueInput>>;
+};
+
 export type PipelineProgressCreateNestedManyWithoutPointOfContactInput = {
   connect?: InputMaybe<Array<PipelineProgressWhereUniqueInput>>;
 };
@@ -1861,6 +1875,18 @@ export type PipelineStage = {
   updatedAt: Scalars['DateTime'];
 };
 
+export type PipelineStageCreateInput = {
+  color: Scalars['String'];
+  createdAt?: InputMaybe<Scalars['DateTime']>;
+  id?: InputMaybe<Scalars['String']>;
+  index?: InputMaybe<Scalars['Int']>;
+  name: Scalars['String'];
+  pipeline: PipelineCreateNestedOneWithoutPipelineStagesInput;
+  pipelineProgresses?: InputMaybe<PipelineProgressCreateNestedManyWithoutPipelineStageInput>;
+  type: Scalars['String'];
+  updatedAt?: InputMaybe<Scalars['DateTime']>;
+};
+
 export type PipelineStageCreateNestedOneWithoutPipelineProgressesInput = {
   connect?: InputMaybe<PipelineStageWhereUniqueInput>;
 };
@@ -3285,6 +3311,13 @@ export type CreateOneCompanyPipelineProgressMutationVariables = Exact<{
 
 export type CreateOneCompanyPipelineProgressMutation = { __typename?: 'Mutation', createOnePipelineProgress: { __typename?: 'PipelineProgress', id: string } };
 
+export type CreatePipelineStageMutationVariables = Exact<{
+  data: PipelineStageCreateInput;
+}>;
+
+
+export type CreatePipelineStageMutation = { __typename?: 'Mutation', pipelineStage: { __typename?: 'PipelineStage', id: string, name: string, color: string } };
+
 export type DeleteManyPipelineProgressMutationVariables = Exact<{
   ids?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
 }>;
@@ -5453,6 +5486,41 @@ export function useCreateOneCompanyPipelineProgressMutation(baseOptions?: Apollo
 export type CreateOneCompanyPipelineProgressMutationHookResult = ReturnType<typeof useCreateOneCompanyPipelineProgressMutation>;
 export type CreateOneCompanyPipelineProgressMutationResult = Apollo.MutationResult<CreateOneCompanyPipelineProgressMutation>;
 export type CreateOneCompanyPipelineProgressMutationOptions = Apollo.BaseMutationOptions<CreateOneCompanyPipelineProgressMutation, CreateOneCompanyPipelineProgressMutationVariables>;
+export const CreatePipelineStageDocument = gql`
+    mutation CreatePipelineStage($data: PipelineStageCreateInput!) {
+  pipelineStage: createOnePipelineStage(data: $data) {
+    id
+    name
+    color
+  }
+}
+    `;
+export type CreatePipelineStageMutationFn = Apollo.MutationFunction<CreatePipelineStageMutation, CreatePipelineStageMutationVariables>;
+
+/**
+ * __useCreatePipelineStageMutation__
+ *
+ * To run a mutation, you first call `useCreatePipelineStageMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreatePipelineStageMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createPipelineStageMutation, { data, loading, error }] = useCreatePipelineStageMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useCreatePipelineStageMutation(baseOptions?: Apollo.MutationHookOptions<CreatePipelineStageMutation, CreatePipelineStageMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreatePipelineStageMutation, CreatePipelineStageMutationVariables>(CreatePipelineStageDocument, options);
+      }
+export type CreatePipelineStageMutationHookResult = ReturnType<typeof useCreatePipelineStageMutation>;
+export type CreatePipelineStageMutationResult = Apollo.MutationResult<CreatePipelineStageMutation>;
+export type CreatePipelineStageMutationOptions = Apollo.BaseMutationOptions<CreatePipelineStageMutation, CreatePipelineStageMutationVariables>;
 export const DeleteManyPipelineProgressDocument = gql`
     mutation DeleteManyPipelineProgress($ids: [String!]) {
   deleteManyPipelineProgress(where: {id: {in: $ids}}) {

front/src/modules/pipeline/graphql/mutations/createPipelineStage.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_PIPELINE_STAGE = gql`
+  mutation CreatePipelineStage($data: PipelineStageCreateInput!) {
+    pipelineStage: createOnePipelineStage(data: $data) {
+      id
+      name
+      color
+    }
+  }
+`;

front/src/modules/pipeline/hooks/usePipelineStages.ts

@@ -0,0 +1,34 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilValue } from 'recoil';
+
+import type { BoardColumnDefinition } from '@/ui/board/types/BoardColumnDefinition';
+import { useCreatePipelineStageMutation } from '~/generated/graphql';
+
+import { GET_PIPELINES } from '../graphql/queries/getPipelines';
+import { currentPipelineState } from '../states/currentPipelineState';
+
+export const usePipelineStages = () => {
+  const currentPipeline = useRecoilValue(currentPipelineState);
+
+  const [createPipelineStageMutation] = useCreatePipelineStageMutation();
+
+  const handlePipelineStageAdd = async (boardColumn: BoardColumnDefinition) => {
+    if (!currentPipeline?.id) return;
+
+    return createPipelineStageMutation({
+      variables: {
+        data: {
+          color: boardColumn.colorCode,
+          id: boardColumn.id,
+          index: boardColumn.index,
+          name: boardColumn.title,
+          pipeline: { connect: { id: currentPipeline.id } },
+          type: 'ongoing',
+        },
+      },
+      refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+    });
+  };
+
+  return { handlePipelineStageAdd };
+};

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

@@ -1,18 +1,26 @@
 import { Context, ReactNode, useCallback, useState } from 'react';
 import styled from '@emotion/styled';
 
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
 import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
 import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { TopBar } from '@/ui/top-bar/TopBar';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
+import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
+
+import { BoardOptionsDropdown } from './BoardOptionsDropdown';
 
 type OwnProps<SortField> = {
   viewName: string;
   viewIcon?: ReactNode;
   availableSorts?: Array<SortType<SortField>>;
   onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
+  onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
   context: Context<string | null>;
 };
 
@@ -31,6 +39,7 @@ export function BoardHeader<SortField>({
   viewIcon,
   availableSorts,
   onSortsUpdate,
+  onStageAdd,
   context,
 }: OwnProps<SortField>) {
   const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
@@ -56,41 +65,47 @@ export function BoardHeader<SortField>({
   );
 
   return (
-    <TopBar
-      displayBottomBorder={false}
-      leftComponent={
-        <>
-          <StyledIcon>{viewIcon}</StyledIcon>
-          {viewName}
-        </>
-      }
-      rightComponent={
-        <>
-          <FilterDropdownButton
+    <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+      <TopBar
+        displayBottomBorder={false}
+        leftComponent={
+          <>
+            <StyledIcon>{viewIcon}</StyledIcon>
+            {viewName}
+          </>
+        }
+        rightComponent={
+          <>
+            <FilterDropdownButton
+              context={context}
+              HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+            />
+            <SortDropdownButton<SortField>
+              context={context}
+              isSortSelected={sorts.length > 0}
+              availableSorts={availableSorts || []}
+              onSortSelect={sortSelect}
+              HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+            />
+            <BoardOptionsDropdown
+              customHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
+              onStageAdd={onStageAdd}
+            />
+          </>
+        }
+        bottomComponent={
+          <SortAndFilterBar
             context={context}
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+            sorts={sorts}
+            onRemoveSort={sortUnselect}
+            onCancelClick={() => {
+              innerSetSorts([]);
+              onSortsUpdate?.([]);
+            }}
           />
-          <SortDropdownButton<SortField>
-            context={context}
-            isSortSelected={sorts.length > 0}
-            availableSorts={availableSorts || []}
-            onSortSelect={sortSelect}
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-          />
-        </>
-      }
-      bottomComponent={
-        <SortAndFilterBar
-          context={context}
-          sorts={sorts}
-          onRemoveSort={sortUnselect}
-          onCancelClick={() => {
-            innerSetSorts([]);
-            onSortsUpdate && onSortsUpdate([]);
-          }}
-        />
-      }
-    />
+        }
+      />
+    </RecoilScope>
   );
 }
 

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

@@ -1,14 +1,32 @@
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
+import type { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+
+import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
+import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
 
 import { BoardOptionsDropdownButton } from './BoardOptionsDropdownButton';
 import { BoardOptionsDropdownContent } from './BoardOptionsDropdownContent';
 
-export function BoardOptionsDropdown() {
+type BoardOptionsDropdownProps = {
+  customHotkeyScope: HotkeyScope;
+  onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
+};
+
+export function BoardOptionsDropdown({
+  customHotkeyScope,
+  onStageAdd,
+}: BoardOptionsDropdownProps) {
   return (
     <DropdownButton
-      dropdownKey="options"
       buttonComponents={<BoardOptionsDropdownButton />}
-      dropdownComponents={<BoardOptionsDropdownContent />}
-    ></DropdownButton>
+      dropdownComponents={
+        <BoardOptionsDropdownContent
+          customHotkeyScope={customHotkeyScope}
+          onStageAdd={onStageAdd}
+        />
+      }
+      dropdownHotkeyScope={customHotkeyScope}
+      dropdownKey={BoardOptionsDropdownKey}
+    />
   );
 }

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

@@ -1,9 +1,11 @@
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 
+import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
+
 export function BoardOptionsDropdownButton() {
   const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
-    key: 'options',
+    key: BoardOptionsDropdownKey,
   });
 
   function handleClick() {

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

@@ -1,54 +1,153 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+import { Key } from 'ts-key-enum';
+import { v4 } from 'uuid';
 
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { IconChevronLeft } from '@/ui/icon';
+import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconLayoutKanban,
+  IconPlus,
+  IconSettings,
+} from '@/ui/icon';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-type BoardOptionsDropdownMenu = 'options' | 'fields';
+import { boardColumnsState } from '../states/boardColumnsState';
+import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
+import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
 
-export function BoardOptionsDropdownContent() {
+type BoardOptionsDropdownContentProps = {
+  customHotkeyScope: HotkeyScope;
+  onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
+};
+
+const StyledIconSettings = styled(IconSettings)`
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledIconChevronRight = styled(IconChevronRight)`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  margin-left: auto;
+`;
+
+enum BoardOptionsMenu {
+  StageCreation = 'StageCreation',
+  Stages = 'Stages',
+}
+
+export function BoardOptionsDropdownContent({
+  customHotkeyScope,
+  onStageAdd,
+}: BoardOptionsDropdownContentProps) {
   const theme = useTheme();
 
-  const [menuShown, setMenuShown] =
-    useState<BoardOptionsDropdownMenu>('options');
+  const stageInputRef = useRef<HTMLInputElement>(null);
 
-  function handleFieldsClick() {
-    setMenuShown('fields');
-  }
+  const [currentMenu, setCurrentMenu] = useState<
+    BoardOptionsMenu | undefined
+  >();
 
-  function handleMenuHeaderClick() {
-    setMenuShown('options');
-  }
+  const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
+
+  const resetMenu = () => setCurrentMenu(undefined);
+
+  const handleStageSubmit = () => {
+    if (
+      currentMenu !== BoardOptionsMenu.StageCreation ||
+      !stageInputRef?.current?.value
+    )
+      return;
+
+    const columnToCreate = {
+      id: v4(),
+      colorCode: 'gray',
+      index: boardColumns.length,
+      title: stageInputRef.current.value,
+    };
+
+    setBoardColumns((previousBoardColumns) => [
+      ...previousBoardColumns,
+      columnToCreate,
+    ]);
+    onStageAdd?.(columnToCreate);
+  };
+
+  const { closeDropdownButton } = useDropdownButton({
+    key: BoardOptionsDropdownKey,
+  });
+
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      closeDropdownButton();
+    },
+    customHotkeyScope.scope,
+  );
+
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      handleStageSubmit();
+      closeDropdownButton();
+    },
+    customHotkeyScope.scope,
+  );
 
   return (
     <StyledDropdownMenu>
-      {menuShown === 'options' ? (
+      {!currentMenu && (
         <>
-          <DropdownMenuHeader>Options</DropdownMenuHeader>
+          <DropdownMenuHeader>
+            <StyledIconSettings size={theme.icon.size.md} />
+            Settings
+          </DropdownMenuHeader>
           <StyledDropdownMenuSeparator />
           <StyledDropdownMenuItemsContainer>
-            <DropdownMenuItem onClick={handleFieldsClick}>
-              Fields
+            <DropdownMenuItem
+              onClick={() => setCurrentMenu(BoardOptionsMenu.Stages)}
+            >
+              <IconLayoutKanban size={theme.icon.size.md} />
+              Stages
+              <StyledIconChevronRight size={theme.icon.size.sm} />
             </DropdownMenuItem>
           </StyledDropdownMenuItemsContainer>
         </>
-      ) : (
-        menuShown === 'fields' && (
-          <>
-            <DropdownMenuHeader
-              startIcon={<IconChevronLeft size={theme.icon.size.md} />}
-              onClick={handleMenuHeaderClick}
+      )}
+      {currentMenu === BoardOptionsMenu.Stages && (
+        <>
+          <DropdownMenuHeader
+            startIcon={<IconChevronLeft size={theme.icon.size.md} />}
+            onClick={resetMenu}
+          >
+            Stages
+          </DropdownMenuHeader>
+          <StyledDropdownMenuSeparator />
+          <StyledDropdownMenuItemsContainer>
+            <DropdownMenuItem
+              onClick={() => setCurrentMenu(BoardOptionsMenu.StageCreation)}
             >
-              Fields
-            </DropdownMenuHeader>
-            <StyledDropdownMenuSeparator />
-            {}
-          </>
-        )
+              <IconPlus size={theme.icon.size.md} />
+              Add stage
+            </DropdownMenuItem>
+          </StyledDropdownMenuItemsContainer>
+        </>
+      )}
+      {currentMenu === BoardOptionsMenu.StageCreation && (
+        <DropdownMenuInput
+          autoFocus
+          placeholder="New stage"
+          ref={stageInputRef}
+        />
       )}
     </StyledDropdownMenu>
   );

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

@@ -30,6 +30,7 @@ import { useSetCardSelected } from '../hooks/useSetCardSelected';
 import { useUpdateBoardCardIds } from '../hooks/useUpdateBoardCardIds';
 import { boardColumnsState } from '../states/boardColumnsState';
 import { BoardColumnRecoilScopeContext } from '../states/recoil-scope-contexts/BoardColumnRecoilScopeContext';
+import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 import { BoardOptions } from '../types/BoardOptions';
 
 import { EntityBoardColumn } from './EntityBoardColumn';
@@ -44,12 +45,14 @@ export function EntityBoard({
   boardOptions,
   updateSorts,
   onEditColumnTitle,
+  onStageAdd,
 }: {
   boardOptions: BoardOptions;
   updateSorts: (
     sorts: Array<SelectedSortType<PipelineProgressOrderByWithRelationInput>>,
   ) => void;
   onEditColumnTitle: (columnId: string, title: string, color: string) => void;
+  onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
 }) {
   const [boardColumns] = useRecoilState(boardColumnsState);
   const setCardSelected = useSetCardSelected();
@@ -130,6 +133,7 @@ export function EntityBoard({
         viewIcon={<IconList size={theme.icon.size.md} />}
         availableSorts={boardOptions.sorts}
         onSortsUpdate={updateSorts}
+        onStageAdd={onStageAdd}
         context={CompanyBoardRecoilScopeContext}
       />
       <ScrollWrapper>

front/src/modules/ui/board/types/BoardOptionsDropdownKey.ts

@@ -0,0 +1 @@
+export const BoardOptionsDropdownKey = 'board-options';

front/src/modules/ui/board/types/BoardOptionsHotkeyScope.ts

@@ -0,0 +1,3 @@
+export enum BoardOptionsHotkeyScope {
+  Dropdown = 'board-options-dropdown',
+}

front/src/modules/ui/icon/index.ts

@@ -41,6 +41,7 @@ export {
   IconHeart,
   IconHelpCircle,
   IconInbox,
+  IconLayoutKanban,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
   IconLayoutSidebarRightExpand,

front/src/pages/opportunities/Opportunities.tsx

@@ -4,6 +4,7 @@ import { useTheme } from '@emotion/react';
 import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
 import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 import { PipelineAddButton } from '@/pipeline/components/PipelineAddButton';
+import { usePipelineStages } from '@/pipeline/hooks/usePipelineStages';
 import { EntityBoard } from '@/ui/board/components/EntityBoard';
 import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar';
 import { EntityBoardContextMenu } from '@/ui/board/components/EntityBoardContextMenu';
@@ -43,6 +44,8 @@ export function Opportunities() {
     [],
   );
 
+  const { handlePipelineStageAdd } = usePipelineStages();
+
   const [updatePipelineStage] = useUpdatePipelineStageMutation();
 
   function handleEditColumnTitle(
@@ -86,6 +89,7 @@ export function Opportunities() {
                 boardOptions={opportunitiesBoardOptions}
                 updateSorts={updateSorts}
                 onEditColumnTitle={handleEditColumnTitle}
+                onStageAdd={handlePipelineStageAdd}
               />
               <EntityBoardActionBar />
               <EntityBoardContextMenu />