Merge branch '34336-related-issues-ui-polish' into 'master'

Related Issues UI Polish

Closes #2756

See merge request !2268

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

@@ -12,10 +12,6 @@ export default {
       type: String,
       required: true,
     },
-    addButtonLabel: {
-      type: String,
-      required: true,
-    },
     pendingReferences: {
       type: Array,
       required: false,
@@ -46,8 +42,12 @@ export default {
   },
 
   computed: {
+    inputPlaceholder() {
+      return 'Paste issue link or <#issue id>';
+    },
     isSubmitButtonDisabled() {
-      return this.pendingReferences.length === 0 || this.isSubmitting;
+      return (this.inputValue.length === 0 && this.pendingReferences.length === 0)
+        || this.isSubmitting;
     },
   },
 
@@ -84,12 +84,15 @@ export default {
 
   mounted() {
     const $input = $(this.$refs.input);
+
     new GfmAutoComplete(this.autoCompleteSources).setup($input, {
       issues: true,
     });
     $input.on('shown-issues.atwho', this.onAutoCompleteToggled.bind(this, true));
     $input.on('hidden-issues.atwho', this.onAutoCompleteToggled.bind(this, false));
     $input.on('inserted-issues.atwho', this.onInput);
+
+    this.$refs.input.focus();
   },
 
   beforeDestroy() {
@@ -126,7 +129,7 @@ export default {
             type="text"
             class="js-add-issuable-form-input add-issuable-form-input"
             :value="inputValue"
-            placeholder="Search issues..."
+            :placeholder="inputPlaceholder"
             @input="onInput"
             @focus="onFocus"
             @blur="onBlur" />
@@ -140,7 +143,7 @@ export default {
         class="js-add-issuable-form-add-button btn btn-new pull-left"
         @click="onFormSubmit"
         :disabled="isSubmitButtonDisabled">
-        {{ addButtonLabel }}
+        Add
         <loadingIcon
           ref="loadingIcon"
           v-if="isSubmitting"

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

@@ -119,11 +119,10 @@ export default {
     </component>
     <button
       v-if="canRemove"
-      v-tooltip
       ref="removeButton"
       type="button"
       class="js-issue-token-remove-button issue-token-remove-button"
-      :title="removeButtonLabel"
+      :aria-label="removeButtonLabel"
       @click="onRemoveRequest">
       <i
         class="fa fa-times"

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

@@ -76,8 +76,8 @@ export default {
     hasBody() {
       return this.isFormVisible || this.shouldShowTokenBody;
     },
-    relatedIssueCount() {
-      return this.relatedIssues.length;
+    badgeLabel() {
+      return this.isFetching && this.relatedIssues.length === 0 ? '...' : this.relatedIssues.length;
     },
     hasHelpPath() {
       return this.helpPath.length > 0;
@@ -113,15 +113,13 @@ export default {
             <span
               class="issue-count-badge-count"
               :class="{ 'has-btn': this.canAddRelatedIssues }">
-              {{ relatedIssueCount }}
+              {{ badgeLabel }}
             </span>
             <button
               v-if="canAddRelatedIssues"
-              v-tooltip
               ref="issueCountBadgeAddButton"
               type="button"
               class="js-issue-count-badge-add-button issue-count-badge-add-button btn btn-small btn-default"
-              title="Add an issue"
               aria-label="Add an issue"
               data-placement="top"
               @click="toggleAddRelatedIssuesForm">
@@ -143,7 +141,6 @@ export default {
           :is-submitting="isSubmitting"
           :input-value="inputValue"
           :pending-references="pendingReferences"
-          add-button-label="Add related issues"
           :auto-complete-sources="autoCompleteSources" />
       </div>
       <div

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

@@ -119,7 +119,7 @@ export default {
           .catch((res) => {
             this.isSubmitting = false;
             // eslint-disable-next-line no-new
-            new Flash(res.data.message || 'An error occurred while submitting related issues.');
+            new Flash(res.data.message || 'We can\'t find an issue that matches what you are looking for.');
           });
       }
     },

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

@@ -40,31 +40,45 @@ describe('AddIssuableForm', () => {
 
   describe('with data', () => {
     describe('without references', () => {
-      beforeEach(() => {
-        vm = new AddIssuableForm({
-          propsData: {
-            inputValue: '',
-            addButtonLabel: 'Submit',
-            pendingReferences: [],
-          },
-        }).$mount();
+      describe('without any input text', () => {
+        beforeEach(() => {
+          vm = new AddIssuableForm({
+            propsData: {
+              inputValue: '',
+              pendingReferences: [],
+            },
+          }).$mount();
+        });
+
+        it('should have disabled submit button', () => {
+          expect(vm.$refs.addButton.disabled).toBe(true);
+          expect(vm.$refs.loadingIcon).toBeUndefined();
+        });
       });
 
-      it('should have disabled submit button', () => {
-        expect(vm.$refs.addButton.disabled).toBe(true);
-        expect(vm.$refs.loadingIcon).toBeUndefined();
+      describe('with input text', () => {
+        beforeEach(() => {
+          vm = new AddIssuableForm({
+            propsData: {
+              inputValue: 'foo',
+              pendingReferences: [],
+            },
+          }).$mount();
+        });
+
+        it('should not have disabled submit button', () => {
+          expect(vm.$refs.addButton.disabled).toBe(false);
+        });
       });
     });
 
     describe('with references', () => {
       const inputValue = 'foo #123';
-      const addButtonLabel = 'Add issuable';
 
       beforeEach(() => {
         vm = new AddIssuableForm({
           propsData: {
             inputValue,
-            addButtonLabel,
             pendingReferences: [
               issuable1.reference,
               issuable2.reference,
@@ -73,10 +87,6 @@ describe('AddIssuableForm', () => {
         }).$mount();
       });
 
-      it('should put button label in place', () => {
-        expect(vm.$refs.addButton.textContent.trim()).toEqual(addButtonLabel);
-      });
-
       it('should put input value in place', () => {
         expect(vm.$refs.input.value).toEqual(inputValue);
       });
@@ -84,6 +94,10 @@ describe('AddIssuableForm', () => {
       it('should render pending issuables items', () => {
         expect(vm.$el.querySelectorAll('.js-add-issuable-form-token-list-item').length).toEqual(2);
       });
+
+      it('should not have disabled submit button', () => {
+        expect(vm.$refs.addButton.disabled).toBe(false);
+      });
     });
 
     describe('when submitting', () => {
@@ -91,7 +105,6 @@ describe('AddIssuableForm', () => {
         vm = new AddIssuableForm({
           propsData: {
             inputValue: '',
-            addButtonLabel: 'Submit',
             pendingReferences: [
               issuable1.reference,
               issuable2.reference,
@@ -131,7 +144,6 @@ describe('AddIssuableForm', () => {
       vm = new AddIssuableForm({
         propsData: {
           inputValue: '',
-          addButtonLabel: 'Add issuable',
           pendingIssuables: [
             issuable1,
           ],

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

@@ -64,6 +64,10 @@ describe('RelatedIssuesBlock', () => {
     it('should show loading icon', () => {
       expect(vm.$refs.loadingIcon).toBeDefined();
     });
+
+    it('should show `...` badge count', () => {
+      expect(vm.badgeLabel).toBe('...');
+    });
   });
 
   describe('with canAddRelatedIssues=true', () => {