(feat) Remove drag and drop functionality from interactive builder

package.json

@@ -64,10 +64,6 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^6.0.1",
-    "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/utilities": "^3.2.2",
     "@openmrs/esm-framework": "next",
     "@openmrs/esm-patient-common-lib": "next",
     "@openmrs/esm-styleguide": "next",

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

@@ -1,36 +1,31 @@
 import React, { useCallback } from 'react';
-import { useDraggable } from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
 import { useTranslation } from 'react-i18next';
 import { Button, CopyButton } from '@carbon/react';
-import { Draggable, Edit, TrashCan } from '@carbon/react/icons';
+import { Edit, TrashCan } from '@carbon/react/icons';
 import { showModal } from '@openmrs/esm-framework';
 import type { Question, Schema } from '../../types';
-import styles from './draggable-question.scss';
+import styles from './question-block.scss';
 
-interface DraggableQuestionProps {
+interface QuestionBlockProps {
   handleDuplicateQuestion: (question: Question, pageId: number, sectionId: number) => void;
   onSchemaChange: (schema: Schema) => void;
   pageIndex: number;
   question: Question;
-  questionCount: number;
   questionIndex: number;
   schema: Schema;
   sectionIndex: number;
 }
 
-const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
+const QuestionBlock: React.FC<QuestionBlockProps> = ({
   handleDuplicateQuestion,
   onSchemaChange,
   pageIndex,
   question,
-  questionCount,
   questionIndex,
   schema,
   sectionIndex,
 }) => {
   const { t } = useTranslation();
-  const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
 
   const launchEditQuestionModal = useCallback(() => {
     const dispose = showModal('edit-question-modal', {
@@ -56,31 +51,9 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
     });
   }, [onSchemaChange, pageIndex, question, questionIndex, schema, sectionIndex]);
 
-  const { attributes, listeners, transform, isDragging, setNodeRef } = useDraggable({
-    id: draggableId,
-    disabled: questionCount <= 1,
-  });
-
-  const style = {
-    transform: CSS.Translate.toString(transform),
-  };
-
-  const dragStyles = isDragging ? styles.isDragged : styles.normal;
-
   return (
-    <div className={dragStyles} style={style}>
+    <div className={styles.questionBlock}>
       <div className={styles.iconAndName}>
-        <div ref={setNodeRef} {...attributes} {...listeners}>
-          <Button
-            className={styles.dragIcon}
-            enterDelayMs={300}
-            hasIconOnly
-            iconDescription={t('reorderQuestion', 'Reorder question')}
-            kind="ghost"
-            renderIcon={(props) => <Draggable size={16} {...props} />}
-            size="md"
-          />
-        </div>
         <p className={styles.questionLabel}>{question.label}</p>
       </div>
       <div className={styles.buttonsContainer}>
@@ -90,7 +63,7 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
           feedback={t('duplicated', 'Duplicated') + '!'}
           iconDescription={t('duplicateQuestion', 'Duplicate question')}
           kind="ghost"
-          onClick={() => !isDragging && handleDuplicateQuestion(question, pageIndex, sectionIndex)}
+          onClick={() => handleDuplicateQuestion(question, pageIndex, sectionIndex)}
         />
         <Button
           enterDelayMs={300}
@@ -115,4 +88,4 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   );
 };
 
-export default DraggableQuestion;
+export default QuestionBlock;

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

@@ -16,23 +16,11 @@
   @include type.type-style('body-01');
 }
 
-.isDragged, .normal {
+.questionBlock {
+  margin: 0 0.5rem;
   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);
-  background-color: rgba(255, 255, 255, 0.552);
-}
-
-.dragIcon {
-  margin-right: 0.5rem;
-
-  :focus {
-    border: none !important;
-  }
-}

translations/en.json

@@ -163,7 +163,6 @@
   "relationship": "Relationship",
   "renderChanges": "Render changes",
   "renderingType": "Rendering type",
-  "reorderQuestion": "Reorder question",
   "required": "Required",
   "restoreDraft": "Restore draft",
   "retired": "Retired",

yarn.lock

@@ -2089,68 +2089,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@dnd-kit/accessibility@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@dnd-kit/accessibility@npm:3.1.0"
-  dependencies:
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 10/750a0537877d5dde3753e9ef59d19628b553567e90fc3e3b14a79bded08f47f4a7161bc0d003d7cd6b3bd9e10aa233628dca07d2aa5a2120cac84555ba1653d8
-  languageName: node
-  linkType: hard
-
-"@dnd-kit/core@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "@dnd-kit/core@npm:6.1.0"
-  dependencies:
-    "@dnd-kit/accessibility": "npm:^3.1.0"
-    "@dnd-kit/utilities": "npm:^3.2.2"
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10/cf9e99763fbd9220cb6fdde2950c19fdf6248391234f5ee835601814124445fd8a6e4b3f5bc35543c802d359db8cc47f07d87046577adc41952ae981a03fbda0
-  languageName: node
-  linkType: hard
-
-"@dnd-kit/modifiers@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "@dnd-kit/modifiers@npm:6.0.1"
-  dependencies:
-    "@dnd-kit/utilities": "npm:^3.2.1"
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    "@dnd-kit/core": ^6.0.6
-    react: ">=16.8.0"
-  checksum: 10/fd9b444a6777494bf631fab1fa902172066509c7b060dad2ef53f893590c8a70da9b50c4e5bdba551fe614ff4828cf9f51c8d94f922ff4f275175994f25d0ea2
-  languageName: node
-  linkType: hard
-
-"@dnd-kit/sortable@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "@dnd-kit/sortable@npm:7.0.2"
-  dependencies:
-    "@dnd-kit/utilities": "npm:^3.2.0"
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    "@dnd-kit/core": ^6.0.7
-    react: ">=16.8.0"
-  checksum: 10/e22e0f0146e371bff86fd88fdeeee980c58a9a6aca78c8ada2553d8cc1f45b8056a4fc1c1f06fce294b93e5a868659474085da21f2e4282e731fdb142e7ba0ff
-  languageName: node
-  linkType: hard
-
-"@dnd-kit/utilities@npm:^3.2.0, @dnd-kit/utilities@npm:^3.2.1, @dnd-kit/utilities@npm:^3.2.2":
-  version: 3.2.2
-  resolution: "@dnd-kit/utilities@npm:3.2.2"
-  dependencies:
-    tslib: "npm:^2.0.0"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 10/6cfe46a5fcdaced943982e7ae66b08b89235493e106eb5bc833737c25905e13375c6ecc3aa0c357d136cb21dae3966213dba063f19b7a60b1235a29a7b05ff84
-  languageName: node
-  linkType: hard
-
 "@esbuild/aix-ppc64@npm:0.20.2":
   version: 0.20.2
   resolution: "@esbuild/aix-ppc64@npm:0.20.2"
@@ -3702,10 +3640,6 @@ __metadata:
   resolution: "@openmrs/esm-form-builder-app@workspace:."
   dependencies:
     "@carbon/react": "npm:^1.47.0"
-    "@dnd-kit/core": "npm:^6.1.0"
-    "@dnd-kit/modifiers": "npm:^6.0.1"
-    "@dnd-kit/sortable": "npm:^7.0.2"
-    "@dnd-kit/utilities": "npm:^3.2.2"
     "@openmrs/esm-framework": "npm:next"
     "@openmrs/esm-patient-common-lib": "npm:next"
     "@openmrs/esm-styleguide": "npm:next"