Refactor draggable list (#1874)

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" />
     ),
   },
 };

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 = {};

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}

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}

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">

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') }],

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={
               <>