Refactor final package components to use gl-sprintf

Refactors package details app
Refactos packages_list and packages_list_app
Updated tests
Updated pot file

ee/app/assets/javascripts/packages/details/components/app.vue

@@ -11,8 +11,8 @@ import {
   GlTab,
   GlTabs,
   GlTable,
+  GlSprintf,
 } from '@gitlab/ui';
-import { escape } from 'lodash';
 import Tracking from '~/tracking';
 import PackageActivity from './activity.vue';
 import PackageInformation from './information.vue';
@@ -28,7 +28,7 @@ import DependencyRow from './dependency_row.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { generatePackageInfo } from '../utils';
-import { __, s__, sprintf } from '~/locale';
+import { __, s__ } from '~/locale';
 import { PackageType, TrackingActions } from '../../shared/constants';
 import { packageTypeToTrackCategory } from '../../shared/utils';
 import { mapActions, mapState } from 'vuex';
@@ -45,6 +45,7 @@ export default {
     GlTabs,
     GlTable,
     GlIcon,
+    GlSprintf,
     PackageActivity,
     PackageInformation,
     PackageTitle,
@@ -96,20 +97,6 @@ export default {
     canDeletePackage() {
       return this.canDelete && this.destroyPath;
     },
-    deleteModalDescription() {
-      return sprintf(
-        s__(
-          `PackageRegistry|You are about to delete version %{boldStart}%{version}%{boldEnd} of %{boldStart}%{name}%{boldEnd}. Are you sure?`,
-        ),
-        {
-          version: escape(this.packageEntity.version),
-          name: escape(this.packageEntity.name),
-          boldStart: '<b>',
-          boldEnd: '</b>',
-        },
-        false,
-      );
-    },
     packageInformation() {
       return generatePackageInfo(this.packageEntity);
     },
@@ -181,6 +168,9 @@ export default {
   },
   i18n: {
     deleteModalTitle: s__(`PackageRegistry|Delete Package Version`),
+    deleteModalContent: s__(
+      `PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?`,
+    ),
   },
   filesTableHeaderFields: [
     {
@@ -324,7 +314,15 @@ export default {
 
     <gl-modal ref="deleteModal" class="js-delete-modal" modal-id="delete-modal">
       <template #modal-title>{{ $options.i18n.deleteModalTitle }}</template>
-      <p v-html="deleteModalDescription"></p>
+      <gl-sprintf :message="$options.i18n.deleteModalContent">
+        <template #version>
+          <strong>{{ packageEntity.version }}</strong>
+        </template>
+
+        <template #name>
+          <strong>{{ packageEntity.name }}</strong>
+        </template>
+      </gl-sprintf>
 
       <div slot="modal-footer" class="w-100">
         <div class="float-right">

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

 <script>
 import { mapState, mapGetters } from 'vuex';
-import { GlPagination, GlModal } from '@gitlab/ui';
+import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui';
 import Tracking from '~/tracking';
-import { s__, sprintf } from '~/locale';
+import { s__ } from '~/locale';
 import { TrackingActions } from '../../shared/constants';
 import { packageTypeToTrackCategory } from '../../shared/utils';
 import PackagesListLoader from '../../shared/components/packages_list_loader.vue';
@@ -12,6 +12,7 @@ export default {
   components: {
     GlPagination,
     GlModal,
+    GlSprintf,
     PackagesListLoader,
     PackagesListRow,
   },
@@ -44,17 +45,8 @@ export default {
     modalAction() {
       return s__('PackageRegistry|Delete package');
     },
-    deletePackageDescription() {
-      if (!this.itemToBeDeleted) {
-        return '';
-      }
-      return sprintf(
-        s__(
-          'PackageRegistry|You are about to delete <b>%{packageName}</b>, this operation is irreversible, are you sure?',
-        ),
-        { packageName: `${this.itemToBeDeleted.name}:${this.itemToBeDeleted.version}` },
-        false,
-      );
+    deletePackageName() {
+      return this.itemToBeDeleted?.name || '';
     },
     tracking() {
       const category = this.itemToBeDeleted
@@ -81,6 +73,11 @@ export default {
       this.itemToBeDeleted = null;
     },
   },
+  i18n: {
+    deleteModalContent: s__(
+      'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?',
+    ),
+  },
 };
 </script>
 
@@ -121,7 +118,11 @@ export default {
       >
         <template #modal-title>{{ modalAction }}</template>
         <template #modal-ok>{{ modalAction }}</template>
-        <p v-html="deletePackageDescription"></p>
+        <gl-sprintf :message="$options.i18n.deleteModalContent">
+          <template #name>
+            <strong>{{ deletePackageName }}</strong>
+          </template>
+        </gl-sprintf>
       </gl-modal>
     </template>
   </div>

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

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlEmptyState, GlTab, GlTabs } from '@gitlab/ui';
+import { GlEmptyState, GlTab, GlTabs, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import PackageFilter from './packages_filter.vue';
 import PackageList from './packages_list.vue';
@@ -13,6 +13,8 @@ export default {
     GlEmptyState,
     GlTab,
     GlTabs,
+    GlLink,
+    GlSprintf,
     PackageFilter,
     PackageList,
     PackageSort,
@@ -25,22 +27,6 @@ export default {
       comingSoon: state => state.config.comingSoon,
       filterQuery: state => state.filterQuery,
     }),
-    emptyListText() {
-      if (this.filterQuery) {
-        return s__('PackageRegistry|To widen your search, change or remove the filters above.');
-      }
-
-      return sprintf(
-        s__(
-          'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
-        ),
-        {
-          noPackagesLinkStart: `<a href="${this.emptyListHelpUrl}" target="_blank">`,
-          noPackagesLinkEnd: '</a>',
-        },
-        false,
-      );
-    },
     tabsToRender() {
       return PACKAGE_REGISTRY_TABS;
     },
@@ -78,6 +64,12 @@ export default {
       return s__('PackageRegistry|There are no packages yet');
     },
   },
+  i18n: {
+    widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'),
+    noResults: s__(
+      'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
+    ),
+  },
 };
 </script>
 
@@ -95,7 +87,12 @@ export default {
         <template #empty-state>
           <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration">
             <template #description>
-              <p v-html="emptyListText"></p>
+              <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>

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

@@ -49,16 +49,17 @@ exports[`packages_list_app renders 1`] = `
                 </h1>
                  
                 <p>
-                  <p>
-                    Learn how to 
-                    <a
-                      href="helpUrl"
-                      target="_blank"
-                    >
-                      publish and share your packages
-                    </a>
-                     with GitLab.
-                  </p>
+                  Learn how to 
+                  <b-link-stub
+                    class="gl-link"
+                    event="click"
+                    href="helpUrl"
+                    routertag="a"
+                    target="_blank"
+                  >
+                    publish and share your packages
+                  </b-link-stub>
+                   with GitLab.
                 </p>
                  
                 <div>
@@ -109,16 +110,17 @@ exports[`packages_list_app renders 1`] = `
                 </h1>
                  
                 <p>
-                  <p>
-                    Learn how to 
-                    <a
-                      href="helpUrl"
-                      target="_blank"
-                    >
-                      publish and share your packages
-                    </a>
-                     with GitLab.
-                  </p>
+                  Learn how to 
+                  <b-link-stub
+                    class="gl-link"
+                    event="click"
+                    href="helpUrl"
+                    routertag="a"
+                    target="_blank"
+                  >
+                    publish and share your packages
+                  </b-link-stub>
+                   with GitLab.
                 </p>
                  
                 <div>
@@ -169,16 +171,17 @@ exports[`packages_list_app renders 1`] = `
                 </h1>
                  
                 <p>
-                  <p>
-                    Learn how to 
-                    <a
-                      href="helpUrl"
-                      target="_blank"
-                    >
-                      publish and share your packages
-                    </a>
-                     with GitLab.
-                  </p>
+                  Learn how to 
+                  <b-link-stub
+                    class="gl-link"
+                    event="click"
+                    href="helpUrl"
+                    routertag="a"
+                    target="_blank"
+                  >
+                    publish and share your packages
+                  </b-link-stub>
+                   with GitLab.
                 </p>
                  
                 <div>
@@ -229,16 +232,17 @@ exports[`packages_list_app renders 1`] = `
                 </h1>
                  
                 <p>
-                  <p>
-                    Learn how to 
-                    <a
-                      href="helpUrl"
-                      target="_blank"
-                    >
-                      publish and share your packages
-                    </a>
-                     with GitLab.
-                  </p>
+                  Learn how to 
+                  <b-link-stub
+                    class="gl-link"
+                    event="click"
+                    href="helpUrl"
+                    routertag="a"
+                    target="_blank"
+                  >
+                    publish and share your packages
+                  </b-link-stub>
+                   with GitLab.
                 </p>
                  
                 <div>
@@ -289,16 +293,17 @@ exports[`packages_list_app renders 1`] = `
                 </h1>
                  
                 <p>
-                  <p>
-                    Learn how to 
-                    <a
-                      href="helpUrl"
-                      target="_blank"
-                    >
-                      publish and share your packages
-                    </a>
-                     with GitLab.
-                  </p>
+                  Learn how to 
+                  <b-link-stub
+                    class="gl-link"
+                    event="click"
+                    href="helpUrl"
+                    routertag="a"
+                    target="_blank"
+                  >
+                    publish and share your packages
+                  </b-link-stub>
+                   with GitLab.
                 </p>
                  
                 <div>
@@ -349,16 +354,17 @@ exports[`packages_list_app renders 1`] = `
                 </h1>
                  
                 <p>
-                  <p>
-                    Learn how to 
-                    <a
-                      href="helpUrl"
-                      target="_blank"
-                    >
-                      publish and share your packages
-                    </a>
-                     with GitLab.
-                  </p>
+                  Learn how to 
+                  <b-link-stub
+                    class="gl-link"
+                    event="click"
+                    href="helpUrl"
+                    routertag="a"
+                    target="_blank"
+                  >
+                    publish and share your packages
+                  </b-link-stub>
+                   with GitLab.
                 </p>
                  
                 <div>

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

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlEmptyState, GlTab, GlTabs } from '@gitlab/ui';
+import { GlEmptyState, GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui';
 import PackageListApp from 'ee/packages/list/components/packages_list_app.vue';
 
 const localVue = createLocalVue();
@@ -46,6 +46,8 @@ describe('packages_list_app', () => {
         PackageList,
         GlTab,
         GlTabs,
+        GlSprintf,
+        GlLink,
       },
     });
   };
@@ -66,16 +68,10 @@ describe('packages_list_app', () => {
 
   describe('empty state', () => {
     it('generate the correct empty list link', () => {
-      const link = findListComponent().find('a');
-
-      expect(link.element).toMatchInlineSnapshot(`
-        <a
-          href="${emptyListHelpUrl}"
-          target="_blank"
-        >
-          publish and share your packages
-        </a>
-      `);
+      const link = findListComponent().find(GlLink);
+
+      expect(link.attributes('href')).toBe(emptyListHelpUrl);
+      expect(link.text()).toBe('publish and share your packages');
     });
 
     it('includes the right content on the default tab', () => {

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

@@ -123,15 +123,6 @@ describe('packages_list', () => {
       mountComponent();
     });
 
-    it('shows the correct deletePackageDescription', () => {
-      expect(wrapper.vm.deletePackageDescription).toEqual('');
-
-      wrapper.setData({ itemToBeDeleted: { name: 'foo', version: '1.0.10-beta' } });
-      expect(wrapper.vm.deletePackageDescription).toMatchInlineSnapshot(
-        `"You are about to delete <b>foo:1.0.10-beta</b>, this operation is irreversible, are you sure?"`,
-      );
-    });
-
     it('setItemToBeDeleted sets itemToBeDeleted and open the modal', () => {
       const mockModalShow = jest.spyOn(wrapper.vm.$refs.packageListDeleteModal, 'show');
       const item = last(wrapper.vm.list);

locale/gitlab.pot

@@ -15537,10 +15537,10 @@ msgstr ""
 msgid "PackageRegistry|Upcoming package managers"
 msgstr ""
 
-msgid "PackageRegistry|You are about to delete <b>%{packageName}</b>, this operation is irreversible, are you sure?"
+msgid "PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?"
 msgstr ""
 
-msgid "PackageRegistry|You are about to delete version %{boldStart}%{version}%{boldEnd} of %{boldStart}%{name}%{boldEnd}. Are you sure?"
+msgid "PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?"
 msgstr ""
 
 msgid "PackageRegistry|You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more."