Fix submit button not being clickable

The vulnerability status bulk update form is updating the submit
button's disabled state on form submission. After the submission
is complete the button remains disabled. This commit fixes that
behaviour.

Changelog: fixed
EE: true

ee/app/assets/javascripts/security_dashboard/components/shared/selection_summary.vue

@@ -27,6 +27,7 @@ export default {
   },
   data() {
     return {
+      isSubmitting: false,
       updateErrorText: null,
       selectedStatus: null,
       selectedStatusPayload: undefined,
@@ -51,6 +52,7 @@ export default {
     },
 
     handleSubmit() {
+      this.isSubmitting = true;
       this.updateErrorText = null;
       let fulfilledCount = 0;
       const rejected = [];
@@ -77,6 +79,8 @@ export default {
       });
 
       return Promise.all(promises).then(() => {
+        this.isSubmitting = false;
+
         if (fulfilledCount > 0) {
           toast(this.$options.i18n.vulnerabilitiesUpdated(fulfilledCount));
           eventHub.$emit('vulnerabilities-updated', this);
@@ -128,7 +132,7 @@ export default {
           <gl-button type="button" class="gl-mr-4" @click="resetSelected">
             {{ $options.i18n.cancel }}
           </gl-button>
-          <gl-button type="submit" category="primary" variant="confirm">
+          <gl-button type="submit" category="primary" variant="confirm" :disabled="isSubmitting">
             {{ $options.i18n.changeStatus }}
           </gl-button>
         </template>

ee/spec/frontend/security_dashboard/components/shared/selection_summary_spec.js

@@ -17,10 +17,6 @@ localVue.use(VueApollo);
 describe('Selection Summary component', () => {
   let wrapper;
 
-  const defaultData = {
-    dismissalReason: null,
-  };
-
   const createApolloProvider = (...queries) => {
     return createMockApollo([...queries]);
   };
@@ -29,8 +25,9 @@ describe('Selection Summary component', () => {
   const findGlAlert = () => wrapper.findComponent(GlAlert);
   const findCancelButton = () => wrapper.find('[type="button"]');
   const findSubmitButton = () => wrapper.find('[type="submit"]');
+  const isSubmitButtonDisabled = () => findSubmitButton().props('disabled');
 
-  const createComponent = ({ props = {}, data = defaultData, apolloProvider } = {}) => {
+  const createComponent = ({ props = {}, apolloProvider } = {}) => {
     wrapper = shallowMount(SelectionSummary, {
       localVue,
       apolloProvider,
@@ -41,13 +38,11 @@ describe('Selection Summary component', () => {
         selectedVulnerabilities: [],
         ...props,
       },
-      data: () => data,
     });
   };
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('with 1 vulnerability selected', () => {
@@ -116,7 +111,6 @@ describe('Selection Summary component', () => {
     const submitForm = async () => {
       wrapper.find(StatusDropdown).vm.$emit('change', { action, payload });
       findForm().trigger('submit');
-
       await waitForPromises();
     };
 
@@ -171,7 +165,10 @@ describe('Selection Summary component', () => {
           }),
         ]);
 
-        createComponent({ apolloProvider, props: { selectedVulnerabilities } });
+        createComponent({
+          apolloProvider,
+          props: { selectedVulnerabilities },
+        });
       });
 
       it(`emits an update for each vulnerability - ${action}`, async () => {
@@ -186,6 +183,15 @@ describe('Selection Summary component', () => {
         expect(toast).toHaveBeenLastCalledWith('3 vulnerabilities updated');
       });
 
+      it(`the submit button is unclickable during form submission - ${action}`, async () => {
+        expect(findSubmitButton().exists()).toBe(false);
+        submitForm();
+        await wrapper.vm.$nextTick();
+        expect(isSubmitButtonDisabled()).toBe(true);
+        await waitForPromises();
+        expect(isSubmitButtonDisabled()).toBe(false);
+      });
+
       it(`emits an event for the event hub - ${action}`, async () => {
         const spy = jest.fn();
         eventHub.$on('vulnerabilities-updated', spy);