Replace v-html with GlSprintf in memory_usage.vue

app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue

 <script>
-/* eslint-disable vue/no-v-html */
-import { GlLoadingIcon } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
+import { GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import statusCodes from '~/lib/utils/http_status';
 import { bytesToMiB } from '~/lib/utils/number_utils';
 import { backOff } from '~/lib/utils/common_utils';
@@ -13,6 +12,8 @@ export default {
   components: {
     MemoryGraph,
     GlLoadingIcon,
+    GlSprintf,
+    GlLink,
   },
   props: {
     metricsUrl: {
@@ -50,45 +51,22 @@ export default {
       return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
     },
     memoryChangeMessage() {
-      const messageProps = {
-        memoryFrom: this.memoryFrom,
-        memoryTo: this.memoryTo,
-        metricsLinkStart: `<a href="${this.metricsMonitoringUrl}">`,
-        metricsLinkEnd: '</a>',
-        emphasisStart: '<b>',
-        emphasisEnd: '</b>',
-      };
       const memoryTo = Number(this.memoryTo);
       const memoryFrom = Number(this.memoryFrom);
-      let memoryUsageMsg = '';
 
       if (memoryTo > memoryFrom) {
-        memoryUsageMsg = sprintf(
-          s__(
+        return s__(
           'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
-          ),
-          messageProps,
-          false,
         );
       } else if (memoryTo < memoryFrom) {
-        memoryUsageMsg = sprintf(
-          s__(
+        return s__(
           'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
-          ),
-          messageProps,
-          false,
-        );
-      } else {
-        memoryUsageMsg = sprintf(
-          s__(
-            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB',
-          ),
-          messageProps,
-          false,
         );
       }
 
-      return memoryUsageMsg;
+      return s__(
+        'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB',
+      );
     },
   },
   mounted() {
@@ -162,11 +140,19 @@ export default {
         s__('mrWidget|Loading deployment statistics')
       }}
     </p>
-    <p
-      v-if="shouldShowMemoryGraph"
-      class="usage-info js-usage-info"
-      v-html="memoryChangeMessage"
-    ></p>
+    <p v-if="shouldShowMemoryGraph" class="usage-info js-usage-info">
+      <gl-sprintf :message="memoryChangeMessage">
+        <template #metricsLink="{ content }">
+          <gl-link :href="metricsMonitoringUrl">{{ content }}</gl-link>
+        </template>
+        <template #emphasis="{content}">
+          <strong>{{ content }}</strong>
+        </template>
+        <template #memoryFrom>{{ memoryFrom }}</template>
+        <template #memoryTo>{{ memoryTo }}</template>
+      </gl-sprintf>
+    </p>
+
     <p v-if="shouldShowLoadFailure" class="usage-info js-usage-info usage-info-failed">
       {{ s__('mrWidget|Failed to load deployment statistics') }}
     </p>

changelogs/unreleased/241968-Replace-v-html.yml

+---
+title: Replace v-html with GlSprintf in memory_usage.vue
+merge_request: 41204
+author: Kev @KevSlashNull
+type: other