KDS to Studio: Replace ResponsiveDialog by KModal in InfoModal

contentcuration/contentcuration/frontend/shared/views/InfoModal.vue

@@ -1,35 +1,38 @@
 <template>
 
-  <ResponsiveDialog
-    v-model="dialog"
-    width="550"
-    :header="header"
-  >
-    <template #activator="{ on }">
-      <Icon color="primary" v-on="on">
-        help
-      </Icon>
-    </template>
-    <slot></slot>
-    <div v-for="(item, index) in items" :key="`info-${index}`" class="mb-4">
-      <h1 class="font-weight-bold mb-1 subheading">
-        <slot name="header" :item="item"></slot>
-      </h1>
-      <p class="body-1 grey--text">
-        <slot name="description" :item="item"></slot>
-      </p>
-    </div>
-  </ResponsiveDialog>
+  <div :style="{ display: 'inline' }">
+    <Icon
+      color="primary"
+      data-test="info-icon"
+      @click="displayDialog = !displayDialog"
+    >
+      help
+    </Icon>
+    <KModal
+      v-if="displayDialog"
+      data-test="info-dialog"
+      :title="header"
+      :cancelText="$tr('close')"
+      @cancel="displayDialog = false"
+    >
+      <slot></slot>
+      <div v-for="(item, index) in items" :key="`info-${index}`" class="mb-4 mt-3">
+        <h1 class="font-weight-bold mb-1 subheading">
+          <slot name="header" :item="item"></slot>
+        </h1>
+        <p class="body-1 grey--text">
+          <slot name="description" :item="item"></slot>
+        </p>
+      </div>
+    </KModal>
+  </div>
 
 </template>
 
 <script>
 
-  import ResponsiveDialog from './ResponsiveDialog';
-
   export default {
     name: 'InfoModal',
-    components: { ResponsiveDialog },
     props: {
       header: {
         type: String,
@@ -44,9 +47,12 @@
     },
     data() {
       return {
-        dialog: false,
+        displayDialog: false,
       };
     },
+    $trs: {
+      close: 'Close',
+    },
   };
 
 </script>
@@ -55,6 +61,7 @@
 
   /deep/ p {
     font-size: 12pt;
+    line-height: normal;
     color: var(--v-grey-darken3);
   }
 

contentcuration/contentcuration/frontend/shared/views/__tests__/infoModal.spec.js

@@ -1,40 +1,31 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify';
 import { mount } from '@vue/test-utils';
 import InfoModal from '../InfoModal.vue';
 
-Vue.use(Vuetify);
-
-document.body.setAttribute('data-app', true); // Vuetify prints a warning without this
-
 function makeWrapper(props = {}) {
   return mount(InfoModal, {
-    attachToDocument: true,
     propsData: props,
-    slots: {
-      content: 'Test Content',
-    },
   });
 }
 
-describe('infoModal', () => {
+describe('InfoModal', () => {
   let wrapper;
+
   beforeEach(() => {
-    wrapper = makeWrapper({ header: 'testHeader' });
+    wrapper = makeWrapper();
   });
+
   it('clicking the info button should open the dialog', () => {
-    expect(wrapper.find('.v-dialog').isVisible()).toBe(false);
-    let button = wrapper.find('.v-icon');
-    button.trigger('click');
-    expect(wrapper.find('.v-dialog').isVisible()).toBe(true);
+    expect(wrapper.contains('[data-test="info-dialog"]')).toBe(false);
+
+    wrapper.find('[data-test="info-icon"]').trigger('click');
+    expect(wrapper.find('[data-test="info-dialog"]').isVisible()).toBe(true);
   });
+
   it('clicking the close button should close the dialog', () => {
-    let button = wrapper.find('.v-icon');
-    button.trigger('click');
-    expect(wrapper.find('.v-dialog').isVisible()).toBe(true);
+    wrapper.find('[data-test="info-icon"]').trigger('click');
+    expect(wrapper.find('[data-test="info-dialog"]').isVisible()).toBe(true);
 
-    let closeButton = wrapper.find('.v-card__actions .v-btn');
-    closeButton.trigger('click');
-    expect(wrapper.find('.v-dialog').isVisible()).toBe(false);
+    wrapper.find('[data-test="info-dialog"]').vm.$emit('cancel');
+    expect(wrapper.contains('[data-test="info-dialog"]')).toBe(false);
   });
 });

contentcuration/contentcuration/frontend/shared/views/__tests__/masteryDropdown.spec.js

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import MasteryDropdown from '../MasteryDropdown.vue';
-import InfoModal from '../InfoModal.vue';
 import TestForm from './TestForm.vue';
 import { constantStrings } from 'shared/mixins';
 import MasteryModels from 'shared/leUtils/MasteryModels';
@@ -89,14 +88,6 @@ describe('masteryDropdown', () => {
       });
     });
   });
-  describe('mastery model info modal', () => {
-    it('should open the info modal when button is clicked', () => {
-      expect(wrapper.find('.v-dialog').isVisible()).toBe(false);
-      let button = wrapper.find(InfoModal).find('.v-icon');
-      button.trigger('click');
-      expect(wrapper.find('.v-dialog').isVisible()).toBe(true);
-    });
-  });
   describe('emitted events', () => {
     it('input should be emitted when masteryModel is updated', () => {
       expect(wrapper.emitted('input')).toBeFalsy();

contentcuration/contentcuration/frontend/shared/views/__tests__/visibilityDropdown.spec.js

@@ -1,6 +1,5 @@
 import _ from 'underscore';
 import { mount } from '@vue/test-utils';
-import InfoModal from '../InfoModal.vue';
 import VisibilityDropdown from '../VisibilityDropdown.vue';
 import TestForm from './TestForm.vue';
 import Roles from 'shared/leUtils/Roles';
@@ -82,14 +81,6 @@ describe('visibilityDropdown', () => {
       ).toEqual('disabled');
     });
   });
-  describe('visibility info modal', () => {
-    it('should open the info modal when button is clicked', () => {
-      expect(wrapper.find('.v-dialog').isVisible()).toBe(false);
-      let button = wrapper.find(InfoModal).find('.v-icon');
-      button.trigger('click');
-      expect(wrapper.find('.v-dialog').isVisible()).toBe(true);
-    });
-  });
   describe('emitted events', () => {
     it('should emit changed event when visibility is changed', () => {
       const firstRole = Roles.values().next().value;