Merge branch '2925-add-relation-via-enter-submit' into 'master'

Add enter keyboard shortcut to submit Related Issues form

Closes #2925

See merge request !2465

app/assets/javascripts/issuable/related_issues/components/add_issuable_form.vue

@@ -75,7 +75,8 @@ export default {
       this.$refs.input.focus();
     },
     onFormSubmit() {
-      eventHub.$emit('addIssuableFormSubmit');
+      const value = this.$refs.input.value;
+      eventHub.$emit('addIssuableFormSubmit', value);
     },
     onFormCancel() {
       eventHub.$emit('addIssuableFormCancel');
@@ -105,7 +106,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <form @submit.prevent="onFormSubmit">
     <div
       ref="issuableFormWrapper"
       class="add-issuable-form-input-wrapper form-control"
@@ -139,9 +140,8 @@ export default {
     <div class="add-issuable-form-actions clearfix">
       <button
         ref="addButton"
-        type="button"
+        type="submit"
         class="js-add-issuable-form-add-button btn btn-new pull-left"
-        @click="onFormSubmit"
         :disabled="isSubmitButtonDisabled">
         Add
         <loadingIcon
@@ -157,5 +157,5 @@ export default {
         Cancel
       </button>
     </div>
-  </div>
+  </form>
 </template>

app/assets/javascripts/issuable/related_issues/components/related_issues_root.vue

@@ -102,7 +102,9 @@ export default {
     onPendingIssueRemoveRequest(indexToRemove) {
       this.store.removePendingRelatedIssue(indexToRemove);
     },
-    onPendingFormSubmit() {
+    onPendingFormSubmit(newValue) {
+      this.processAllReferences(newValue);
+
       if (this.state.pendingReferences.length > 0) {
         this.isSubmitting = true;
         this.service.addRelatedIssues(this.state.pendingReferences)
@@ -165,7 +167,10 @@ export default {
       this.inputValue = `${touchedReference}`;
     },
     onBlur(newValue) {
-      const rawReferences = newValue
+      this.processAllReferences(newValue);
+    },
+    processAllReferences(value = '') {
+      const rawReferences = value
         .split(/\s+/)
         .filter(reference => reference.trim().length > 0);
 

spec/features/issuables/related_issues_spec.rb

@@ -125,6 +125,20 @@ describe 'Related issues', feature: true, js: true do
           expect(items[0].text).to eq(issue_project_b_a.title)
           expect(find('.js-related-issues-header-issue-count')).to have_content('1')
         end
+
+        it 'pressing enter should submit the form' do
+          find('.js-issue-count-badge-add-button').click
+          find('.js-add-issuable-form-input').set "#{issue_project_b_a.to_reference(project)} "
+          find('.js-add-issuable-form-input').native.send_key(:enter)
+
+          wait_for_requests
+
+          items = all('.js-related-issues-token-list-item .js-issue-token-title')
+
+          expect(items.count).to eq(1)
+          expect(items[0].text).to eq(issue_project_b_a.title)
+          expect(find('.js-related-issues-header-issue-count')).to have_content('1')
+        end
       end
 
       context 'with existing related issues' do

spec/javascripts/issuable/related_issues/components/add_issuable_form_spec.js

@@ -227,9 +227,11 @@ describe('AddIssuableForm', () => {
     it('when submitting pending issues', () => {
       expect(addIssuableFormSubmitSpy).not.toHaveBeenCalled();
 
+      const newInputValue = 'filling in things';
+      vm.$refs.input.value = newInputValue;
       vm.onFormSubmit();
 
-      expect(addIssuableFormSubmitSpy).toHaveBeenCalled();
+      expect(addIssuableFormSubmitSpy).toHaveBeenCalledWith(newInputValue);
     });
 
     it('when canceling form to collapse', () => {

spec/javascripts/issuable/related_issues/components/related_issues_root_spec.js

@@ -134,6 +134,18 @@ describe('RelatedIssuesRoot', () => {
         vm = new RelatedIssuesRoot({
           propsData: defaultProps,
         }).$mount();
+
+        spyOn(vm, 'processAllReferences').and.callThrough();
+        spyOn(vm.service, 'addRelatedIssues').and.callThrough();
+      });
+
+      it('processes references before submitting', () => {
+        const input = '#123';
+
+        vm.onPendingFormSubmit(input);
+
+        expect(vm.processAllReferences).toHaveBeenCalledWith(input);
+        expect(vm.service.addRelatedIssues).toHaveBeenCalledWith([input]);
       });
 
       it('submit zero pending issue as related issue', (done) => {
@@ -369,19 +381,37 @@ describe('RelatedIssuesRoot', () => {
         vm = new RelatedIssuesRoot({
           propsData: defaultProps,
         }).$mount();
+
+        spyOn(vm, 'processAllReferences');
       });
 
-      it('add valid reference to pending when blurring', () => {
+      it('add any references to pending when blurring', () => {
         const input = '#123';
+
         vm.onBlur(input);
 
+        expect(vm.processAllReferences).toHaveBeenCalledWith(input);
+      });
+    });
+
+    describe('processAllReferences', () => {
+      beforeEach(() => {
+        vm = new RelatedIssuesRoot({
+          propsData: defaultProps,
+        }).$mount();
+      });
+
+      it('add valid reference to pending', () => {
+        const input = '#123';
+        vm.processAllReferences(input);
+
         expect(vm.state.pendingReferences.length).toEqual(1);
         expect(vm.state.pendingReferences[0]).toEqual('#123');
       });
 
-      it('add any valid references to pending when blurring', () => {
+      it('add any valid references to pending', () => {
         const input = 'asdf #123';
-        vm.onBlur(input);
+        vm.processAllReferences(input);
 
         expect(vm.state.pendingReferences.length).toEqual(2);
         expect(vm.state.pendingReferences[0]).toEqual('asdf');