Merge branch '229342-update-issue-edit-buttons' into 'master'

Update issue edit buttons

Closes #229342

See merge request gitlab-org/gitlab!40298

app/assets/javascripts/issue_show/components/edit_actions.vue

 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
+import { GlButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import updateMixin from '../mixins/update';
 import eventHub from '../event_hub';
@@ -10,6 +10,9 @@ const issuableTypes = {
 };
 
 export default {
+  components: {
+    GlButton,
+  },
   mixins: [updateMixin],
   props: {
     canDestroy: {
@@ -64,28 +67,30 @@ export default {
 
 <template>
   <div class="gl-mt-3 gl-mb-3 clearfix">
-    <button
-      :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
+    <gl-button
+      :loading="formState.updateLoading"
       :disabled="formState.updateLoading || !isSubmitEnabled"
-      class="btn btn-success float-left qa-save-button"
+      category="primary"
+      variant="success"
+      class="float-left qa-save-button"
       type="submit"
       @click.prevent="updateIssuable"
     >
-      Save changes
-      <i v-if="formState.updateLoading" class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
-    </button>
-    <button class="btn btn-default float-right" type="button" @click="closeForm">
+      {{ __('Save changes') }}
+    </gl-button>
+    <gl-button class="float-right" @click="closeForm">
       {{ __('Cancel') }}
-    </button>
-    <button
+    </gl-button>
+    <gl-button
       v-if="shouldShowDeleteButton"
-      :class="{ disabled: deleteLoading }"
+      :loading="deleteLoading"
       :disabled="deleteLoading"
-      class="btn btn-danger float-right gl-mr-3 qa-delete-button"
-      type="button"
+      category="primary"
+      variant="danger"
+      class="float-right gl-mr-3 qa-delete-button"
       @click="deleteIssuable"
     >
-      Delete <i v-if="deleteLoading" class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
-    </button>
+      {{ __('Delete') }}
+    </gl-button>
   </div>
 </template>

changelogs/unreleased/229342-update-issue-edit-buttons.yml

+---
+title: Update issue edit buttons
+merge_request: 40298
+author:
+type: changed

spec/frontend/issue_show/components/edit_actions_spec.js

@@ -70,16 +70,6 @@ describe('Edit Actions components', () => {
       expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
     });
 
-    it('shows loading icon after clicking save button', done => {
-      vm.$el.querySelector('.btn-success').click();
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.btn-success .fa')).not.toBeNull();
-
-        done();
-      });
-    });
-
     it('disabled button after clicking save button', done => {
       vm.$el.querySelector('.btn-success').click();
 
@@ -107,17 +97,6 @@ describe('Edit Actions components', () => {
       expect(eventHub.$emit).toHaveBeenCalledWith('delete.issuable', { destroy_confirm: true });
     });
 
-    it('shows loading icon after clicking delete button', done => {
-      jest.spyOn(window, 'confirm').mockReturnValue(true);
-      vm.$el.querySelector('.btn-danger').click();
-
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.btn-danger .fa')).not.toBeNull();
-
-        done();
-      });
-    });
-
     it('does no actions when confirm is false', done => {
       jest.spyOn(window, 'confirm').mockReturnValue(false);
       vm.$el.querySelector('.btn-danger').click();