(feat) O3-4321: Show ObsGroup question's sub questions with functional drag and drop

[Twiineenock]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

Currently, questions within the questions array of an obsGroup type question are not rendered in the interactive builder.

This PR addresses:

• Rendering these questions in the interactive builder
• Enabling drag-and-drop functionality for sub-questions

Sub-question Display Functionality

• A sub-question can be duplicated
• A sub-question can be edited
• A sub-question can be deleted from its parent

Sub-question Drag-and-Drop Functionality

• Drag and drop within the parent question
• Drag and drop to another obsGroup question
• Drag and drop to a non-obsGroup question

Note: Sub-questions cannot be used as drop targets.

Approach

• We use the <SortableContext/> component because we need to handle sorting for both parent questions (across different pages and sections) and sub-questions, both within and outside their parent questions.
• When dragging any question (parent or sub-question), we store all the necessary information using the useSortable hook, as shown below:

const { attributes, listeners, setNodeRef, transform, isDragging, over, isOver } = useSortable({
  id: question.id,
  data: {
    type: subQuestionIndex == null ? 'question' : 'obsQuestion',
    question: {
      handleDuplicateQuestion,
      onSchemaChange,
      pageIndex,
      sectionIndex,
      question,
      questionCount,
      questionIndex,
      subQuestionIndex: subQuestionIndex ?? null,
      schema,
    },
  },
  disabled: questionCount <= 1 && subQuestionIndex == null,
});

• This approach simplifies the handleDragEnd function since we already know the exact path to a question within the schema.
• We are removing the <Droppable/> component, as useSortable already handles both dragging and dropping, eliminating the need for separate handling.

---

Screenshots

• Parent Collapsed

• Parent Expanded

Related Issue

https://openmrs.atlassian.net/browse/O3-4321

Screancasts

Duplicate, Edit, delete

dup-edi-del.webm

Drag and Drop

styled-dnd.webm

[Twiineenock]

Hi @NethmiRodrigo, @denniskigen,
I hope you're both doing well! Whenever you have a moment, I’d really appreciate your review on this. Thank you!

[Twiineenock]

Currently working on styling the over and active questions While dragging.

[Twiineenock]

Currently working on styling the over and active questions While dragging.

Done

[NethmiRodrigo]

Thanks @Twiineenock! This is a really cool feature and very well done!
One minor caveat, could we make it so that users can only drag sub-questions only within the parent question. i.e, make it so that you can't drag a sub question out of the main question.
This is because I could drag a sub question out of the obsGroup question into a different question which wasn't an obsGroup question. It changed the target question into an obsGroup (very well thought out, kudos), but this could lead to unstable behavior because the non-obsGroup question could have properties not meant for obsGroup questions and we'd have to clean it up. This could also happen accidentally, which would be annoying when working on large forms, so we'd have to support reversing the question back.
TLDR: can we restrict the dragging of sub questions to be only within its respectful obsGroup question?

[NethmiRodrigo]

Lets remove this border since it makes only the obsGroup questions differ from other questions and looks confusing

Suggested change

	border-top: 1px solid colors.$gray-20;
	border-bottom: 1px solid colors.$gray-20;

[yoursanonymous]

question object could be received as null as well. Better to add optional chaining like this :
question?.questions