Feat/add opportunity (#1267)

* Renamed AuthAutoRouter

* Moved RecoilScope

* Refactored old WithTopBarContainer to make it less transclusive

* Created new add opportunity button and refactored DropdownButton

* Added tests

* Update front/src/modules/companies/components/CompanyProgressPicker.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/modules/companies/components/CompanyProgressPicker.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/modules/companies/components/CompanyProgressPicker.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/modules/companies/components/CompanyProgressPicker.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/modules/ui/dropdown/components/DropdownButton.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/modules/ui/dropdown/components/DropdownButton.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/modules/ui/dropdown/components/DropdownButton.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/modules/ui/layout/components/PageHeader.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Update front/src/pages/opportunities/Opportunities.tsx

Co-authored-by: Thaïs <guigon.thais@gmail.com>

* Fix lint

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Thaïs <guigon.thais@gmail.com>

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

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 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';
@@ -12,7 +14,7 @@ export type OwnProps = {
 };
 
 export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
-  const [searchFilter] = useRecoilScopedState(
+  const [searchFilter, setSearchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
 
@@ -27,6 +29,10 @@ export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
     onSubmit(selectedCompany ?? null);
   }
 
+  useEffect(() => {
+    setSearchFilter('');
+  }, [setSearchFilter]);
+
   return (
     <SingleEntitySelect
       onEntitySelected={handleEntitySelected}

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

@@ -0,0 +1,146 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import { useRecoilState } from 'recoil';
+
+import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+import { IconChevronDown } from '@/ui/icon';
+import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
+import { useEntitySelectSearch } from '@/ui/input/relation-picker/hooks/useEntitySelectSearch';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
+
+export type OwnProps = {
+  companyId: string | null;
+  onSubmit: (
+    newCompanyId: EntityForSelect | null,
+    newPipelineStageId: string | null,
+  ) => void;
+  onCancel?: () => void;
+};
+
+export function CompanyProgressPicker({
+  companyId,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
+
+  const companies = useFilteredSearchCompanyQuery({
+    searchFilter,
+    selectedIds: companyId ? [companyId] : [],
+  });
+
+  const [isProgressSelectionUnfolded, setIsProgressSelectionUnfolded] =
+    useState(false);
+
+  const [selectedPipelineStageId, setSelectedPipelineStageId] = useState<
+    string | null
+  >(null);
+
+  useListenClickOutside({
+    refs: [containerRef],
+    callback: (event) => {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      event.preventDefault();
+
+      onCancel?.();
+    },
+  });
+
+  const theme = useTheme();
+
+  const [currentPipeline] = useRecoilState(currentPipelineState);
+
+  const currentPipelineStages = useMemo(
+    () => currentPipeline?.pipelineStages ?? [],
+    [currentPipeline],
+  );
+
+  function handlePipelineStageChange(newPipelineStageId: string) {
+    setSelectedPipelineStageId(newPipelineStageId);
+    setIsProgressSelectionUnfolded(false);
+  }
+
+  async function handleEntitySelected(
+    selectedCompany: EntityForSelect | null | undefined,
+  ) {
+    onSubmit(selectedCompany ?? null, selectedPipelineStageId);
+  }
+
+  useEffect(() => {
+    if (currentPipelineStages?.[0]?.id) {
+      setSelectedPipelineStageId(currentPipelineStages?.[0]?.id);
+    }
+  }, [currentPipelineStages]);
+
+  const selectedPipelineStage = useMemo(
+    () =>
+      currentPipelineStages.find(
+        (pipelineStage) => pipelineStage.id === selectedPipelineStageId,
+      ),
+    [currentPipelineStages, selectedPipelineStageId],
+  );
+
+  return (
+    <DropdownMenu
+      ref={containerRef}
+      data-testid={`company-progress-dropdown-menu`}
+    >
+      {isProgressSelectionUnfolded ? (
+        <DropdownMenuItemsContainer>
+          {currentPipelineStages.map((pipelineStage, index) => (
+            <DropdownMenuItem
+              key={pipelineStage.id}
+              data-testid={`select-pipeline-stage-${index}`}
+              onClick={() => {
+                handlePipelineStageChange(pipelineStage.id);
+              }}
+            >
+              {pipelineStage.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuItemsContainer>
+      ) : (
+        <>
+          <DropdownMenuHeader
+            data-testid="selected-pipeline-stage"
+            endIcon={<IconChevronDown size={theme.icon.size.md} />}
+            onClick={() => setIsProgressSelectionUnfolded(true)}
+          >
+            {selectedPipelineStage?.name}
+          </DropdownMenuHeader>
+          <DropdownMenuSeparator />
+          <DropdownMenuInput
+            value={searchFilter}
+            onChange={handleSearchFilterChange}
+            autoFocus
+          />
+          <DropdownMenuSeparator />
+          <RecoilScope>
+            <SingleEntitySelectBase
+              onEntitySelected={handleEntitySelected}
+              onCancel={onCancel}
+              entities={{
+                loading: companies.loading,
+                entitiesToSelect: companies.entitiesToSelect,
+                selectedEntity: companies.selectedEntities[0],
+              }}
+            />
+          </RecoilScope>
+        </>
+      )}
+    </DropdownMenu>
+  );
+}

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

@@ -1,75 +1,45 @@
 import { useCallback, useContext, useState } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilCallback, useRecoilState } from 'recoil';
-import { v4 as uuidv4 } from 'uuid';
 
-import { GET_PIPELINE_PROGRESS } from '@/pipeline/graphql/queries/getPipelineProgress';
-import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
-import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
 import { NewButton } from '@/ui/board/components/NewButton';
 import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext';
-import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { useCreateOneCompanyPipelineProgressMutation } from '~/generated/graphql';
 
+import { useCreateCompanyProgress } from '../hooks/useCreateCompanyProgress';
 import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
 
 export function NewCompanyProgressButton() {
   const [isCreatingCard, setIsCreatingCard] = useState(false);
-  const [pipeline] = useRecoilState(currentPipelineState);
   const pipelineStageId = useContext(BoardColumnIdContext);
 
+  const { enqueueSnackBar } = useSnackBar();
+
   const {
     goBackToPreviousHotkeyScope,
     setHotkeyScopeAndMemorizePreviousScope,
   } = usePreviousHotkeyScope();
 
-  const [createOneCompanyPipelineProgress] =
-    useCreateOneCompanyPipelineProgressMutation({
-      refetchQueries: [
-        getOperationName(GET_PIPELINE_PROGRESS) ?? '',
-        getOperationName(GET_PIPELINES) ?? '',
-      ],
-    });
+  const createCompanyProgress = useCreateCompanyProgress();
 
-  const handleEntitySelect = useRecoilCallback(
-    ({ set }) =>
-      async (company: any) => {
-        if (!company) return;
+  function handleEntitySelect(company: any) {
+    setIsCreatingCard(false);
+    goBackToPreviousHotkeyScope();
 
-        if (!pipelineStageId) throw new Error('pipelineStageId is not defined');
+    if (!pipelineStageId) {
+      enqueueSnackBar('Pipeline stage id is not defined', {
+        variant: 'error',
+      });
 
-        setIsCreatingCard(false);
+      throw new Error('Pipeline stage id is not defined');
+    }
 
-        goBackToPreviousHotkeyScope();
-
-        const newUuid = uuidv4();
-
-        set(boardCardIdsByColumnIdFamilyState(pipelineStageId), (oldValue) => [
-          ...oldValue,
-          newUuid,
-        ]);
-
-        await createOneCompanyPipelineProgress({
-          variables: {
-            uuid: newUuid,
-            pipelineStageId: pipelineStageId,
-            pipelineId: pipeline?.id ?? '',
-            companyId: company.id ?? '',
-          },
-        });
-      },
-    [
-      goBackToPreviousHotkeyScope,
-      createOneCompanyPipelineProgress,
-      pipelineStageId,
-      pipeline?.id,
-    ],
-  );
+    createCompanyProgress(company, pipelineStageId);
+  }
 
   const handleNewClick = useCallback(() => {
     setIsCreatingCard(true);
@@ -89,7 +59,7 @@ export function NewCompanyProgressButton() {
   const companies = useFilteredSearchCompanyQuery({ searchFilter });
 
   return (
-    <>
+    <RecoilScope>
       {isCreatingCard ? (
         <SingleEntitySelect
           onEntitySelected={(value) => handleEntitySelect(value)}
@@ -104,6 +74,6 @@ export function NewCompanyProgressButton() {
       ) : (
         <NewButton onClick={handleNewClick} />
       )}
-    </>
+    </RecoilScope>
   );
 }

front/src/modules/companies/hooks/useCreateCompanyProgress.ts

@@ -0,0 +1,47 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilCallback, useRecoilState } from 'recoil';
+import { v4 } from 'uuid';
+
+import { GET_PIPELINE_PROGRESS } from '@/pipeline/graphql/queries/getPipelineProgress';
+import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
+import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
+import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
+import { useCreateOneCompanyPipelineProgressMutation } from '~/generated/graphql';
+
+export function useCreateCompanyProgress() {
+  const [createOneCompanyPipelineProgress] =
+    useCreateOneCompanyPipelineProgressMutation({
+      refetchQueries: [
+        getOperationName(GET_PIPELINE_PROGRESS) ?? '',
+        getOperationName(GET_PIPELINES) ?? '',
+      ],
+    });
+
+  const [pipeline] = useRecoilState(currentPipelineState);
+
+  return useRecoilCallback(
+    ({ set }) =>
+      async (companyId: string, pipelineStageId: string) => {
+        if (!pipeline?.id) {
+          throw new Error('Pipeline not found');
+        }
+
+        const newUuid = v4();
+
+        set(boardCardIdsByColumnIdFamilyState(pipelineStageId), (oldValue) => [
+          ...oldValue,
+          newUuid,
+        ]);
+
+        await createOneCompanyPipelineProgress({
+          variables: {
+            uuid: newUuid,
+            pipelineStageId: pipelineStageId,
+            pipelineId: pipeline?.id ?? '',
+            companyId: companyId,
+          },
+        });
+      },
+    [createOneCompanyPipelineProgress, pipeline],
+  );
+}

front/src/modules/pipeline/components/PipelineAddButton.tsx

@@ -0,0 +1,79 @@
+import { CompanyProgressPicker } from '@/companies/components/CompanyProgressPicker';
+import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProgress';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { IconButton } from '@/ui/button/components/IconButton';
+import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
+import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { IconPlus } from '@/ui/icon/index';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
+
+export function PipelineAddButton() {
+  const { enqueueSnackBar } = useSnackBar();
+
+  const { closeDropdownButton } = useDropdownButton();
+
+  const createCompanyProgress = useCreateCompanyProgress();
+
+  function handleCompanySelected(
+    selectedCompany: EntityForSelect | null,
+    selectedPipelineStageId: string | null,
+  ) {
+    if (!selectedCompany?.id) {
+      enqueueSnackBar(
+        'There was a problem with the company selection, please retry.',
+        {
+          variant: 'error',
+        },
+      );
+
+      console.error(
+        'There was a problem with the company selection, please retry.',
+      );
+      return;
+    }
+
+    if (!selectedPipelineStageId) {
+      enqueueSnackBar(
+        'There was a problem with the pipeline stage selection, please retry.',
+        {
+          variant: 'error',
+        },
+      );
+
+      console.error('There was a problem with the pipeline stage selection.');
+      return;
+    }
+
+    createCompanyProgress(selectedCompany.id, selectedPipelineStageId);
+  }
+
+  return (
+    <DropdownButton
+      buttonComponents={
+        <IconButton
+          icon={<IconPlus size={16} />}
+          size="large"
+          data-testid="add-company-progress-button"
+          textColor={'secondary'}
+          variant="border"
+        />
+      }
+      dropdownComponents={
+        <CompanyProgressPicker
+          companyId={null}
+          onSubmit={handleCompanySelected}
+          onCancel={closeDropdownButton}
+        />
+      }
+      hotkey={{
+        key: 'c',
+        scope: PageHotkeyScope.OpportunitiesPage,
+      }}
+      dropdownScopeToSet={{
+        scope: RelationPickerHotkeyScope.RelationPicker,
+      }}
+    />
+  );
+}

front/src/modules/ui/button/components/DropdownButton_Deprecated.tsx

@@ -76,7 +76,7 @@ const StyledDropdownMenu = styled.div`
   width: 100%;
 `;
 
-export function DropdownButton({
+export function DropdownButton_Deprecated({
   options,
   selectedOptionKey,
   onSelection,

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -0,0 +1,58 @@
+import { Keys } from 'react-hotkeys-hook';
+import styled from '@emotion/styled';
+import { flip, offset, useFloating } from '@floating-ui/react';
+
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+
+import { useDropdownButton } from '../hooks/useDropdownButton';
+
+import { HotkeyEffect } from './HotkeyEffect';
+
+const StyledContainer = styled.div`
+  position: relative;
+  z-index: 100;
+`;
+
+type OwnProps = {
+  buttonComponents: JSX.Element | JSX.Element[];
+  dropdownComponents: JSX.Element | JSX.Element[];
+  hotkey?: {
+    key: Keys;
+    scope: string;
+  };
+  dropdownScopeToSet?: HotkeyScope;
+};
+
+export function DropdownButton({
+  buttonComponents,
+  dropdownComponents,
+  hotkey,
+  dropdownScopeToSet,
+}: OwnProps) {
+  const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton();
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'bottom-end',
+    middleware: [flip(), offset()],
+  });
+
+  function handleButtonClick() {
+    toggleDropdownButton(dropdownScopeToSet);
+  }
+
+  return (
+    <StyledContainer>
+      {hotkey && (
+        <HotkeyEffect hotkey={hotkey} onHotkeyTriggered={handleButtonClick} />
+      )}
+      <div ref={refs.setReference} onClick={handleButtonClick}>
+        {buttonComponents}
+      </div>
+      {isDropdownButtonOpen && (
+        <div ref={refs.setFloating} style={floatingStyles}>
+          {dropdownComponents}
+        </div>
+      )}
+    </StyledContainer>
+  );
+}

front/src/modules/ui/dropdown/components/HotkeyEffect.tsx

@@ -0,0 +1,19 @@
+import { Keys } from 'react-hotkeys-hook';
+
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+
+type OwnProps = {
+  hotkey: {
+    key: Keys;
+    scope: string;
+  };
+  onHotkeyTriggered: () => void;
+};
+
+export function HotkeyEffect({ hotkey, onHotkeyTriggered }: OwnProps) {
+  useScopedHotkeys(hotkey.key, () => onHotkeyTriggered(), hotkey.scope, [
+    onHotkeyTriggered,
+  ]);
+
+  return <></>;
+}

front/src/modules/ui/dropdown/hooks/useDropdownButton.ts

@@ -0,0 +1,47 @@
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+
+import { isDropdownButtonOpenScopedState } from '../states/isDropdownButtonOpenScopedState';
+
+export function useDropdownButton() {
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  const [isDropdownButtonOpen, setIsDropdownButtonOpen] = useRecoilScopedState(
+    isDropdownButtonOpenScopedState,
+  );
+
+  function closeDropdownButton() {
+    goBackToPreviousHotkeyScope();
+    setIsDropdownButtonOpen(false);
+  }
+
+  function openDropdownButton(hotkeyScopeToSet?: HotkeyScope) {
+    setIsDropdownButtonOpen(true);
+
+    if (hotkeyScopeToSet) {
+      setHotkeyScopeAndMemorizePreviousScope(
+        hotkeyScopeToSet.scope,
+        hotkeyScopeToSet.customScopes,
+      );
+    }
+  }
+
+  function toggleDropdownButton(hotkeyScopeToSet?: HotkeyScope) {
+    if (isDropdownButtonOpen) {
+      closeDropdownButton();
+    } else {
+      openDropdownButton(hotkeyScopeToSet);
+    }
+  }
+
+  return {
+    isDropdownButtonOpen,
+    closeDropdownButton,
+    toggleDropdownButton,
+    openDropdownButton,
+  };
+}

front/src/modules/ui/dropdown/states/isDropdownButtonOpenScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const isDropdownButtonOpenScopedState = atomFamily<boolean, string>({
+  key: 'isDropdownButtonOpenScopedState',
+  default: false,
+});

front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx

@@ -27,8 +27,11 @@ export function FilterDropdownButton({
     availableFiltersScopedState,
     context,
   );
-  return availableFilters.length === 1 &&
-    availableFilters[0].type === 'entity' ? (
+
+  const hasOnlyOneEntityFilter =
+    availableFilters.length === 1 && availableFilters[0].type === 'entity';
+
+  return hasOnlyOneEntityFilter ? (
     <SingleEntityFilterDropdownButton
       context={context}
       HotkeyScope={HotkeyScope}

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import debounce from 'lodash.debounce';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -25,6 +26,10 @@ export function useEntitySelectSearch() {
     setHoveredIndex(0);
   }
 
+  useEffect(() => {
+    setSearchFilter('');
+  }, [setSearchFilter]);
+
   return {
     searchFilter,
     handleSearchFilterChange,

front/src/modules/ui/layout/components/PageBody.tsx

@@ -0,0 +1,15 @@
+import { PAGE_BAR_MIN_HEIGHT } from '../page-bar/components/PageBar';
+
+import { RightDrawerContainer } from './RightDrawerContainer';
+
+type OwnProps = {
+  children: JSX.Element | JSX.Element[];
+};
+
+export function PageBody({ children }: OwnProps) {
+  return (
+    <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
+      {children}
+    </RightDrawerContainer>
+  );
+}

front/src/modules/ui/layout/components/PageContainer.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: JSX.Element | JSX.Element[];
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export function PageContainer({ children }: OwnProps) {
+  return <StyledContainer>{children}</StyledContainer>;
+}

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -0,0 +1,109 @@
+import { ReactNode, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { IconButton } from '@/ui/button/components/IconButton';
+import { IconChevronLeft } from '@/ui/icon/index';
+import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
+import { navbarIconSize } from '@/ui/navbar/constants';
+import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
+
+export const PAGE_BAR_MIN_HEIGHT = 40;
+
+const StyledTopBarContainer = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.noisy};
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-direction: row;
+  font-size: ${({ theme }) => theme.font.size.lg};
+  justify-content: space-between;
+  min-height: ${PAGE_BAR_MIN_HEIGHT}px;
+  padding: ${({ theme }) => theme.spacing(2)};
+  padding-left: 0;
+  padding-right: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledLeftContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`;
+
+const StyledTitleContainer = styled.div`
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  max-width: 50%;
+`;
+
+const StyledTopBarButtonContainer = styled.div`
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledBackIconButton = styled(IconButton)`
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTopBarIconStyledTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+const StyledPageActionContainer = styled.div`
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+type OwnProps = {
+  title: string;
+  hasBackButton?: boolean;
+  icon: ReactNode;
+  children: JSX.Element | JSX.Element[];
+};
+
+export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) {
+  const navigate = useNavigate();
+  const navigateBack = useCallback(() => navigate(-1), [navigate]);
+
+  const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
+
+  const iconSize = useIsMobile()
+    ? navbarIconSize.mobile
+    : navbarIconSize.desktop;
+
+  return (
+    <StyledTopBarContainer>
+      <StyledLeftContainer>
+        {!isNavbarOpened && (
+          <StyledTopBarButtonContainer>
+            <NavCollapseButton direction="right" />
+          </StyledTopBarButtonContainer>
+        )}
+        {hasBackButton && (
+          <StyledTopBarButtonContainer>
+            <StyledBackIconButton
+              icon={<IconChevronLeft size={iconSize} />}
+              onClick={navigateBack}
+            />
+          </StyledTopBarButtonContainer>
+        )}
+        <StyledTopBarIconStyledTitleContainer>
+          {icon}
+          <StyledTitleContainer data-testid="top-bar-title">
+            <OverflowingTextWithTooltip text={title} />
+          </StyledTitleContainer>
+        </StyledTopBarIconStyledTitleContainer>
+      </StyledLeftContainer>
+      <StyledPageActionContainer>{children}</StyledPageActionContainer>
+    </StyledTopBarContainer>
+  );
+}

front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts

@@ -1,38 +1,46 @@
-import { useState } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 import { currentHotkeyScopeState } from '../states/internal/currentHotkeyScopeState';
+import { previousHotkeyScopeState } from '../states/internal/previousHotkeyScopeState';
 import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
-import { HotkeyScope } from '../types/HotkeyScope';
 
 import { useSetHotkeyScope } from './useSetHotkeyScope';
 
 export function usePreviousHotkeyScope() {
-  const [previousHotkeyScope, setPreviousHotkeyScope] =
-    useState<HotkeyScope | null>();
-
   const setHotkeyScope = useSetHotkeyScope();
 
-  function goBackToPreviousHotkeyScope() {
-    if (previousHotkeyScope) {
-      setHotkeyScope(
-        previousHotkeyScope.scope,
-        previousHotkeyScope.customScopes,
-      );
-    }
-  }
+  const goBackToPreviousHotkeyScope = useRecoilCallback(
+    ({ snapshot, set }) =>
+      () => {
+        const previousHotkeyScope = snapshot
+          .getLoadable(previousHotkeyScopeState)
+          .valueOrThrow();
+
+        if (!previousHotkeyScope) {
+          return;
+        }
+
+        setHotkeyScope(
+          previousHotkeyScope.scope,
+          previousHotkeyScope.customScopes,
+        );
+
+        set(previousHotkeyScopeState, null);
+      },
+    [],
+  );
 
   const setHotkeyScopeAndMemorizePreviousScope = useRecoilCallback(
-    ({ snapshot }) =>
+    ({ snapshot, set }) =>
       (scope: string, customScopes?: CustomHotkeyScopes) => {
         const currentHotkeyScope = snapshot
           .getLoadable(currentHotkeyScopeState)
           .valueOrThrow();
 
         setHotkeyScope(scope, customScopes);
-        setPreviousHotkeyScope(currentHotkeyScope);
+        set(previousHotkeyScopeState, currentHotkeyScope);
       },
-    [setPreviousHotkeyScope],
+    [],
   );
 
   return {

front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { HotkeyScope } from '../../types/HotkeyScope';
+
+export const previousHotkeyScopeState = atom<HotkeyScope | null>({
+  key: 'previousHotkeyScopeState',
+  default: null,
+});

front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx

@@ -12,7 +12,7 @@ export function RecoilScope({
   scopeId?: string;
   SpecificContext?: Context<string | null>;
 }) {
-  const currentScopeId = useRef(scopeId || v4());
+  const currentScopeId = useRef(scopeId ?? v4());
 
   return SpecificContext ? (
     <SpecificContext.Provider value={currentScopeId.current}>