Replace Vuetify MessageDialog with KModal in unsaved changes modal (learningequality#5299). Addresses learningequality#5306 review feedback.

Author: vtushar06

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue

@@ -154,29 +154,18 @@
         </VContainer>
       </VWindowItem>
     </VWindow>
-    <MessageDialog
-      v-model="showUnsavedDialog"
-      :header="$tr('unsavedChangesHeader')"
-      :text="$tr('unsavedChangesText')"
+    <KModal
+      v-if="showUnsavedDialog"
+      :title="$tr('unsavedChangesHeader')"
+      :submitText="$tr('saveButton')"
+      :cancelText="$tr('closeButton')"
       data-test="dialog-unsaved"
       :data-test-visible="showUnsavedDialog"
+      @submit="save"
+      @cancel="confirmCancel"
     >
-      <template #buttons>
-        <VSpacer />
-        <VBtn
-          flat
-          @click="confirmCancel"
-        >
-          {{ $tr('closeButton') }}
-        </VBtn>
-        <VBtn
-          color="primary"
-          @click="save"
-        >
-          {{ $tr('saveButton') }}
-        </VBtn>
-      </template>
-    </MessageDialog>
+      {{ $tr('unsavedChangesText') }}
+    </KModal>
     <template #bottom>
       <div class="mx-4 subheading">
         {{ $tr('channelSelectedCountText', { channelCount: channels.length }) }}
@@ -215,7 +204,6 @@
   import { ChannelListTypes, ErrorTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import CopyToken from 'shared/views/CopyToken';
-  import MessageDialog from 'shared/views/MessageDialog';
   import FullscreenModal from 'shared/views/FullscreenModal';
   import Tabs from 'shared/views/Tabs';
   import LoadingText from 'shared/views/LoadingText';
@@ -225,7 +213,6 @@
     components: {
       CopyToken,
       ChannelSelectionList,
-      MessageDialog,
       ChannelItem,
       FullscreenModal,
       Tabs,

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js

@@ -217,12 +217,12 @@ describe('ChannelSetModal', () => {
       });
 
       it('should prompt user if there are unsaved changes', async () => {
-        expect(getUnsavedDialog(wrapper).attributes('data-test-visible')).toBeFalsy();
+        expect(getUnsavedDialog(wrapper).exists()).toBeFalsy();
 
         await getCollectionNameInput(wrapper).setValue('My collection');
         await getCloseButton(wrapper).trigger('click');
 
-        expect(getUnsavedDialog(wrapper).attributes('data-test-visible')).toBeTruthy();
+        expect(getUnsavedDialog(wrapper).exists()).toBeTruthy();
       });
     });