Remove "type" prop from stage.vue

The "type" prop in the stage is used to decide if an event should be
triggered in the eventHub but using an single event bind is easier to
track.

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table_row.vue

@@ -3,7 +3,6 @@ import { GlButton, GlTooltipDirective, GlModalDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
 import CommitComponent from '~/vue_shared/components/commit.vue';
-import { PIPELINES_TABLE } from '../../constants';
 import eventHub from '../../event_hub';
 import PipelineTriggerer from './pipeline_triggerer.vue';
 import PipelineUrl from './pipeline_url.vue';
@@ -57,7 +56,6 @@ export default {
       default: null,
     },
   },
-  pipelinesTable: PIPELINES_TABLE,
   data() {
     return {
       isRetrying: false,
@@ -173,6 +171,10 @@ export default {
       this.isRetrying = true;
       eventHub.$emit('retryPipeline', this.pipeline.retry_path);
     },
+    handlePipelineActionRequestComplete() {
+      // warn the pipelines table to update
+      eventHub.$emit('refreshPipelinesTable');
+    },
   },
 };
 </script>
@@ -220,9 +222,9 @@ export default {
             data-testid="widget-mini-pipeline-graph"
           >
             <pipeline-stage
-              :type="$options.pipelinesTable"
               :stage="stage"
               :update-dropdown="updateGraphDropdown"
+              @pipelineActionRequestComplete="handlePipelineActionRequestComplete"
             />
           </div>
         </template>

app/assets/javascripts/pipelines/components/pipelines_list/stage.vue

@@ -15,7 +15,6 @@ import { GlDropdown, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/u
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import { PIPELINES_TABLE } from '../../constants';
 import eventHub from '../../event_hub';
 import JobItem from '../graph/job_item.vue';
 
@@ -39,11 +38,6 @@ export default {
       required: false,
       default: false,
     },
-    type: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   data() {
     return {
@@ -90,13 +84,11 @@ export default {
       return this.$el.classList.contains('show');
     },
     pipelineActionRequestComplete() {
-      if (this.type === PIPELINES_TABLE) {
-        // warn the pipelines table to update
-        eventHub.$emit('refreshPipelinesTable');
-        return;
-      }
       // close the dropdown in MR widget
       this.$refs.stageGlDropdown.hide();
+
+      // warn the pipelines table to update
+      this.$emit('pipelineActionRequestComplete');
     },
   },
 };

app/assets/javascripts/pipelines/constants.js

 import { s__, __ } from '~/locale';
 
 export const CANCEL_REQUEST = 'CANCEL_REQUEST';
-export const PIPELINES_TABLE = 'PIPELINES_TABLE';
 export const LAYOUT_CHANGE_DELAY = 300;
 export const FILTER_PIPELINES_SEARCH_DELAY = 200;
 export const ANY_TRIGGER_AUTHOR = 'Any';

spec/frontend/pipelines/stage_spec.js

@@ -142,6 +142,8 @@ describe('Pipelines stage component', () => {
     beforeEach(() => {
       mock.onGet(dropdownPath).reply(200, stageReply);
       mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
+
+      createComponent();
     });
 
     const clickCiAction = async () => {
@@ -152,34 +154,22 @@ describe('Pipelines stage component', () => {
       await axios.waitForAll();
     };
 
-    describe('within pipeline table', () => {
-      beforeEach(() => {
-        createComponent({ type: 'PIPELINES_TABLE' });
-      });
-
-      it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', async () => {
-        await clickCiAction();
-
-        expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
-      });
-    });
+    it('closes dropdown when job item action is clicked', async () => {
+      const hidden = jest.fn();
 
-    describe('in MR widget', () => {
-      beforeEach(() => {
-        createComponent();
-      });
+      wrapper.vm.$root.$on('bv::dropdown::hide', hidden);
 
-      it('closes the dropdown when `pipelineActionRequestComplete` is triggered', async () => {
-        const hidden = jest.fn();
+      expect(hidden).toHaveBeenCalledTimes(0);
 
-        wrapper.vm.$root.$on('bv::dropdown::hide', hidden);
+      await clickCiAction();
 
-        expect(hidden).toHaveBeenCalledTimes(0);
+      expect(hidden).toHaveBeenCalledTimes(1);
+    });
 
-        await clickCiAction();
+    it('emits `pipelineActionRequestComplete` when job item action is clicked', async () => {
+      await clickCiAction();
 
-        expect(hidden).toHaveBeenCalledTimes(1);
-      });
+      expect(wrapper.emitted('pipelineActionRequestComplete')).toHaveLength(1);
     });
   });
 });