Merge branch 'deploy-keys-loading-icon' into 'master'

Fixed remove deploy key loading icon not being removed after canceling

Closes #37595

See merge request gitlab-org/gitlab-ce!15779

app/assets/javascripts/deploy_keys/components/action_btn.vue

@@ -32,7 +32,9 @@
       doAction() {
         this.isLoading = true;
 
-        eventHub.$emit(`${this.type}.key`, this.deployKey);
+        eventHub.$emit(`${this.type}.key`, this.deployKey, () => {
+          this.isLoading = false;
+        });
       },
     },
     computed: {
@@ -50,6 +52,9 @@
     :disabled="isLoading"
     @click="doAction">
     {{ text }}
-    <loading-icon v-if="isLoading" />
+    <loading-icon
+      v-if="isLoading"
+      :inline="true"
+    />
   </button>
 </template>

app/assets/javascripts/deploy_keys/components/app.vue

@@ -47,12 +47,15 @@
           .then(() => this.fetchKeys())
           .catch(() => new Flash('Error enabling deploy key'));
       },
-      disableKey(deployKey) {
+      disableKey(deployKey, callback) {
         // eslint-disable-next-line no-alert
         if (confirm('You are going to remove this deploy key. Are you sure?')) {
           this.service.disableKey(deployKey.id)
             .then(() => this.fetchKeys())
+            .then(callback)
             .catch(() => new Flash('Error removing deploy key'));
+        } else {
+          callback();
         }
       },
     },

changelogs/unreleased/deploy-keys-loading-icon.yml

@@ -0,0 +1,5 @@
+---
+title: Fixed deploy keys remove button loading state not resetting
+merge_request:
+author:
+type: fixed

spec/javascripts/deploy_keys/components/action_btn_spec.js

@@ -34,7 +34,7 @@ describe('Deploy keys action btn', () => {
     setTimeout(() => {
       expect(
         eventHub.$emit,
-      ).toHaveBeenCalledWith('enable.key', deployKey);
+      ).toHaveBeenCalledWith('enable.key', deployKey, jasmine.anything());
 
       done();
     });

spec/javascripts/deploy_keys/components/app_spec.js

@@ -139,4 +139,18 @@ describe('Deploy keys app component', () => {
   it('hasKeys returns true when there are keys', () => {
     expect(vm.hasKeys).toEqual(3);
   });
+
+  it('resets remove button loading state', (done) => {
+    spyOn(window, 'confirm').and.returnValue(false);
+
+    const btn = vm.$el.querySelector('.btn-warning');
+
+    btn.click();
+
+    Vue.nextTick(() => {
+      expect(btn.querySelector('.fa')).toBeNull();
+
+      done();
+    });
+  });
 });