Merge pull request #927 from andreiwebdev/playground-tabs-draggable

Update - Make tabs in playground draggable

agenta-web/package.json

@@ -18,6 +18,8 @@
     "dependencies": {
         "@ant-design/colors": "^7.0.0",
         "@ant-design/icons": "^5.0.1",
+        "@dnd-kit/core": "^6.1.0",
+        "@dnd-kit/sortable": "^8.0.0",
         "@heroicons/react": "^2.0.17",
         "@mdx-js/loader": "^2.3.0",
         "@mdx-js/react": "^2.3.0",

agenta-web/src/components/DraggableTabNode/DraggableTabNode.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import {useSortable} from "@dnd-kit/sortable"
+import {CSS} from "@dnd-kit/utilities"
+
+// Defines the props for DraggableTabNode component.
+interface DraggableTabNodeProps extends React.HTMLAttributes<HTMLDivElement> {
+    "data-node-key": string // Unique identifier for the draggable item.
+}
+
+// This component wraps each tab label to make it draggable.
+const DraggableTabNode: React.FC<DraggableTabNodeProps> = ({
+    "data-node-key": key,
+    children,
+    ...props
+}) => {
+    // useSortable hook provides the necessary handlers and attributes for drag-and-drop.
+    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id: key})
+
+    // CSS styles to apply transform and transition for the dragging effect.
+    const style: React.CSSProperties = {
+        ...props.style,
+        transform: CSS.Transform.toString(transform ? {...transform, scaleX: 1} : null),
+        transition,
+        userSelect: "none",
+        cursor: "pointer", // Changes cursor to indicate draggability.
+    }
+
+    // Clones the children element to add refs and drag-and-drop related properties.
+    return React.cloneElement(children as React.ReactElement, {
+        ref: setNodeRef,
+        style,
+        ...attributes,
+        ...listeners,
+    })
+}
+
+export default DraggableTabNode

agenta-web/src/components/Playground/Playground.tsx

@@ -10,6 +10,10 @@ import {useQueryParam} from "@/hooks/useQuery"
 import AlertPopup from "../AlertPopup/AlertPopup"
 import TestContextProvider from "./TestsetContextProvider"
 import useBlockNavigation from "@/hooks/useBlockNavigation"
+import type {DragEndEvent} from "@dnd-kit/core"
+import {DndContext, PointerSensor, useSensor} from "@dnd-kit/core"
+import {arrayMove, SortableContext, horizontalListSortingStrategy} from "@dnd-kit/sortable"
+import DraggableTabNode from "../DraggableTabNode/DraggableTabNode"
 
 const Playground: React.FC = () => {
     const router = useRouter()
@@ -24,6 +28,7 @@ const Playground: React.FC = () => {
     const [messageApi, contextHolder] = message.useMessage()
     const [unsavedVariants, setUnsavedVariants] = useState<{[name: string]: boolean}>({})
     const variantHelpers = useRef<{[name: string]: {save: Function; delete: Function}}>({})
+    const sensor = useSensor(PointerSensor, {activationConstraint: {distance: 50}}) // Initializes a PointerSensor with a specified activation distance.
 
     const addTab = () => {
         // Find the template variant
@@ -197,6 +202,32 @@ const Playground: React.FC = () => {
         })
     }
 
+    /**
+     * Handles the drag-and-drop event for tabs. It reorders the tabs in the `variants` array
+     * based on the drag result. The function checks if a tab is dropped over a different tab
+     * and updates the order accordingly.
+     *
+     * @param event The drag end event with active (dragged item) and over (drop target) properties.
+     */
+    const onDragEnd = (event: DragEndEvent) => {
+        const {active, over} = event
+
+        if (over && active.id !== over.id) {
+            const activeId = active.id as string
+            const overId = over.id as string
+
+            setVariants((prev) => {
+                const activeIndex = prev.findIndex((variant) => variant.variantName === activeId)
+                const overIndex = prev.findIndex((variant) => variant.variantName === overId)
+
+                if (activeIndex !== -1 && overIndex !== -1) {
+                    return arrayMove(prev, activeIndex, overIndex)
+                }
+                return prev
+            })
+        }
+    }
+
     // Map the variants array to create the items array conforming to the Tab interface
     const tabItems: PlaygroundTabsItem[] = variants.map((variant, index) => ({
         key: variant.variantName,
@@ -234,6 +265,7 @@ const Playground: React.FC = () => {
                         />
                     </div>
                     <Tabs
+                        className="editable-card"
                         type="editable-card"
                         activeKey={activeKey}
                         onChange={setActiveKey}
@@ -245,6 +277,22 @@ const Playground: React.FC = () => {
                             }
                         }}
                         items={tabItems}
+                        renderTabBar={(tabBarProps, DefaultTabBar) => (
+                            <DndContext sensors={[sensor]} onDragEnd={onDragEnd}>
+                                <SortableContext
+                                    items={tabItems.map((i) => i.key)}
+                                    strategy={horizontalListSortingStrategy}
+                                >
+                                    <DefaultTabBar {...tabBarProps}>
+                                        {(node) => (
+                                            <DraggableTabNode {...node.props} key={node.key}>
+                                                {node}
+                                            </DraggableTabNode>
+                                        )}
+                                    </DefaultTabBar>
+                                </SortableContext>
+                            </DndContext>
+                        )}
                     />
                 </div>
             </TestContextProvider>

agenta-web/src/styles/globals.css

@@ -74,3 +74,8 @@ body {
         min-height: 120px;
     }
 }
+
+/* It removes antd tabs transition to fix lag when using type="editable-card" */
+.editable-card.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
+    transition: none;
+}