Improve dropdowns performance with lazy

Sets the "artifacts" and "manual" dropdowns in the pipelines list page
to "lazy".

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

@@ -82,6 +82,7 @@ export default {
     :loading="isLoading"
     data-testid="pipelines-manual-actions-dropdown"
     right
+    lazy
     icon="play"
   >
     <gl-dropdown-item

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

@@ -31,6 +31,8 @@ export default {
     :text="$options.translations.artifacts"
     :aria-label="$options.translations.artifacts"
     icon="download"
+    right
+    lazy
     text-sr-only
   >
     <gl-dropdown-item

changelogs/unreleased/321845-performance-pipeline-table-dropdowns.yml

+---
+title: Reduce elements in Pipeline page dropdowns with lazy
+merge_request: 54674
+author:
+type: changed

spec/frontend/pipelines/pipelines_actions_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount, mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
@@ -63,10 +63,6 @@ describe('Pipelines Actions dropdown', () => {
     });
 
     describe('on click', () => {
-      beforeEach(() => {
-        createComponent({ actions: mockActions }, mount);
-      });
-
       it('makes a request and toggles the loading state', async () => {
         mock.onPost(mockActions.path).reply(200);
 

spec/frontend/pipelines/pipelines_artifacts_spec.js

-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 
 describe('Pipelines Artifacts dropdown', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = mount(PipelineArtifacts, {
+    wrapper = shallowMount(PipelineArtifacts, {
       propsData: {
         artifacts: [
           {
-            name: 'artifact',
+            name: 'job my-artifact',
             path: '/download/path',
           },
           {
-            name: 'artifact two',
+            name: 'job-2 my-artifact-2',
             path: '/download/path-two',
           },
         ],
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   };
 
@@ -39,8 +42,8 @@ describe('Pipelines Artifacts dropdown', () => {
   });
 
   it('should render a link with the provided path', () => {
-    expect(findFirstGlDropdownItem().find('a').attributes('href')).toEqual('/download/path');
+    expect(findFirstGlDropdownItem().attributes('href')).toBe('/download/path');
 
-    expect(findFirstGlDropdownItem().text()).toContain('artifact');
+    expect(findFirstGlDropdownItem().text()).toBe('Download job my-artifact artifact');
   });
 });

spec/frontend/pipelines/pipelines_table_row_spec.js

 import { mount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import PipelinesTableRowComponent from '~/pipelines/components/pipelines_list/pipelines_table_row.vue';
 import eventHub from '~/pipelines/event_hub';
 
@@ -182,10 +183,16 @@ describe('Pipelines Table Row', () => {
       expect(wrapper.find('.js-pipelines-retry-button').attributes('title')).toMatch('Retry');
       expect(wrapper.find('.js-pipelines-cancel-button').exists()).toBe(true);
       expect(wrapper.find('.js-pipelines-cancel-button').attributes('title')).toMatch('Cancel');
+    });
+
+    it('should render the manual actions', async () => {
+      const manualActions = wrapper.find('[data-testid="pipelines-manual-actions-dropdown"]');
 
-      const actionsMenu = wrapper.find('[data-testid="pipelines-manual-actions-dropdown"]');
+      // Click on the dropdown and wait for `lazy` dropdown items
+      manualActions.find('.dropdown-toggle').trigger('click');
+      await waitForPromises();
 
-      expect(actionsMenu.text()).toContain(scheduledJobAction.name);
+      expect(manualActions.text()).toContain(scheduledJobAction.name);
     });
 
     it('emits `retryPipeline` event when retry button is clicked and toggles loading', () => {