Added cancel button

- replaced button with GlButton components

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

@@ -86,6 +86,7 @@ export default {
     },
     hideForm() {
       this.isFormRendered = false;
+      this.discussionComment = '';
     },
     showForm() {
       this.isFormRendered = true;

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

 <script>
+import { GlButton, GlModal } from '@gitlab/ui';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 
 export default {
   name: 'DesignReplyForm',
   components: {
     MarkdownField,
+    GlButton,
+    GlModal,
   },
   props: {
     markdownPreviewPath: {
@@ -33,12 +36,19 @@ export default {
     submitForm() {
       if (this.hasValue) this.$emit('submitForm');
     },
+    cancelComment() {
+      if (this.hasValue) {
+        this.$refs.cancelCommentModal.show();
+      } else {
+        this.$emit('cancelForm');
+      }
+    },
   },
 };
 </script>
 
 <template>
-  <form class="new-note common-note-form">
+  <form class="new-note common-note-form" @submit.prevent>
     <markdown-field
       :markdown-preview-path="markdownPreviewPath"
       :can-attach-file="false"
@@ -46,34 +56,47 @@ export default {
       markdown-docs-path="/help/user/markdown"
       class="bordered-box"
     >
-      <textarea
-        slot="textarea"
-        ref="textarea"
-        :value="value"
-        class="note-textarea js-gfm-input js-autosize markdown-area"
-        dir="auto"
-        data-supports-quick-actions="false"
-        data-qa-selector="note_textarea"
-        :aria-label="__('Description')"
-        :placeholder="__('Write a comment…')"
-        @input="$emit('input', $event.target.value)"
-        @keydown.meta.enter="submitForm"
-        @keydown.ctrl.enter="submitForm"
-        @keyup.esc.stop="$emit('cancelForm')"
-      >
-      </textarea>
+      <template #textarea>
+        <textarea
+          ref="textarea"
+          :value="value"
+          class="note-textarea js-gfm-input js-autosize markdown-area"
+          dir="auto"
+          data-supports-quick-actions="false"
+          data-qa-selector="note_textarea"
+          :aria-label="__('Description')"
+          :placeholder="__('Write a comment…')"
+          @input="$emit('input', $event.target.value)"
+          @keydown.meta.enter="submitForm"
+          @keydown.ctrl.enter="submitForm"
+          @keyup.esc.stop="cancelComment"
+        >
+        </textarea>
+      </template>
     </markdown-field>
-    <div class="note-form-actions">
-      <button
+    <div class="note-form-actions d-flex justify-content-between">
+      <gl-button
+        ref="submitButton"
         :disabled="!hasValue || isSaving"
-        class="btn btn-success js-comment-button js-comment-submit-button"
+        variant="success"
         type="submit"
         data-track-event="click_button"
         data-qa-selector="save_comment_button"
-        @click.prevent="$emit('submitForm')"
+        @click="$emit('submitForm')"
       >
-        {{ __('Save comment') }}
-      </button>
+        {{ __('Comment') }}
+      </gl-button>
+      <gl-button ref="cancelButton" @click="cancelComment">{{ __('Cancel') }}</gl-button>
     </div>
+    <gl-modal
+      ref="cancelCommentModal"
+      ok-variant="danger"
+      :title="s__('DesignManagement|Cancel comment confirmation')"
+      :ok-title="s__('DesignManagement|Discard comment')"
+      :cancel-title="s__('DesignManagement|Keep comment')"
+      modal-id="cancel-comment-modal"
+      @ok="$emit('cancelForm')"
+      >{{ s__('DesignManagement|Are you sure you want to cancel creating this comment?') }}
+    </gl-modal>
   </form>
 </template>

ee/changelogs/unreleased/37420-add-ability-to-cancel-a-design-discussion-that-has-not-been-submitt.yml

+---
+title: Add ability to cancel a design discussion
+merge_request: 22241
+author:
+type: added

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

@@ -99,4 +99,23 @@ describe('Design discussions component', () => {
         expect(findReplyForm().exists()).toBe(false);
       });
   });
+
+  it('clears the discussion comment on closing comment form', () => {
+    wrapper.setData({
+      discussionComment: 'test',
+      isFormRendered: true,
+    });
+
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
+        findReplyForm().vm.$emit('cancelForm');
+
+        expect(wrapper.vm.discussionComment).toBe('');
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        expect(findReplyForm().exists()).toBe(false);
+      });
+  });
 });

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

 import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 
 import DesignReplyForm from 'ee/design_management/components/design_notes/design_reply_form.vue';
 
@@ -6,7 +8,9 @@ describe('Design reply form component', () => {
   let wrapper;
 
   const findTextarea = () => wrapper.find('textarea');
-  const findSubmitButton = () => wrapper.find('.js-comment-submit-button');
+  const findSubmitButton = () => wrapper.find({ ref: 'submitButton' });
+  const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
+  const findModal = () => wrapper.find({ ref: 'cancelCommentModal' });
 
   function createComponent(props = {}) {
     wrapper = shallowMount(DesignReplyForm, {
@@ -15,6 +19,7 @@ describe('Design reply form component', () => {
         isSaving: false,
         ...props,
       },
+      stubs: { MarkdownField, GlModal },
     });
   }
 
@@ -58,6 +63,18 @@ describe('Design reply form component', () => {
         expect(wrapper.emitted('submitForm')).toBeFalsy();
       });
     });
+
+    it('emits cancelForm event on pressing escape button on textarea', () => {
+      findTextarea().trigger('keyup.esc');
+
+      expect(wrapper.emitted('cancelForm')).toBeTruthy();
+    });
+
+    it('emits cancelForm event on clicking Cancel button', () => {
+      findCancelButton().vm.$emit('click');
+
+      expect(wrapper.emitted('cancelForm')).toHaveLength(1);
+    });
   });
 
   describe('when form has text', () => {
@@ -71,8 +88,8 @@ describe('Design reply form component', () => {
       expect(findSubmitButton().attributes().disabled).toBeFalsy();
     });
 
-    it('emits submitForm event on button click', () => {
-      findSubmitButton().trigger('click');
+    it('emits submitForm event on Comment button click', () => {
+      findSubmitButton().vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('submitForm')).toBeTruthy();
@@ -107,12 +124,23 @@ describe('Design reply form component', () => {
       });
     });
 
-    it('emits cancelForm event on pressing escape button on textarea', () => {
+    it('opens confirmation modal on pressing Escape button', () => {
       findTextarea().trigger('keyup.esc');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('cancelForm')).toBeTruthy();
-      });
+      expect(findModal().exists()).toBe(true);
+    });
+
+    it('opens confirmation modal on Cancel button click', () => {
+      findCancelButton().vm.$emit('click');
+
+      expect(findModal().exists()).toBe(true);
+    });
+
+    it('emits cancelForm event on modal Ok button click', () => {
+      findTextarea().trigger('keyup.esc');
+      findModal().vm.$emit('ok');
+
+      expect(wrapper.emitted('cancelForm')).toBeTruthy();
     });
   });
 });

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

@@ -199,6 +199,33 @@ describe('Design management design index page', () => {
       });
   });
 
+  it('closes the form and clears the comment on canceling form', () => {
+    setDesign();
+
+    wrapper.setData({
+      design: {
+        ...design,
+        discussions: {
+          edges: [],
+        },
+      },
+      annotationCoordinates,
+      comment: newComment,
+    });
+
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
+        findDiscussionForm().vm.$emit('cancelForm');
+
+        expect(wrapper.vm.comment).toBe('');
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        expect(findDiscussionForm().exists()).toBe(false);
+      });
+  });
+
   describe('with error', () => {
     beforeEach(() => {
       setDesign();
@@ -213,6 +240,7 @@ describe('Design management design index page', () => {
         errorMessage: 'woops',
       });
     });
+
     it('GlAlert is rendered in correct position with correct content', () => {
       expect(wrapper.element).toMatchSnapshot();
     });

locale/gitlab.pot

@@ -6156,9 +6156,15 @@ msgstr ""
 msgid "DesignManagement|Adding a design with the same filename replaces the file in a new version."
 msgstr ""
 
+msgid "DesignManagement|Are you sure you want to cancel creating this comment?"
+msgstr ""
+
 msgid "DesignManagement|Are you sure you want to delete the selected designs?"
 msgstr ""
 
+msgid "DesignManagement|Cancel comment confirmation"
+msgstr ""
+
 msgid "DesignManagement|Could not add a new comment. Please try again."
 msgstr ""
 
@@ -6177,6 +6183,9 @@ msgstr ""
 msgid "DesignManagement|Deselect all"
 msgstr ""
 
+msgid "DesignManagement|Discard comment"
+msgstr ""
+
 msgid "DesignManagement|Error uploading a new design. Please try again."
 msgstr ""
 
@@ -6189,6 +6198,9 @@ msgstr ""
 msgid "DesignManagement|Go to previous design"
 msgstr ""
 
+msgid "DesignManagement|Keep comment"
+msgstr ""
+
 msgid "DesignManagement|Requested design version does not exist. Showing latest version instead"
 msgstr ""