Merge branch 'issue-edit-inline-title-validation' into 'issue-edit-inline'

Disable inline submit button when title is blank

See merge request !11409

app/assets/javascripts/issue_show/components/edit_actions.vue

@@ -7,6 +7,10 @@
         type: Boolean,
         required: true,
       },
+      formState: {
+        type: Object,
+        required: true,
+      },
     },
     data() {
       return {
@@ -14,6 +18,11 @@
         updateLoading: false,
       };
     },
+    computed: {
+      isSubmitEnabled() {
+        return this.formState.title.trim() !== '';
+      },
+    },
     methods: {
       updateIssuable() {
         this.updateLoading = true;
@@ -38,9 +47,9 @@
   <div class="prepend-top-default append-bottom-default clearfix">
     <button
       class="btn btn-save pull-left"
-      :class="{ disabled: updateLoading }"
+      :class="{ disabled: updateLoading || !isSubmitEnabled }"
       type="submit"
-      :disabled="updateLoading"
+      :disabled="updateLoading || !isSubmitEnabled"
       @click="updateIssuable">
       Save changes
       <i

app/assets/javascripts/issue_show/components/form.vue

@@ -39,6 +39,7 @@
       :markdown-preview-url="markdownPreviewUrl"
       :markdown-docs="markdownDocs" />
     <edit-actions
+      :form-state="formState"
       :can-destroy="canDestroy" />
   </form>
 </template>

spec/javascripts/issue_show/components/edit_actions_spec.js

@@ -1,18 +1,26 @@
 import Vue from 'vue';
 import editActions from '~/issue_show/components/edit_actions.vue';
 import eventHub from '~/issue_show/event_hub';
+import Store from '~/issue_show/stores';
 
 describe('Edit Actions components', () => {
   let vm;
 
   beforeEach((done) => {
     const Component = Vue.extend(editActions);
+    const store = new Store({
+      titleHtml: '',
+      descriptionHtml: '',
+      issuableRef: '',
+    });
+    store.formState.title = 'test';
 
     spyOn(eventHub, '$emit');
 
     vm = new Component({
       propsData: {
         canDestroy: true,
+        formState: store.formState,
       },
     }).$mount();
 
@@ -41,6 +49,18 @@ describe('Edit Actions components', () => {
     });
   });
 
+  it('disables submit button when title is blank', (done) => {
+    vm.formState.title = '';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.btn-save').getAttribute('disabled'),
+      ).toBe('disabled');
+
+      done();
+    });
+  });
+
   describe('updateIssuable', () => {
     it('sends update.issauble event when clicking save button', () => {
       vm.$el.querySelector('.btn-save').click();