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

@@ -109,6 +109,7 @@ import { Workbox, messageSW } from 'workbox-window';
 import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
 import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
 
+import Teleport from 'vue2-teleport';
 import AnalyticsPlugin from './analytics/plugin';
 import { theme, icons } from 'shared/vuetify';
 
@@ -122,7 +123,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';
 

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

@@ -7,17 +7,36 @@
     >
       {{ 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>
+      <Teleport
+        v-if="teleportTarget"
+        :to="teleportTarget"
+      >
+        <QuestionTypeSelector
+          v-if="mode === 'edit'"
+          :questionType="questionType"
+          :questionTypeOptions="typeOptions"
+          :settingsTargetId="settingsTargetId"
+          @update:questionType="
+            newType => {
+              questionType = newType;
+              $emit('update:questionType', newType);
+            }
+          "
+        />
+      </Teleport>
+
+      <component
+        :is="descriptor.editorComponent"
+        :key="descriptor.type"
+        :questionType="questionType"
+        :interaction="interaction"
+        :mode="mode"
+        :showAnswers="showAnswers"
+        :teleportTarget="`#${settingsTargetId}`"
+        @update:interaction="interaction => $emit('update:interaction', interaction)"
+      />
+    </div>
   </div>
 
 </template>
@@ -27,13 +46,19 @@
 
   import { computed, watch } from 'vue';
   import useInteractionDescriptor from '../../composables/useInteractionDescriptor';
+  import QuestionTypeSelector from '../QuestionTypeSelector/index.vue';
 
   export default {
     name: 'InteractionSection',
 
+    components: {
+      QuestionTypeSelector,
+    },
+
     setup(props, { emit }) {
       const interactionRef = computed(() => props.interaction);
-      const { descriptor, questionType, parseError } = useInteractionDescriptor(interactionRef);
+      const { descriptor, questionType, typeOptions, parseError } =
+        useInteractionDescriptor(interactionRef);
 
       watch(
         questionType,
@@ -43,7 +68,14 @@
         { immediate: true },
       );
 
-      return { descriptor, questionType, parseError };
+      const settingsTargetId = computed(() => {
+        if (props.teleportTarget && props.teleportTarget.startsWith('#')) {
+          return `${props.teleportTarget.substring(1)}-answer-settings`;
+        }
+        return 'qti-interaction-settings';
+      });
+
+      return { descriptor, questionType, typeOptions, parseError, settingsTargetId };
     },
 
     props: {

…__tests__/QuestionSettingsHeader.spec.js …r/__tests__/QuestionTypeSelector.spec.jscontentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionSettingsHeader/__tests__/QuestionSettingsHeader.spec.js renamed to contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/__tests__/QuestionTypeSelector.spec.js contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionSettingsHeader/__tests__/QuestionSettingsHeader.spec.js renamed to contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/__tests__/QuestionTypeSelector.spec.js

@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from '@testing-library/vue';
 import VueRouter from 'vue-router';
-import QuestionSettingsHeader from '../index.vue';
+import QuestionTypeSelector from '../index.vue';
 import { QuestionType } from '../../../constants';
 import { qtiEditorStrings as tr } from '../../../qtiEditorStrings';
 
@@ -30,22 +30,17 @@ const defaultProps = {
 };
 
 const renderHeader = (props = {}) =>
-  render(QuestionSettingsHeader, {
+  render(QuestionTypeSelector, {
     props: { ...defaultProps, ...props },
     routes: new VueRouter(),
   });
 
-describe('QuestionSettingsHeader', () => {
+describe('QuestionTypeSelector', () => {
   it('renders the type meta-label in edit mode', () => {
     renderHeader();
     expect(screen.getByText(tr.$tr('typeLabel'))).toBeInTheDocument();
   });
 
-  it('does not render in view mode', () => {
-    renderHeader({ mode: 'view' });
-    expect(screen.queryByText(tr.$tr('typeLabel'))).not.toBeInTheDocument();
-  });
-
   it('renders a KSelect with the selected option label (not raw enum)', () => {
     renderHeader();
     expect(screen.getByText(tr.$tr('singleSelectLabel'))).toBeInTheDocument();
@@ -79,18 +74,6 @@ describe('QuestionSettingsHeader', () => {
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 
-  it('renders answer settings slot content when provided', () => {
-    render(QuestionSettingsHeader, {
-      props: defaultProps,
-      slots: {
-        answerSettings: '<div>Answer Settings Content</div>',
-      },
-      routes: new VueRouter(),
-    });
-
-    expect(screen.getByText('Answer Settings Content')).toBeInTheDocument();
-  });
-
   it('disables selector when only one option available', () => {
     renderHeader({
       questionTypeOptions: [defaultProps.questionTypeOptions[0]],

…ponents/QuestionSettingsHeader/index.vue …omponents/QuestionTypeSelector/index.vuecontentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionSettingsHeader/index.vue renamed to contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/index.vue contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionSettingsHeader/index.vue renamed to contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/index.vue

@@ -1,8 +1,7 @@
 <template>
 
   <div
-    v-if="mode === 'edit'"
-    class="question-settings-header"
+    class="question-type-selector"
     :class="{ 'small-screen': windowIsSmall }"
     :style="{ borderBottom: `1px solid ${$themeTokens.fineLine}` }"
   >
@@ -47,11 +46,9 @@
     </div>
 
     <div
-      v-if="$slots.answerSettings"
+      :id="settingsTargetId"
       class="answer-settings-group"
-    >
-      <slot name="answerSettings"></slot>
-    </div>
+    ></div>
 
     <KModal
       v-if="showTypeInfoModal"
@@ -97,7 +94,7 @@
   import { qtiEditorStrings } from '../../qtiEditorStrings';
 
   export default {
-    name: 'QuestionSettingsHeader',
+    name: 'QuestionTypeSelector',
 
     setup(props) {
       const { windowIsSmall } = useKResponsiveWindow();
@@ -142,10 +139,10 @@
               typeof opt.description === 'string',
           ),
       },
-      mode: {
+
+      settingsTargetId: {
         type: String,
-        required: true,
-        validator: val => ['view', 'edit'].includes(val),
+        default: 'qti-interaction-settings',
       },
     },
 
@@ -157,7 +154,7 @@
 
 <style lang="scss" scoped>
 
-  .question-settings-header {
+  .question-type-selector {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/Teleport.vue

@@ -206,13 +206,10 @@ describe('useChoiceInteraction', () => {
       );
 
       const parser = new DOMParser();
-      const doc = parser.parseFromString(
-        '<html><body>' + bodyXml.value + '</body></html>',
-        'text/html',
-      );
+      const doc = parser.parseFromString(bodyXml.value, 'text/xml');
       const interaction = doc.querySelector('qti-choice-interaction');
 
-      expect(interaction).toHaveAttribute('max-choices', '2');
+      expect(interaction?.getAttribute('max-choices')).toBe('2');
     });
 
     it('when showAnswerCount is false, max-choices is 0', () => {
@@ -228,13 +225,10 @@ describe('useChoiceInteraction', () => {
       setShowAnswerCount(false);
 
       const parser = new DOMParser();
-      const doc = parser.parseFromString(
-        '<html><body>' + bodyXml.value + '</body></html>',
-        'text/html',
-      );
+      const doc = parser.parseFromString(bodyXml.value, 'text/xml');
       const interaction = doc.querySelector('qti-choice-interaction');
 
-      expect(interaction).toHaveAttribute('max-choices', '0');
+      expect(interaction?.getAttribute('max-choices')).toBe('0');
     });
 
     it('updates automatically when correct answers change and showAnswerCount is true', () => {
@@ -249,20 +243,17 @@ describe('useChoiceInteraction', () => {
 
       // Initially 1 correct answer
       let parser = new DOMParser();
-      let doc = parser.parseFromString(
-        '<html><body>' + bodyXml.value + '</body></html>',
-        'text/html',
-      );
+      let doc = parser.parseFromString(bodyXml.value, 'text/xml');
       let interaction = doc.querySelector('qti-choice-interaction');
-      expect(interaction).toHaveAttribute('max-choices', '1');
+      expect(interaction?.getAttribute('max-choices')).toBe('1');
 
       // Toggle second answer correct
       toggleCorrectChoice('b');
 
       parser = new DOMParser();
-      doc = parser.parseFromString('<html><body>' + bodyXml.value + '</body></html>', 'text/html');
+      doc = parser.parseFromString(bodyXml.value, 'text/xml');
       interaction = doc.querySelector('qti-choice-interaction');
-      expect(interaction).toHaveAttribute('max-choices', '2');
+      expect(interaction?.getAttribute('max-choices')).toBe('2');
     });
   });
 });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useChoiceInteraction.spec.js

@@ -67,5 +67,9 @@ export default function useInteractionDescriptor(interactionRef) {
       registry[DEFAULT_INTERACTION],
   );
 
-  return { descriptor, questionType, parseError };
+  const typeOptions = computed(() => {
+    return descriptors.flatMap(d => d.getTypeOptions?.(qtiEditorStrings) ?? []);
+  });
+
+  return { descriptor, questionType, typeOptions, parseError };
 }

contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteractionDescriptor.js

@@ -15,6 +15,21 @@ export class ChoiceInteractionDescriptor {
     this.convertsFrom = [];
   }
 
+  getTypeOptions(tr) {
+    return [
+      {
+        value: QuestionType.SINGLE_SELECT,
+        label: tr.singleSelectLabel$(),
+        description: tr.singleChoiceDescription$(),
+      },
+      {
+        value: QuestionType.MULTI_SELECT,
+        label: tr.multiSelectLabel$(),
+        description: tr.multipleSelectionDescription$(),
+      },
+    ];
+  }
+
   /** @param {Element} el */
   matches(el) {
     return el.tagName.toLowerCase() === QtiInteraction.CHOICE;