1880 Refactored Dropdown components (#1884)

* updated DropdownButton props

* refactoring in progress

* working but layout is wrong

* fixed bug

* wip on ColumnHeadWithDropdown

* fix bug

* fix bug

* remove unused styled component

* fix z-index bug

* add an optional argument to DropdownMenu to control the offset of the menu

* add an optional argument to DropdownMenu to control the offset of the menu

* modify files after PR comments

* clean the way the offset is handled

* fix lint

front/src/modules/ui/data-table/components/ColumnHead.tsx

@@ -1,18 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-import { EntityTableHeaderOptions } from './EntityTableHeaderOptions';
-
-type OwnProps = {
+type ColumnHeadProps = {
   column: ColumnDefinition<FieldMetadata>;
-  isFirstColumn: boolean;
-  isLastColumn: boolean;
-  primaryColumnKey: string;
 };
 
 const StyledTitle = styled.div`
@@ -41,32 +35,17 @@ const StyledText = styled.span`
   white-space: nowrap;
 `;
 
-export const ColumnHead = ({
-  column,
-  isFirstColumn,
-  isLastColumn,
-  primaryColumnKey,
-}: OwnProps) => {
+export const ColumnHead = ({ column }: ColumnHeadProps) => {
   const theme = useTheme();
 
-  const { openDropdownButton } = useDropdownButton({
-    dropdownId: column.key + '-header',
-  });
-
   return (
     <>
-      <StyledTitle onClick={openDropdownButton}>
+      <StyledTitle>
         <StyledIcon>
           {column.Icon && <column.Icon size={theme.icon.size.md} />}
         </StyledIcon>
         <StyledText>{column.name}</StyledText>
       </StyledTitle>
-      <EntityTableHeaderOptions
-        column={column}
-        isFirstColumn={isFirstColumn}
-        isLastColumn={isLastColumn}
-        primaryColumnKey={primaryColumnKey}
-      />
     </>
   );
 };

front/src/modules/ui/data-table/components/ColumnHeadWithDropdown.tsx

@@ -0,0 +1,38 @@
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+
+import { ColumnDefinition } from '../types/ColumnDefinition';
+
+import { ColumnHead } from './ColumnHead';
+import { TableColumnDropdownMenu } from './TableColumnDropdownMenu';
+
+type ColumnHeadProps = {
+  column: ColumnDefinition<FieldMetadata>;
+  isFirstColumn: boolean;
+  isLastColumn: boolean;
+  primaryColumnKey: string;
+};
+
+export const ColumnHeadWithDropdown = ({
+  column,
+  isFirstColumn,
+  isLastColumn,
+  primaryColumnKey,
+}: ColumnHeadProps) => {
+  return (
+    <DropdownMenu
+      clickableComponent={<ColumnHead column={column} />}
+      dropdownId={column.key + '-header'}
+      dropdownComponents={
+        <TableColumnDropdownMenu
+          column={column}
+          isFirstColumn={isFirstColumn}
+          isLastColumn={isLastColumn}
+          primaryColumnKey={primaryColumnKey}
+        />
+      }
+      dropdownHotkeyScope={{ scope: column.key + '-header' }}
+      dropdownOffset={{ x: 0, y: -8 }}
+    />
+  );
+};

front/src/modules/ui/data-table/components/EntityTableHeader.tsx

@@ -17,7 +17,7 @@ import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumn
 import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
 import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
 
-import { ColumnHead } from './ColumnHead';
+import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
 import { EntityTableColumnMenu } from './EntityTableColumnMenu';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
 
@@ -76,6 +76,11 @@ const StyledTableHead = styled.thead`
   cursor: pointer;
 `;
 
+const StyledColumnHeadContainer = styled.div`
+  position: relative;
+  z-index: 1;
+`;
+
 export const EntityTableHeader = () => {
   const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
     resizeFieldOffsetState,
@@ -183,12 +188,14 @@ export const EntityTableHeader = () => {
                 COLUMN_MIN_WIDTH,
               )}
             >
-              <ColumnHead
-                column={column}
-                isFirstColumn={index === 1}
-                isLastColumn={index === visibleTableColumns.length - 1}
-                primaryColumnKey={primaryColumn.key}
-              />
+              <StyledColumnHeadContainer>
+                <ColumnHeadWithDropdown
+                  column={column}
+                  isFirstColumn={index === 1}
+                  isLastColumn={index === visibleTableColumns.length - 1}
+                  primaryColumnKey={primaryColumn.key}
+                />
+              </StyledColumnHeadContainer>
 
               <StyledResizeHandler
                 className="cursor-col-resize"

front/src/modules/ui/data-table/components/EntityTableHeaderOptions.tsx

@@ -1,39 +0,0 @@
-import styled from '@emotion/styled';
-
-import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
-
-import {
-  EntityTableHeaderOptionsProps,
-  TableColumnDropdownMenu,
-} from './TableColumnDropdownMenu';
-
-const StyledDropdownContainer = styled.div`
-  left: 0px;
-  position: absolute;
-  top: 32px;
-  z-index: 1;
-`;
-
-export const EntityTableHeaderOptions = ({
-  isFirstColumn,
-  isLastColumn,
-  primaryColumnKey,
-  column,
-}: EntityTableHeaderOptionsProps) => {
-  return (
-    <StyledDropdownContainer>
-      <DropdownButton
-        dropdownId={column.key + '-header'}
-        dropdownComponents={
-          <TableColumnDropdownMenu
-            column={column}
-            isFirstColumn={isFirstColumn}
-            isLastColumn={isLastColumn}
-            primaryColumnKey={primaryColumnKey}
-          />
-        }
-        dropdownHotkeyScope={{ scope: column.key + '-header' }}
-      />
-    </StyledDropdownContainer>
-  );
-};

front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx

@@ -1,6 +1,6 @@
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
+import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
@@ -25,12 +25,12 @@ export const TableColumnDropdownMenu = ({
   const { handleColumnVisibilityChange, handleMoveTableColumn } =
     useTableColumns();
 
-  const { closeDropdownButton } = useDropdownButton({
+  const { closeDropdown } = useDropdown({
     dropdownId: ColumnHeadDropdownId,
   });
 
   const handleColumnMoveLeft = () => {
-    closeDropdownButton();
+    closeDropdown();
     if (isFirstColumn) {
       return;
     }
@@ -38,7 +38,7 @@ export const TableColumnDropdownMenu = ({
   };
 
   const handleColumnMoveRight = () => {
-    closeDropdownButton();
+    closeDropdown();
     if (isLastColumn) {
       return;
     }