Refactor and fixes dropdown bugs (#8807)

Fixes https://github.com/twentyhq/twenty/issues/8788 Fixes https://github.com/twentyhq/twenty/issues/8793 Fixes https://github.com/twentyhq/twenty/issues/8791 Fixes https://github.com/twentyhq/twenty/issues/8890 Fixes https://github.com/twentyhq/twenty/issues/8893 - [x] Also : Icon buttons under dropdown are visible without blur : ![Capture d’écran du 2024-11-29 15-09-53](https://github.com/user-attachments/assets/f563333d-4e43-4ded-acc7-62e116004ed9) - [x] Also : <img width="237" alt="image" src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2"> - [x] Also : <img width="335" alt="image" src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20"> - [x] Also : <img width="287" alt="image" src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a"> - Button create new without padding - Container is expanding - [x] Also : <img width="303" alt="image" src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5"> - [x] Also : <img width="133" alt="image" src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8"> Font is cut at bottom ? - [x] Also : <img width="385" alt="image" src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304"> The component should flip and not resize in this situation - [x] Also : <img width="244" alt="image" src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81"> - [x] Also : ![image](https://github.com/user-attachments/assets/9cd1f43a-df59-401e-9a41-bdb8e93ebe58)
2024-12-06 15:27:48 +01:00
parent 14b7bcf262
commit a9cb20f317
87 changed files with 1201 additions and 1192 deletions
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@ -1,26 +1,19 @@
-import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
 import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
-import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
-import { ClickOutsideMode } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { useRef } from 'react';
-import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
-import { Key } from 'ts-key-enum';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from '~/utils/isDefined';

-import { useRightDrawer } from '../hooks/useRightDrawer';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
-import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';

+import { RIGHT_DRAWER_ANIMATION_VARIANTS } from '@/ui/layout/right-drawer/constants/RightDrawerAnimationVariants';
+import { RightDrawerAnimationVariant } from '@/ui/layout/right-drawer/types/RightDrawerAnimationVariant';
 import { RightDrawerRouter } from './RightDrawerRouter';
-import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';

 const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>`
  background: ${({ theme }) => theme.background.primary};
@ -40,7 +33,7 @@ const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>`

  right: 0;
  top: 0;
-  z-index: 100;
+  z-index: 30;

  .modal-backdrop {
    background: ${({ theme }) => theme.background.overlayTertiary};
@ -56,39 +49,6 @@ const StyledRightDrawer = styled.div`
 export const RightDrawer = () => {
  const theme = useTheme();

-  const animationVariants = {
-    fullScreen: {
-      x: '0%',
-      width: '100%',
-      height: '100%',
-      bottom: '0',
-      top: '0',
-    },
-    normal: {
-      x: '0%',
-      width: theme.rightDrawerWidth,
-      height: '100%',
-      bottom: '0',
-      top: '0',
-    },
-    closed: {
-      x: '100%',
-      width: '0',
-      height: '100%',
-      bottom: '0',
-      top: 'auto',
-    },
-    minimized: {
-      x: '0%',
-      width: 220,
-      height: 41,
-      bottom: '0',
-      top: 'auto',
-    },
-  };
-
-  type RightDrawerAnimationVariant = keyof typeof animationVariants;
-
  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);

  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
@ -99,52 +59,6 @@ export const RightDrawer = () => {

  const rightDrawerPage = useRecoilValue(rightDrawerPageState);

-  const { closeRightDrawer } = useRightDrawer();
-
-  const rightDrawerRef = useRef<HTMLDivElement>(null);
-  const workflowReactFlowRef = useRecoilValue(workflowReactFlowRefState);
-
-  const { useListenClickOutside } = useClickOutsideListener(
-    RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID,
-  );
-
-  useListenClickOutside({
-    refs: [
-      rightDrawerRef,
-      ...(workflowReactFlowRef ? [workflowReactFlowRef] : []),
-    ],
-    callback: useRecoilCallback(
-      ({ snapshot, set }) =>
-        (event) => {
-          const isRightDrawerOpen = snapshot
-            .getLoadable(isRightDrawerOpenState)
-            .getValue();
-          const isRightDrawerMinimized = snapshot
-            .getLoadable(isRightDrawerMinimizedState)
-            .getValue();
-
-          if (isRightDrawerOpen && !isRightDrawerMinimized) {
-            set(rightDrawerCloseEventState, event);
-
-            closeRightDrawer();
-          }
-        },
-      [closeRightDrawer],
-    ),
-    mode: ClickOutsideMode.comparePixels,
-  });
-
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
-      if (isRightDrawerOpen && !isRightDrawerMinimized) {
-        closeRightDrawer();
-      }
-    },
-    RightDrawerHotkeyScope.RightDrawer,
-    [isRightDrawerOpen, isRightDrawerMinimized],
-  );
-
  const isMobile = useIsMobile();

  const targetVariantForAnimation: RightDrawerAnimationVariant =
@ -168,13 +82,13 @@ export const RightDrawer = () => {
    <StyledContainer
      isRightDrawerMinimized={isRightDrawerMinimized}
      animate={targetVariantForAnimation}
-      variants={animationVariants}
+      variants={RIGHT_DRAWER_ANIMATION_VARIANTS}
      transition={{
        duration: theme.animation.duration.normal,
      }}
      onAnimationComplete={handleAnimationComplete}
    >
-      <StyledRightDrawer ref={rightDrawerRef}>
+      <StyledRightDrawer>
        {isRightDrawerOpen && <RightDrawerRouter />}
      </StyledRightDrawer>
    </StyledContainer>
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx
@ -0,0 +1,83 @@
+import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
+import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import {
+  ClickOutsideMode,
+  useListenClickOutside,
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
+import styled from '@emotion/styled';
+import { useRef } from 'react';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+const StyledRightDrawerPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+
+export const RightDrawerContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const rightDrawerRef = useRef<HTMLDivElement>(null);
+
+  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
+
+  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
+
+  const { closeRightDrawer } = useRightDrawer();
+
+  const workflowReactFlowRef = useRecoilValue(workflowReactFlowRefState);
+
+  useListenClickOutside({
+    refs: [
+      rightDrawerRef,
+      ...(workflowReactFlowRef ? [workflowReactFlowRef] : []),
+    ],
+    listenerId: RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID,
+    callback: useRecoilCallback(
+      ({ snapshot, set }) =>
+        (event) => {
+          const isRightDrawerOpen = snapshot
+            .getLoadable(isRightDrawerOpenState)
+            .getValue();
+          const isRightDrawerMinimized = snapshot
+            .getLoadable(isRightDrawerMinimizedState)
+            .getValue();
+
+          if (isRightDrawerOpen && !isRightDrawerMinimized) {
+            set(rightDrawerCloseEventState, event);
+
+            closeRightDrawer();
+          }
+        },
+      [closeRightDrawer],
+    ),
+    mode: ClickOutsideMode.comparePixels,
+  });
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => {
+      if (isRightDrawerOpen && !isRightDrawerMinimized) {
+        closeRightDrawer();
+      }
+    },
+    RightDrawerHotkeyScope.RightDrawer,
+    [isRightDrawerOpen, isRightDrawerMinimized],
+  );
+
+  return (
+    <StyledRightDrawerPage ref={rightDrawerRef}>
+      {children}
+    </StyledRightDrawerPage>
+  );
+};
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
@ -7,22 +7,16 @@ import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/compone
 import { RightDrawerRecord } from '@/object-record/record-right-drawer/components/RightDrawerRecord';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';

+import { RightDrawerContainer } from '@/ui/layout/right-drawer/components/RightDrawerContainer';
 import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
 import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
 import { RightDrawerWorkflowEditStep } from '@/workflow/components/RightDrawerWorkflowEditStep';
 import { RightDrawerWorkflowSelectAction } from '@/workflow/components/RightDrawerWorkflowSelectAction';
+import { RightDrawerWorkflowSelectTriggerType } from '@/workflow/components/RightDrawerWorkflowSelectTriggerType';
 import { RightDrawerWorkflowViewStep } from '@/workflow/components/RightDrawerWorkflowViewStep';
 import { isDefined } from 'twenty-ui';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
-import { RightDrawerWorkflowSelectTriggerType } from '@/workflow/components/RightDrawerWorkflowSelectTriggerType';
-
-const StyledRightDrawerPage = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-`;

 const StyledRightDrawerBody = styled.div`
  display: flex;
@ -61,13 +55,13 @@ export const RightDrawerRouter = () => {
  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);

  return (
-    <StyledRightDrawerPage>
+    <RightDrawerContainer>
      <RightDrawerTopBar />
      {!isRightDrawerMinimized && (
        <StyledRightDrawerBody>
          {rightDrawerPageComponent}
        </StyledRightDrawerBody>
      )}
-    </StyledRightDrawerPage>
+    </RightDrawerContainer>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerAnimationVariants.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerAnimationVariants.ts
@ -0,0 +1,32 @@
+import { THEME_COMMON } from 'twenty-ui';
+
+export const RIGHT_DRAWER_ANIMATION_VARIANTS = {
+  fullScreen: {
+    x: '0%',
+    width: '100%',
+    height: '100%',
+    bottom: '0',
+    top: '0',
+  },
+  normal: {
+    x: '0%',
+    width: THEME_COMMON.rightDrawerWidth,
+    height: '100%',
+    bottom: '0',
+    top: '0',
+  },
+  closed: {
+    x: '100%',
+    width: '0',
+    height: '100%',
+    bottom: '0',
+    top: 'auto',
+  },
+  minimized: {
+    x: '0%',
+    width: 220,
+    height: 41,
+    bottom: '0',
+    top: 'auto',
+  },
+};
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerAnimationVariant.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerAnimationVariant.ts
@ -0,0 +1,4 @@
+import { RIGHT_DRAWER_ANIMATION_VARIANTS } from '@/ui/layout/right-drawer/constants/RightDrawerAnimationVariants';
+
+export type RightDrawerAnimationVariant =
+  keyof typeof RIGHT_DRAWER_ANIMATION_VARIANTS;