Merge branch '327692-package-sort-showing-project-in-the-project-page' into 'master'

Resolve "Package sort: showing Project in the project page"

See merge request gitlab-org/gitlab!59367

app/assets/javascripts/packages/list/components/package_search.vue

@@ -3,7 +3,7 @@ import { mapState, mapActions } from 'vuex';
 import { __, s__ } from '~/locale';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
-import getTableHeaders from '../utils';
+import { sortableFields } from '../utils';
 import PackageTypeToken from './tokens/package_type_token.vue';
 
 export default {
@@ -25,7 +25,7 @@ export default {
       filter: (state) => state.filter,
     }),
     sortableFields() {
-      return getTableHeaders(this.isGroupPage);
+      return sortableFields(this.isGroupPage);
     },
   },
   methods: {

app/assets/javascripts/packages/list/utils.js

 import { LIST_KEY_PROJECT, SORT_FIELDS } from './constants';
 
-export default (isGroupPage) =>
-  SORT_FIELDS.filter((f) => f.key !== LIST_KEY_PROJECT || isGroupPage);
+export const sortableFields = (isGroupPage) =>
+  SORT_FIELDS.filter((f) => f.orderBy !== LIST_KEY_PROJECT || isGroupPage);
 
 /**
  * A small util function that works out if the delete action has deleted the

app/assets/javascripts/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue

 <script>
 import { mapState, mapActions } from 'vuex';
 import { LIST_KEY_PACKAGE_TYPE } from '~/packages/list/constants';
-import getTableHeaders from '~/packages/list/utils';
+import { sortableFields } from '~/packages/list/utils';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 
@@ -14,7 +14,7 @@ export default {
       filter: (state) => state.filter,
     }),
     sortableFields() {
-      return getTableHeaders(this.isGroupPage).filter((h) => h.orderBy !== LIST_KEY_PACKAGE_TYPE);
+      return sortableFields(this.isGroupPage).filter((h) => h.orderBy !== LIST_KEY_PACKAGE_TYPE);
     },
   },
   methods: {

changelogs/unreleased/327692-package-sort-showing-project-in-the-project-page.yml

+---
+title: Do not show sort by project in Package project page
+merge_request: 59367
+author:
+type: fixed

spec/frontend/packages/list/components/packages_search_spec.js

@@ -2,7 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import component from '~/packages/list/components/package_search.vue';
 import PackageTypeToken from '~/packages/list/components/tokens/package_type_token.vue';
-import getTableHeaders from '~/packages/list/utils';
+import { sortableFields } from '~/packages/list/utils';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 
@@ -60,7 +60,7 @@ describe('Package Search', () => {
       tokens: expect.arrayContaining([
         expect.objectContaining({ token: PackageTypeToken, type: 'type', icon: 'package' }),
       ]),
-      sortableFields: getTableHeaders(),
+      sortableFields: sortableFields(),
     });
   });
 
@@ -77,7 +77,7 @@ describe('Package Search', () => {
       tokens: expect.arrayContaining([
         expect.objectContaining({ token: PackageTypeToken, type: 'type', icon: 'package' }),
       ]),
-      sortableFields: getTableHeaders(isGroupPage),
+      sortableFields: sortableFields(isGroupPage),
     });
   });
 

spec/frontend/packages/list/utils_spec.js

-import { getNewPaginationPage } from '~/packages/list/utils';
+import { SORT_FIELDS } from '~/packages/list/constants';
+import { getNewPaginationPage, sortableFields } from '~/packages/list/utils';
 
 describe('Packages list utils', () => {
+  describe('sortableFields', () => {
+    it('returns the correct list when is a project page', () => {
+      expect(sortableFields()).toEqual(SORT_FIELDS.filter((f) => f.orderBy !== 'project_path'));
+    });
+    it('returns the full list on the group page', () => {
+      expect(sortableFields(true)).toEqual(SORT_FIELDS);
+    });
+  });
   describe('packageTypeDisplay', () => {
     it('returns the current page when total items exceeds pagniation', () => {
       expect(getNewPaginationPage(2, 20, 21)).toBe(2);

spec/frontend/packages_and_registries/infrastructure_registry/components/infrastructure_search_spec.js

@@ -12,6 +12,12 @@ describe('Infrastructure Search', () => {
   let store;
 
   const sortableFields = () => [
+    { orderBy: 'name', label: 'Name' },
+    { orderBy: 'version', label: 'Version' },
+    { orderBy: 'created_at', label: 'Published' },
+  ];
+
+  const groupSortableFields = () => [
     { orderBy: 'name', label: 'Name' },
     { orderBy: 'project_path', label: 'Project' },
     { orderBy: 'version', label: 'Version' },
@@ -68,17 +74,17 @@ describe('Infrastructure Search', () => {
   });
 
   it.each`
-    isGroupPage | page
-    ${false}    | ${'project'}
-    ${true}     | ${'group'}
-  `('in a $page page binds the right props', ({ isGroupPage }) => {
+    isGroupPage | page         | fields
+    ${false}    | ${'project'} | ${sortableFields()}
+    ${true}     | ${'group'}   | ${groupSortableFields()}
+  `('in a $page page binds the right props', ({ isGroupPage, fields }) => {
     mountComponent(isGroupPage);
 
     expect(findRegistrySearch().props()).toMatchObject({
       filter: store.state.filter,
       sorting: store.state.sorting,
       tokens: [],
-      sortableFields: sortableFields(),
+      sortableFields: fields,
     });
   });