Merge branch '42886-followup-to-new-design-for-cancel-stop-pipeline-confirmation' into 'master'

Resolve "Followup to New design for cancel/stop pipeline confirmation"

Closes #42886

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

5 files changed, 93 insertions, 148 deletions

diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue
index a5f22c4ec80..0cdffbde05b 100644
--- a/app/assets/javascripts/pipelines/components/async_button.vue
+++ b/app/assets/javascripts/pipelines/components/async_button.vue
@@ -31,10 +31,14 @@
         type: String,
         required: true,
       },
-      id: {
+      pipelineId: {
         type: Number,
         required: true,
       },
+      type: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
@@ -46,17 +50,27 @@
         return `btn ${this.cssClass}`;
       },
     },
+    created() {
+      // We're using eventHub to listen to the modal here instead of
+      // using props because it would would make the parent components
+      // much more complex to keep track of the loading state of each button
+      eventHub.$on('postAction', this.setLoading);
+    },
+    beforeDestroy() {
+      eventHub.$off('postAction', this.setLoading);
+    },
     methods: {
       onClick() {
-        eventHub.$emit('actionConfirmationModal', {
-          id: this.id,
-          callback: this.makeRequest,
+        eventHub.$emit('openConfirmationModal', {
+          pipelineId: this.pipelineId,
+          endpoint: this.endpoint,
+          type: this.type,
         });
       },
-      makeRequest() {
-        this.isLoading = true;
-
-        eventHub.$emit('postAction', this.endpoint);
+      setLoading(endpoint) {
+        if (endpoint === this.endpoint) {
+          this.isLoading = true;
+        }
       },
     },
   };
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 62fe479fdf4..c9028952ddd 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -1,7 +1,8 @@
 <script>
+  import modal from '~/vue_shared/components/modal.vue';
+  import { s__, sprintf } from '~/locale';
   import pipelinesTableRowComponent from './pipelines_table_row.vue';
-  import stopConfirmationModal from './stop_confirmation_modal.vue';
-  import retryConfirmationModal from './retry_confirmation_modal.vue';
+  import eventHub from '../event_hub';
 
   /**
    * Pipelines Table Component.
@@ -11,8 +12,7 @@
   export default {
     components: {
       pipelinesTableRowComponent,
-      stopConfirmationModal,
-      retryConfirmationModal,
+      modal,
     },
     props: {
       pipelines: {
@@ -33,6 +33,52 @@
         required: true,
       },
     },
+    data() {
+      return {
+        pipelineId: '',
+        endpoint: '',
+        type: '',
+      };
+    },
+    computed: {
+      modalTitle() {
+        return this.type === 'stop' ?
+          sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
+            pipelineId: `'${this.pipelineId}'`,
+          }, false) :
+          sprintf(s__('Pipeline|Retry pipeline #%{pipelineId}?'), {
+            pipelineId: `'${this.pipelineId}'`,
+          }, false);
+      },
+      modalText() {
+        return this.type === 'stop' ?
+          sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), {
+            pipelineId: `<strong>#${this.pipelineId}</strong>`,
+          }, false) :
+          sprintf(s__('Pipeline|You’re about to retry pipeline %{pipelineId}.'), {
+            pipelineId: `<strong>#${this.pipelineId}</strong>`,
+          }, false);
+      },
+      primaryButtonLabel() {
+        return this.type === 'stop' ? s__('Pipeline|Stop pipeline') : s__('Pipeline|Retry pipeline');
+      },
+    },
+    created() {
+      eventHub.$on('openConfirmationModal', this.setModalData);
+    },
+    beforeDestroy() {
+      eventHub.$off('openConfirmationModal', this.setModalData);
+    },
+    methods: {
+      setModalData(data) {
+        this.pipelineId = data.pipelineId;
+        this.endpoint = data.endpoint;
+        this.type = data.type;
+      },
+      onSubmit() {
+        eventHub.$emit('postAction', this.endpoint);
+      },
+    },
   };
 </script>
 <template>
@@ -74,7 +120,20 @@
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
     />
-    <stop-confirmation-modal />
-    <retry-confirmation-modal />
+    <modal
+      id="confirmation-modal"
+      :title="modalTitle"
+      :text="modalText"
+      kind="danger"
+      :primary-button-label="primaryButtonLabel"
+      @submit="onSubmit"
+    >
+      <template
+        slot="body"
+        slot-scope="props"
+      >
+        <p v-html="props.text"></p>
+      </template>
+    </modal>
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index 0e3a10ed7f4..33d441e573e 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -305,9 +305,10 @@
           css-class="js-pipelines-retry-button btn-default btn-retry"
           title="Retry"
           icon="repeat"
-          :id="pipeline.id"
+          :pipeline-id="pipeline.id"
           data-toggle="modal"
-          data-target="#retry-confirmation-modal"
+          data-target="#confirmation-modal"
+          type="retry"
         />
 
         <async-button-component
@@ -316,9 +317,10 @@
           css-class="js-pipelines-cancel-button btn-remove"
           title="Cancel"
           icon="close"
-          :id="pipeline.id"
+          :pipeline-id="pipeline.id"
           data-toggle="modal"
-          data-target="#stop-confirmation-modal"
+          data-target="#confirmation-modal"
+          type="stop"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue b/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue
deleted file mode 100644
index e2ac08d67bc..00000000000
--- a/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-  import modal from '~/vue_shared/components/modal.vue';
-  import { s__, sprintf } from '~/locale';
-  import eventHub from '../event_hub';
-
-  export default {
-    components: {
-      modal,
-    },
-    data() {
-      return {
-        id: '',
-        callback: () => {},
-      };
-    },
-    computed: {
-      title() {
-        return sprintf(s__('Pipeline|Retry pipeline #%{id}?'), {
-          id: `'${this.id}'`,
-        }, false);
-      },
-      text() {
-        return sprintf(s__('Pipeline|You’re about to retry pipeline %{id}.'), {
-          id: `<strong>#${this.id}</strong>`,
-        }, false);
-      },
-      primaryButtonLabel() {
-        return s__('Pipeline|Retry pipeline');
-      },
-    },
-    created() {
-      eventHub.$on('actionConfirmationModal', this.updateModal);
-    },
-    beforeDestroy() {
-      eventHub.$off('actionConfirmationModal', this.updateModal);
-    },
-    methods: {
-      updateModal(action) {
-        this.id = action.id;
-        this.callback = action.callback;
-      },
-      onSubmit() {
-        this.callback();
-      },
-    },
-  };
-</script>
-
-<template>
-  <modal
-    id="retry-confirmation-modal"
-    :title="title"
-    :text="text"
-    kind="danger"
-    :primary-button-label="primaryButtonLabel"
-    @submit="onSubmit"
-  >
-    <template
-      slot="body"
-      slot-scope="props"
-    >
-      <p v-html="props.text"></p>
-    </template>
-  </modal>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue b/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue
deleted file mode 100644
index d737d567787..00000000000
--- a/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-  import modal from '~/vue_shared/components/modal.vue';
-  import { s__, sprintf } from '~/locale';
-  import eventHub from '../event_hub';
-
-  export default {
-    components: {
-      modal,
-    },
-    data() {
-      return {
-        id: '',
-        callback: () => {},
-      };
-    },
-    computed: {
-      title() {
-        return sprintf(s__('Pipeline|Stop pipeline #%{id}?'), {
-          id: `'${this.id}'`,
-        }, false);
-      },
-      text() {
-        return sprintf(s__('Pipeline|You’re about to stop pipeline %{id}.'), {
-          id: `<strong>#${this.id}</strong>`,
-        }, false);
-      },
-      primaryButtonLabel() {
-        return s__('Pipeline|Stop pipeline');
-      },
-    },
-    created() {
-      eventHub.$on('actionConfirmationModal', this.updateModal);
-    },
-    beforeDestroy() {
-      eventHub.$off('actionConfirmationModal', this.updateModal);
-    },
-    methods: {
-      updateModal(action) {
-        this.id = action.id;
-        this.callback = action.callback;
-      },
-      onSubmit() {
-        this.callback();
-      },
-    },
-  };
-</script>
-
-<template>
-  <modal
-    id="stop-confirmation-modal"
-    :title="title"
-    :text="text"
-    kind="danger"
-    :primary-button-label="primaryButtonLabel"
-    @submit="onSubmit"
-  >
-    <template
-      slot="body"
-      slot-scope="props"
-    >
-      <p v-html="props.text"></p>
-    </template>
-  </modal>
-</template>