From 3bde7bc25292162ea8b0f5e6a01edef858a90a92 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Tue, 19 Sep 2023 18:55:01 -0700
Subject: [PATCH] Fast follow on draggable column re-order (#1667)

---
 .../components/MenuItemLeftContent.tsx        |  1 +
 .../ViewFieldsVisibilityDropdownSection.tsx   | 56 ++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx b/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx
index c87ace4cd..1e3b3a558 100644
--- a/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -28,6 +28,7 @@ export const MenuItemLeftContent = ({
         <IconGripVertical
           size={theme.icon.size.md}
           stroke={theme.icon.stroke.sm}
+          color={theme.font.color.extraLight}
         />
       )}
       {LeftIcon && (
diff --git a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx b/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
index 707325a1b..e11b72e4b 100644
--- a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
@@ -57,26 +57,44 @@ export const ViewFieldsVisibilityDropdownSection = <
                         draggableId={field.key}
                         index={index}
                       >
-                        {(provided) => (
-                          <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                          >
-                            <MenuItem
-                              isDraggable={isDraggable}
-                              key={field.key}
-                              LeftIcon={field.Icon}
-                              iconButtons={[
-                                {
-                                  Icon: field.isVisible ? IconMinus : IconPlus,
-                                  onClick: () => onVisibilityChange(field),
+                        {(draggableProvided) => {
+                          const draggableStyle =
+                            draggableProvided.draggableProps.style;
+
+                          return (
+                            <div
+                              ref={draggableProvided.innerRef}
+                              {...{
+                                ...draggableProvided.draggableProps,
+                                style: {
+                                  ...draggableStyle,
+                                  left: 'auto',
+                                  top: 'auto',
+                                  transform: draggableStyle?.transform?.replace(
+                                    /\(-?\d+px,/,
+                                    '(0,',
+                                  ),
                                 },
-                              ]}
-                              text={field.name}
-                            />
-                          </div>
-                        )}
+                              }}
+                              {...draggableProvided.dragHandleProps}
+                            >
+                              <MenuItem
+                                isDraggable={isDraggable}
+                                key={field.key}
+                                LeftIcon={field.Icon}
+                                iconButtons={[
+                                  {
+                                    Icon: field.isVisible
+                                      ? IconMinus
+                                      : IconPlus,
+                                    onClick: () => onVisibilityChange(field),
+                                  },
+                                ]}
+                                text={field.name}
+                              />
+                            </div>
+                          );
+                        }}
                       </Draggable>
                     ))}
                     {provided.placeholder}