Merge branch '30985-cancel-pipelines' into 'master'

Destroy tooltip in async buttons and dropdowns

Closes #30985

See merge request !10768

app/assets/javascripts/environments/components/environment_actions.js

@@ -35,6 +35,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $(this.$refs.tooltip).tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
@@ -62,6 +64,7 @@ export default {
         class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
         data-container="body"
         data-toggle="dropdown"
+        ref="tooltip"
         :title="title"
         :aria-label="title"
         :disabled="isLoading">

app/assets/javascripts/environments/components/environment_rollback.js

@@ -36,6 +36,8 @@ export default {
     onClick() {
       this.isLoading = true;
 
+      $(this.$el).tooltip('destroy');
+
       this.service.postAction(this.retryUrl)
       .then(() => {
         this.isLoading = false;

app/assets/javascripts/environments/components/environment_stop.js

@@ -36,6 +36,8 @@ export default {
       if (confirm('Are you sure you want to stop this environment?')) {
         this.isLoading = true;
 
+        $(this.$el).tooltip('destroy');
+
         this.service.postAction(this.retryUrl)
         .then(() => {
           this.isLoading = false;

app/assets/javascripts/pipelines/components/async_button.vue

@@ -65,6 +65,8 @@ export default {
     makeRequest() {
       this.isLoading = true;
 
+      $(this.$el).tooltip('destroy');
+
       this.service.postAction(this.endpoint)
         .then(() => {
           this.isLoading = false;
@@ -88,9 +90,13 @@ export default {
     :aria-label="title"
     data-container="body"
     data-placement="top"
-    :disabled="isLoading"
-  >
-    <i :class="iconClass" aria-hidden="true"></i>
-    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
+    :disabled="isLoading">
+    <i
+      :class="iconClass"
+      aria-hidden="true" />
+    <i
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true"
+      v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/pipelines/components/pipelines_actions.js

@@ -28,6 +28,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $(this.$refs.tooltip).tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
@@ -57,6 +59,7 @@ export default {
         data-toggle="dropdown"
         data-placement="top"
         aria-label="Manual job"
+        ref="tooltip"
         :disabled="isLoading">
         ${playIconSvg}
         <i