Merge branch...

Merge branch '217168-close-open-reply-input-fields-in-the-design-view-sidebar-when-leaving-a-new-comment' into 'master'

Close open reply input fields on design when leaving a new comment

See merge request gitlab-org/gitlab!33587

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

@@ -117,6 +117,12 @@ export default {
     showForm() {
       this.isFormRendered = true;
     },
+    handleReplyFormBlur() {
+      if (this.discussionComment) {
+        return;
+      }
+      this.isFormRendered = false;
+    },
   },
   createNoteMutation,
 };
@@ -142,7 +148,7 @@ export default {
           v-if="!isFormRendered"
           class="qa-discussion-reply"
           :button-text="__('Reply...')"
-          @onClick="showForm"
+          @onMouseDown="showForm"
         />
         <apollo-mutation
           v-else
@@ -161,6 +167,7 @@ export default {
             :markdown-preview-path="markdownPreviewPath"
             @submitForm="mutate"
             @cancelForm="hideForm"
+            @onBlur="handleReplyFormBlur"
           />
         </apollo-mutation>
       </div>

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

@@ -103,6 +103,7 @@ export default {
           @keydown.meta.enter="submitForm"
           @keydown.ctrl.enter="submitForm"
           @keyup.esc.stop="cancelComment"
+          @blur="$emit('onBlur')"
         >
         </textarea>
       </template>

app/assets/javascripts/notes/components/discussion_reply_placeholder.vue

@@ -17,6 +17,7 @@ export default {
     class="js-vue-discussion-reply btn btn-text-field"
     :title="s__('MergeRequests|Add a reply')"
     @click="$emit('onClick')"
+    @mousedown.prevent="$emit('onMouseDown')"
   >
     {{ buttonText }}
   </button>

changelogs/unreleased/217168-close-open-reply-input-fields-in-the-design-view-sidebar-when-leav.yml

+---
+title: Close open reply input fields in the design view sidebar when leaving a new
+  comment
+merge_request: 33587
+author:
+type: added

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

@@ -76,7 +76,7 @@ describe('Design discussions component', () => {
 
   it('hides reply placeholder and opens form on placeholder click', () => {
     createComponent();
-    findReplyPlaceholder().trigger('click');
+    findReplyPlaceholder().vm.$emit('onMouseDown');
 
     return wrapper.vm.$nextTick().then(() => {
       expect(findReplyPlaceholder().exists()).toBe(false);
@@ -130,4 +130,22 @@ describe('Design discussions component', () => {
       true,
     );
   });
+
+  it('closes the form on blur if the form was empty', () => {
+    createComponent({}, { discussionComment: '', isFormRendered: true });
+    findReplyForm().vm.$emit('onBlur');
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findReplyForm().exists()).toBe(false);
+    });
+  });
+
+  it('keeps the form open on blur if the form had text', () => {
+    createComponent({}, { discussionComment: 'test', isFormRendered: true });
+    findReplyForm().vm.$emit('onBlur');
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findReplyForm().exists()).toBe(true);
+    });
+  });
 });

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

@@ -39,6 +39,13 @@ describe('Design reply form component', () => {
     expect(findTextarea().element).toEqual(document.activeElement);
   });
 
+  it('textarea emits onBlur event on blur', () => {
+    createComponent();
+    findTextarea().trigger('blur');
+
+    expect(wrapper.emitted('onBlur')).toBeTruthy();
+  });
+
   it('renders button text as "Comment" when creating a comment', () => {
     createComponent();
 

spec/frontend/notes/components/discussion_reply_placeholder_spec.js

@@ -20,7 +20,7 @@ describe('ReplyPlaceholder', () => {
     wrapper.destroy();
   });
 
-  it('emits onClick even on button click', () => {
+  it('emits onClick event on button click', () => {
     findButton().trigger('click');
 
     return wrapper.vm.$nextTick().then(() => {
@@ -30,6 +30,16 @@ describe('ReplyPlaceholder', () => {
     });
   });
 
+  it('emits onMouseDown event on button mousedown', () => {
+    findButton().trigger('mousedown');
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.emitted()).toEqual({
+        onMouseDown: [[]],
+      });
+    });
+  });
+
   it('should render reply button', () => {
     expect(findButton().text()).toEqual(buttonText);
   });