Merge branch '300403-remove-type-from-minipipeline-stage' into 'master'

Replace "type"  prop with events in stage.vue

See merge request gitlab-org/gitlab!54962

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);
     });
   });
 });