Have KModal pass through their 'submit' and 'cancel' events to simplify other modals

kolibri/core/assets/src/views/CoreBase/index.vue

@@ -98,12 +98,12 @@
       :msg="mostRecentNotification.msg"
       :linkText="mostRecentNotification.linkText"
       :linkUrl="mostRecentNotification.linkUrl"
-      @closeModal="dismissUpdateModal"
+      @submit="dismissUpdateModal"
     />
     <LanguageSwitcherModal
       v-if="languageModalShown"
       :style="{ color: $coreTextDefault }"
-      @close="languageModalShown = false"
+      @cancel="languageModalShown = false"
     />
 
   </div>

kolibri/core/assets/src/views/KModal.vue

@@ -93,10 +93,13 @@
 <script>
 
   import themeMixin from 'kolibri.coreVue.mixins.themeMixin';
+  import logger from 'kolibri.lib.logging';
   import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
   import debounce from 'lodash/debounce';
   import KButton from 'kolibri.coreVue.components.KButton';
 
+  const logging = logger.getLogger(__filename);
+
   /**
    * Used to focus attention on a singular action/task
    */
@@ -189,6 +192,18 @@
         return { 'max-height': `${this.maxContentHeight}px` };
       },
     },
+    created() {
+      if (this.$props.cancelText && !this.$listeners.cancel) {
+        logging.warn(
+          'A "cancelText" has been set, but there is no "cancel" listener. The "cancel" button may not work correctly.'
+        );
+      }
+      if (this.$props.submitText && !this.$listeners.submit) {
+        logging.warn(
+          'A "submitText" has been set, but there is no "submit" listener. The "submit" button may not work correctly.'
+        );
+      }
+    },
     beforeMount() {
       this.lastFocus = document.activeElement;
     },

kolibri/core/assets/src/views/SideNav.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div ref="sideNav" class="side-nav-wrapper" @keydown.esc="toggleNav">
+  <div ref="sideNav" class="side-nav-wrapper" @keyup.esc="toggleNav">
     <transition name="side-nav">
       <div
         v-show="navShown"

kolibri/core/assets/src/views/UpdateNotification.vue

@@ -84,7 +84,7 @@
           this.saveDismissedNotification(this.id);
         }
         this.removeNotification(this.id);
-        this.$emit('closeModal');
+        this.$emit('submit');
       },
     },
     $trs: {

kolibri/core/assets/src/views/buttons-and-links/KButton.vue

@@ -13,7 +13,7 @@
   >
     <slot v-if="$slots.default"></slot>
     <template v-else>
-      {{ text }}
+      <span>{{ text }}</span>
     </template>
     <mat-svg
       v-if="hasDropdown"

kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue

@@ -36,7 +36,7 @@
     <LanguageSwitcherModal
       v-if="showLanguageModal"
       class="ta-l"
-      @close="showLanguageModal = false"
+      @cancel="showLanguageModal = false"
     />
   </div>
 

kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue

@@ -4,8 +4,8 @@
     :title="$tr('changeLanguageModalHeader')"
     :submitText="$tr('confirmButtonText')"
     :cancelText="$tr('cancelButtonText')"
+    @cancel="$emit('cancel')"
     @submit="setLang"
-    @cancel="closeModal"
   >
     <KGrid>
       <KGridItem
@@ -66,9 +66,6 @@
       },
     },
     methods: {
-      closeModal() {
-        this.$emit('close');
-      },
       setLang() {
         this.switchLanguage(this.selectedLanguage);
       },

kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/RemoveFromGroupModal.vue

@@ -5,8 +5,8 @@
     :hasError="false"
     :submitText="$tr('remove')"
     :cancelText="$tr('cancel')"
-    @submit="$emit('confirm')"
     @cancel="$emit('cancel')"
+    @submit="$emit('submit')"
   >
     <p>
       {{ $tr('confirmation', { username: username, classname: groupName }) }}

kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/index.vue

@@ -93,7 +93,7 @@
           :groupName="currentGroup.name"
           :username="userForRemoval.full_name"
           @cancel="userForRemoval = null"
-          @confirm="removeSelectedUserFromGroup"
+          @submit="removeSelectedUserFromGroup"
         />
       </div>
     </KPageContainer>

kolibri/plugins/coach/assets/src/views/plan/GroupsPage/CreateGroupModal.vue

@@ -6,8 +6,8 @@
     :submitText="$tr('save')"
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
+    @cancel="$emit('cancel')"
     @submit="callCreateGroup"
-    @cancel="close"
   >
     <KTextbox
       ref="name"
@@ -82,21 +82,18 @@
       },
     },
     methods: {
-      ...mapActions('groups', ['displayModal', 'createGroup']),
+      ...mapActions('groups', ['createGroup']),
       callCreateGroup() {
         this.formSubmitted = true;
         if (this.formIsValid) {
           this.submitting = true;
           this.createGroup({ groupName: this.name, classId: this.classId }).then(() => {
-            this.$emit('success');
+            this.$emit('submit');
           });
         } else {
           this.$refs.name.focus();
         }
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       newLearnerGroup: 'Create new group',

kolibri/plugins/coach/assets/src/views/plan/GroupsPage/DeleteGroupModal.vue

@@ -5,7 +5,7 @@
     :submitText="$tr('deleteGroup')"
     :cancelText="$tr('cancel')"
     @submit="handleSubmit"
-    @cancel="close"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('areYouSure', { groupName: groupName }) }}</p>
   </KModal>
@@ -34,15 +34,12 @@
       },
     },
     methods: {
-      ...mapActions('groups', ['displayModal', 'deleteGroup']),
+      ...mapActions('groups', ['deleteGroup']),
       handleSubmit() {
         this.deleteGroup(this.groupId).then(() => {
-          this.$emit('success');
+          this.$emit('submit');
         });
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       deleteLearnerGroup: 'Delete group',

kolibri/plugins/coach/assets/src/views/plan/GroupsPage/RenameGroupModal.vue

@@ -7,7 +7,7 @@
     :cancelText="$tr('cancel')"
     :submitDisabled="submitting"
     @submit="callRenameGroup"
-    @cancel="close"
+    @cancel="$emit('cancel')"
   >
     <KTextbox
       ref="name"
@@ -92,7 +92,7 @@
       },
     },
     methods: {
-      ...mapActions('groups', ['renameGroup', 'displayModal']),
+      ...mapActions('groups', ['renameGroup']),
       callRenameGroup() {
         this.formSubmitted = true;
         if (this.formIsValid) {
@@ -105,9 +105,6 @@
           this.$refs.name.focus();
         }
       },
-      close() {
-        this.displayModal(false);
-      },
     },
     $trs: {
       renameLearnerGroup: 'Rename group',

kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue

@@ -50,21 +50,24 @@
       <CreateGroupModal
         v-if="showCreateGroupModal"
         :groups="sortedGroups"
-        @success="handleSuccessCreateGroup"
+        @submit="handleSuccessCreateGroup"
+        @cancel="closeModal"
       />
 
       <RenameGroupModal
         v-if="showRenameGroupModal"
         :groupName="selectedGroup.name"
         :groupId="selectedGroup.id"
         :groups="sortedGroups"
+        @cancel="closeModal"
       />
 
       <DeleteGroupModal
         v-if="showDeleteGroupModal"
         :groupName="selectedGroup.name"
         :groupId="selectedGroup.id"
-        @success="handleSuccessDeleteGroup"
+        @submit="handleSuccessDeleteGroup"
+        @cancel="closeModal"
       />
 
     </KPageContainer>
@@ -125,6 +128,9 @@
     methods: {
       ...mapActions('groups', ['displayModal']),
       ...mapActions(['createSnackbar']),
+      closeModal() {
+        this.displayModal(false);
+      },
       openCreateGroupModal() {
         this.displayModal(GroupModals.CREATE_GROUP);
       },

kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentCopyModal.vue

@@ -8,8 +8,8 @@
       :title="modalTitle"
       :submitText="coachStrings.$tr('continueAction')"
       :cancelText="coachStrings.$tr('cancelAction')"
-      @cancel="$emit('cancel')"
       @submit="goToAvailableGroups"
+      @cancel="$emit('cancel')"
     >
       <KRadioButton
         v-for="classroom in availableClassrooms"
@@ -27,8 +27,8 @@
       :title="modalTitle"
       :submitText="coachStrings.$tr('copyAction')"
       :cancelText="coachStrings.$tr('cancelAction')"
-      @cancel="$emit('cancel')"
       @submit="$emit('submit', selectedClassroomId, selectedCollectionIds)"
+      @cancel="$emit('cancel')"
     >
       <p>{{ $tr('destinationExplanation', { classroomName: selectedClassroomName }) }}</p>
       <p>{{ assignmentQuestion }}</p>

kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js

@@ -10,31 +10,36 @@ const defaultProps = {
 function makeWrapper(options) {
   const wrapper = mount(AssignmentDeleteModal, options);
   const els = {
-    submitButton: () => wrapper.find('button[type="submit"]'),
     cancelButton: () => wrapper.find('button[type="button"]'),
     form: () => wrapper.find('form'),
   };
   return { wrapper, els };
 }
 
 describe('AssignmentDeleteModal', () => {
-  it('clicking delete causes a "delete" event to be emitted', () => {
-    const { wrapper, els } = makeWrapper({
+  it('clicking delete causes a "submit" event to be emitted', () => {
+    const submitListener = jest.fn();
+    const { els } = makeWrapper({
       propsData: { ...defaultProps },
       store,
+      listeners: {
+        submit: submitListener,
+      },
     });
-    // Again, clicking the submit button does not propagate to form, so doing a hack
-    // els.submitButton().trigger('click');
     els.form().trigger('submit');
-    expect(wrapper.emitted().submit.length).toEqual(1);
+    expect(submitListener).toHaveBeenCalled();
   });
 
   it('clicking cancel causes a "cancel" event to be emitted', () => {
-    const { wrapper, els } = makeWrapper({
+    const cancelListener = jest.fn();
+    const { els } = makeWrapper({
       propsData: { ...defaultProps },
       store,
+      listeners: {
+        cancel: cancelListener,
+      },
     });
     els.cancelButton().trigger('click');
-    expect(wrapper.emitted().cancel.length).toEqual(1);
+    expect(cancelListener).toHaveBeenCalled();
   });
 });

kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/ChannelTokenModal.vue

@@ -7,7 +7,7 @@
     :submitDisabled="formIsDisabled"
     :cancelDisabled="formIsDisabled"
     @submit="submitForm"
-    @cancel="$emit('closemodal')"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('tokenExplanation') }}</p>
 
@@ -80,9 +80,9 @@
               // tokens can return one or more channels
               if (channels.length > 1) {
                 this.setAvailableChannels(channels);
-                this.$emit('closemodal');
+                this.$emit('cancel');
               } else {
-                this.$emit('channelfound', channels[0]);
+                this.$emit('submit', channels[0]);
               }
             })
             .catch(error => {

kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/index.vue

@@ -43,8 +43,8 @@
     >
       <ChannelTokenModal
         v-if="showTokenModal"
-        @closemodal="showTokenModal=false"
-        @channelfound="goToSelectContentPageForChannel"
+        @cancel="showTokenModal=false"
+        @submit="goToSelectContentPageForChannel"
       />
       <span>{{ $tr('channelNotListedExplanation') }}&nbsp;</span>
 

kolibri/plugins/device_management/assets/src/views/DeviceIndex.vue

@@ -14,7 +14,7 @@
     <transition name="delay-entry">
       <WelcomeModal
         v-if="welcomeModalVisible"
-        @closeModal="hideWelcomeModal"
+        @submit="hideWelcomeModal"
       />
     </transition>
 

kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue

@@ -37,7 +37,7 @@
     <DeleteChannelModal
       v-if="channelIsSelected"
       :channelTitle="selectedChannelTitle"
-      @confirm="handleDeleteChannel"
+      @submit="handleDeleteChannel"
       @cancel="selectedChannelId=null"
     />
   </div>

kolibri/plugins/device_management/assets/src/views/ManageContentPage/DeleteChannelModal.vue

@@ -4,8 +4,8 @@
     :title="$tr('title')"
     :submitText="$tr('confirmButtonLabel')"
     :cancelText="$tr('cancelButtonLabel')"
-    @submit="handleClickConfirm"
-    @cancel="handleClickCancel"
+    @submit="$emit('submit')"
+    @cancel="$emit('cancel')"
   >
     <p>{{ $tr('confirmationQuestion', { channelTitle }) }}</p>
   </KModal>
@@ -28,14 +28,6 @@
         required: true,
       },
     },
-    methods: {
-      handleClickCancel() {
-        this.$emit('cancel');
-      },
-      handleClickConfirm() {
-        this.$emit('confirm');
-      },
-    },
     $trs: {
       confirmationQuestion: `Are you sure you want to delete '{ channelTitle }' from your device?`,
       title: 'Delete channel',