Added custom empty strings for each package type

Updated snapshot
Updated tests
Updated pot file

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

@@ -54,12 +54,21 @@ export default {
       this.setSelectedType(selectedType);
       this.requestPackagesList();
     },
+    emptyStateTitle({ title, type }) {
+      if (type) {
+        return sprintf(s__('PackageRegistry|There are no %{packageType} packages yet'), {
+          packageType: title,
+        });
+      }
+
+      return s__('PackageRegistry|There are no packages yet');
+    },
   },
 };
 </script>
 
 <template>
-  <gl-tabs @input="tabChanged">
+  <gl-tabs active-tab-class="js-package-active-tab" @input="tabChanged">
     <template #tabs-end>
       <div class="align-self-center ml-auto">
         <package-sort @sort:changed="requestPackagesList" />
@@ -69,10 +78,7 @@ export default {
     <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="s__('PackageRegistry|There are no packages yet')"
-            :svg-path="emptyListIllustration"
-          >
+          <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration">
             <template #description>
               <p v-html="emptyListText"></p>
             </template>

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

 import { __, s__ } from '~/locale';
+import { PackageType } from '../shared/constants';
 
 export const FETCH_PACKAGES_LIST_ERROR_MESSAGE = __(
   'Something went wrong while fetching the packages list.',
@@ -74,18 +75,18 @@ export const PACKAGE_REGISTRY_TABS = [
   },
   {
     title: s__('PackageRegistry|Conan'),
-    type: 'conan',
+    type: PackageType.CONAN,
   },
   {
     title: s__('PackageRegistry|Maven'),
-    type: 'maven',
+    type: PackageType.MAVEN,
   },
   {
     title: s__('PackageRegistry|NPM'),
-    type: 'npm',
+    type: PackageType.NPM,
   },
   {
     title: s__('PackageRegistry|NuGet'),
-    type: 'nuget',
+    type: PackageType.NUGET,
   },
 ];

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

@@ -3,6 +3,7 @@
 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"
@@ -97,7 +98,7 @@ exports[`packages_list_app renders 1`] = `
                 class="svg-250 svg-content"
               >
                 <img
-                  alt="There are no packages yet"
+                  alt="There are no Conan packages yet"
                   class=""
                   src="helpSvg"
                 />
@@ -114,7 +115,7 @@ exports[`packages_list_app renders 1`] = `
                   class="center"
                   style=""
                 >
-                  There are no packages yet
+                  There are no Conan packages yet
                 </h4>
                  
                 <p
@@ -164,7 +165,7 @@ exports[`packages_list_app renders 1`] = `
                 class="svg-250 svg-content"
               >
                 <img
-                  alt="There are no packages yet"
+                  alt="There are no Maven packages yet"
                   class=""
                   src="helpSvg"
                 />
@@ -181,7 +182,7 @@ exports[`packages_list_app renders 1`] = `
                   class="center"
                   style=""
                 >
-                  There are no packages yet
+                  There are no Maven packages yet
                 </h4>
                  
                 <p
@@ -231,7 +232,7 @@ exports[`packages_list_app renders 1`] = `
                 class="svg-250 svg-content"
               >
                 <img
-                  alt="There are no packages yet"
+                  alt="There are no NPM packages yet"
                   class=""
                   src="helpSvg"
                 />
@@ -248,7 +249,7 @@ exports[`packages_list_app renders 1`] = `
                   class="center"
                   style=""
                 >
-                  There are no packages yet
+                  There are no NPM packages yet
                 </h4>
                  
                 <p
@@ -298,7 +299,7 @@ exports[`packages_list_app renders 1`] = `
                 class="svg-250 svg-content"
               >
                 <img
-                  alt="There are no packages yet"
+                  alt="There are no NuGet packages yet"
                   class=""
                   src="helpSvg"
                 />
@@ -315,7 +316,7 @@ exports[`packages_list_app renders 1`] = `
                   class="center"
                   style=""
                 >
-                  There are no packages yet
+                  There are no NuGet packages yet
                 </h4>
                  
                 <p

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

@@ -58,13 +58,20 @@ describe('packages_list_app', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('generate the correct empty list link', () => {
-    const emptyState = findListComponent();
-    const link = emptyState.find('a');
+  describe('empty state', () => {
+    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.html()).toMatchInlineSnapshot(
+        `"<a href=\\"${emptyListHelpUrl}\\" target=\\"_blank\\">publish and share your packages</a>"`,
+      );
+    });
+
+    it('includes the right content on the default tab', () => {
+      const heading = findListComponent().find('h4');
+
+      expect(heading.text()).toBe('There are no packages yet');
+    });
   });
 
   it('call requestPackagesList on page:changed', () => {

locale/gitlab.pot

@@ -13951,6 +13951,9 @@ msgstr ""
 msgid "PackageRegistry|Remove package"
 msgstr ""
 
+msgid "PackageRegistry|There are no %{packageType} packages yet"
+msgstr ""
+
 msgid "PackageRegistry|There are no packages yet"
 msgstr ""