Refactor Packagetitle to be store agnostic

- package title
- package list wiring
- package list tests
- snapshots

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

+<script>
+import { n__ } from '~/locale';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import { LIST_INTRO_TEXT, LIST_TITLE_TEXT } from '../constants';
+
+export default {
+  name: 'PackageTitle',
+  components: {
+    TitleArea,
+    MetadataItem,
+  },
+  props: {
+    packagesCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    packageHelpUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    showPackageCount() {
+      return Number.isInteger(this.packagesCount);
+    },
+    packageAmountText() {
+      return n__(`%d Package`, `%d Packages`, this.packagesCount);
+    },
+    infoMessages() {
+      return [{ text: LIST_INTRO_TEXT, link: this.packageHelpUrl }];
+    },
+  },
+  i18n: {
+    LIST_TITLE_TEXT,
+  },
+};
+</script>
+
+<template>
+  <title-area :title="$options.i18n.LIST_TITLE_TEXT" :info-messages="infoMessages">
+    <template #metadata_amount>
+      <metadata-item v-if="showPackageCount" icon="package" :text="packageAmountText" />
+    </template>
+  </title-area>
+</template>

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

@@ -3,13 +3,14 @@ import { mapActions, mapState } from 'vuex';
 import { GlEmptyState, GlTab, GlTabs, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import createFlash from '~/flash';
+import { historyReplaceState } from '~/lib/utils/common_utils';
+import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
 import PackageFilter from './packages_filter.vue';
 import PackageList from './packages_list.vue';
 import PackageSort from './packages_sort.vue';
 import { PACKAGE_REGISTRY_TABS, DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants';
 import PackagesComingSoon from '../coming_soon/packages_coming_soon.vue';
-import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
-import { historyReplaceState } from '~/lib/utils/common_utils';
+import PackageTitle from './package_title.vue';
 
 export default {
   components: {
@@ -22,6 +23,7 @@ export default {
     PackageList,
     PackageSort,
     PackagesComingSoon,
+    PackageTitle,
   },
   computed: {
     ...mapState({
@@ -30,6 +32,8 @@ export default {
       comingSoon: state => state.config.comingSoon,
       filterQuery: state => state.filterQuery,
       selectedType: state => state.selectedType,
+      packageHelpUrl: state => state.config.packageHelpUrl,
+      packagesCount: state => state.pagination?.total,
     }),
     tabsToRender() {
       return PACKAGE_REGISTRY_TABS;
@@ -89,12 +93,15 @@ export default {
 </script>
 
 <template>
+  <div>
+    <package-title :package-help-url="packageHelpUrl" :packages-count="packagesCount" />
+
     <gl-tabs @input="tabChanged">
       <template #tabs-end>
         <div
           class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end"
         >
-        <package-filter class="mr-1" @filter="requestPackagesList" />
+          <package-filter class="gl-mr-2" @filter="requestPackagesList" />
           <package-sort @sort:changed="requestPackagesList" />
         </div>
       </template>
@@ -124,4 +131,5 @@ export default {
         />
       </gl-tab>
     </gl-tabs>
+  </div>
 </template>

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

@@ -86,3 +86,9 @@ export const PACKAGE_REGISTRY_TABS = [
     type: PackageType.PYPI,
   },
 ];
+
+export const LIST_TITLE_TEXT = s__('PackageRegistry|Package Registry');
+
+export const LIST_INTRO_TEXT = s__(
+  'PackageRegistry|Publish and share packages for a variety of common package managers. %{docLinkStart}More information%{docLinkEnd}',
+);

app/helpers/packages_helper.rb

@@ -53,7 +53,8 @@ module PackagesHelper
       page_type: type,
       empty_list_help_url: help_page_path('user/packages/package_registry/index'),
       empty_list_illustration: image_path('illustrations/no-packages.svg'),
-      coming_soon_json: packages_coming_soon_data(resource).to_json
+      coming_soon_json: packages_coming_soon_data(resource).to_json,
+      package_help_url: help_page_path('user/packages/index')
     }
   end
 end

changelogs/unreleased/225164-add-a-title-section-to-the-package-registry-ui.yml

+---
+title: Add a title section to the Package Registry UI
+merge_request: 42963
+author:
+type: changed

locale/gitlab.pot

@@ -84,6 +84,11 @@ msgid_plural "%d Approvals"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%d Package"
+msgid_plural "%d Packages"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d Scanned URL"
 msgid_plural "%d Scanned URLs"
 msgstr[0] ""
@@ -18173,12 +18178,18 @@ msgstr ""
 msgid "PackageRegistry|NuGet Command"
 msgstr ""
 
+msgid "PackageRegistry|Package Registry"
+msgstr ""
+
 msgid "PackageRegistry|Pip Command"
 msgstr ""
 
 msgid "PackageRegistry|Pipeline %{link} triggered %{datetime} by %{author}"
 msgstr ""
 
+msgid "PackageRegistry|Publish and share packages for a variety of common package managers. %{docLinkStart}More information%{docLinkEnd}"
+msgstr ""
+
 msgid "PackageRegistry|Published to the %{project} Package Registry %{datetime}"
 msgstr ""
 

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`packages_list_app renders 1`] = `
-<b-tabs-stub
+<div>
+  <package-title-stub
+    packagehelpurl="foo"
+  />
+   
+  <b-tabs-stub
     activenavitemclass="gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
     class="gl-tabs"
     contentclass=",gl-tab-content"
@@ -9,7 +14,7 @@ exports[`packages_list_app renders 1`] = `
     nofade="true"
     nonavstyle="true"
     tag="div"
->
+  >
     <template>
        
       <b-tab-stub
@@ -447,11 +452,12 @@ exports[`packages_list_app renders 1`] = `
         class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end"
       >
         <package-filter-stub
-        class="mr-1"
+          class="gl-mr-2"
         />
          
         <package-sort-stub />
       </div>
     </template>
-</b-tabs-stub>
+  </b-tabs-stub>
+</div>
 `;

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

@@ -36,6 +36,7 @@ describe('packages_list_app', () => {
           resourceId: 'project_id',
           emptyListIllustration: 'helpSvg',
           emptyListHelpUrl,
+          packageHelpUrl: 'foo',
         },
         filterQuery,
       },

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

+import { shallowMount } from '@vue/test-utils';
+import PackageTitle from '~/packages/list/components/package_title.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import { LIST_INTRO_TEXT, LIST_TITLE_TEXT } from '~/packages/list//constants';
+
+describe('PackageTitle', () => {
+  let wrapper;
+  let store;
+
+  const findTitleArea = () => wrapper.find(TitleArea);
+  const findMetadataItem = () => wrapper.find(MetadataItem);
+
+  const mountComponent = (propsData = { packageHelpUrl: 'foo' }) => {
+    wrapper = shallowMount(PackageTitle, {
+      store,
+      propsData,
+      stubs: {
+        TitleArea,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('title area', () => {
+    it('exists', () => {
+      mountComponent();
+
+      expect(findTitleArea().exists()).toBe(true);
+    });
+
+    it('has the correct props', () => {
+      mountComponent();
+
+      expect(findTitleArea().props()).toMatchObject({
+        title: LIST_TITLE_TEXT,
+        infoMessages: [{ text: LIST_INTRO_TEXT, link: 'foo' }],
+      });
+    });
+  });
+
+  describe.each`
+    packagesCount | exist    | text
+    ${null}       | ${false} | ${''}
+    ${undefined}  | ${false} | ${''}
+    ${0}          | ${true}  | ${'0 Packages'}
+    ${1}          | ${true}  | ${'1 Package'}
+    ${2}          | ${true}  | ${'2 Packages'}
+  `('when packagesCount is $packagesCount metadata item', ({ packagesCount, exist, text }) => {
+    beforeEach(() => {
+      mountComponent({ packagesCount, packageHelpUrl: 'foo' });
+    });
+
+    it(`is ${exist} that it exists`, () => {
+      expect(findMetadataItem().exists()).toBe(exist);
+    });
+
+    if (exist) {
+      it('has the correct props', () => {
+        expect(findMetadataItem().props()).toMatchObject({
+          icon: 'package',
+          text,
+        });
+      });
+    }
+  });
+});