Applying maintainer feedback

Tidied header field generation
Created shared util for determining header fields
Updated snapshot test

ee/app/assets/javascripts/packages/list/components/packages_list.vue

@@ -12,12 +12,8 @@ import {
 import Tracking from '~/tracking';
 import { s__, sprintf } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import {
-  LIST_KEY_PROJECT,
-  LIST_KEY_ACTIONS,
-  LIST_LABEL_ACTIONS,
-  TABLE_HEADER_FIELDS,
-} from '../constants';
+import { LIST_KEY_ACTIONS, LIST_LABEL_ACTIONS } from '../constants';
+import getTableHeaders from '../utils';
 import { TrackingActions } from '../../shared/constants';
 import { packageTypeToTrackCategory } from '../../shared/utils';
 import PackageTags from '../../shared/components/package_tags.vue';
@@ -66,18 +62,13 @@ export default {
       return !this.isGroupPage;
     },
     headerFields() {
-      const fields = TABLE_HEADER_FIELDS.filter(
-        f => f.key !== LIST_KEY_PROJECT || this.isGroupPage,
-      );
+      const fields = getTableHeaders(this.isGroupPage);
 
       if (this.showActions) {
-        const actions = {
+        fields.push({
           key: LIST_KEY_ACTIONS,
           label: LIST_LABEL_ACTIONS,
-          tdClass: ['text-right'],
-        };
-
-        return [...fields, actions];
+        });
       }
 
       fields[fields.length - 1].class = ['text-right'];

ee/app/assets/javascripts/packages/list/components/packages_list_app.vue

@@ -68,7 +68,7 @@ export default {
 </script>
 
 <template>
-  <gl-tabs active-tab-class="js-package-active-tab" @input="tabChanged">
+  <gl-tabs @input="tabChanged">
     <template #tabs-end>
       <div class="align-self-center ml-auto">
         <package-sort @sort:changed="requestPackagesList" />

ee/app/assets/javascripts/packages/list/components/packages_sort.vue

 <script>
 import { GlSorting, GlSortingItem } from '@gitlab/ui';
-import {
-  LIST_KEY_PROJECT,
-  ASCENDING_ODER,
-  DESCENDING_ORDER,
-  TABLE_HEADER_FIELDS,
-} from '../constants';
+import { ASCENDING_ODER, DESCENDING_ORDER } from '../constants';
+import getTableHeaders from '../utils';
 import { mapState, mapActions } from 'vuex';
 
 export default {
@@ -25,8 +21,7 @@ export default {
       return field ? field.label : '';
     },
     sortableFields() {
-      // This list is filtered in the case of the project page, and the project column is removed
-      return TABLE_HEADER_FIELDS.filter(f => f.key !== LIST_KEY_PROJECT || this.isGroupPage);
+      return getTableHeaders(this.isGroupPage);
     },
     isSortAscending() {
       return this.sort === ASCENDING_ODER;

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

+import { LIST_KEY_PROJECT, TABLE_HEADER_FIELDS } from './constants';
+
+export default isGroupPage =>
+  TABLE_HEADER_FIELDS.filter(f => f.key !== LIST_KEY_PROJECT || isGroupPage);

ee/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap

@@ -3,7 +3,6 @@
 exports[`packages_list_app renders 1`] = `
 <b-tabs-stub
   activenavitemclass="gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-  activetabclass="js-package-active-tab"
   class="gl-tabs"
   contentclass=",gl-tab-content"
   navclass="gl-tabs-nav"

ee/spec/frontend/packages/list/components/packages_list_app_spec.js

@@ -41,7 +41,7 @@ describe('packages_list_app', () => {
         config: {
           resourceId: 'project_id',
           emptyListIllustration: 'helpSvg',
-          emptyListHelpUrl: 'helpUrl',
+          emptyListHelpUrl,
         },
       },
     });
@@ -62,9 +62,14 @@ describe('packages_list_app', () => {
     it('generate the correct empty list link', () => {
       const link = findListComponent().find('a');
 
-      expect(link.html()).toMatchInlineSnapshot(
-        `"<a href=\\"${emptyListHelpUrl}\\" target=\\"_blank\\">publish and share your packages</a>"`,
-      );
+      expect(link.element).toMatchInlineSnapshot(`
+        <a
+          href="${emptyListHelpUrl}"
+          target="_blank"
+        >
+          publish and share your packages
+        </a>
+      `);
     });
 
     it('includes the right content on the default tab', () => {