(fix) O3-2400: Fix drag-and-drop logic in the interactive builder

src/components/interactive-builder/draggable-question.component.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { useTranslation } from 'react-i18next';
@@ -29,8 +30,8 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   schema,
   sectionIndex,
 }) => {
-  const defaultEnterDelayInMs = 300;
   const { t } = useTranslation();
+  const defaultEnterDelayInMs = 300;
   const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
 
   const launchEditQuestionModal = useCallback(() => {
@@ -57,25 +58,31 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
     });
   }, [onSchemaChange, pageIndex, question, questionIndex, schema, sectionIndex]);
 
-  const { attributes, listeners, transform, isDragging, setNodeRef } = useDraggable({
+  const { attributes, listeners, transform, isDragging, over, setNodeRef } = useDraggable({
     id: draggableId,
     disabled: questionCount <= 1,
   });
 
-  const style = {
-    transform: CSS.Translate.toString(transform),
-  };
-
-  const dragStyles = isDragging ? styles.isDragged : styles.normal;
+  const handleDuplicate = useCallback(() => {
+    if (!isDragging) {
+      handleDuplicateQuestion(question, pageIndex, sectionIndex);
+    }
+  }, [handleDuplicateQuestion, isDragging, question, pageIndex, sectionIndex]);
 
   return (
-    <div className={dragStyles} style={style}>
+    <div
+      className={classNames({
+        [styles.dragContainer]: true,
+        [styles.dragContainerWhenDragging]: isDragging,
+      })}
+      style={{ transform: CSS.Translate.toString(transform) }}
+    >
       <div className={styles.iconAndName}>
         <div ref={setNodeRef} {...attributes} {...listeners}>
           <IconButton
             className={styles.dragIcon}
-            enterDelayMs={defaultEnterDelayInMs}
-            label={t('reorderQuestion', 'Reorder question')}
+            enterDelayMs={over ? 6000 : defaultEnterDelayInMs}
+            label={t('dragToReorder', 'Drag to reorder')}
             kind="ghost"
             size="md"
           >
@@ -91,7 +98,7 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
           feedback={t('duplicated', 'Duplicated') + '!'}
           iconDescription={t('duplicateQuestion', 'Duplicate question')}
           kind="ghost"
-          onClick={() => !isDragging && handleDuplicateQuestion(question, pageIndex, sectionIndex)}
+          onClick={handleDuplicate}
         />
         <IconButton
           enterDelayMs={defaultEnterDelayInMs}

src/components/interactive-builder/draggable-question.scss

@@ -16,17 +16,19 @@
   @include type.type-style('body-01');
 }
 
-.isDragged, .normal {
+.dragContainer {
   display: flex;
   height: 3rem;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
 
-.isDragged {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+.dragContainerWhenDragging {
+  @extend .dragContainer;
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   background-color: rgba(255, 255, 255, 0.552);
+  transform: scale(.75);
 }
 
 .dragIcon {

src/components/interactive-builder/droppable-container.scss

@@ -1,9 +1,9 @@
 @use '@carbon/colors';
 
 .droppable {
-  border: 1px solid transparent;
+  border: 2px solid transparent;
 }
 
 .isOver {
-  border-color: colors.$teal-70;
+  border-color: colors.$teal-40;
 }

src/components/interactive-builder/interactive-builder.component.tsx

@@ -242,7 +242,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
   );
 
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, delta } = event;
+    const { active, over } = event;
 
     if (active) {
       // Get the source information
@@ -251,11 +251,15 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
       const sourceSectionIndex = parseInt(activeIdParts[2]);
       const sourceQuestionIndex = parseInt(activeIdParts[3]);
 
+      // Get the destination information
+      const destination = over.id.toString().split('-');
+      const destinationQuestionIndex = parseInt(destination[4]);
+
       // Move the question within the same section
       const questions = schema.pages[sourcePageIndex].sections[sourceSectionIndex].questions;
       const questionToMove = questions[sourceQuestionIndex];
       questions.splice(sourceQuestionIndex, 1);
-      questions.splice(sourceQuestionIndex + delta.y, 0, questionToMove);
+      questions.splice(destinationQuestionIndex, 0, questionToMove);
 
       const updatedSchema = {
         ...schema,

translations/en.json

@@ -50,6 +50,7 @@
   "description": "Description",
   "descriptionPlaceholderText": "e.g. A form used to collect encounter data for clients in the Express Care program.",
   "downloadSchema": "Download schema",
+  "dragToReorder": "Drag to reorder",
   "duplicated": "Duplicated",
   "duplicateQuestion": "Duplicate question",
   "editButton": "Edit {{elementType}}",
@@ -163,7 +164,6 @@
   "relationship": "Relationship",
   "renderChanges": "Render changes",
   "renderingType": "Rendering type",
-  "reorderQuestion": "Reorder question",
   "required": "Required",
   "restoreDraft": "Restore draft",
   "retired": "Retired",