Improve button loading states of MR reviews feature

Closes: https://gitlab.com/gitlab-org/gitlab/-/issues/333662

app/assets/javascripts/batch_comments/components/draft_note.vue

@@ -115,10 +115,15 @@ export default {
       ></div>
 
       <p class="draft-note-actions d-flex">
-        <publish-button :show-count="true" :should-publish="false" category="secondary" />
+        <publish-button
+          :show-count="true"
+          :should-publish="false"
+          category="secondary"
+          :disabled="isPublishingDraft(draft.id)"
+        />
         <gl-button
-          ref="publishNowButton"
-          :loading="isPublishingDraft(draft.id) || isPublishing"
+          :disabled="isPublishing"
+          :loading="isPublishingDraft(draft.id)"
           class="gl-ml-3"
           @click="publishNow"
         >

spec/frontend/batch_comments/components/draft_note_spec.js

+import { nextTick } from 'vue';
+import { GlButton } from '@gitlab/ui';
 import { getByRole } from '@testing-library/dom';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import { stubComponent } from 'helpers/stub_component';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
+import PublishButton from '~/batch_comments/components/publish_button.vue';
 import { createStore } from '~/batch_comments/stores';
 import NoteableNote from '~/notes/components/noteable_note.vue';
 import '~/behaviors/markdown/render_gfm';
@@ -28,6 +30,8 @@ describe('Batch comments draft note component', () => {
   };
 
   const getList = () => getByRole(wrapper.element, 'list');
+  const findSubmitReviewButton = () => wrapper.findComponent(PublishButton);
+  const findAddCommentButton = () => wrapper.findComponent(GlButton);
 
   const createComponent = (propsData = { draft }) => {
     wrapper = shallowMount(DraftNote, {
@@ -63,7 +67,7 @@ describe('Batch comments draft note component', () => {
   describe('add comment now', () => {
     it('dispatches publishSingleDraft when clicking', () => {
       createComponent();
-      const publishNowButton = wrapper.find({ ref: 'publishNowButton' });
+      const publishNowButton = findAddCommentButton();
       publishNowButton.vm.$emit('click');
 
       expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith(
@@ -77,10 +81,33 @@ describe('Batch comments draft note component', () => {
       wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1);
 
       await nextTick();
-      const publishNowButton = wrapper.find({ ref: 'publishNowButton' });
+      const publishNowButton = findAddCommentButton();
 
       expect(publishNowButton.props().loading).toBe(true);
     });
+
+    it('sets as disabled when review is publishing', async () => {
+      createComponent();
+      wrapper.vm.$store.state.batchComments.isPublishing = true;
+
+      await nextTick();
+      const publishNowButton = findAddCommentButton();
+
+      expect(publishNowButton.props().disabled).toBe(true);
+      expect(publishNowButton.props().loading).toBe(false);
+    });
+  });
+
+  describe('submit review', () => {
+    it('sets as disabled when draft is publishing', async () => {
+      createComponent();
+      wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1);
+
+      await nextTick();
+      const publishNowButton = findSubmitReviewButton();
+
+      expect(publishNowButton.attributes().disabled).toBeTruthy();
+    });
   });
 
   describe('update', () => {