Close design on escape button

- added Mousetrap to bind escape keypress

ee/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue

@@ -59,7 +59,7 @@ export default {
         @input="$emit('input', $event.target.value)"
         @keydown.meta.enter="submitForm"
         @keydown.ctrl.enter="submitForm"
-        @keydown.esc.exact="$emit('cancelForm')"
+        @keyup.esc.stop="$emit('cancelForm')"
       >
       </textarea>
     </markdown-field>

ee/app/assets/javascripts/design_management/pages/design/index.vue

 <script>
+import Mousetrap from 'mousetrap';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import { GlLoadingIcon } from '@gitlab/ui';
@@ -83,6 +84,12 @@ export default {
       return this.discussions.length || this.annotationCoordinates;
     },
   },
+  mounted() {
+    Mousetrap.bind('esc', this.closeDesign);
+  },
+  beforeDestroy() {
+    Mousetrap.unbind('esc', this.closeDesign);
+  },
   methods: {
     addImageDiffNote() {
       const { x, y, width, height } = this.annotationCoordinates;
@@ -167,6 +174,11 @@ export default {
       this.overlayDimensions.width = position.width;
       this.overlayDimensions.height = position.height;
     },
+    closeDesign() {
+      // This needs to be changed to take a design version into account as soon as
+      // https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/15119 is merged
+      this.$router.push('/designs');
+    },
   },
   beforeRouteUpdate(to, from, next) {
     this.closeCommentForm();

ee/changelogs/unreleased/12777-pressing-escape-should-close-the-designs.yml

+---
+title: Pressing the Escape key now closes designs in Design Management
+merge_request: 15379
+author:
+type: added

ee/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js

@@ -96,8 +96,8 @@ describe('Design reply form component', () => {
       expect(wrapper.emitted('input')).toBeTruthy();
     });
 
-    it('emits cancelForm event on escape keydown on textarea', () => {
-      findTextarea().trigger('keydown.esc');
+    it('emits cancelForm event on pressing escape button on textarea', () => {
+      findTextarea().trigger('keyup.esc');
 
       expect(wrapper.emitted('cancelForm')).toBeTruthy();
     });

ee/spec/frontend/design_management/pages/design/index_spec.js

@@ -5,9 +5,13 @@ import DesignReplyForm from 'ee/design_management/components/design_notes/design
 import createImageDiffNoteMutation from 'ee/design_management/graphql/mutations/createImageDiffNote.mutation.graphql';
 import design from '../../mock_data/design';
 
+jest.mock('mousetrap', () => ({
+  bind: jest.fn(),
+  unbind: jest.fn(),
+}));
+
 describe('Design management design index page', () => {
   let wrapper;
-
   const newComment = 'new comment';
   const annotationCoordinates = {
     x: 10,

ee/spec/frontend/design_management/router_spec.js

@@ -6,6 +6,11 @@ import DesignDetail from 'ee/design_management/pages/design/index.vue';
 import createRouter from 'ee/design_management/router';
 import '~/commons/bootstrap';
 
+jest.mock('mousetrap', () => ({
+  bind: jest.fn(),
+  unbind: jest.fn(),
+}));
+
 describe('Design management router', () => {
   let vm;
   let router;