fix: hidden settings menu affects settings layout (#7769)

This PR fixes #6746 --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Oct 21, 2024 · 5e2df81 · 5e2df81
1 parent 4407b1a
commit 5e2df81
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 37 deletions.
diff --git a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
@@ -1,6 +1,6 @@
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { CommandMenuEffect } from '@/app/effect-components/CommandMenuEffect';
-import { GotoHotkeys } from '@/app/effect-components/GotoHotkeysEffect';
+import { GotoHotkeysEffectsProvider } from '@/app/effect-components/GotoHotkeysEffectsProvider';
 import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect';
 import { AuthProvider } from '@/auth/components/AuthProvider';
 import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarEffect';
@@ -45,7 +45,7 @@ export const AppRouterProviders = () => {
                             <StrictMode>
                               <PromiseRejectionEffect />
                               <CommandMenuEffect />
-                              <GotoHotkeys />
+                              <GotoHotkeysEffectsProvider />
                               <PageTitle title={pageTitle} />
                               <Outlet />
                             </StrictMode>

diff --git a/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/GoToHotkeyItemEffect.tsx
@@ -6,7 +6,7 @@ export const GoToHotkeyItemEffect = (props: {
 }) => {
   const { hotkey, pathToNavigateTo } = props;
 
-  useGoToHotkeys(hotkey, pathToNavigateTo);
+  useGoToHotkeys({ key: hotkey, location: pathToNavigateTo });
 
   return <></>;
 };
diff --git a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffect.tsx
diff --git a/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx b/packages/twenty-front/src/modules/app/effect-components/GotoHotkeysEffectsProvider.tsx
@@ -0,0 +1,37 @@
+import { GoToHotkeyItemEffect } from '@/app/effect-components/GoToHotkeyItemEffect';
+import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys';
+import { useLocation } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
+
+export const GotoHotkeysEffectsProvider = () => {
+  const { nonSystemActiveObjectMetadataItems } =
+    useNonSystemActiveObjectMetadataItems();
+
+  const location = useLocation();
+
+  useGoToHotkeys({
+    key: 's',
+    location: '/settings/profile',
+    preNavigateFunction: useRecoilCallback(
+      ({ set }) =>
+        () => {
+          set(isNavigationDrawerExpandedState, true);
+          set(navigationDrawerExpandedMemorizedState, true);
+          set(navigationMemorizedUrlState, location.pathname + location.search);
+        },
+      [location.pathname, location.search],
+    ),
+  });
+
+  return nonSystemActiveObjectMetadataItems.map((objectMetadataItem) => (
+    <GoToHotkeyItemEffect
+      key={`go-to-hokey-item-${objectMetadataItem.id}`}
+      hotkey={objectMetadataItem.namePlural[0]}
+      pathToNavigateTo={`/objects/${objectMetadataItem.namePlural}`}
+    />
+  ));
+};
diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
@@ -9,13 +8,11 @@ import {
   NavigationDrawerProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 
 import { AdvancedSettingsToggle } from '@/ui/navigation/link/components/AdvancedSettingsToggle';
-import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { MainNavigationDrawerItems } from './MainNavigationDrawerItems';
 
 export type AppNavigationDrawerProps = {
@@ -25,11 +22,8 @@ export type AppNavigationDrawerProps = {
 export const AppNavigationDrawer = ({
   className,
 }: AppNavigationDrawerProps) => {
-  const isMobile = useIsMobile();
   const isSettingsDrawer = useIsSettingsDrawer();
-  const setIsNavigationDrawerExpanded = useSetRecoilState(
-    isNavigationDrawerExpandedState,
-  );
+
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const drawerProps: NavigationDrawerProps = isSettingsDrawer
@@ -48,10 +42,6 @@ export const AppNavigationDrawer = ({
         footer: <SupportDropdown />,
       };
 
-  useEffect(() => {
-    setIsNavigationDrawerExpanded(!isMobile);
-  }, [isMobile, setIsNavigationDrawerExpanded]);
-
   return (
     <NavigationDrawer
       className={className}

diff --git a/...ages/twenty-front/src/modules/ui/utilities/hotkey/hooks/__tests__/useGoToHotkeys.test.tsx b/...ages/twenty-front/src/modules/ui/utilities/hotkey/hooks/__tests__/useGoToHotkeys.test.tsx
@@ -1,6 +1,6 @@
+import { fireEvent, renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import { fireEvent, renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -23,7 +23,7 @@ const renderHookConfig = {
 describe('useGoToHotkeys', () => {
   it('should navigate on hotkey trigger', () => {
     const { result } = renderHook(() => {
-      useGoToHotkeys('a', '/three');
+      useGoToHotkeys({ key: 'a', location: '/three' });
 
       const setHotkeyScope = useSetHotkeyScope();
 

diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts
@@ -5,13 +5,24 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope';
 
 import { useSequenceHotkeys } from './useSequenceScopedHotkeys';
 
-export const useGoToHotkeys = (key: Keys, location: string) => {
+type GoToHotkeysProps = {
+  key: Keys;
+  location: string;
+  preNavigateFunction?: () => void;
+};
+
+export const useGoToHotkeys = ({
+  key,
+  location,
+  preNavigateFunction,
+}: GoToHotkeysProps) => {
   const navigate = useNavigate();
 
   useSequenceHotkeys(
     'g',
     key,
     () => {
+      preNavigateFunction?.();
       navigate(location);
     },
     AppHotkeyScope.Goto,