Merge branch '332805-fix-bulk-dismiss' into 'master'

Fix submit button not being clickable

See merge request gitlab-org/gitlab!64315

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);