Removes UJS from reset cache button

Uses loading button for better UX

3 files changed, 44 insertions, 10 deletions

diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index 383ab51fe56..eba5678e3e5 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -1,6 +1,11 @@
 <script>
+  import LoadingButton from '../../vue_shared/components/loading_button.vue';
+
   export default {
     name: 'PipelineNavControls',
+    components: {
+      LoadingButton,
+    },
     props: {
       newPipelinePath: {
         type: String,
@@ -19,6 +24,17 @@
         required: false,
         default: null,
       },
+
+      isResetCacheButtonLoading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    methods: {
+      onClickResetCache() {
+        this.$emit('resetRunnersCache', this.resetCachePath);
+      },
     },
   };
 </script>
@@ -32,14 +48,13 @@
       {{ s__('Pipelines|Run Pipeline') }}
     </a>
 
-    <a
+    <loading-button
       v-if="resetCachePath"
-      data-method="post"
-      :href="resetCachePath"
+      @click="onClickResetCache"
+      :loading="isResetCacheButtonLoading"
       class="btn btn-default js-clear-cache"
-    >
-      {{ s__('Pipelines|Clear Runner Caches') }}
-    </a>
+      :label="s__('Pipelines|Clear Runner Caches')"
+    />
 
     <a
       v-if="ciLintPath"
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 6e5ee68eeb1..e0a7284124d 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -1,6 +1,7 @@
 <script>
   import _ from 'underscore';
   import { __, sprintf, s__ } from '../../locale';
+  import createFlash from '../../flash';
   import PipelinesService from '../services/pipelines_service';
   import pipelinesMixin from '../mixins/pipelines';
   import TablePagination from '../../vue_shared/components/table_pagination.vue';
@@ -92,6 +93,7 @@
         scope: getParameterByName('scope') || 'all',
         page: getParameterByName('page') || '1',
         requestData: {},
+        isResetCacheButtonLoading: false,
       };
     },
     stateMap: {
@@ -265,6 +267,23 @@
             this.poll.restart({ data: this.requestData });
           });
       },
+
+      handleResetRunnersCache(endpoint) {
+        this.isResetCacheButtonLoading = true;
+
+        this.service.postAction(endpoint)
+          .then(() => {
+            this.isResetCacheButtonLoading = false;
+            createFlash(
+              s__('Pipelines|Project cache successfully reset.'),
+              'notice',
+            );
+          })
+          .catch(() => {
+            this.isResetCacheButtonLoading = false;
+            createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.'));
+          });
+      },
     },
   };
 </script>
@@ -301,6 +320,8 @@
         :new-pipeline-path="newPipelinePath"
         :reset-cache-path="resetCachePath"
         :ci-lint-path="ciLintPath"
+        @resetRunnersCache="handleResetRunnersCache"
+        :is-reset-cache-button-loading="isResetCacheButtonLoading"
       />
     </div>
 
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 9fcc07abee5..522a4277bd7 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -51,12 +51,10 @@ export default {
       }
     });
 
-    eventHub.$on('refreshPipelines', this.fetchPipelines);
     eventHub.$on('postAction', this.postAction);
   },
   beforeDestroy() {
-    eventHub.$off('refreshPipelines');
-    eventHub.$on('postAction', this.postAction);
+    eventHub.$off('postAction', this.postAction);
   },
   destroyed() {
     this.poll.stop();
@@ -92,7 +90,7 @@ export default {
     },
     postAction(endpoint) {
       this.service.postAction(endpoint)
-        .then(() => eventHub.$emit('refreshPipelines'))
+        .then(() => this.fetchPipelines())
         .catch(() => Flash(__('An error occurred while making the request.')));
     },
   },