Merge branch '222346-fix-vulnerability-save-button-spinner-position' into 'master'

Fix vulnerability save button spinner position

See merge request gitlab-org/gitlab!40781

ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue

@@ -135,7 +135,7 @@ export default {
 <template>
   <history-comment-editor
     v-if="isEditingComment"
-    class="discussion-reply-holder m-3"
+    class="discussion-reply-holder"
     :initial-comment="commentNote"
     :is-saving="isSavingComment"
     @onSave="saveComment"

ee/app/assets/javascripts/vulnerabilities/components/history_comment_editor.vue

 <script>
-import { GlFormTextarea, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlFormTextarea, GlButton } from '@gitlab/ui';
 
 export default {
-  components: { GlFormTextarea, GlButton, GlLoadingIcon },
+  components: { GlFormTextarea, GlButton },
   props: {
     initialComment: {
       type: String,
@@ -43,9 +43,9 @@ export default {
         ref="saveButton"
         variant="success"
         :disabled="isSaveButtonDisabled"
+        :loading="isSaving"
         @click="$emit('onSave', trimmedComment)"
       >
-        <gl-loading-icon v-if="isSaving" class="mr-1" />
         {{ __('Save comment') }}
       </gl-button>
       <gl-button ref="cancelButton" class="ml-1" :disabled="isSaving" @click="$emit('onCancel')">

ee/changelogs/unreleased/222346-fix-vulnerability-save-button-spinner-position.yml

+---
+title: Fix vulnerability save button spinner position
+merge_request: 40781
+author:
+type: fixed

ee/spec/frontend/vulnerabilities/history_comment_editor_spec.js

@@ -51,20 +51,19 @@ describe('History Comment Editor', () => {
     expect(wrapper.emitted().onCancel).toHaveLength(1);
   });
 
-  it('disables the save button when there is no text or only whitespace in the textarea', () => {
+  it('disables the save button when there is no text or only whitespace in the textarea', async () => {
     createWrapper({ initialComment: 'some comment' });
     textarea().vm.$emit('input', '    ');
+    await wrapper.vm.$nextTick();
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(saveButton().attributes('disabled')).toBeTruthy();
-    });
+    expect(saveButton().props('disabled')).toBe(true);
   });
 
-  it('disables all elements when the isSaving prop is true', () => {
+  it('disables all elements when the comment is being saved', () => {
     createWrapper({ isSaving: true });
 
     expect(textarea().attributes('disabled')).toBeTruthy();
-    expect(saveButton().attributes('disabled')).toBeTruthy();
-    expect(cancelButton().attributes('disabled')).toBeTruthy();
+    expect(saveButton().props('loading')).toBe(true);
+    expect(cancelButton().props('disabled')).toBe(true);
   });
 });