Disable inline submit button when title is blankissue-edit-inline-title-validation

[ci skip]

3 files changed, 32 insertions, 2 deletions

diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index 4cefb236d32..e57b867f93b 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/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
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 7dd8ffb5af2..3c389d040db 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -25,6 +25,7 @@
     <title-field
       :form-state="formState" />
     <edit-actions
+      :form-state="formState"
       :can-destroy="canDestroy" />
   </form>
 </template>
diff --git a/spec/javascripts/issue_show/components/edit_actions_spec.js b/spec/javascripts/issue_show/components/edit_actions_spec.js
index 8fbaf6cfb2b..f6625b748b6 100644
--- a/spec/javascripts/issue_show/components/edit_actions_spec.js
+++ b/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();