Tweak Dependency List pipeline subheading text

This also takes the opportunity to switch to `GlSprintf` for i18n.

Part of [Update dependencies table UI][1].

[1]: https://gitlab.com/gitlab-org/gitlab/-/issues/195928

ee/app/assets/javascripts/dependencies/components/app.vue

@@ -4,12 +4,13 @@ import {
   GlBadge,
   GlEmptyState,
   GlLoadingIcon,
+  GlSprintf,
   GlTab,
   GlTabs,
   GlLink,
   GlDeprecatedButton,
 } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import DependenciesActions from './dependencies_actions.vue';
 import DependencyListIncompleteAlert from './dependency_list_incomplete_alert.vue';
@@ -25,6 +26,7 @@ export default {
     GlBadge,
     GlEmptyState,
     GlLoadingIcon,
+    GlSprintf,
     GlTab,
     GlTabs,
     GlLink,
@@ -80,18 +82,6 @@ export default {
         this.setCurrentList(namespace);
       },
     },
-    subHeadingText() {
-      const { jobPath } = this.reportInfo;
-
-      const body = __(
-        'Displays dependencies and known vulnerabilities, based on the %{linkStart}latest successful%{linkEnd} scan',
-      );
-
-      const linkStart = jobPath ? `<a href="${jobPath}">` : '';
-      const linkEnd = jobPath ? '</a>' : '';
-
-      return sprintf(body, { linkStart, linkEnd }, false);
-    },
     showEmptyState() {
       return this.isJobNotSetUp || this.hasNoDependencies;
     },
@@ -179,7 +169,16 @@ export default {
         </gl-link>
       </h2>
       <p class="mb-0">
-        <span v-html="subHeadingText"></span>
+        <gl-sprintf
+          :message="s__('Dependencies|Based on the %{linkStart}latest successful%{linkEnd} scan')"
+        >
+          <template #link="{ content }">
+            <gl-link v-if="reportInfo.jobPath" ref="jobLink" :href="reportInfo.jobPath">{{
+              content
+            }}</gl-link>
+            <template v-else>{{ content }}</template>
+          </template>
+        </gl-sprintf>
         <span v-if="generatedAtTimeAgo">
           <span aria-hidden="true">&bull;</span>
           <span class="text-secondary">{{ generatedAtTimeAgo }}</span>

ee/changelogs/unreleased/195928-change-dependency-list-pipeline-message.yml

+---
+title: Make Dependency List pipeline subheading more succinct
+merge_request: 28665
+author:
+type: changed

ee/spec/frontend/dependencies/components/app_spec.js

@@ -30,7 +30,7 @@ describe('DependenciesApp component', () => {
     addListType(store, DEPENDENCY_LIST_TYPES.vulnerable);
     jest.spyOn(store, 'dispatch').mockImplementation();
 
-    const canBeStubbed = component => !['GlTab', 'GlTabs'].includes(component);
+    const canBeStubbed = component => !['GlSprintf', 'GlTab', 'GlTabs'].includes(component);
     const stubs = Object.keys(DependenciesApp.components).filter(canBeStubbed);
 
     wrapper = mount(DependenciesApp, {
@@ -107,7 +107,7 @@ describe('DependenciesApp component', () => {
 
   const findHeader = () => wrapper.find('section > header');
   const findHeaderHelpLink = () => findHeader().find(GlLink);
-  const findHeaderJobLink = () => findHeader().find('a');
+  const findHeaderJobLink = () => wrapper.find({ ref: 'jobLink' });
 
   const expectComponentWithProps = (Component, props = {}) => {
     const componentWrapper = wrapper.find(Component);

locale/gitlab.pot

@@ -6567,6 +6567,9 @@ msgstr ""
 msgid "Dependencies|All"
 msgstr ""
 
+msgid "Dependencies|Based on the %{linkStart}latest successful%{linkEnd} scan"
+msgstr ""
+
 msgid "Dependencies|Component"
 msgstr ""
 
@@ -7124,9 +7127,6 @@ msgstr ""
 msgid "Display source"
 msgstr ""
 
-msgid "Displays dependencies and known vulnerabilities, based on the %{linkStart}latest successful%{linkEnd} scan"
-msgstr ""
-
 msgid "Do not display offers from third parties within GitLab"
 msgstr ""