Refactor fast follow on column move feature (#1665)

* Refactor fast follow on column move feature

* Fix lint

front/src/modules/ui/icon/index.ts

@@ -5,11 +5,8 @@ export {
   IconAlertTriangle,
   IconArchive,
   IconArrowBack,
-  IconArrowNarrowDown,
-  IconArrowNarrowLeft,
-  IconArrowNarrowRight,
-  IconArrowNarrowUp,
   IconArrowDown,
+  IconArrowLeft,
   IconArrowRight,
   IconArrowUp,
   IconArrowUpRight,

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

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 
-import { ColumnHeaderDropdownId } from '../constants/ColumnHeaderDropdownId';
+import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
 import { EntityTableHeaderOptions } from './EntityTableHeaderOptions';
@@ -49,7 +49,7 @@ export const ColumnHead = ({
   const theme = useTheme();
 
   const { openDropdownButton } = useDropdownButton({
-    dropdownId: ColumnHeaderDropdownId,
+    dropdownId: ColumnHeadDropdownId,
   });
 
   return (

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

@@ -166,21 +166,22 @@ export const EntityTableHeader = () => {
         </th>
 
         {visibleTableColumns.map((column, index) => (
-          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-            <StyledColumnHeaderCell
-              key={column.key}
-              isResizing={resizedFieldKey === column.key}
-              columnWidth={Math.max(
-                tableColumnsByKey[column.key].size +
-                  (resizedFieldKey === column.key ? resizeFieldOffset : 0),
-                COLUMN_MIN_WIDTH,
-              )}
-            >
+          <StyledColumnHeaderCell
+            key={column.key}
+            isResizing={resizedFieldKey === column.key}
+            columnWidth={Math.max(
+              tableColumnsByKey[column.key].size +
+                (resizedFieldKey === column.key ? resizeFieldOffset : 0),
+              COLUMN_MIN_WIDTH,
+            )}
+          >
+            <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
               <ColumnHead
                 column={column}
                 isFirstColumn={index === 0}
                 isLastColumn={index === visibleTableColumns.length - 1}
               />
+
               <StyledResizeHandler
                 className="cursor-col-resize"
                 role="separator"
@@ -188,8 +189,8 @@ export const EntityTableHeader = () => {
                   setResizedFieldKey(column.key);
                 }}
               />
-            </StyledColumnHeaderCell>
-          </RecoilScope>
+            </RecoilScope>
+          </StyledColumnHeaderCell>
         ))}
         <th>
           {hiddenTableColumns.length > 0 && (

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

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
@@ -6,14 +5,10 @@ import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu'
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
-import {
-  IconArrowNarrowLeft,
-  IconArrowNarrowRight,
-  IconEyeOff,
-} from '@/ui/icon';
+import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 
-import { ColumnHeaderDropdownId } from '../constants/ColumnHeaderDropdownId';
+import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { useTableColumns } from '../hooks/useTableColumns';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
@@ -33,8 +28,6 @@ export const EntityTableHeaderOptions = ({
   isFirstColumn,
   isLastColumn,
 }: EntityTableHeaderOptionsProps) => {
-  const theme = useTheme();
-
   const {
     handleColumnVisibilityChange,
     handleColumnLeftMove,
@@ -42,19 +35,23 @@ export const EntityTableHeaderOptions = ({
   } = useTableColumns();
 
   const { closeDropdownButton } = useDropdownButton({
-    dropdownId: ColumnHeaderDropdownId,
+    dropdownId: ColumnHeadDropdownId,
   });
 
   const handleColumnMoveLeft = () => {
     closeDropdownButton();
-    if (isFirstColumn) return;
-    else handleColumnLeftMove(column);
+    if (isFirstColumn) {
+      return;
+    }
+    handleColumnLeftMove(column);
   };
 
   const handleColumnMoveRight = () => {
     closeDropdownButton();
-    if (isLastColumn) return;
-    else handleColumnRightMove(column);
+    if (isLastColumn) {
+      return;
+    }
+    handleColumnRightMove(column);
   };
 
   const handleColumnVisibility = () => {
@@ -64,26 +61,22 @@ export const EntityTableHeaderOptions = ({
   return (
     <StyledDropdownContainer>
       <DropdownButton
-        dropdownId={ColumnHeaderDropdownId}
+        dropdownId={ColumnHeadDropdownId}
         dropdownComponents={
           <StyledDropdownMenu>
             <StyledDropdownMenuItemsContainer>
               <MenuItem
-                LeftIcon={() => (
-                  <IconArrowNarrowLeft size={theme.icon.size.md} />
-                )}
+                LeftIcon={IconArrowLeft}
                 onClick={handleColumnMoveLeft}
                 text="Move left"
               />
               <MenuItem
-                LeftIcon={() => (
-                  <IconArrowNarrowRight size={theme.icon.size.md} />
-                )}
+                LeftIcon={IconArrowRight}
                 onClick={handleColumnMoveRight}
                 text="Move right"
               />
               <MenuItem
-                LeftIcon={() => <IconEyeOff size={theme.icon.size.md} />}
+                LeftIcon={IconEyeOff}
                 onClick={handleColumnVisibility}
                 text="Hide"
               />

front/src/modules/ui/table/constants/ColumnHeadDropdownId.ts

@@ -0,0 +1 @@
+export const ColumnHeadDropdownId = 'table-head-options';

front/src/modules/ui/table/constants/ColumnHeaderDropdownId.ts

@@ -1 +0,0 @@
-export const ColumnHeaderDropdownId = 'table-header-options';

front/src/modules/ui/table/hooks/useTableColumns.ts

@@ -51,29 +51,29 @@ export const useTableColumns = () => {
 
   const handleColumnMove = useCallback(
     (direction: string, column: ColumnDefinition<ViewFieldMetadata>) => {
-      const tableColumnIndex = tableColumns.findIndex(
+      const currentColumnArrayIndex = tableColumns.findIndex(
         (tableColumn) => tableColumn.key === column.key,
       );
-      if (tableColumnIndex >= 0) {
-        const currentColumn = tableColumns[tableColumnIndex];
-        const targetColumn =
-          direction === 'left'
-            ? tableColumns[tableColumnIndex - 1]
-            : tableColumns[tableColumnIndex + 1];
-        const updatedColumns = tableColumns
-          .map((tableColumn) => {
-            switch (tableColumn.key) {
-              case targetColumn.key:
-                return { ...tableColumn, index: currentColumn.index };
-              case currentColumn.key:
-                return { ...tableColumn, index: targetColumn.index };
-              default:
-                return tableColumn;
-            }
-          })
-          .sort((columnA, columnB) => columnA.index - columnB.index);
+      const targetColumnArrayIndex =
+        direction === 'left'
+          ? currentColumnArrayIndex - 1
+          : currentColumnArrayIndex + 1;
 
-        setTableColumns(updatedColumns);
+      if (currentColumnArrayIndex >= 0) {
+        const currentColumn = tableColumns[currentColumnArrayIndex];
+        const targetColumn = tableColumns[targetColumnArrayIndex];
+
+        const newTableColumns = [...tableColumns];
+        newTableColumns[currentColumnArrayIndex] = {
+          ...targetColumn,
+          index: currentColumn.index,
+        };
+        newTableColumns[targetColumnArrayIndex] = {
+          ...currentColumn,
+          index: targetColumn.index,
+        };
+
+        setTableColumns(newTableColumns);
       }
     },
     [tableColumns, setTableColumns],