Merge branch '330846-convert-package-list-page-to-use-apollo-graphql' into 'master'

Enable refactored package list

See merge request gitlab-org/gitlab!73367

app/assets/javascripts/packages_and_registries/package_registry/components/list/app.vue

@@ -8,7 +8,6 @@ import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
 import {
   PROJECT_RESOURCE_TYPE,
   GROUP_RESOURCE_TYPE,
-  LIST_QUERY_DEBOUNCE_TIME,
   GRAPHQL_PAGE_SIZE,
 } from '~/packages_and_registries/package_registry/constants';
 import getPackagesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_packages.query.graphql';
@@ -52,7 +51,9 @@ export default {
       update(data) {
         return data[this.graphqlResource].packages;
       },
-      debounce: LIST_QUERY_DEBOUNCE_TIME,
+      skip() {
+        return !this.sort;
+      },
     },
   },
   computed: {

app/assets/javascripts/packages_and_registries/package_registry/constants.js

@@ -83,5 +83,4 @@ export const INSTANCE_PACKAGE_ENDPOINT_TYPE = 'instance';
 
 export const PROJECT_RESOURCE_TYPE = 'project';
 export const GROUP_RESOURCE_TYPE = 'group';
-export const LIST_QUERY_DEBOUNCE_TIME = 50;
 export const GRAPHQL_PAGE_SIZE = 20;

app/assets/javascripts/pages/groups/packages/index/index.js

-(async function packageApp() {
-  if (window.gon.features.packageListApollo) {
-    const newPackageList = await import('~/packages_and_registries/package_registry/pages/list');
+import packageList from '~/packages_and_registries/package_registry/pages/list';
 
-    newPackageList.default();
-  } else {
-    const packageList = await import('~/packages/list/packages_list_app_bundle');
-    packageList.default();
-  }
-})();
+packageList();

app/assets/javascripts/pages/projects/packages/packages/index/index.js

-(async function packageApp() {
-  if (window.gon.features.packageListApollo) {
-    const newPackageList = await import('~/packages_and_registries/package_registry/pages/list');
+import packageList from '~/packages_and_registries/package_registry/pages/list';
 
-    newPackageList.default();
-  } else {
-    const packageList = await import('~/packages/list/packages_list_app_bundle');
-    packageList.default();
-  }
-})();
+packageList();

app/controllers/groups/packages_controller.rb

@@ -6,10 +6,6 @@ module Groups
 
     feature_category :package_registry
 
-    before_action do
-      push_frontend_feature_flag(:package_list_apollo, default_enabled: :yaml)
-    end
-
     private
 
     def verify_packages_enabled!

app/controllers/projects/packages/packages_controller.rb

@@ -7,10 +7,6 @@ module Projects
 
       feature_category :package_registry
 
-      before_action do
-        push_frontend_feature_flag(:package_list_apollo, default_enabled: :yaml)
-      end
-
       def show
         @package = project.packages.find(params[:id])
       end

config/feature_flags/development/package_list_apollo.yml

----
-name: package_list_apollo
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/70598
-rollout_issue_url:
-milestone: '14.3'
-type: development
-group: group::package
-default_enabled: false

spec/features/groups/packages_spec.rb

@@ -28,10 +28,6 @@ RSpec.describe 'Group Packages' do
 
   context 'when feature is available', :js do
     before do
-      # we are simply setting the featrure flag to false because the new UI has nothing to test yet
-      # when the refactor is complete or almost complete we will turn on the feature tests
-      # see https://gitlab.com/gitlab-org/gitlab/-/issues/330846 for status of this work
-      stub_feature_flags(package_list_apollo: false)
       visit_group_packages
     end
 

spec/features/projects/packages_spec.rb

@@ -27,10 +27,6 @@ RSpec.describe 'Packages' do
 
   context 'when feature is available', :js do
     before do
-      # we are simply setting the featrure flag to false because the new UI has nothing to test yet
-      # when the refactor is complete or almost complete we will turn on the feature tests
-      # see https://gitlab.com/gitlab-org/gitlab/-/issues/330846 for status of this work
-      stub_feature_flags(package_list_apollo: false)
       visit_project_packages
     end
 

spec/frontend/packages_and_registries/package_registry/components/list/app_spec.js

@@ -15,7 +15,6 @@ import DeletePackage from '~/packages_and_registries/package_registry/components
 import {
   PROJECT_RESOURCE_TYPE,
   GROUP_RESOURCE_TYPE,
-  LIST_QUERY_DEBOUNCE_TIME,
   GRAPHQL_PAGE_SIZE,
 } from '~/packages_and_registries/package_registry/constants';
 
@@ -86,15 +85,24 @@ describe('PackagesListApp', () => {
     wrapper.destroy();
   });
 
-  const waitForDebouncedApollo = () => {
-    jest.advanceTimersByTime(LIST_QUERY_DEBOUNCE_TIME);
+  const waitForFirstRequest = () => {
+    // emit a search update so the query is executed
+    findSearch().vm.$emit('update', { sort: 'NAME_DESC', filters: [] });
     return waitForPromises();
   };
 
+  it('does not execute the query without sort being set', () => {
+    const resolver = jest.fn().mockResolvedValue(packagesListQuery());
+
+    mountComponent({ resolver });
+
+    expect(resolver).not.toHaveBeenCalled();
+  });
+
   it('renders', async () => {
     mountComponent();
 
-    await waitForDebouncedApollo();
+    await waitForFirstRequest();
 
     expect(wrapper.element).toMatchSnapshot();
   });
@@ -102,7 +110,7 @@ describe('PackagesListApp', () => {
   it('has a package title', async () => {
     mountComponent();
 
-    await waitForDebouncedApollo();
+    await waitForFirstRequest();
 
     expect(findPackageTitle().exists()).toBe(true);
     expect(findPackageTitle().props('count')).toBe(2);
@@ -121,8 +129,7 @@ describe('PackagesListApp', () => {
 
       findSearch().vm.$emit('update', searchPayload);
 
-      await waitForDebouncedApollo();
-      jest.advanceTimersByTime(LIST_QUERY_DEBOUNCE_TIME);
+      await waitForPromises();
 
       expect(resolver).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -140,7 +147,7 @@ describe('PackagesListApp', () => {
       resolver = jest.fn().mockResolvedValue(packagesListQuery());
       mountComponent({ resolver });
 
-      return waitForDebouncedApollo();
+      return waitForFirstRequest();
     });
 
     it('exists and has the right props', () => {
@@ -182,7 +189,7 @@ describe('PackagesListApp', () => {
       provide = { ...defaultProvide, isGroupPage };
       resolver = jest.fn().mockResolvedValue(packagesListQuery({ type }));
       mountComponent({ provide, resolver });
-      return waitForDebouncedApollo();
+      return waitForFirstRequest();
     });
 
     it('succeeds', () => {
@@ -191,7 +198,7 @@ describe('PackagesListApp', () => {
 
     it('calls the resolver with the right parameters', () => {
       expect(resolver).toHaveBeenCalledWith(
-        expect.objectContaining({ isGroupPage, [sortType]: '' }),
+        expect.objectContaining({ isGroupPage, [sortType]: 'NAME_DESC' }),
       );
     });
   });
@@ -201,7 +208,7 @@ describe('PackagesListApp', () => {
       const resolver = jest.fn().mockResolvedValue(packagesListQuery({ extend: { nodes: [] } }));
       mountComponent({ resolver });
 
-      return waitForDebouncedApollo();
+      return waitForFirstRequest();
     });
     it('generate the correct empty list link', () => {
       const link = findListComponent().findComponent(GlLink);
@@ -219,7 +226,7 @@ describe('PackagesListApp', () => {
     beforeEach(async () => {
       mountComponent();
 
-      await waitForDebouncedApollo();
+      await waitForFirstRequest();
 
       findSearch().vm.$emit('update', searchPayload);
 
@@ -236,7 +243,7 @@ describe('PackagesListApp', () => {
     it('exists and has the correct props', async () => {
       mountComponent();
 
-      await waitForDebouncedApollo();
+      await waitForFirstRequest();
 
       expect(findDeletePackage().props()).toMatchObject({
         refetchQueries: [{ query: getPackagesQuery, variables: {} }],
@@ -247,7 +254,7 @@ describe('PackagesListApp', () => {
     it('deletePackage is bound to package-list package:delete event', async () => {
       mountComponent();
 
-      await waitForDebouncedApollo();
+      await waitForFirstRequest();
 
       findListComponent().vm.$emit('package:delete', { id: 1 });
 
@@ -257,7 +264,7 @@ describe('PackagesListApp', () => {
     it('start and end event set loading correctly', async () => {
       mountComponent();
 
-      await waitForDebouncedApollo();
+      await waitForFirstRequest();
 
       findDeletePackage().vm.$emit('start');
 

spec/support/shared_examples/features/packages_shared_examples.rb

@@ -21,10 +21,6 @@ end
 RSpec.shared_examples 'package details link' do |property|
   let(:package) { packages.first }
 
-  before do
-    stub_feature_flags(packages_details_one_column: false)
-  end
-
   it 'navigates to the correct url' do
     page.within(packages_table_selector) do
       click_link package.name
@@ -94,16 +90,24 @@ def packages_table_selector
 end
 
 def click_sort_option(option, ascending)
-  page.within('.gl-sorting') do
-    # Reset the sort direction
-    click_button 'Sort direction' if page.has_selector?('svg[aria-label="Sorting Direction: Ascending"]', wait: 0)
+  wait_for_requests
 
-    find('button.gl-dropdown-toggle').click
+  # Reset the sort direction
+  if page.has_selector?('button[aria-label="Sorting Direction: Ascending"]', wait: 0) && !ascending
+    click_button 'Sort direction'
 
-    page.within('.dropdown-menu') do
-      click_button option
-    end
+    wait_for_requests
+  end
+
+  find('button.gl-dropdown-toggle').click
+
+  page.within('.dropdown-menu') do
+    click_button option
+  end
+
+  if ascending
+    wait_for_requests
 
-    click_button 'Sort direction' if ascending
+    click_button 'Sort direction'
   end
 end