From c27bd8f6677a27b47b6951e752d56a4c86d33775 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 12 Feb 2024 16:31:34 -0800
Subject: [PATCH 01/17] fix: side panel closing confirmation & logic in child
 component

The issue here was that the logic for whether or not the panel should
be closed or whether or not we need to show a confirmation modal was
initially built into the SectionSidePanel component. This component is
a wrapper component and now that the workingResourcePool lives solely
within the ResourceSelection component, there is no access to it in the
parent.
The solution was to pass a prop into each child component which will
need to be handled in all of the child components (section edit, question
replacement). This prop tells the child that we're trying to close the
side panel.
This allows each child component then to define its own logic and
messaging around confirming the panels closure with the user.
This results in the child component also needing to emit two events
which tell the SectionSidePanel if the panel should actuall be closed,
resulting in the user being returned to the root quiz creation route.
---
 .../ConfirmCancellationModal.vue              |  7 ---
 .../plan/CreateExamPage/ResourceSelection.vue | 49 +++++++++++++++++--
 .../plan/CreateExamPage/SectionSidePanel.vue  | 47 +++++++-----------
 3 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ConfirmCancellationModal.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ConfirmCancellationModal.vue
index 38497c9b06..e60e3640bb 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ConfirmCancellationModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ConfirmCancellationModal.vue
@@ -48,16 +48,9 @@
   export default {
     name: 'ConfirmCancellationModal',
     mixins: [commonCoreStrings],
-    props: {
-      closePanelRoute: {
-        type: Object,
-        required: true,
-      },
-    },
     methods: {
       handleContinueAction() {
         this.$emit('continue');
-        this.$router.replace(this.closePanelRoute);
       },
       closeModal() {
         this.$emit('cancel');
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index d11589743b..bbcd66d596 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -112,6 +112,11 @@
         </KGrid>
       </div>
     </div>
+    <ConfirmCancellationModal
+      v-if="showConfirmationModal"
+      @cancel="handleCancelClose"
+      @continue="handleConfirmClose"
+    />
   </div>
 
 </template>
@@ -120,9 +125,10 @@
 <script>
 
   import uniqWith from 'lodash/uniqWith';
+  import differenceWith from 'lodash/differenceWith';
   import isEqual from 'lodash/isEqual';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
+  import { toRefs, computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -133,6 +139,7 @@
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import LessonsSearchBox from '../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+  import ConfirmCancellationModal from './ConfirmCancellationModal.vue';
   import ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
@@ -142,9 +149,11 @@
       BookmarkIcon,
       LessonsSearchBox,
       ResourceSelectionBreadcrumbs,
+      ConfirmCancellationModal,
     },
     mixins: [commonCoreStrings],
-    setup() {
+    setup(props, context) {
+      const { panelClosing } = toRefs(props);
       const store = getCurrentInstance().proxy.$store;
       const route = computed(() => store.state.route);
       const topicId = computed(() => route.value.params.topic_id);
@@ -154,6 +163,7 @@
       const showBookmarks = computed(() => route.value.query.showBookmarks);
       const searchQuery = computed(() => route.value.query.search);
       const { updateSection, activeResourcePool, selectAllQuestions } = injectQuizCreation();
+      const showConfirmationModal = ref(false);
 
       const {
         sectionSettings$,
@@ -432,16 +442,43 @@
         return fetchMoreQuizResources();
       }
 
+      function handleCancelClose() {
+        showConfirmationModal.value = false;
+        context.emit('cancelClosePanel');
+      }
+
+      function handleConfirmClose() {
+        handleCancelClose();
+        context.emit('closePanel');
+      }
+
+      watch(panelClosing, isClosing => {
+        if (isClosing) {
+          if (
+            workingResourcePool.value.length != activeResourcePool.value.length ||
+            differenceWith(workingResourcePool.value, activeResourcePool.value, isEqual).length
+          ) {
+            showConfirmationModal.value = true;
+          } else {
+            context.emit('cancelClosePanel');
+            context.emit('closePanel');
+          }
+        }
+      });
+
       return {
         selectAllChecked,
         selectAllIndeterminate,
         showSelectAll,
         handleSelectAll,
         toggleSelected,
+        handleConfirmClose,
+        handleCancelClose,
         topic,
         topicId,
         contentList,
         resources,
+        showConfirmationModal,
         hasCheckbox,
         loading,
         hasMore,
@@ -471,8 +508,10 @@
       };
     },
     props: {
-      closePanelRoute: {
-        type: Object,
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      panelClosing: {
+        type: Boolean,
+        default: false,
         required: true,
       },
     },
@@ -559,7 +598,7 @@
         //Also reset workingResourcePool
         this.resetWorkingResourcePool();
 
-        this.$router.replace(this.closePanelRoute);
+        this.$emit('closePanel');
       },
       selectionMetadata(content) {
         if (content.kind === ContentNodeKinds.TOPIC) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 3379acbf79..8e9cc193fc 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -7,16 +7,17 @@
       alignment="right"
       sidePanelWidth="700px"
       :closeButtonIconType="closeIcon"
-      @closePanel="handleClosePanel"
+      @closePanel="() => panelClosing = true"
       @shouldFocusFirstEl="findFirstEl()"
     >
-      <component :is="panel" :ref="$route.name" :closePanelRoute="closePanelRoute" />
+      <component
+        :is="panel"
+        :ref="$route.name"
+        :panelClosing="panelClosing"
+        @closePanel="handleClosePanel"
+        @cancelClosePanel="panelClosing = false"
+      />
     </SidePanelModal>
-    <ConfirmCancellationModal
-      v-if="showConfirmationModal"
-      :closePanelRoute="closePanelRoute"
-      @cancel="showConfirmationModal = false"
-    />
   </div>
 
 </template>
@@ -24,10 +25,10 @@
 
 <script>
 
+  import { ref } from 'kolibri.lib.vueCompositionApi';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { PageNames } from '../../../constants';
   import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
-  import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import SectionEditor from './SectionEditor';
   import ReplaceQuestions from './ReplaceQuestions';
   import ResourceSelection from './ResourceSelection';
@@ -54,22 +55,16 @@
       ConfirmCancellationModal,
     },
     setup() {
-      const {
-        //Computed
-        activeResourcePool,
-        workingResourcePool,
-        resetWorkingResourcePool,
-      } = injectQuizCreation();
-
-      return {
-        activeResourcePool,
-        workingResourcePool,
-        resetWorkingResourcePool,
-      };
+      /**
+       * This ref is used to signal to the child component that it is trying to close
+       *
+       */
+      const panelClosing = ref(false);
+      const canClosePanel = ref(false);
+      return { canClosePanel, panelClosing };
     },
     data() {
       return {
-        showConfirmationModal: false,
         prevRoute: { name: PageNames.EXAM_CREATION_ROOT },
       };
     },
@@ -105,15 +100,7 @@
     },
     methods: {
       handleClosePanel() {
-        if (
-          this.workingResourcePool &&
-          this.workingResourcePool.length > this.activeResourcePool.length
-        ) {
-          this.showConfirmationModal = true;
-        } else {
-          this.$router.replace(this.closePanelRoute);
-        }
-        this.$emit('closePanel');
+        this.$router.replace(this.closePanelRoute);
       },
       /**
        * Calls the currently displayed ref's focusFirstEl method.

From ac67c8debedc74006db9e01f300c2505de4e895f Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 12 Feb 2024 16:37:28 -0800
Subject: [PATCH 02/17] simplify comparison; recalling that the pools are now
 lists of IDs not objects

---
 .../assets/src/views/plan/CreateExamPage/ResourceSelection.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index bbcd66d596..049de78148 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -125,7 +125,6 @@
 <script>
 
   import uniqWith from 'lodash/uniqWith';
-  import differenceWith from 'lodash/differenceWith';
   import isEqual from 'lodash/isEqual';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import { toRefs, computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
@@ -456,7 +455,7 @@
         if (isClosing) {
           if (
             workingResourcePool.value.length != activeResourcePool.value.length ||
-            differenceWith(workingResourcePool.value, activeResourcePool.value, isEqual).length
+            isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
           ) {
             showConfirmationModal.value = true;
           } else {

From e542bce3c9eea6c2c1a28590496198c17ca2b8d9 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 13 Feb 2024 12:12:56 -0800
Subject: [PATCH 03/17] remove unused property

---
 .../assets/src/views/plan/CreateExamPage/SectionSidePanel.vue  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 8e9cc193fc..5421a4a011 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -60,8 +60,7 @@
        *
        */
       const panelClosing = ref(false);
-      const canClosePanel = ref(false);
-      return { canClosePanel, panelClosing };
+      return { panelClosing };
     },
     data() {
       return {

From 5271380800569bac2adcff1054113065c25ac713 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 13 Feb 2024 12:35:37 -0800
Subject: [PATCH 04/17] flip the boolean checking if resources have changed

---
 .../assets/src/views/plan/CreateExamPage/ResourceSelection.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 049de78148..d7e3fb43ba 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -455,7 +455,7 @@
         if (isClosing) {
           if (
             workingResourcePool.value.length != activeResourcePool.value.length ||
-            isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
+            !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
           ) {
             showConfirmationModal.value = true;
           } else {

From edb12572df2556f4180429527c0277c96af29395 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 13 Feb 2024 12:47:39 -0800
Subject: [PATCH 05/17] add confirmation modal to sectioneditor, always set
 panelClosing=false when closing

---
 .../plan/CreateExamPage/SectionEditor.vue     | 98 +++++++++++++++----
 .../plan/CreateExamPage/SectionSidePanel.vue  |  1 +
 2 files changed, 82 insertions(+), 17 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index f3c76ca92a..f380ac66dc 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -215,6 +215,11 @@
         </KGridItem>
       </KGrid>
     </div>
+    <ConfirmCancellationModal
+      v-if="showConfirmationModal"
+      @cancel="handleCancelClose"
+      @continue="handleConfirmClose"
+    />
   </div>
 
 </template>
@@ -222,23 +227,84 @@
 
 <script>
 
-  import { ref } from 'kolibri.lib.vueCompositionApi';
-  import { get } from '@vueuse/core';
+  import isEqual from 'lodash/isEqual';
+  import { computed, ref, toRefs, watch } from 'kolibri.lib.vueCompositionApi';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import Draggable from 'kolibri.coreVue.components.Draggable';
   import DragContainer from 'kolibri.coreVue.components.DragContainer';
   import DragHandle from 'kolibri.coreVue.components.DragHandle';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
+  import ConfirmCancellationModal from './ConfirmCancellationModal.vue';
 
   export default {
     name: 'SectionEditor',
     components: {
+      ConfirmCancellationModal,
       Draggable,
       DragContainer,
       DragHandle,
     },
-    setup() {
+    setup(props, context) {
+      const {
+        activeSection,
+        allSections,
+        updateSection,
+        updateQuiz,
+        deleteSection,
+      } = injectQuizCreation();
+
+      const { panelClosing } = toRefs(props);
+
+      const showConfirmationModal = ref(false);
+
+      function handleCancelClose() {
+        showConfirmationModal.value = false;
+        context.emit('cancelClosePanel');
+      }
+
+      function handleConfirmClose() {
+        handleCancelClose();
+        context.emit('closePanel');
+      }
+
+      const selectedQuestionOrder = ref(activeSection.value.learners_see_fixed_order);
+      const numberOfQuestions = ref(activeSection.value.question_count);
+      const descriptionText = ref(activeSection.value.description);
+      const sectionTitle = ref(activeSection.value.section_title);
+
+      const originalFormData = {
+        selectedQuestionOrder: activeSection.value.learners_see_fixed_order,
+        numberOfQuestions: activeSection.value.question_count,
+        descriptionText: activeSection.value.description,
+        sectionTitle: activeSection.value.section_title,
+      };
+
+      const formDataHasChanged = computed(() => {
+        return !isEqual(
+          {
+            selectedQuestionOrder: selectedQuestionOrder.value,
+            numberOfQuestions: numberOfQuestions.value,
+            descriptionText: descriptionText.value,
+            sectionTitle: sectionTitle.value,
+          },
+          originalFormData
+        );
+      });
+
+      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+
+      watch(panelClosing, isClosing => {
+        if (isClosing) {
+          if (formDataHasChanged.value) {
+            showConfirmationModal.value = true;
+          } else {
+            context.emit('cancelClosePanel');
+            context.emit('closePanel');
+          }
+        }
+      });
+
       const {
         sectionSettings$,
         sectionTitle$,
@@ -258,21 +324,10 @@
         fixedOptionDescription$,
       } = enhancedQuizManagementStrings;
 
-      const {
-        activeSection,
-        allSections,
-        updateSection,
-        updateQuiz,
-        deleteSection,
-      } = injectQuizCreation();
-
-      const selectedQuestionOrder = ref(get(activeSection).learners_see_fixed_order);
-      const numberOfQuestions = ref(get(activeSection).question_count);
-      const descriptionText = ref(get(activeSection).description);
-      const sectionTitle = ref(get(activeSection).section_title);
-
-      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       return {
+        showConfirmationModal,
+        handleCancelClose,
+        handleConfirmClose,
         // useQuizCreation
         activeSection,
         allSections,
@@ -306,6 +361,14 @@
         fixedOptionDescription$,
       };
     },
+    props: {
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      panelClosing: {
+        type: Boolean,
+        default: false,
+        required: true,
+      },
+    },
     computed: {
       borderStyle() {
         return `border: 1px solid ${this.$themeTokens.fineLine}`;
@@ -343,6 +406,7 @@
           question_count: this.numberOfQuestions,
           learners_see_fixed_order: this.selectedQuestionOrder,
         });
+        this.$emit('closePanel');
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 5421a4a011..2f9f843d01 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -99,6 +99,7 @@
     },
     methods: {
       handleClosePanel() {
+        this.panelClosing = false;
         this.$router.replace(this.closePanelRoute);
       },
       /**

From 468cb2688ca6383e5c47664721e44d677475ffeb Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 15 Feb 2024 10:18:54 -0800
Subject: [PATCH 06/17] save channels when they're loaded, then set the content
 list to it when needed

---
 .../src/views/plan/CreateExamPage/ResourceSelection.vue      | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index d7e3fb43ba..f3ff29b783 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -386,6 +386,7 @@
           // call this annotateTopicsWithDescendantCounts method to ensure that the channels are
           // annotated with their num_assessments and those without assessments are filtered out
           annotateTopicsWithDescendantCounts(resources.value.map(c => c.id)).then(() => {
+            channels.value = resources.value;
             _loading.value = false;
           });
         });
@@ -417,6 +418,10 @@
           return searchResults.value;
         }
 
+        if (!topicId.value) {
+          return channels.value;
+        }
+
         return resources.value;
       });
 

From 86ada9c75ec6b71d221c21d7461eba2d8bd83d2d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 15 Feb 2024 10:46:38 -0800
Subject: [PATCH 07/17] $route watcher params better match router terminology

---
 .../assets/src/views/plan/CreateExamPage/SectionSidePanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 2f9f843d01..a3de256816 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -93,8 +93,8 @@
       },
     },
     watch: {
-      $route: function(_, o) {
-        this.prevRoute = o;
+      $route: function(_, from) {
+        this.prevRoute = from;
       },
     },
     methods: {

From 6216dc5a2f2596384336ff7f8ed1d1a5de9f79d0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 15 Feb 2024 15:49:00 -0800
Subject: [PATCH 08/17] leverage vue-router nested routes for simplified side
 panel routing

---
 .../coach/assets/src/constants/index.js       |   1 +
 .../coach/assets/src/routes/planExamRoutes.js |  48 +++++----
 .../plan/CreateExamPage/CreateQuizSection.vue |  10 +-
 .../plan/CreateExamPage/ResourceSelection.vue |  58 +++++-----
 .../plan/CreateExamPage/SectionEditor.vue     | 100 ++++++++----------
 .../plan/CreateExamPage/SectionSidePanel.vue  |  71 ++-----------
 6 files changed, 113 insertions(+), 175 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
index b38f0f7c75..6cdd0045e3 100644
--- a/kolibri/plugins/coach/assets/src/constants/index.js
+++ b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -25,6 +25,7 @@ export const PageNames = {
   EXAM_CREATION_PREVIEW: 'EXAM_CREATION_PREVIEW',
   EXAM_CREATION_SEARCH: 'EXAM_CREATION_SEARCH',
   EXAM_CREATION_QUESTION_SELECTION: 'EXAM_CREATION_QUESTION_SELECTION',
+  EXAM_SIDE_PANEL: 'EXAM_SIDE_PANEL',
   EXAM_PREVIEW: 'EXAM_PREVIEW',
   EXAM_REPORT: 'EXAM_REPORT',
   EXAM_REPORT_DETAIL: 'EXAM_REPORT_DETAIL',
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index 5d2f629c50..ff95e2c181 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -14,6 +14,10 @@ import {
 import CreatePracticeQuizPage from '../views/plan/CreateExamPage/CreatePracticeQuizPage.vue';
 import CreateExamPage from '../views/plan/CreateExamPage';
 import CreateExamPreview from '../views/plan/CreateExamPage/CreateExamPreview.vue';
+import SectionSidePanel from '../views/plan/CreateExamPage/SectionSidePanel.vue';
+import SectionEditor from '../views/plan/CreateExamPage/SectionEditor.vue';
+import ResourceSelection from '../views/plan/CreateExamPage/ResourceSelection.vue';
+import ReplaceQuestions from '../views/plan/CreateExamPage/ReplaceQuestions.vue';
 import PlanQuizPreviewPage from '../views/plan/PlanQuizPreviewPage';
 import CoachExamsPage from '../views/plan/CoachExamsPage';
 import { showExamsPage } from '../modules/examsRoot/handlers';
@@ -37,26 +41,30 @@ export default [
     name: PageNames.EXAM_CREATION_ROOT,
     path: '/:classId/plan/quizzes/new',
     component: CreateExamPage,
-  },
-  {
-    name: PageNames.QUIZ_SECTION_EDITOR,
-    path: '/:classId/plan/quizzes/new/:section_id/edit',
-    component: CreateExamPage,
-  },
-  {
-    name: PageNames.QUIZ_REPLACE_QUESTIONS,
-    path: '/:classId/plan/quizzes/new/:section_id/replace-questions',
-    component: CreateExamPage,
-  },
-  {
-    name: PageNames.QUIZ_SELECT_RESOURCES,
-    path: '/:classId/plan/quizzes/new/:section_id/select-resources/:topic_id?',
-    component: CreateExamPage,
-  },
-  {
-    name: PageNames.BOOK_MARKED_RESOURCES,
-    path: '/:classId/plan/quizzes/new/:section_id/select-resources/bookmarks',
-    component: CreateExamPage,
+    children: [
+      {
+        name: PageNames.EXAM_SIDE_PANEL,
+        path: ':section_id',
+        component: SectionSidePanel,
+        children: [
+          {
+            name: PageNames.QUIZ_SECTION_EDITOR,
+            path: 'edit',
+            component: SectionEditor,
+          },
+          {
+            name: PageNames.QUIZ_REPLACE_QUESTIONS,
+            path: 'replace-questions',
+            component: ReplaceQuestions,
+          },
+          {
+            name: PageNames.QUIZ_SELECT_RESOURCES,
+            path: 'select-resources/:topic_id?',
+            component: ResourceSelection,
+          },
+        ],
+      },
+    ],
   },
   {
     name: PageNames.EXAM_CREATION_PRACTICE_QUIZ,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index f3edc5cbba..5bb97a88a4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -313,8 +313,6 @@
 
     </KTabsPanel>
 
-    <SectionSidePanel @closePanel="focusActiveSectionTab()" />
-
 
   </div>
 
@@ -334,7 +332,6 @@
   import Draggable from 'kolibri.coreVue.components.Draggable';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import commonCoach from '../../common';
-  import SectionSidePanel from './SectionSidePanel';
   import TabsWithOverflow from './TabsWithOverflow';
   import AccordionContainer from './AccordionContainer';
   import AccordionItem from './AccordionItem';
@@ -351,7 +348,6 @@
       DragSortWidget,
       DragHandle,
       TabsWithOverflow,
-      SectionSidePanel,
     },
     mixins: [commonCoreStrings, commonCoach],
     setup() {
@@ -509,13 +505,13 @@
     methods: {
       handleReplaceSelection() {
         const section_id = get(this.activeSection).section_id;
-        this.$router.replace({ path: 'new/' + section_id + '/replace-questions' });
+        this.$router.push({ path: 'new/' + section_id + '/replace-questions' });
       },
       handleActiveSectionAction(opt) {
         const section_id = this.activeSection.section_id;
         switch (opt.label) {
           case this.editSectionLabel$():
-            this.$router.replace({ path: 'new/' + section_id + '/edit' });
+            this.$router.push({ path: 'new/' + section_id + '/edit' });
             break;
           case this.deleteSectionLabel$():
             this.removeSection(this.activeSection.section_id);
@@ -573,7 +569,7 @@
         set(this.dragActive, true);
       },
       openSelectResources(section_id) {
-        this.$router.replace({ path: 'new/' + section_id + '/select-resources' });
+        this.$router.push({ path: 'new/' + section_id + '/select-resources' });
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index f3ff29b783..68837929ea 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -105,7 +105,7 @@
               style="float: right;"
               :text="coreString('saveChangesAction')"
               :primary="true"
-              :disabled="!hasTopicId() && !showBookmarks"
+              :disabled="!workingPoolHasChanged"
               @click="saveSelectedResource"
             />
           </KGridItem>
@@ -127,7 +127,7 @@
   import uniqWith from 'lodash/uniqWith';
   import isEqual from 'lodash/isEqual';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { toRefs, computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
+  import { computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -151,8 +151,7 @@
       ConfirmCancellationModal,
     },
     mixins: [commonCoreStrings],
-    setup(props, context) {
-      const { panelClosing } = toRefs(props);
+    setup(_, context) {
       const store = getCurrentInstance().proxy.$store;
       const route = computed(() => store.state.route);
       const topicId = computed(() => route.value.params.topic_id);
@@ -164,6 +163,8 @@
       const { updateSection, activeResourcePool, selectAllQuestions } = injectQuizCreation();
       const showConfirmationModal = ref(false);
 
+      const prevRoute = ref({ name: PageNames.EXAM_CREATION_ROOT });
+
       const {
         sectionSettings$,
         selectFromBookmarks$,
@@ -446,28 +447,20 @@
         return fetchMoreQuizResources();
       }
 
+
       function handleCancelClose() {
         showConfirmationModal.value = false;
-        context.emit('cancelClosePanel');
       }
 
       function handleConfirmClose() {
-        handleCancelClose();
         context.emit('closePanel');
       }
 
-      watch(panelClosing, isClosing => {
-        if (isClosing) {
-          if (
-            workingResourcePool.value.length != activeResourcePool.value.length ||
-            !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
-          ) {
-            showConfirmationModal.value = true;
-          } else {
-            context.emit('cancelClosePanel');
-            context.emit('closePanel');
-          }
-        }
+      const workingPoolHasChanged = computed(() => {
+        return (
+          workingResourcePool.value.length != activeResourcePool.value.length ||
+          !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
+        );
       });
 
       return {
@@ -476,6 +469,8 @@
         showSelectAll,
         handleSelectAll,
         toggleSelected,
+        prevRoute,
+        workingPoolHasChanged,
         handleConfirmClose,
         handleCancelClose,
         topic,
@@ -505,20 +500,13 @@
         updateSection,
         selectAllQuestions,
         workingResourcePool,
+        activeResourcePool,
         addToWorkingResourcePool,
         removeFromWorkingResourcePool,
         showBookmarks,
         selectedResourcesInformation$,
       };
     },
-    props: {
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
-      panelClosing: {
-        type: Boolean,
-        default: false,
-        required: true,
-      },
-    },
     computed: {
       isTopicIdSet() {
         return this.$route.params.topic_id;
@@ -549,6 +537,19 @@
         this.bookmarksCount = newVal.length;
       },
     },
+    beforeRouteEnter(_, from, next) {
+      next(vm => {
+        vm.prevRoute = from;
+      });
+    },
+    beforeRouteLeave(_, __, next) {
+      if (!this.showConfirmationModal && this.workingPoolHasChanged) {
+        this.showConfirmationModal = true;
+        next(false);
+      } else {
+        next();
+      }
+    },
     methods: {
       showTopicSizeWarningCard(content) {
         return !this.hasCheckbox(content) && content.kind === ContentNodeKinds.TOPIC;
@@ -590,9 +591,6 @@
       topicsLink(topicId) {
         return this.topicListingLink({ ...this.$route.params, topicId });
       },
-      hasTopicId() {
-        return Boolean(this.$route.params.topic_id);
-      },
       saveSelectedResource() {
         this.updateSection({
           section_id: this.$route.params.section_id,
@@ -602,7 +600,7 @@
         //Also reset workingResourcePool
         this.resetWorkingResourcePool();
 
-        this.$emit('closePanel');
+        this.$router.replace(this.prevRoute);
       },
       selectionMetadata(content) {
         if (content.kind === ContentNodeKinds.TOPIC) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index f380ac66dc..4148f156c6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -15,7 +15,7 @@
         :layout4="{ span: 2 }"
       >
         <KTextbox
-          v-model="sectionTitle"
+          v-model="section_title"
           :label="sectionTitle$()"
           :maxlength="100"
         />
@@ -29,7 +29,7 @@
           <div>
             <KTextbox
               ref="numQuest"
-              v-model="numberOfQuestions"
+              v-model="question_count"
               type="number"
               :label="numberOfQuestionsLabel$()"
             />
@@ -43,8 +43,8 @@
                 icon="minus"
                 aria-hidden="true"
                 class="number-btn"
-                :disabled="numberOfQuestions === 1"
-                @click="numberOfQuestions -= 1"
+                :disabled="question_count === 1"
+                @click="question_count -= 1"
               />
               <span
                 :style="dividerStyle"
@@ -53,7 +53,7 @@
                 icon="plus"
                 aria-hidden="true"
                 class="number-btn"
-                @click="numberOfQuestions += 1"
+                @click="question_count += 1"
               />
             </div>
           </div>
@@ -62,7 +62,7 @@
     </KGrid>
 
     <KTextbox
-      v-model="descriptionText"
+      v-model="description"
       :label="optionalDescriptionLabel$()"
       :maxlength="400"
       :textArea="true"
@@ -84,7 +84,7 @@
           :layout4="{ span: 2 }"
         >
           <KRadioButton
-            v-model="selectedQuestionOrder"
+            v-model="learners_see_fixed_order"
             :label="randomizedLabel$()"
             :buttonValue="true"
             :description="randomizedOptionDescription$()"
@@ -96,7 +96,7 @@
           :layout4="{ span: 2 }"
         >
           <KRadioButton
-            v-model="selectedQuestionOrder"
+            v-model="learners_see_fixed_order"
             :label="fixedLabel$()"
             :buttonValue="false"
             :description="fixedOptionDescription$()"
@@ -228,7 +228,8 @@
 <script>
 
   import isEqual from 'lodash/isEqual';
-  import { computed, ref, toRefs, watch } from 'kolibri.lib.vueCompositionApi';
+  import pick from 'lodash/pick';
+  import { computed, ref } from 'kolibri.lib.vueCompositionApi';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import Draggable from 'kolibri.coreVue.components.Draggable';
@@ -245,7 +246,7 @@
       DragContainer,
       DragHandle,
     },
-    setup(props, context) {
+    setup(_, context) {
       const {
         activeSection,
         allSections,
@@ -254,57 +255,40 @@
         deleteSection,
       } = injectQuizCreation();
 
-      const { panelClosing } = toRefs(props);
-
       const showConfirmationModal = ref(false);
 
       function handleCancelClose() {
         showConfirmationModal.value = false;
-        context.emit('cancelClosePanel');
       }
 
       function handleConfirmClose() {
-        handleCancelClose();
         context.emit('closePanel');
       }
 
-      const selectedQuestionOrder = ref(activeSection.value.learners_see_fixed_order);
-      const numberOfQuestions = ref(activeSection.value.question_count);
-      const descriptionText = ref(activeSection.value.description);
-      const sectionTitle = ref(activeSection.value.section_title);
-
-      const originalFormData = {
-        selectedQuestionOrder: activeSection.value.learners_see_fixed_order,
-        numberOfQuestions: activeSection.value.question_count,
-        descriptionText: activeSection.value.description,
-        sectionTitle: activeSection.value.section_title,
-      };
+      const learners_see_fixed_order = ref(activeSection.value.learners_see_fixed_order);
+      const question_count = ref(activeSection.value.question_count);
+      const description = ref(activeSection.value.description);
+      const section_title = ref(activeSection.value.section_title);
 
       const formDataHasChanged = computed(() => {
         return !isEqual(
           {
-            selectedQuestionOrder: selectedQuestionOrder.value,
-            numberOfQuestions: numberOfQuestions.value,
-            descriptionText: descriptionText.value,
-            sectionTitle: sectionTitle.value,
+            learners_see_fixed_order: learners_see_fixed_order.value,
+            question_count: question_count.value,
+            description: description.value,
+            section_title: section_title.value,
           },
-          originalFormData
+          pick(activeSection.value, [
+            'learners_see_fixed_order',
+            'question_count',
+            'description',
+            'section_title',
+          ])
         );
       });
 
       const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
 
-      watch(panelClosing, isClosing => {
-        if (isClosing) {
-          if (formDataHasChanged.value) {
-            showConfirmationModal.value = true;
-          } else {
-            context.emit('cancelClosePanel');
-            context.emit('closePanel');
-          }
-        }
-      });
-
       const {
         sectionSettings$,
         sectionTitle$,
@@ -325,6 +309,7 @@
       } = enhancedQuizManagementStrings;
 
       return {
+        formDataHasChanged,
         showConfirmationModal,
         handleCancelClose,
         handleConfirmClose,
@@ -335,10 +320,10 @@
         updateQuiz,
         deleteSection,
         // Form models
-        selectedQuestionOrder,
-        numberOfQuestions,
-        descriptionText,
-        sectionTitle,
+        learners_see_fixed_order,
+        question_count,
+        description,
+        section_title,
         // Responsiveness
         windowIsLarge,
         windowIsSmall,
@@ -361,14 +346,6 @@
         fixedOptionDescription$,
       };
     },
-    props: {
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
-      panelClosing: {
-        type: Boolean,
-        default: false,
-        required: true,
-      },
-    },
     computed: {
       borderStyle() {
         return `border: 1px solid ${this.$themeTokens.fineLine}`;
@@ -394,6 +371,14 @@
         };
       },
     },
+    beforeRouteLeave(_, __, next) {
+      if (!this.showConfirmationModal && this.formDataHasChanged) {
+        this.showConfirmationModal = true;
+        next(false);
+      } else {
+        next();
+      }
+    },
     methods: {
       handleSectionSort(e) {
         this.updateQuiz({ question_sources: e.newArray });
@@ -401,12 +386,11 @@
       applySettings() {
         this.updateSection({
           section_id: this.activeSection.section_id,
-          section_title: this.sectionTitle,
-          description: this.descriptionText,
-          question_count: this.numberOfQuestions,
-          learners_see_fixed_order: this.selectedQuestionOrder,
+          section_title: this.section_title,
+          description: this.description,
+          question_count: this.question_count,
+          learners_see_fixed_order: this.learners_see_fixed_order,
         });
-        this.$emit('closePanel');
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index a3de256816..0a42fc0a9e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -1,66 +1,28 @@
 <template>
 
-  <div>
-    <SidePanelModal
-      v-if="$route.params.section_id"
-      ref="resourcePanel"
-      alignment="right"
-      sidePanelWidth="700px"
-      :closeButtonIconType="closeIcon"
-      @closePanel="() => panelClosing = true"
-      @shouldFocusFirstEl="findFirstEl()"
-    >
-      <component
-        :is="panel"
-        :ref="$route.name"
-        :panelClosing="panelClosing"
-        @closePanel="handleClosePanel"
-        @cancelClosePanel="panelClosing = false"
-      />
-    </SidePanelModal>
-  </div>
+  <SidePanelModal
+    ref="resourcePanel"
+    alignment="right"
+    sidePanelWidth="700px"
+    :closeButtonIconType="closeIcon"
+    @closePanel="handleClosePanel"
+    @shouldFocusFirstEl="findFirstEl()"
+  >
+    <router-view @closePanel="handleClosePanel" />
+  </SidePanelModal>
 
 </template>
 
 
 <script>
 
-  import { ref } from 'kolibri.lib.vueCompositionApi';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { PageNames } from '../../../constants';
-  import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
-  import SectionEditor from './SectionEditor';
-  import ReplaceQuestions from './ReplaceQuestions';
-  import ResourceSelection from './ResourceSelection';
-  import ConfirmCancellationModal from './ConfirmCancellationModal.vue';
-  //import ShowBookMarkedResources from './ShowBookMarkedResources.vue';
-  // import SelectedChannel from './SelectedChannel.vue';
-
-  const pageNameComponentMap = {
-    [PageNames.QUIZ_SECTION_EDITOR]: SectionEditor,
-    [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
-    [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
-    //[PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
-  };
 
   export default {
     name: 'SectionSidePanel',
     components: {
       SidePanelModal,
-      SectionEditor,
-      ReplaceQuestions,
-      ResourceSelection,
-      // SelectedChannel,
-      ResourceSelectionBreadcrumbs,
-      ConfirmCancellationModal,
-    },
-    setup() {
-      /**
-       * This ref is used to signal to the child component that it is trying to close
-       *
-       */
-      const panelClosing = ref(false);
-      return { panelClosing };
     },
     data() {
       return {
@@ -68,16 +30,6 @@
       };
     },
     computed: {
-      panel() {
-        return pageNameComponentMap[this.$route.name];
-      },
-      closePanelRoute() {
-        if (this.closeIcon === 'close') {
-          return { name: PageNames.EXAM_CREATION_ROOT };
-        } else {
-          return this.prevRoute;
-        }
-      },
       /**
        * When the previous route was the root page OR select resources, we want an X icon.
        * Otherwise, we want a back icon.
@@ -99,8 +51,7 @@
     },
     methods: {
       handleClosePanel() {
-        this.panelClosing = false;
-        this.$router.replace(this.closePanelRoute);
+        this.$router.push({ name: PageNames.EXAM_CREATION_ROOT });
       },
       /**
        * Calls the currently displayed ref's focusFirstEl method.

From 87761d3693b5e1d557961adf2160b59b890f1b76 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 16 Feb 2024 11:43:24 -0800
Subject: [PATCH 09/17] use route names for less brittle routing

---
 .../views/plan/CreateExamPage/CreateQuizSection.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 5bb97a88a4..0e028cca79 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -332,6 +332,7 @@
   import Draggable from 'kolibri.coreVue.components.Draggable';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import commonCoach from '../../common';
+  import { PageNames } from '../../../constants';
   import TabsWithOverflow from './TabsWithOverflow';
   import AccordionContainer from './AccordionContainer';
   import AccordionItem from './AccordionItem';
@@ -505,13 +506,15 @@
     methods: {
       handleReplaceSelection() {
         const section_id = get(this.activeSection).section_id;
-        this.$router.push({ path: 'new/' + section_id + '/replace-questions' });
+        const route = this.$router.getRoute(PageNames.QUIZ_REPLACE_QUESTIONS, { section_id });
+        this.$router.push(route);
       },
       handleActiveSectionAction(opt) {
         const section_id = this.activeSection.section_id;
+        const editRoute = this.$router.getRoute(PageNames.QUIZ_SECTION_EDITOR, { section_id });
         switch (opt.label) {
           case this.editSectionLabel$():
-            this.$router.push({ path: 'new/' + section_id + '/edit' });
+            this.$router.push(editRoute);
             break;
           case this.deleteSectionLabel$():
             this.removeSection(this.activeSection.section_id);
@@ -569,7 +572,8 @@
         set(this.dragActive, true);
       },
       openSelectResources(section_id) {
-        this.$router.push({ path: 'new/' + section_id + '/select-resources' });
+        const route = this.$router.getRoute(PageNames.QUIZ_SELECT_RESOURCES, { section_id });
+        this.$router.push(route);
       },
     },
   };

From 24ad9bb50e5bf518fe9b548f4055790dd0a1f655 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 12 Feb 2024 16:31:34 -0800
Subject: [PATCH 10/17] fix: side panel closing confirmation & logic in child
 component

The issue here was that the logic for whether or not the panel should
be closed or whether or not we need to show a confirmation modal was
initially built into the SectionSidePanel component. This component is
a wrapper component and now that the workingResourcePool lives solely
within the ResourceSelection component, there is no access to it in the
parent.
The solution was to pass a prop into each child component which will
need to be handled in all of the child components (section edit, question
replacement). This prop tells the child that we're trying to close the
side panel.
This allows each child component then to define its own logic and
messaging around confirming the panels closure with the user.
This results in the child component also needing to emit two events
which tell the SectionSidePanel if the panel should actuall be closed,
resulting in the user being returned to the root quiz creation route.
---
 .../plan/CreateExamPage/ResourceSelection.vue | 29 +++++++++++++++++--
 .../plan/CreateExamPage/SectionSidePanel.vue  | 29 ++++++++++++-------
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 68837929ea..41f0af0798 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -125,9 +125,10 @@
 <script>
 
   import uniqWith from 'lodash/uniqWith';
+  import differenceWith from 'lodash/differenceWith';
   import isEqual from 'lodash/isEqual';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
+  import { toRefs, computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -463,6 +464,30 @@
         );
       });
 
+      function handleCancelClose() {
+        showConfirmationModal.value = false;
+        context.emit('cancelClosePanel');
+      }
+
+      function handleConfirmClose() {
+        handleCancelClose();
+        context.emit('closePanel');
+      }
+
+      watch(panelClosing, isClosing => {
+        if (isClosing) {
+          if (
+            workingResourcePool.value.length != activeResourcePool.value.length ||
+            differenceWith(workingResourcePool.value, activeResourcePool.value, isEqual).length
+          ) {
+            showConfirmationModal.value = true;
+          } else {
+            context.emit('cancelClosePanel');
+            context.emit('closePanel');
+          }
+        }
+      });
+
       return {
         selectAllChecked,
         selectAllIndeterminate,
@@ -600,7 +625,7 @@
         //Also reset workingResourcePool
         this.resetWorkingResourcePool();
 
-        this.$router.replace(this.prevRoute);
+        this.$emit('closePanel');
       },
       selectionMetadata(content) {
         if (content.kind === ContentNodeKinds.TOPIC) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 0a42fc0a9e..e27fd249e3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -1,21 +1,30 @@
 <template>
 
-  <SidePanelModal
-    ref="resourcePanel"
-    alignment="right"
-    sidePanelWidth="700px"
-    :closeButtonIconType="closeIcon"
-    @closePanel="handleClosePanel"
-    @shouldFocusFirstEl="findFirstEl()"
-  >
-    <router-view @closePanel="handleClosePanel" />
-  </SidePanelModal>
+  <div>
+    <SidePanelModal
+      v-if="$route.params.section_id"
+      ref="resourcePanel"
+      alignment="right"
+      sidePanelWidth="700px"
+      :closeButtonIconType="closeIcon"
+      @closePanel="handleClosePanel"
+      @shouldFocusFirstEl="findFirstEl()"
+    >
+      <component :is="panel" :ref="$route.name" :closePanelRoute="closePanelRoute" />
+    </SidePanelModal>
+    <ConfirmCancellationModal
+      v-if="showConfirmationModal"
+      :closePanelRoute="closePanelRoute"
+      @cancel="showConfirmationModal = false"
+    />
+  </div>
 
 </template>
 
 
 <script>
 
+  import { ref } from 'kolibri.lib.vueCompositionApi';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { PageNames } from '../../../constants';
 

From 60a3f699dab16991ec638a5e40e80d01dca6b778 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 12 Feb 2024 16:37:28 -0800
Subject: [PATCH 11/17] simplify comparison; recalling that the pools are now
 lists of IDs not objects

---
 .../assets/src/views/plan/CreateExamPage/ResourceSelection.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 41f0af0798..0fe70ffceb 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -125,7 +125,6 @@
 <script>
 
   import uniqWith from 'lodash/uniqWith';
-  import differenceWith from 'lodash/differenceWith';
   import isEqual from 'lodash/isEqual';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import { toRefs, computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
@@ -478,7 +477,7 @@
         if (isClosing) {
           if (
             workingResourcePool.value.length != activeResourcePool.value.length ||
-            differenceWith(workingResourcePool.value, activeResourcePool.value, isEqual).length
+            isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
           ) {
             showConfirmationModal.value = true;
           } else {

From 99e045c19bc7f4e8af8e8c132197dbc8382c4418 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 13 Feb 2024 12:35:37 -0800
Subject: [PATCH 12/17] flip the boolean checking if resources have changed

---
 .../assets/src/views/plan/CreateExamPage/ResourceSelection.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 0fe70ffceb..99527b7f14 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -477,7 +477,7 @@
         if (isClosing) {
           if (
             workingResourcePool.value.length != activeResourcePool.value.length ||
-            isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
+            !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
           ) {
             showConfirmationModal.value = true;
           } else {

From 6e0ae16491c1251ae4e6a9ee2dac80a6da3f48e0 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 13 Feb 2024 12:47:39 -0800
Subject: [PATCH 13/17] add confirmation modal to sectioneditor, always set
 panelClosing=false when closing

---
 .../plan/CreateExamPage/SectionEditor.vue     | 57 +++++++++++++------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index 4148f156c6..c8ab33d0bd 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -246,7 +246,7 @@
       DragContainer,
       DragHandle,
     },
-    setup(_, context) {
+    setup(props, context) {
       const {
         activeSection,
         allSections,
@@ -255,40 +255,57 @@
         deleteSection,
       } = injectQuizCreation();
 
+      const { panelClosing } = toRefs(props);
+
       const showConfirmationModal = ref(false);
 
       function handleCancelClose() {
         showConfirmationModal.value = false;
+        context.emit('cancelClosePanel');
       }
 
       function handleConfirmClose() {
+        handleCancelClose();
         context.emit('closePanel');
       }
 
-      const learners_see_fixed_order = ref(activeSection.value.learners_see_fixed_order);
-      const question_count = ref(activeSection.value.question_count);
-      const description = ref(activeSection.value.description);
-      const section_title = ref(activeSection.value.section_title);
+      const selectedQuestionOrder = ref(activeSection.value.learners_see_fixed_order);
+      const numberOfQuestions = ref(activeSection.value.question_count);
+      const descriptionText = ref(activeSection.value.description);
+      const sectionTitle = ref(activeSection.value.section_title);
+
+      const originalFormData = {
+        selectedQuestionOrder: activeSection.value.learners_see_fixed_order,
+        numberOfQuestions: activeSection.value.question_count,
+        descriptionText: activeSection.value.description,
+        sectionTitle: activeSection.value.section_title,
+      };
 
       const formDataHasChanged = computed(() => {
         return !isEqual(
           {
-            learners_see_fixed_order: learners_see_fixed_order.value,
-            question_count: question_count.value,
-            description: description.value,
-            section_title: section_title.value,
+            selectedQuestionOrder: selectedQuestionOrder.value,
+            numberOfQuestions: numberOfQuestions.value,
+            descriptionText: descriptionText.value,
+            sectionTitle: sectionTitle.value,
           },
-          pick(activeSection.value, [
-            'learners_see_fixed_order',
-            'question_count',
-            'description',
-            'section_title',
-          ])
+          originalFormData
         );
       });
 
       const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
 
+      watch(panelClosing, isClosing => {
+        if (isClosing) {
+          if (formDataHasChanged.value) {
+            showConfirmationModal.value = true;
+          } else {
+            context.emit('cancelClosePanel');
+            context.emit('closePanel');
+          }
+        }
+      });
+
       const {
         sectionSettings$,
         sectionTitle$,
@@ -309,7 +326,6 @@
       } = enhancedQuizManagementStrings;
 
       return {
-        formDataHasChanged,
         showConfirmationModal,
         handleCancelClose,
         handleConfirmClose,
@@ -346,6 +362,14 @@
         fixedOptionDescription$,
       };
     },
+    props: {
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      panelClosing: {
+        type: Boolean,
+        default: false,
+        required: true,
+      },
+    },
     computed: {
       borderStyle() {
         return `border: 1px solid ${this.$themeTokens.fineLine}`;
@@ -391,6 +415,7 @@
           question_count: this.question_count,
           learners_see_fixed_order: this.learners_see_fixed_order,
         });
+        this.$emit('closePanel');
       },
     },
   };

From 124a6707f5a3935fba8cfab038a33534f86b412d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 15 Feb 2024 15:49:00 -0800
Subject: [PATCH 14/17] leverage vue-router nested routes for simplified side
 panel routing

---
 .../plan/CreateExamPage/ResourceSelection.vue | 23 +++-----
 .../plan/CreateExamPage/SectionEditor.vue     | 57 ++++++-------------
 .../plan/CreateExamPage/SectionSidePanel.vue  | 29 ++++------
 3 files changed, 33 insertions(+), 76 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 99527b7f14..a0cf03434c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -127,7 +127,7 @@
   import uniqWith from 'lodash/uniqWith';
   import isEqual from 'lodash/isEqual';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { toRefs, computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
+  import { computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -465,26 +465,17 @@
 
       function handleCancelClose() {
         showConfirmationModal.value = false;
-        context.emit('cancelClosePanel');
       }
 
       function handleConfirmClose() {
-        handleCancelClose();
         context.emit('closePanel');
       }
 
-      watch(panelClosing, isClosing => {
-        if (isClosing) {
-          if (
-            workingResourcePool.value.length != activeResourcePool.value.length ||
-            !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
-          ) {
-            showConfirmationModal.value = true;
-          } else {
-            context.emit('cancelClosePanel');
-            context.emit('closePanel');
-          }
-        }
+      const workingPoolHasChanged = computed(() => {
+        return (
+          workingResourcePool.value.length != activeResourcePool.value.length ||
+          !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
+        );
       });
 
       return {
@@ -624,7 +615,7 @@
         //Also reset workingResourcePool
         this.resetWorkingResourcePool();
 
-        this.$emit('closePanel');
+        this.$router.replace(this.prevRoute);
       },
       selectionMetadata(content) {
         if (content.kind === ContentNodeKinds.TOPIC) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index c8ab33d0bd..4148f156c6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -246,7 +246,7 @@
       DragContainer,
       DragHandle,
     },
-    setup(props, context) {
+    setup(_, context) {
       const {
         activeSection,
         allSections,
@@ -255,57 +255,40 @@
         deleteSection,
       } = injectQuizCreation();
 
-      const { panelClosing } = toRefs(props);
-
       const showConfirmationModal = ref(false);
 
       function handleCancelClose() {
         showConfirmationModal.value = false;
-        context.emit('cancelClosePanel');
       }
 
       function handleConfirmClose() {
-        handleCancelClose();
         context.emit('closePanel');
       }
 
-      const selectedQuestionOrder = ref(activeSection.value.learners_see_fixed_order);
-      const numberOfQuestions = ref(activeSection.value.question_count);
-      const descriptionText = ref(activeSection.value.description);
-      const sectionTitle = ref(activeSection.value.section_title);
-
-      const originalFormData = {
-        selectedQuestionOrder: activeSection.value.learners_see_fixed_order,
-        numberOfQuestions: activeSection.value.question_count,
-        descriptionText: activeSection.value.description,
-        sectionTitle: activeSection.value.section_title,
-      };
+      const learners_see_fixed_order = ref(activeSection.value.learners_see_fixed_order);
+      const question_count = ref(activeSection.value.question_count);
+      const description = ref(activeSection.value.description);
+      const section_title = ref(activeSection.value.section_title);
 
       const formDataHasChanged = computed(() => {
         return !isEqual(
           {
-            selectedQuestionOrder: selectedQuestionOrder.value,
-            numberOfQuestions: numberOfQuestions.value,
-            descriptionText: descriptionText.value,
-            sectionTitle: sectionTitle.value,
+            learners_see_fixed_order: learners_see_fixed_order.value,
+            question_count: question_count.value,
+            description: description.value,
+            section_title: section_title.value,
           },
-          originalFormData
+          pick(activeSection.value, [
+            'learners_see_fixed_order',
+            'question_count',
+            'description',
+            'section_title',
+          ])
         );
       });
 
       const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
 
-      watch(panelClosing, isClosing => {
-        if (isClosing) {
-          if (formDataHasChanged.value) {
-            showConfirmationModal.value = true;
-          } else {
-            context.emit('cancelClosePanel');
-            context.emit('closePanel');
-          }
-        }
-      });
-
       const {
         sectionSettings$,
         sectionTitle$,
@@ -326,6 +309,7 @@
       } = enhancedQuizManagementStrings;
 
       return {
+        formDataHasChanged,
         showConfirmationModal,
         handleCancelClose,
         handleConfirmClose,
@@ -362,14 +346,6 @@
         fixedOptionDescription$,
       };
     },
-    props: {
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
-      panelClosing: {
-        type: Boolean,
-        default: false,
-        required: true,
-      },
-    },
     computed: {
       borderStyle() {
         return `border: 1px solid ${this.$themeTokens.fineLine}`;
@@ -415,7 +391,6 @@
           question_count: this.question_count,
           learners_see_fixed_order: this.learners_see_fixed_order,
         });
-        this.$emit('closePanel');
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index e27fd249e3..0a42fc0a9e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -1,30 +1,21 @@
 <template>
 
-  <div>
-    <SidePanelModal
-      v-if="$route.params.section_id"
-      ref="resourcePanel"
-      alignment="right"
-      sidePanelWidth="700px"
-      :closeButtonIconType="closeIcon"
-      @closePanel="handleClosePanel"
-      @shouldFocusFirstEl="findFirstEl()"
-    >
-      <component :is="panel" :ref="$route.name" :closePanelRoute="closePanelRoute" />
-    </SidePanelModal>
-    <ConfirmCancellationModal
-      v-if="showConfirmationModal"
-      :closePanelRoute="closePanelRoute"
-      @cancel="showConfirmationModal = false"
-    />
-  </div>
+  <SidePanelModal
+    ref="resourcePanel"
+    alignment="right"
+    sidePanelWidth="700px"
+    :closeButtonIconType="closeIcon"
+    @closePanel="handleClosePanel"
+    @shouldFocusFirstEl="findFirstEl()"
+  >
+    <router-view @closePanel="handleClosePanel" />
+  </SidePanelModal>
 
 </template>
 
 
 <script>
 
-  import { ref } from 'kolibri.lib.vueCompositionApi';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { PageNames } from '../../../constants';
 

From 4b3b75e4a43fa0383919793f5c027f69e1f374a2 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 26 Feb 2024 13:48:45 -0800
Subject: [PATCH 15/17] fix post-rebase

---
 .../plan/CreateExamPage/ResourceSelection.vue     | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index a0cf03434c..68837929ea 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -448,21 +448,6 @@
       }
 
 
-      function handleCancelClose() {
-        showConfirmationModal.value = false;
-      }
-
-      function handleConfirmClose() {
-        context.emit('closePanel');
-      }
-
-      const workingPoolHasChanged = computed(() => {
-        return (
-          workingResourcePool.value.length != activeResourcePool.value.length ||
-          !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
-        );
-      });
-
       function handleCancelClose() {
         showConfirmationModal.value = false;
       }

From a5eba12112392d466a3cd0edb187482957bbffc1 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 26 Feb 2024 14:29:32 -0800
Subject: [PATCH 16/17] add comment explaining use of snake_case in js context

---
 .../coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index 4148f156c6..57042cc5d6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -265,6 +265,7 @@
         context.emit('closePanel');
       }
 
+      /* Note that the use of snake_case here is to map directly to the API */
       const learners_see_fixed_order = ref(activeSection.value.learners_see_fixed_order);
       const question_count = ref(activeSection.value.question_count);
       const description = ref(activeSection.value.description);

From dae568b66ba2bafc8668852b9941551798542424 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 26 Feb 2024 14:55:43 -0800
Subject: [PATCH 17/17] lint

---
 .../assets/src/views/plan/CreateExamPage/ResourceSelection.vue   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 68837929ea..80315507f7 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -447,7 +447,6 @@
         return fetchMoreQuizResources();
       }
 
-
       function handleCancelClose() {
         showConfirmationModal.value = false;
       }