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,39 +93,43 @@ export default {
 </script>
 
 <template>
-  <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-sort @sort:changed="requestPackagesList" />
-      </div>
-    </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="gl-mr-2" @filter="requestPackagesList" />
+          <package-sort @sort:changed="requestPackagesList" />
+        </div>
+      </template>
 
-    <gl-tab v-for="(tab, index) in tabsToRender" :key="index" :title="tab.title">
-      <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
-        <template #empty-state>
-          <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration">
-            <template #description>
-              <gl-sprintf v-if="filterQuery" :message="$options.i18n.widenFilters" />
-              <gl-sprintf v-else :message="$options.i18n.noResults">
-                <template #noPackagesLink="{content}">
-                  <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
-                </template>
-              </gl-sprintf>
-            </template>
-          </gl-empty-state>
-        </template>
-      </package-list>
-    </gl-tab>
+      <gl-tab v-for="(tab, index) in tabsToRender" :key="index" :title="tab.title">
+        <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
+          <template #empty-state>
+            <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration">
+              <template #description>
+                <gl-sprintf v-if="filterQuery" :message="$options.i18n.widenFilters" />
+                <gl-sprintf v-else :message="$options.i18n.noResults">
+                  <template #noPackagesLink="{content}">
+                    <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
+                  </template>
+                </gl-sprintf>
+              </template>
+            </gl-empty-state>
+          </template>
+        </package-list>
+      </gl-tab>
 
-    <gl-tab v-if="comingSoon" :title="__('Coming soon')" lazy>
-      <packages-coming-soon
-        :illustration="emptyListIllustration"
-        :project-path="comingSoon.projectPath"
-        :suggested-contributions-path="comingSoon.suggestedContributions"
-      />
-    </gl-tab>
-  </gl-tabs>
+      <gl-tab v-if="comingSoon" :title="__('Coming soon')" lazy>
+        <packages-coming-soon
+          :illustration="emptyListIllustration"
+          :project-path="comingSoon.projectPath"
+          :suggested-contributions-path="comingSoon.suggestedContributions"
+        />
+      </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/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,
+        });
+      });
+    }
+  });
+});