From 13c8ee29f7a3c13863fd028d9e1919704db55ea4 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:29:18 +0200
Subject: [PATCH] Refactor draggable list (#1874)

---
 .../__stories__/DraggableItem.stories.tsx     | 36 +++++-------
 .../__stories__/DraggableList.stories.tsx     | 57 +++++++++++++++++++
 .../components/DraggableItem.tsx              |  4 +-
 .../{DroppableList.tsx => DraggableList.tsx}  | 11 ++--
 .../components/MenuItemDraggable.tsx          |  4 --
 .../__stories__/MenuItemDraggable.stories.tsx |  1 -
 .../ViewFieldsVisibilityDropdownSection.tsx   |  5 +-
 7 files changed, 78 insertions(+), 40 deletions(-)
 create mode 100644 front/src/modules/ui/draggable-list/__stories__/DraggableList.stories.tsx
 rename front/src/modules/ui/draggable-list/components/{DroppableList.tsx => DraggableList.tsx} (79%)

diff --git a/front/src/modules/ui/draggable-list/__stories__/DraggableItem.stories.tsx b/front/src/modules/ui/draggable-list/__stories__/DraggableItem.stories.tsx
index e5e40606b..4667a628e 100644
--- a/front/src/modules/ui/draggable-list/__stories__/DraggableItem.stories.tsx
+++ b/front/src/modules/ui/draggable-list/__stories__/DraggableItem.stories.tsx
@@ -1,3 +1,4 @@
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { IconBell } from '@/ui/icon';
@@ -5,43 +6,32 @@ import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { DraggableItem } from '../components/DraggableItem';
-import { DroppableList } from '../components/DroppableList';
 
 const meta: Meta<typeof DraggableItem> = {
-  title: 'ui/draggable-list/DraggableItem',
+  title: 'UI/DraggableList/DraggableItem',
   component: DraggableItem,
   decorators: [
-    (Story, { parameters }) => (
-      <DroppableList
-        droppableId={parameters.droppableId}
-        onDragEnd={parameters.onDragEnd}
-        draggableItems={<Story />}
-      />
+    (Story) => (
+      <DragDropContext onDragEnd={() => jest.fn()}>
+        <Droppable droppableId="droppable-id">
+          {(_provided) => <Story />}
+        </Droppable>
+      </DragDropContext>
     ),
     ComponentDecorator,
   ],
   parameters: {
-    droppableId: 'droppable',
-    onDragEnd: () => console.log('dragged'),
+    container: { width: 100 },
+  },
+  argTypes: {
+    itemComponent: { control: { disable: true } },
   },
   args: {
     draggableId: 'draggable-1',
-    key: 'key-1',
     index: 0,
     isDragDisabled: false,
     itemComponent: (
-      <>
-        <MenuItemDraggable
-          LeftIcon={IconBell}
-          key="key-1"
-          text="Draggable item 1"
-        />
-        <MenuItemDraggable
-          LeftIcon={IconBell}
-          key="key-2"
-          text="Draggable item 2"
-        />
-      </>
+      <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 1" />
     ),
   },
 };
diff --git a/front/src/modules/ui/draggable-list/__stories__/DraggableList.stories.tsx b/front/src/modules/ui/draggable-list/__stories__/DraggableList.stories.tsx
new file mode 100644
index 000000000..0c259eba5
--- /dev/null
+++ b/front/src/modules/ui/draggable-list/__stories__/DraggableList.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@/ui/icon';
+import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { DraggableItem } from '../components/DraggableItem';
+import { DraggableList } from '../components/DraggableList';
+
+const meta: Meta<typeof DraggableList> = {
+  title: 'UI/DraggableList/DraggableList',
+  component: DraggableList,
+  decorators: [ComponentDecorator],
+  parameters: {
+    onDragEnd: () => console.log('dragged'),
+  },
+  argTypes: {
+    draggableItems: { control: false },
+  },
+  args: {
+    draggableItems: (
+      <>
+        <DraggableItem
+          draggableId="draggable-1"
+          index={0}
+          isDragDisabled={false}
+          itemComponent={
+            <MenuItemDraggable
+              LeftIcon={IconBell}
+              text="Non Draggable item 1"
+            />
+          }
+        />
+        <DraggableItem
+          draggableId="draggable-2"
+          index={1}
+          itemComponent={
+            <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 2" />
+          }
+        />
+        <DraggableItem
+          draggableId="draggable-3"
+          index={2}
+          itemComponent={
+            <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 3" />
+          }
+        />
+      </>
+    ),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DraggableItem>;
+
+export const Default: Story = {};
diff --git a/front/src/modules/ui/draggable-list/components/DraggableItem.tsx b/front/src/modules/ui/draggable-list/components/DraggableItem.tsx
index fc62277f0..664872e4f 100644
--- a/front/src/modules/ui/draggable-list/components/DraggableItem.tsx
+++ b/front/src/modules/ui/draggable-list/components/DraggableItem.tsx
@@ -3,7 +3,6 @@ import { useTheme } from '@emotion/react';
 import { Draggable } from '@hello-pangea/dnd';
 
 type DraggableItemProps = {
-  key: string;
   draggableId: string;
   isDragDisabled?: boolean;
   index: number;
@@ -11,7 +10,6 @@ type DraggableItemProps = {
 };
 
 export const DraggableItem = ({
-  key,
   draggableId,
   isDragDisabled = false,
   index,
@@ -20,7 +18,7 @@ export const DraggableItem = ({
   const theme = useTheme();
   return (
     <Draggable
-      key={key}
+      key={draggableId}
       draggableId={draggableId}
       index={index}
       isDragDisabled={isDragDisabled}
diff --git a/front/src/modules/ui/draggable-list/components/DroppableList.tsx b/front/src/modules/ui/draggable-list/components/DraggableList.tsx
similarity index 79%
rename from front/src/modules/ui/draggable-list/components/DroppableList.tsx
rename to front/src/modules/ui/draggable-list/components/DraggableList.tsx
index ed6bdb393..64310e899 100644
--- a/front/src/modules/ui/draggable-list/components/DroppableList.tsx
+++ b/front/src/modules/ui/draggable-list/components/DraggableList.tsx
@@ -4,9 +4,9 @@ import {
   Droppable,
   OnDragEndResponder,
 } from '@hello-pangea/dnd';
+import { v4 } from 'uuid';
 
-type DroppableListProps = {
-  droppableId: string;
+type DraggableListProps = {
   draggableItems: React.ReactNode;
   onDragEnd: OnDragEndResponder;
 };
@@ -15,15 +15,14 @@ const StyledDragDropItemsWrapper = styled.div`
   width: 100%;
 `;
 
-export const DroppableList = ({
-  droppableId,
+export const DraggableList = ({
   draggableItems,
   onDragEnd,
-}: DroppableListProps) => {
+}: DraggableListProps) => {
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <StyledDragDropItemsWrapper>
-        <Droppable droppableId={droppableId}>
+        <Droppable droppableId={v4()}>
           {(provided) => (
             <div ref={provided.innerRef} {...provided.droppableProps}>
               {draggableItems}
diff --git a/front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx b/front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx
index 30c0ab30d..ee62dc301 100644
--- a/front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx
@@ -8,7 +8,6 @@ import { MenuItemAccent } from '../types/MenuItemAccent';
 import { MenuItemIconButton } from './MenuItem';
 
 export type MenuItemDraggableProps = {
-  key: string;
   LeftIcon: IconComponent | undefined;
   accent?: MenuItemAccent;
   iconButtons?: MenuItemIconButton[];
@@ -18,7 +17,6 @@ export type MenuItemDraggableProps = {
   className?: string;
 };
 export const MenuItemDraggable = ({
-  key,
   LeftIcon,
   accent = 'default',
   iconButtons,
@@ -31,7 +29,6 @@ export const MenuItemDraggable = ({
 
   return (
     <StyledHoverableMenuItemBase
-      data-testid={key ?? undefined}
       onClick={onClick}
       accent={accent}
       className={className}
@@ -39,7 +36,6 @@ export const MenuItemDraggable = ({
       <MenuItemLeftContent
         LeftIcon={LeftIcon}
         text={text}
-        key={key}
         showGrip={!isDragDisabled}
       />
       <div className="hoverable-buttons">
diff --git a/front/src/modules/ui/menu-item/components/__stories__/MenuItemDraggable.stories.tsx b/front/src/modules/ui/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
index 17f987b0b..fd22bb299 100644
--- a/front/src/modules/ui/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
+++ b/front/src/modules/ui/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
@@ -22,7 +22,6 @@ type Story = StoryObj<typeof MenuItemDraggable>;
 
 export const Default: Story = {
   args: {
-    key: 'key-1',
     LeftIcon: IconBell,
     accent: 'default',
     iconButtons: [{ Icon: IconMinus, onClick: () => console.log('Clicked') }],
diff --git a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx b/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
index 2a492f30f..649d06efa 100644
--- a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
@@ -5,7 +5,7 @@ import {
 } from '@hello-pangea/dnd';
 
 import { DraggableItem } from '@/ui/draggable-list/components/DraggableItem';
-import { DroppableList } from '@/ui/draggable-list/components/DroppableList';
+import { DraggableList } from '@/ui/draggable-list/components/DraggableList';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
 import { IconMinus, IconPlus } from '@/ui/icon';
@@ -49,8 +49,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
       <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
       <StyledDropdownMenuItemsContainer>
         {isDraggable && (
-          <DroppableList
-            droppableId="droppable"
+          <DraggableList
             onDragEnd={handleOnDrag}
             draggableItems={
               <>