2 files changed, 43 insertions, 41 deletions

diff --git a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
index 2156c4469da..87e65d354bb 100644
--- a/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
+++ b/app/assets/javascripts/registry/settings/components/registry_settings_app.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlAlert } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 import { FETCH_SETTINGS_ERROR_MESSAGE } from '../../shared/constants';
 
@@ -11,22 +11,16 @@ export default {
   components: {
     SettingsForm,
     GlAlert,
+    GlSprintf,
+    GlLink,
+  },
+  i18n: {
+    unavailableFeatureText: s__(
+      'ContainerRegistry|Currently, the Container Registry tag expiration feature is not available for projects created before GitLab version 12.8. For updates and more information, visit Issue %{linkStart}#196124%{linkEnd}',
+    ),
   },
   computed: {
     ...mapState(['isDisabled']),
-    notAvailableMessage() {
-      return sprintf(
-        s__(
-          'ContainerRegistry|Currently, the Container Registry tag expiration feature is not available for projects created before GitLab version 12.8. For updates and more information, visit Issue %{linkStart}#196124%{linkEnd}',
-        ),
-        {
-          linkStart:
-            '<a href="https://gitlab.com/gitlab-org/gitlab/issues/196124" target="_blank" rel="noopener noreferrer">',
-          linkEnd: '</a>',
-        },
-        false,
-      );
-    },
   },
   mounted() {
     this.fetchSettings().catch(() =>
@@ -56,7 +50,15 @@ export default {
     </ul>
     <settings-form v-if="!isDisabled" />
     <gl-alert v-else :dismissible="false">
-      <p v-html="notAvailableMessage"></p>
+      <p>
+        <gl-sprintf :message="$options.i18n.unavailableFeatureText">
+          <template #link="{content}">
+            <gl-link href="https://gitlab.com/gitlab-org/gitlab/issues/196124" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </gl-alert>
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
index a15b854cb9b..3e212f09e35 100644
--- a/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
+++ b/app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue
@@ -1,7 +1,7 @@
 <script>
 import { uniqueId } from 'lodash';
-import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
-import { s__, __, sprintf } from '~/locale';
+import { GlFormGroup, GlToggle, GlFormSelect, GlFormTextarea, GlSprintf } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
 import { NAME_REGEX_LENGTH } from '../constants';
 import { mapComputedToEvent } from '../utils';
 
@@ -11,6 +11,7 @@ export default {
     GlToggle,
     GlFormSelect,
     GlFormTextarea,
+    GlSprintf,
   },
   props: {
     formOptions: {
@@ -70,27 +71,6 @@ export default {
     policyEnabledText() {
       return this.enabled ? __('enabled') : __('disabled');
     },
-    toggleDescriptionText() {
-      return sprintf(
-        s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}'),
-        {
-          toggleStatus: `<strong>${this.policyEnabledText}</strong>`,
-        },
-        false,
-      );
-    },
-    regexHelpText() {
-      return sprintf(
-        s__(
-          'ContainerRegistry|Wildcards such as %{codeStart}.*-stable%{codeEnd} or %{codeStart}production/.*%{codeEnd} are supported.  To select all tags, use %{codeStart}.*%{codeEnd}',
-        ),
-        {
-          codeStart: '<code>',
-          codeEnd: '</code>',
-        },
-        false,
-      );
-    },
     nameRegexState() {
       return this.name_regex ? this.name_regex.length <= NAME_REGEX_LENGTH : null;
     },
@@ -139,7 +119,15 @@ export default {
           v-model="enabled"
           :disabled="isLoading"
         />
-        <span class="mb-2 ml-1 lh-2" v-html="toggleDescriptionText"></span>
+        <span class="mb-2 ml-1 lh-2">
+          <gl-sprintf
+            :message="s__('ContainerRegistry|Docker tag expiration policy is %{toggleStatus}')"
+          >
+            <template #toggleStatus>
+              <strong>{{ policyEnabledText }}</strong>
+            </template>
+          </gl-sprintf>
+        </span>
       </div>
     </gl-form-group>
 
@@ -190,7 +178,19 @@ export default {
         trim
       />
       <template #description>
-        <span ref="regex-description" v-html="regexHelpText"></span>
+        <span ref="regex-description">
+          <gl-sprintf
+            :message="
+              s__(
+                'ContainerRegistry|Wildcards such as %{codeStart}.*-stable%{codeEnd} or %{codeStart}production/.*%{codeEnd} are supported.  To select all tags, use %{codeStart}.*%{codeEnd}',
+              )
+            "
+          >
+            <template #code="{content}">
+              <code>{{ content }}</code>
+            </template>
+          </gl-sprintf>
+        </span>
       </template>
     </gl-form-group>
   </div>