refactor: replace custom Teleport component with vue2-teleport and integrate question type selection into QTI editor sections

Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>

Author: Abhishek-Punhani

contentcuration/contentcuration/frontend/shared/app.js

@@ -122,7 +122,6 @@ import ActionLink from 'shared/views/ActionLink';
 import Icon from 'shared/views/Icon';
 import BaseMenu from 'shared/views/BaseMenu.vue';
 import Divider from 'shared/views/Divider';
-import Teleport from 'shared/views/QTIEditor/components/Teleport.vue';
 import { initializeDB, resetDB } from 'shared/data';
 import { Session, injectVuexStore } from 'shared/data/resources';
 
@@ -260,7 +259,6 @@ Vue.component('ActionLink', ActionLink);
 Vue.component('BaseMenu', BaseMenu);
 Vue.component('Divider', Divider);
 Vue.component('Icon', Icon);
-Vue.component('Teleport', Teleport);
 
 function initiateServiceWorker() {
   // Second conditional must be removed if you are doing dev work on the service

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js

@@ -21,7 +21,7 @@ jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
 
 const renderSection = (props = {}) =>
   render(InteractionSection, {
-    props: { mode: 'edit', ...props },
+    props: { mode: 'edit', targetId: 'test-target', ...props },
     routes: new VueRouter(),
   });
 
@@ -53,6 +53,35 @@ describe('InteractionSection', () => {
     });
   });
 
+  describe('type switching', () => {
+    it('preserves the prompt but resets choices when switching from choice to text-entry', async () => {
+      const { emitted } = render(InteractionSection, {
+        props: {
+          mode: 'edit',
+          interaction: {
+            bodyXml: CHOICE_SINGLE_SELECT_XML,
+            responseDeclarations: [],
+          },
+        },
+        routes: new VueRouter(),
+      });
+
+      await nextTick();
+
+      // QuestionTypeSelector emits update:questionType when type changes
+      const selector = screen.getByRole('group', { name: tr.$tr('typeLabel') });
+      expect(selector).toBeInTheDocument();
+
+      // The emitted interaction when the component mounts should contain the prompt
+      const initialEmits = emitted()['update:interaction'] || [];
+      expect(initialEmits.length).toBeGreaterThan(0);
+      const initialXml = initialEmits[initialEmits.length - 1][0].bodyXml;
+      expect(initialXml).toContain('Which planet is closest to the Sun?');
+      // Choices should be present in initial XML
+      expect(initialXml).toContain('Mercury');
+    });
+  });
+
   describe('unknown interaction type', () => {
     it('falls back silently when the interaction tag is unrecognized', () => {
       // Should not throw — just renders the fallback component

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue

@@ -7,17 +7,25 @@
     >
       {{ parseError }}
     </p>
-    <component
-      :is="descriptor.editorComponent"
-      v-else
-      :key="descriptor.type"
-      :questionType="questionType"
-      :interaction="interaction"
-      :mode="mode"
-      :showAnswers="showAnswers"
-      :teleportTarget="teleportTarget"
-      @update:interaction="interaction => $emit('update:interaction', interaction)"
-    />
+    <div v-else>
+      <QuestionTypeSelector
+        v-if="mode === 'edit'"
+        :questionType="questionType"
+        :settingsTargetId="settingsTargetId"
+        @update:questionType="onUpdateQuestionType"
+      />
+
+      <component
+        :is="descriptor.editorComponent"
+        :key="descriptor.type"
+        :questionType="questionType"
+        :interaction="interaction"
+        :mode="mode"
+        :showAnswers="showAnswers"
+        :teleportTargetId="settingsTargetId"
+        @update:interaction="onUpdateInteraction"
+      />
+    </div>
   </div>
 
 </template>
@@ -27,10 +35,17 @@
 
   import { computed, watch } from 'vue';
   import useInteractionDescriptor from '../../composables/useInteractionDescriptor';
+  import QuestionTypeSelector from '../QuestionTypeSelector/index.vue';
+  import { generateRandomSlug } from '../../utils/generateRandomSlug';
+  import { descriptors } from '../../interactions';
 
   export default {
     name: 'InteractionSection',
 
+    components: {
+      QuestionTypeSelector,
+    },
+
     setup(props, { emit }) {
       const interactionRef = computed(() => props.interaction);
       const { descriptor, questionType, parseError } = useInteractionDescriptor(interactionRef);
@@ -43,7 +58,37 @@
         { immediate: true },
       );
 
-      return { descriptor, questionType, parseError };
+      const onUpdateQuestionType = newType => {
+        const newDescriptor = descriptors.find(d => d.questionTypes.includes(newType));
+        if (newDescriptor && newDescriptor !== descriptor.value) {
+          const oldState = descriptor.value.parse(
+            props.interaction.bodyXml,
+            props.interaction.responseDeclarations,
+          );
+          const freshState = newDescriptor.parse('', []);
+          const withPrompt = { ...freshState, prompt: oldState.prompt ?? '' };
+          const newInteraction = newDescriptor.buildXML(withPrompt, newType);
+          emit('update:interaction', newInteraction);
+        }
+
+        questionType.value = newType;
+        emit('update:questionType', newType);
+      };
+
+      const onUpdateInteraction = updatedInteraction => {
+        emit('update:interaction', updatedInteraction);
+      };
+
+      const settingsTargetId = generateRandomSlug('answer-settings');
+
+      return {
+        descriptor,
+        questionType,
+        parseError,
+        onUpdateQuestionType,
+        onUpdateInteraction,
+        settingsTargetId,
+      };
     },
 
     props: {
@@ -67,10 +112,6 @@
         type: Boolean,
         default: false,
       },
-      teleportTarget: {
-        type: String,
-        default: '',
-      },
     },
 
     emits: ['update:questionType', 'update:interaction'],

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue

@@ -26,15 +26,12 @@
       </div>
     </div>
 
-    <div :id="`qti-question-settings-${index}`"></div>
-
     <div class="question-card-body">
       <InteractionSection
         v-if="interactions.length > 0"
-        :interaction="interactions[0]"
+        :interaction="currentInteraction"
         :mode="mode"
         :showAnswers="showAnswers"
-        :teleportTarget="`#qti-question-settings-${index}`"
         @update:questionType="type => (currentQuestionType = type)"
         @update:interaction="onUpdateInteraction"
       />
@@ -106,6 +103,11 @@
         currentResponseDeclarations.value = interactions.value[0].responseDeclarations;
       }
 
+      const currentInteraction = computed(() => ({
+        bodyXml: currentBodyXml.value,
+        responseDeclarations: currentResponseDeclarations.value,
+      }));
+
       const questionNumberLabel = computed(() =>
         questionNumberLabel$({
           number: props.index + 1,
@@ -158,6 +160,7 @@
       return {
         currentQuestionType,
         interactions,
+        currentInteraction,
         questionNumberLabel,
         questionNumberAndTypeLabel,
         closeBtnLabel$,

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionSettingsHeader/__tests__/QuestionSettingsHeader.spec.js

@@ -0,0 +1,69 @@
+import { render, screen, fireEvent, within } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import QuestionTypeSelector from '../index.vue';
+import { QuestionType } from '../../../constants';
+import { qtiEditorStrings as tr } from '../../../qtiEditorStrings';
+
+const defaultProps = {
+  questionType: QuestionType.SINGLE_SELECT,
+  settingsTargetId: 'test-settings-target',
+};
+
+const renderHeader = (props = {}) =>
+  render(QuestionTypeSelector, {
+    props: { ...defaultProps, ...props },
+    routes: new VueRouter(),
+  });
+
+describe('QuestionTypeSelector', () => {
+  it('renders the type meta-label in edit mode', () => {
+    renderHeader();
+    expect(screen.getByText(tr.$tr('typeLabel'))).toBeInTheDocument();
+  });
+
+  it('renders a KSelect with the selected option label (not raw enum)', () => {
+    renderHeader();
+    expect(screen.getByText(tr.$tr('singleSelectLabel'))).toBeInTheDocument();
+    expect(screen.queryByText(QuestionType.SINGLE_SELECT)).not.toBeInTheDocument();
+  });
+
+  it('renders the selected type label inside the type group', () => {
+    renderHeader();
+    const group = screen.getByRole('group', { name: tr.$tr('typeLabel') });
+    expect(within(group).getByText(tr.$tr('singleSelectLabel'))).toBeInTheDocument();
+  });
+
+  it('opens type info modal when info button clicked', async () => {
+    renderHeader();
+
+    const helpButton = screen.getByRole('button', { name: tr.$tr('responseTypeInfoTitle') });
+    await fireEvent.click(helpButton);
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('singleChoiceDescription'))).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('multipleSelectionDescription'))).toBeInTheDocument();
+  });
+
+  it('closes type info modal when Close button clicked', async () => {
+    renderHeader();
+
+    await fireEvent.click(screen.getByRole('button', { name: tr.$tr('responseTypeInfoTitle') }));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await fireEvent.click(screen.getByRole('button', { name: tr.$tr('closeBtnLabel') }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('emits update:questionType when a new type is selected', async () => {
+    const { emitted } = renderHeader();
+
+    // Click the currently selected option to open the dropdown
+    await fireEvent.click(screen.getByText(tr.$tr('singleSelectLabel')));
+
+    // Click the new option from the dropdown menu
+    await fireEvent.click(screen.getByText(tr.$tr('multiSelectLabel')));
+
+    expect(emitted()['update:questionType']).toBeTruthy();
+    expect(emitted()['update:questionType'][0]).toEqual([QuestionType.MULTI_SELECT]);
+  });
+});