From 795bead1bb9566e75b5914e4116d4283ad4a66b8 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Sun, 9 Jul 2023 03:43:41 +0200
Subject: [PATCH] Fix/relation picker (#546)

* FIx pickers

* Fix

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../pipeline-progress/components/NewButton.tsx      |  8 ++++++++
 .../relation-picker/hooks/useEntitySelectScroll.ts  |  3 ++-
 .../table/table-header/FilterDropdownButton.tsx     |  5 +++++
 .../layout/right-drawer/components/RightDrawer.tsx  |  7 -------
 .../modules/ui/tables/hooks/useLeaveTableFocus.ts   | 13 +++++++++++++
 server/src/core/auth/dto/challenge.input.ts         |  2 +-
 6 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/front/src/modules/pipeline-progress/components/NewButton.tsx b/front/src/modules/pipeline-progress/components/NewButton.tsx
index d7c3d8bfb..e138fd961 100644
--- a/front/src/modules/pipeline-progress/components/NewButton.tsx
+++ b/front/src/modules/pipeline-progress/components/NewButton.tsx
@@ -2,6 +2,8 @@ import { useCallback, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
+import { useHotkeysScopeOnBooleanState } from '@/hotkeys/hooks/useHotkeysScopeOnBooleanState';
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
 import { Column } from '@/ui/board/components/Board';
 import { NewButton as UINewButton } from '@/ui/board/components/NewButton';
@@ -71,6 +73,12 @@ export function NewButton({ pipelineId, columnId }: OwnProps) {
   const onNewClick = useCallback(() => {
     setIsCreatingCard(true);
   }, [setIsCreatingCard]);
+
+  useHotkeysScopeOnBooleanState(
+    { scope: InternalHotkeysScope.RelationPicker },
+    isCreatingCard,
+  );
+
   return (
     <>
       {isCreatingCard && (
diff --git a/front/src/modules/relation-picker/hooks/useEntitySelectScroll.ts b/front/src/modules/relation-picker/hooks/useEntitySelectScroll.ts
index 4becc4562..c17ae9790 100644
--- a/front/src/modules/relation-picker/hooks/useEntitySelectScroll.ts
+++ b/front/src/modules/relation-picker/hooks/useEntitySelectScroll.ts
@@ -60,9 +60,10 @@ export function useEntitySelectScroll<
       ] as HTMLElement;
 
       if (currentHoveredRef) {
+        console.log({ currentHoveredRef, containerRef });
         scrollIntoView(currentHoveredRef, {
           align: {
-            top: 0.275,
+            top: 0.15,
           },
           isScrollable: (target) => {
             return target === containerRef.current;
diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
index 164e0277d..0fb171e5f 100644
--- a/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
+++ b/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
@@ -80,6 +80,11 @@ export function FilterDropdownButton() {
     }
   }
 
+  useHotkeysScopeOnBooleanState(
+    { scope: InternalHotkeysScope.RelationPicker },
+    tableFilterDefinitionUsedInDropdown?.type === 'entity',
+  );
+
   return (
     <DropdownButton
       label="Filter"
diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
index b08461f6e..4589e9d3d 100644
--- a/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
+++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
-import { useHotkeysScopeOnBooleanState } from '@/hotkeys/hooks/useHotkeysScopeOnBooleanState';
-import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { isDefined } from '@/utils/type-guards/isDefined';
 
 import { Panel } from '../../Panel';
@@ -21,11 +19,6 @@ export function RightDrawer() {
   const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
 
-  useHotkeysScopeOnBooleanState(
-    { scope: InternalHotkeysScope.RightDrawer },
-    isRightDrawerOpen,
-  );
-
   if (!isRightDrawerOpen || !isDefined(rightDrawerPage)) {
     return <></>;
   }
diff --git a/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts b/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts
index abc58fb9a..9bf5c61d4 100644
--- a/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts
+++ b/front/src/modules/ui/tables/hooks/useLeaveTableFocus.ts
@@ -1,7 +1,12 @@
+import { useRecoilValue } from 'recoil';
+
 import { useCurrentHotkeysScope } from '@/hotkeys/hooks/useCurrentHotkeysScope';
 import { useResetHotkeysScopeStack } from '@/hotkeys/hooks/useResetHotkeysScopeStack';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 
+import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
+import { isSomeInputInEditModeState } from '../states/isSomeInputInEditModeState';
+
 import { useCloseCurrentCellInEditMode } from './useClearCellInEditMode';
 import { useDisableSoftFocus } from './useDisableSoftFocus';
 
@@ -12,7 +17,15 @@ export function useLeaveTableFocus() {
   const disableSoftFocus = useDisableSoftFocus();
   const closeCurrentCellInEditMode = useCloseCurrentCellInEditMode();
 
+  const isSoftFocusActive = useRecoilValue(isSoftFocusActiveState);
+  const isSomeInputInEditMode = useRecoilValue(isSomeInputInEditModeState);
+
   return async function leaveTableFocus() {
+    // TODO: replace with scope ancestor ?
+    if (!isSoftFocusActive && !isSomeInputInEditMode) {
+      return;
+    }
+
     if (currentHotkeysScope?.scope === InternalHotkeysScope.Table) {
       return;
     }
diff --git a/server/src/core/auth/dto/challenge.input.ts b/server/src/core/auth/dto/challenge.input.ts
index cf012d729..8c6dc82f0 100644
--- a/server/src/core/auth/dto/challenge.input.ts
+++ b/server/src/core/auth/dto/challenge.input.ts
@@ -1,5 +1,5 @@
 import { ArgsType, Field } from '@nestjs/graphql';
-import { IsEmail, IsNotEmpty, IsString, MinLength } from 'class-validator';
+import { IsEmail, IsNotEmpty, IsString } from 'class-validator';
 
 @ArgsType()
 export class ChallengeInput {