feat: drag nodes and subscriptions between groups

src/components/DraggableResourceBadge.tsx

@@ -0,0 +1,62 @@
+import { useDraggable } from '@dnd-kit/core'
+import { ActionIcon, Badge, Text, Tooltip } from '@mantine/core'
+import { IconX } from '@tabler/icons-react'
+
+import { DraggableResourceType } from '~/constants'
+
+export const DraggableResourceBadge = ({
+  id,
+  name,
+  type,
+  nodeID,
+  groupID,
+  subscriptionID,
+  onRemove,
+  dragDisabled,
+  children,
+}: {
+  id: string
+  name: string
+  type: DraggableResourceType
+  nodeID?: string
+  groupID?: string
+  subscriptionID?: string
+  onRemove?: () => void
+  dragDisabled?: boolean
+  children?: React.ReactNode
+}) => {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id,
+    data: {
+      type,
+      nodeID,
+      groupID,
+      subscriptionID,
+    },
+    disabled: dragDisabled,
+  })
+
+  return (
+    <Tooltip disabled={!children} label={<Text fz="xs">{children}</Text>} withArrow>
+      <Badge
+        ref={setNodeRef}
+        pr={onRemove ? 3 : undefined}
+        rightSection={
+          onRemove && (
+            <ActionIcon color="blue" size="xs" radius="xl" variant="transparent" onClick={onRemove}>
+              <IconX size={12} />
+            </ActionIcon>
+          )
+        }
+        style={{
+          zIndex: isDragging ? 10 : 0,
+        }}
+        opacity={isDragging ? 0.5 : undefined}
+      >
+        <Text {...listeners} {...attributes} truncate>
+          {name}
+        </Text>
+      </Badge>
+    </Tooltip>
+  )
+}

src/components/DraggableResourceCard.tsx

@@ -8,21 +8,25 @@ import { DraggableResourceType } from '~/constants'
 
 export const DraggableResourceCard = ({
   id,
+  nodeID,
+  subscriptionID,
   type,
   name,
   onRemove,
   actions,
   children,
 }: {
   id: string
+  nodeID?: string
+  subscriptionID?: string
   type: DraggableResourceType
   name: string
   onRemove: () => void
   actions?: React.ReactNode
   children: React.ReactNode
 }) => {
   const { t } = useTranslation()
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id, data: { type } })
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id, data: { type, nodeID, subscriptionID } })
 
   return (
     <Card

src/components/RenameFormModal.tsx

@@ -23,6 +23,11 @@ export type RenameFormModalRef = {
   setProps: (props: Props) => void
 }
 
+export type HandleRenameSubmit = (
+  type: RuleType | undefined,
+  id: string | undefined
+) => (values: z.infer<typeof schema>) => Promise<void>
+
 export const RenameFormModal = forwardRef(
   (
     {
@@ -32,10 +37,7 @@ export const RenameFormModal = forwardRef(
     }: {
       opened: boolean
       onClose: () => void
-      handleSubmit: (
-        type: RuleType | undefined,
-        id: string | undefined
-      ) => (values: z.infer<typeof schema>) => Promise<void>
+      handleSubmit: HandleRenameSubmit
     },
     ref
   ) => {
@@ -55,7 +57,7 @@ export const RenameFormModal = forwardRef(
       if (props.type === RuleType.routing) {
         return t('routing')
       }
-    }, [props.type])
+    }, [props.type, t])
 
     useImperativeHandle(ref, () => ({
       props,

src/constants/index.ts

@@ -168,6 +168,8 @@ export enum DraggableResourceType {
   node = 'node',
   subscription = 'subscription',
   subscription_node = 'subscription_node',
+  groupNode = 'group_node',
+  groupSubscription = 'group_subscription',
 }
 
 export enum RuleType {

src/pages/Experiment.tsx

@@ -37,6 +37,7 @@ import {
 } from '~/apis'
 import { ConfigFormDrawer } from '~/components/ConfigFormModal'
 import { CreateNodeFormModal } from '~/components/CreateNodeFormModal'
+import { DraggableResourceBadge } from '~/components/DraggableResourceBadge'
 import { DraggableResourceCard } from '~/components/DraggableResourceCard'
 import { DroppableGroupCard } from '~/components/DroppableGroupCard'
 import { GroupFormModal } from '~/components/GroupFormModal'
@@ -45,7 +46,6 @@ import { PlainTextFormModal } from '~/components/PlainTextFormModal'
 import { RenameFormModal, RenameFormModalRef } from '~/components/RenameFormModal'
 import { Section } from '~/components/Section'
 import { SimpleCard } from '~/components/SimpleCard'
-import { SortableResourceBadge } from '~/components/SortableResourceBadge'
 import { DialMode, DraggableResourceType, LogLevel, RuleType } from '~/constants'
 import { Policy } from '~/schemas/gql/graphql'
 
@@ -438,7 +438,7 @@ export const ExperimentPage = () => {
                           >
                             <SortableContext items={nodes} strategy={rectSwappingStrategy}>
                               {nodes.map(({ id: nodeId, name }) => (
-                                <SortableResourceBadge
+                                <DraggableResourceBadge
                                   key={nodeId}
                                   id={nodeId}
                                   name={name}
@@ -471,7 +471,7 @@ export const ExperimentPage = () => {
                           <DndContext modifiers={[restrictToParentElement]}>
                             <SortableContext items={subscriptions} strategy={rectSwappingStrategy}>
                               {subscriptions.map(({ id: subscriptionId, name }) => (
-                                <SortableResourceBadge
+                                <DraggableResourceBadge
                                   key={subscriptionId}
                                   id={subscriptionId}
                                   name={name}