Merge branch '8225-handling-enter-action' into 'master'

Handle enter action of MR comment form

See merge request gitlab-org/gitlab!62376

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

@@ -273,6 +273,13 @@ export default {
         this.toggleIssueState();
       }
     },
+    handleEnter() {
+      if (this.hasDrafts) {
+        this.handleSaveDraft();
+      } else {
+        this.handleSave();
+      }
+    },
     toggleIssueState() {
       if (this.isIssue) {
         // We want to invoke the close/reopen logic in the issue header
@@ -395,8 +402,8 @@ export default {
                     :aria-label="$options.i18n.comment"
                     :placeholder="$options.i18n.bodyPlaceholder"
                     @keydown.up="editCurrentUserLastNote()"
-                    @keydown.meta.enter="handleSave()"
-                    @keydown.ctrl.enter="handleSave()"
+                    @keydown.meta.enter="handleEnter()"
+                    @keydown.ctrl.enter="handleEnter()"
                   ></textarea>
                 </template>
               </markdown-field>

spec/frontend/notes/components/comment_form_spec.js

@@ -328,20 +328,45 @@ describe('issue_comment_form component', () => {
           mountComponent({ mountFunction: mount });
         });
 
-        it('should save note when cmd+enter is pressed', () => {
-          jest.spyOn(wrapper.vm, 'handleSave');
+        describe('when no draft exists', () => {
+          it('should save note when cmd+enter is pressed', () => {
+            jest.spyOn(wrapper.vm, 'handleSave');
 
-          findTextArea().trigger('keydown.enter', { metaKey: true });
+            findTextArea().trigger('keydown.enter', { metaKey: true });
 
-          expect(wrapper.vm.handleSave).toHaveBeenCalled();
+            expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+          });
+
+          it('should save note when ctrl+enter is pressed', () => {
+            jest.spyOn(wrapper.vm, 'handleSave');
+
+            findTextArea().trigger('keydown.enter', { ctrlKey: true });
+
+            expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+          });
         });
 
-        it('should save note when ctrl+enter is pressed', () => {
-          jest.spyOn(wrapper.vm, 'handleSave');
+        describe('when a draft exists', () => {
+          beforeEach(() => {
+            store.registerModule('batchComments', batchComments());
+            store.state.batchComments.drafts = [{ note: 'A' }];
+          });
+
+          it('should save note draft when cmd+enter is pressed', () => {
+            jest.spyOn(wrapper.vm, 'handleSaveDraft');
+
+            findTextArea().trigger('keydown.enter', { metaKey: true });
+
+            expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+          });
+
+          it('should save note draft when ctrl+enter is pressed', () => {
+            jest.spyOn(wrapper.vm, 'handleSaveDraft');
 
-          findTextArea().trigger('keydown.enter', { ctrlKey: true });
+            findTextArea().trigger('keydown.enter', { ctrlKey: true });
 
-          expect(wrapper.vm.handleSave).toHaveBeenCalled();
+            expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+          });
         });
       });
     });