Fixed remove deploy key loading icon not being removed after cancelingdeploy-keys-loading-icon

Closes #37595

5 files changed, 31 insertions, 4 deletions

diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index 3f993213dd0..f9f2f9bf693 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/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>
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 54e13b79a4f..fe046449054 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/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();
         }
       },
     },
diff --git a/changelogs/unreleased/deploy-keys-loading-icon.yml b/changelogs/unreleased/deploy-keys-loading-icon.yml
new file mode 100644
index 00000000000..e3cb5bc6924
--- /dev/null
+++ b/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
diff --git a/spec/javascripts/deploy_keys/components/action_btn_spec.js b/spec/javascripts/deploy_keys/components/action_btn_spec.js
index 5b93fbc5575..7025c3d836c 100644
--- a/spec/javascripts/deploy_keys/components/action_btn_spec.js
+++ b/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();
     });
diff --git a/spec/javascripts/deploy_keys/components/app_spec.js b/spec/javascripts/deploy_keys/components/app_spec.js
index 700897f50b0..0ca9290d3d2 100644
--- a/spec/javascripts/deploy_keys/components/app_spec.js
+++ b/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();
+    });
+  });
 });