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/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,
+});