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

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;
+        }
       },
     },
   };

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

 <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>

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>

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

-<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>

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

-<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>

spec/javascripts/pipelines/async_button_spec.js

@@ -15,7 +15,8 @@ describe('Pipelines Async Button', () => {
         title: 'Foo',
         icon: 'repeat',
         cssClass: 'bar',
-        id: 123,
+        pipelineId: 123,
+        type: 'explode',
       },
     }).$mount();
   });
@@ -39,8 +40,9 @@ describe('Pipelines Async Button', () => {
 
   describe('With confirm dialog', () => {
     it('should call the service when confimation is positive', () => {
-      eventHub.$on('actionConfirmationModal', (data) => {
-        expect(data.id).toEqual(123);
+      eventHub.$on('openConfirmationModal', (data) => {
+        expect(data.pipelineId).toEqual(123);
+        expect(data.type).toEqual('explode');
       });
 
       component = new AsyncButtonComponent({
@@ -49,7 +51,8 @@ describe('Pipelines Async Button', () => {
           title: 'Foo',
           icon: 'fa fa-foo',
           cssClass: 'bar',
-          id: 123,
+          pipelineId: 123,
+          type: 'explode',
         },
       }).$mount();