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/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}>