Remove use of callback in pipeline stop/retry modals

Make changes to names of events and variables Combine stop and retry modals into 1 Fix lint issues Add comment about usage of eventHub instead of props
2018-02-13 22:16:36 -06:00 · 2018-02-13 22:16:36 -06:00 · e887e85871
parent 46d59a5d24
commit e887e85871
6 changed files with 100 additions and 152 deletions
--- 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;
+        }
      },
    },
  };
--- 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>
--- 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>
--- a/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue
+++ b/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue
@ -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>
--- a/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue
+++ b/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue
@ -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>
--- a/spec/javascripts/pipelines/async_button_spec.js
+++ b/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();