Implement mini graph pipeline to use gl-dropdown

In the original implementation of the stages in mini pipelines the
dropdown to show jobs in a stage use jQuery to handle event.

This change aims to replace this implementation with the component
gl-dropdown from gitlab-ui.

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

@@ -11,11 +11,11 @@
  * 3. Merge request widget
  * 4. Commit widget
  */
-
 import $ from 'jquery';
-import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as Flash } from '~/flash';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import axios from '~/lib/utils/axios_utils';
 import eventHub from '../../event_hub';
 import JobItem from '../graph/job_item.vue';
@@ -24,14 +24,14 @@ import { PIPELINES_TABLE } from '../../constants';
 export default {
   components: {
     GlIcon,
-    JobItem,
     GlLoadingIcon,
+    GlDropdown,
+    JobItem,
   },
-
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-
+  mixins: [glFeatureFlagsMixin()],
   props: {
     stage: {
       type: Object,
@@ -50,30 +50,25 @@ export default {
       default: '',
     },
   },
-
   data() {
     return {
       isLoading: false,
       dropdownContent: '',
     };
   },
-
   computed: {
-    dropdownClass() {
-      return this.dropdownContent.length > 0
-        ? 'js-builds-dropdown-container'
-        : 'js-builds-dropdown-loading';
+    isCiMiniPipelineGlDropdown() {
+      // Feature flag ci_mini_pipeline_gl_dropdown
+      // See more at https://gitlab.com/gitlab-org/gitlab/-/issues/300400
+      return this.glFeatures?.ciMiniPipelineGlDropdown;
     },
-
     triggerButtonClass() {
       return `ci-status-icon-${this.stage.status.group}`;
     },
-
     borderlessIcon() {
       return `${this.stage.status.icon}_borderless`;
     },
   },
-
   watch: {
     updateDropdown() {
       if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
@@ -81,14 +76,17 @@ export default {
       }
     },
   },
-
   updated() {
-    if (this.dropdownContent.length > 0) {
+    if (!this.isCiMiniPipelineGlDropdown && this.dropdownContent.length > 0) {
       this.stopDropdownClickPropagation();
     }
   },
-
   methods: {
+    onShowDropdown() {
+      eventHub.$emit('clickedDropdown');
+      this.isLoading = true;
+      this.fetchJobs();
+    },
     onClickStage() {
       if (!this.isDropdownOpen()) {
         eventHub.$emit('clickedDropdown');
@@ -96,7 +94,6 @@ export default {
         this.fetchJobs();
       }
     },
-
     fetchJobs() {
       axios
         .get(this.stage.dropdown_path)
@@ -105,13 +102,16 @@ export default {
           this.isLoading = false;
         })
         .catch(() => {
+          if (this.isCiMiniPipelineGlDropdown) {
+            this.$refs.stageGlDropdown.hide();
+          } else {
             this.closeDropdown();
+          }
           this.isLoading = false;
 
           Flash(__('Something went wrong on our end.'));
         });
     },
-
     /**
      * When the user right clicks or cmd/ctrl + click in the job name
      * the dropdown should not be closed and the link should open in another tab,
@@ -119,6 +119,8 @@ export default {
      *
      * Since this component is rendered multiple times per page we need to guarantee we only
      * target the click event of this component.
+     *
+     * Note: This should be removed once ci_mini_pipeline_gl_dropdown FF is removed as true.
      */
     stopDropdownClickPropagation() {
       $(
@@ -128,23 +130,24 @@ export default {
         e.stopPropagation();
       });
     },
-
     closeDropdown() {
       if (this.isDropdownOpen()) {
         $(this.$refs.dropdown).dropdown('toggle');
       }
     },
-
     isDropdownOpen() {
       return this.$el.classList.contains('show');
     },
-
     pipelineActionRequestComplete() {
       if (this.type === PIPELINES_TABLE) {
         // warn the table to update
         eventHub.$emit('refreshPipelinesTable');
-      } else {
+        return;
+      }
       // close the dropdown in mr widget
+      if (this.isCiMiniPipelineGlDropdown) {
+        this.$refs.stageGlDropdown.hide();
+      } else {
         $(this.$refs.dropdown).dropdown('toggle');
       }
     },
@@ -154,6 +157,45 @@ export default {
 
 <template>
   <div class="dropdown">
+    <gl-dropdown
+      v-if="isCiMiniPipelineGlDropdown"
+      ref="stageGlDropdown"
+      v-gl-tooltip.hover
+      :title="stage.title"
+      variant="link"
+      :lazy="true"
+      :popper-opts="{ placement: 'bottom' }"
+      :toggle-class="[
+        'mini-pipeline-graph-gl-dropdown-toggle',
+        'js-builds-dropdown-button',
+        triggerButtonClass,
+      ]"
+      menu-class="mini-pipeline-graph-dropdown-menu"
+      @show="onShowDropdown"
+    >
+      <template #button-content>
+        <span class="gl-pointer-events-none">
+          <gl-icon :name="borderlessIcon" />
+        </span>
+      </template>
+      <gl-loading-icon v-if="isLoading" />
+      <ul
+        v-else
+        class="js-builds-dropdown-list scrollable-menu"
+        data-testid="mini-pipeline-graph-dropdown-menu-list"
+      >
+        <li v-for="job in dropdownContent" :key="job.id">
+          <job-item
+            :dropdown-length="dropdownContent.length"
+            :job="job"
+            css-class-job-name="mini-pipeline-graph-dropdown-item"
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
+          />
+        </li>
+      </ul>
+    </gl-dropdown>
+
+    <template v-else>
       <button
         id="stageDropdown"
         ref="dropdown"
@@ -190,5 +232,6 @@ export default {
           </li>
         </ul>
       </div>
+    </template>
   </div>
 </template>

app/assets/stylesheets/page_bundles/pipelines.scss

@@ -67,7 +67,8 @@
 // Mini Pipelines
 
 .stage-cell {
-  .mini-pipeline-graph-dropdown-toggle {
+  .mini-pipeline-graph-dropdown-toggle,
+  .mini-pipeline-graph-gl-dropdown-toggle {
     svg {
       height: $ci-action-icon-size;
       width: $ci-action-icon-size;
@@ -138,7 +139,13 @@
 }
 
 // Dropdown button in mini pipeline graph
-button.mini-pipeline-graph-dropdown-toggle {
+button.mini-pipeline-graph-dropdown-toggle,
+// As the `mini-pipeline-item` mixin specificity is lower
+// than the toggle of dropdown with 'variant="link"' we add
+// classes ".gl-button.btn-link" to make it more specific.
+// Once FF ci_mini_pipeline_gl_dropdown is removed, the `mini-pipeline-item`
+// itself could increase its specificity to simplify this selector
+button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle {
   @include mini-pipeline-item();
 }
 

app/controllers/projects/commit_controller.rb

@@ -18,6 +18,9 @@ class Projects::CommitController < Projects::ApplicationController
   before_action :define_commit_vars, only: [:show, :diff_for_path, :diff_files, :pipelines, :merge_requests]
   before_action :define_note_vars, only: [:show, :diff_for_path, :diff_files]
   before_action :authorize_edit_tree!, only: [:revert, :cherry_pick]
+  before_action only: [:pipelines] do
+    push_frontend_feature_flag(:ci_mini_pipeline_gl_dropdown, @project, type: :development, default_enabled: :yaml)
+  end
 
   BRANCH_SEARCH_LIMIT = 1000
 

app/controllers/projects/merge_requests_controller.rb

@@ -45,6 +45,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:suggestions_custom_commit, @project)
     push_frontend_feature_flag(:local_file_reviews, default_enabled: :yaml)
     push_frontend_feature_flag(:paginated_notes, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:ci_mini_pipeline_gl_dropdown, @project, type: :development, default_enabled: :yaml)
 
     record_experiment_user(:invite_members_version_a)
     record_experiment_user(:invite_members_version_b)

app/controllers/projects/pipelines_controller.rb

@@ -16,6 +16,7 @@ class Projects::PipelinesController < Projects::ApplicationController
     push_frontend_feature_flag(:new_pipeline_form, project, default_enabled: true)
     push_frontend_feature_flag(:graphql_pipeline_details, project, type: :development, default_enabled: :yaml)
     push_frontend_feature_flag(:graphql_pipeline_details_users, current_user, type: :development, default_enabled: :yaml)
+    push_frontend_feature_flag(:ci_mini_pipeline_gl_dropdown, project, type: :development, default_enabled: :yaml)
   end
   before_action :ensure_pipeline, only: [:show]
   before_action :push_experiment_to_gon, only: :index, if: :html_request?

config/feature_flags/development/ci_mini_pipeline_gl_dropdown.yml

+---
+name: ci_mini_pipeline_gl_dropdown
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52821
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/300400
+milestone: '13.9'
+type: development
+group: group::continuous integration
+default_enabled: false

spec/frontend/pipelines/stage_spec.js

 import 'bootstrap/js/dist/dropdown';
+import $ from 'jquery';
+import { GlDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -9,6 +11,7 @@ import { stageReply } from './mock_data';
 describe('Pipelines stage component', () => {
   let wrapper;
   let mock;
+  let glFeatures;
 
   const defaultProps = {
     stage: {
@@ -22,8 +25,6 @@ describe('Pipelines stage component', () => {
     updateDropdown: false,
   };
 
-  const isDropdownOpen = () => wrapper.classes('show');
-
   const createComponent = (props = {}) => {
     wrapper = mount(StageComponent, {
       attachTo: document.body,
@@ -31,20 +32,29 @@ describe('Pipelines stage component', () => {
         ...defaultProps,
         ...props,
       },
+      provide: {
+        glFeatures,
+      },
     });
   };
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
+    jest.spyOn(eventHub, '$emit');
+    glFeatures = {};
   });
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
 
+    eventHub.$emit.mockRestore();
     mock.restore();
   });
 
+  describe('when ci_mini_pipeline_gl_dropdown feature flag is disabled', () => {
+    const isDropdownOpen = () => wrapper.classes('show');
+
     describe('default', () => {
       beforeEach(() => {
         createComponent();
@@ -64,7 +74,6 @@ describe('Pipelines stage component', () => {
       });
 
       it('should render the received data and emit `clickedDropdown` event', async () => {
-      jest.spyOn(eventHub, '$emit');
         wrapper.find('button').trigger('click');
 
         await axios.waitForAll();
@@ -80,6 +89,7 @@ describe('Pipelines stage component', () => {
       mock.onGet('path.json').reply(500);
       createComponent();
       wrapper.find({ ref: 'dropdown' }).trigger('click');
+
       expect(isDropdownOpen()).toBe(true);
 
       wrapper.find('button').trigger('click');
@@ -120,22 +130,168 @@ describe('Pipelines stage component', () => {
       beforeEach(() => {
         mock.onGet('path.json').reply(200, stageReply);
         mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
-
-      createComponent({ type: 'PIPELINES_TABLE' });
       });
 
+      const clickCiAction = async () => {
+        wrapper.find('button').trigger('click');
+        await axios.waitForAll();
+
+        wrapper.find('.js-ci-action').trigger('click');
+        await axios.waitForAll();
+      };
+
       describe('within pipeline table', () => {
         it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', async () => {
-        jest.spyOn(eventHub, '$emit');
+          createComponent({ type: 'PIPELINES_TABLE' });
 
-        wrapper.find('button').trigger('click');
+          await clickCiAction();
+
+          expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
+        });
+      });
+
+      describe('in MR widget', () => {
+        beforeEach(() => {
+          jest.spyOn($.fn, 'dropdown');
+        });
+
+        it('closes the dropdown when `pipelineActionRequestComplete` is triggered', async () => {
+          createComponent();
+
+          await clickCiAction();
+
+          expect($.fn.dropdown).toHaveBeenCalledWith('toggle');
+        });
+      });
+    });
+  });
+
+  describe('when ci_mini_pipeline_gl_dropdown feature flag is enabled', () => {
+    const findDropdown = () => wrapper.find(GlDropdown);
+    const findDropdownToggle = () => wrapper.find('button.gl-dropdown-toggle');
+    const findDropdownMenu = () =>
+      wrapper.find('[data-testid="mini-pipeline-graph-dropdown-menu-list"]');
+    const findCiActionBtn = () => wrapper.find('.js-ci-action');
+
+    const openGlDropdown = () => {
+      findDropdownToggle().trigger('click');
+      return new Promise((resolve) => {
+        wrapper.vm.$root.$on('bv::dropdown::show', resolve);
+      });
+    };
+
+    beforeEach(() => {
+      glFeatures = { ciMiniPipelineGlDropdown: true };
+    });
+
+    describe('default', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('should render a dropdown with the status icon', () => {
+        expect(findDropdown().exists()).toBe(true);
+        expect(findDropdownToggle().classes('gl-dropdown-toggle')).toEqual(true);
+        expect(wrapper.find('[data-testid="status_success_borderless-icon"]').exists()).toBe(true);
+      });
+    });
+
+    describe('with successful request', () => {
+      beforeEach(() => {
+        mock.onGet('path.json').reply(200, stageReply);
+        createComponent();
+      });
+
+      it('should render the received data and emit `clickedDropdown` event', async () => {
+        await openGlDropdown();
         await axios.waitForAll();
 
-        wrapper.find('.js-ci-action').trigger('click');
+        expect(findDropdownMenu().text()).toContain(stageReply.latest_statuses[0].name);
+        expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
+      });
+    });
+
+    it('when request fails should close the dropdown', async () => {
+      mock.onGet('path.json').reply(500);
+
+      createComponent();
+
+      await openGlDropdown();
+      await axios.waitForAll();
+
+      expect(findDropdown().classes('show')).toBe(false);
+    });
+
+    describe('update endpoint correctly', () => {
+      beforeEach(async () => {
+        const copyStage = { ...stageReply };
+        copyStage.latest_statuses[0].name = 'this is the updated content';
+        mock.onGet('bar.json').reply(200, copyStage);
+        createComponent({
+          stage: {
+            status: {
+              group: 'running',
+              icon: 'status_running',
+              title: 'running',
+            },
+            dropdown_path: 'bar.json',
+          },
+        });
+        await axios.waitForAll();
+      });
+
+      it('should update the stage to request the new endpoint provided', async () => {
+        await openGlDropdown();
+        await axios.waitForAll();
+
+        expect(findDropdownMenu().text()).toContain('this is the updated content');
+      });
+    });
+
+    describe('pipelineActionRequestComplete', () => {
+      beforeEach(() => {
+        mock.onGet('path.json').reply(200, stageReply);
+        mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
+      });
+
+      const clickCiAction = async () => {
+        await openGlDropdown();
+        await axios.waitForAll();
+
+        findCiActionBtn().trigger('click');
         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');
         });
       });
+
+      describe('in MR widget', () => {
+        beforeEach(() => {
+          jest.spyOn($.fn, 'dropdown');
+          createComponent();
+        });
+
+        it('closes the dropdown when `pipelineActionRequestComplete` is triggered', async () => {
+          const hidden = jest.fn();
+
+          wrapper.vm.$root.$on('bv::dropdown::hide', hidden);
+
+          expect(hidden).toHaveBeenCalledTimes(0);
+
+          await clickCiAction();
+
+          expect(hidden).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
   });
 });