Refactor sprintf to gl-sprints

- expiration_policy_fields
- registry_settings_app
- unit tests
- swap a in favour of gl-link

app/assets/javascripts/registry/settings/components/registry_settings_app.vue

 <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>

app/assets/javascripts/registry/shared/components/expiration_policy_fields.vue

 <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>

spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap

@@ -4,7 +4,7 @@ exports[`Expiration Policy Form renders 1`] = `
 <div
   class="lh-2"
 >
-  <glformgroup-stub
+  <gl-form-group-stub
     id="expiration-policy-toggle-group"
     label="Expiration policy:"
     label-align="right"
@@ -14,7 +14,7 @@ exports[`Expiration Policy Form renders 1`] = `
     <div
       class="d-flex align-items-start"
     >
-      <gltoggle-stub
+      <gl-toggle-stub
         id="expiration-policy-toggle"
         labeloff="Toggle Status: OFF"
         labelon="Toggle Status: ON"
@@ -30,16 +30,16 @@ exports[`Expiration Policy Form renders 1`] = `
         </strong>
       </span>
     </div>
-  </glformgroup-stub>
+  </gl-form-group-stub>
    
-  <glformgroup-stub
+  <gl-form-group-stub
     id="expiration-policy-interval-group"
     label="Expiration interval:"
     label-align="right"
     label-cols="3"
     label-for="expiration-policy-interval"
   >
-    <glformselect-stub
+    <gl-form-select-stub
       disabled="true"
       id="expiration-policy-interval"
     >
@@ -57,16 +57,16 @@ exports[`Expiration Policy Form renders 1`] = `
         Bar
       
       </option>
-    </glformselect-stub>
-  </glformgroup-stub>
-  <glformgroup-stub
+    </gl-form-select-stub>
+  </gl-form-group-stub>
+  <gl-form-group-stub
     id="expiration-policy-schedule-group"
     label="Expiration schedule:"
     label-align="right"
     label-cols="3"
     label-for="expiration-policy-schedule"
   >
-    <glformselect-stub
+    <gl-form-select-stub
       disabled="true"
       id="expiration-policy-schedule"
     >
@@ -84,16 +84,16 @@ exports[`Expiration Policy Form renders 1`] = `
         Bar
       
       </option>
-    </glformselect-stub>
-  </glformgroup-stub>
-  <glformgroup-stub
+    </gl-form-select-stub>
+  </gl-form-group-stub>
+  <gl-form-group-stub
     id="expiration-policy-latest-group"
     label="Number of tags to retain:"
     label-align="right"
     label-cols="3"
     label-for="expiration-policy-latest"
   >
-    <glformselect-stub
+    <gl-form-select-stub
       disabled="true"
       id="expiration-policy-latest"
     >
@@ -111,10 +111,10 @@ exports[`Expiration Policy Form renders 1`] = `
         Bar
       
       </option>
-    </glformselect-stub>
-  </glformgroup-stub>
+    </gl-form-select-stub>
+  </gl-form-group-stub>
    
-  <glformgroup-stub
+  <gl-form-group-stub
     id="expiration-policy-name-matching-group"
     invalid-feedback="The value of this input should be less than 255 characters"
     label="Docker tags with names matching this regex pattern will expire:"
@@ -122,13 +122,13 @@ exports[`Expiration Policy Form renders 1`] = `
     label-cols="3"
     label-for="expiration-policy-name-matching"
   >
-    <glformtextarea-stub
+    <gl-form-textarea-stub
       disabled="true"
       id="expiration-policy-name-matching"
       placeholder=".*"
       trim=""
       value=""
     />
-  </glformgroup-stub>
+  </gl-form-group-stub>
 </div>
 `;

spec/frontend/registry/shared/components/expiration_policy_fields_spec.js

-import { mount } from '@vue/test-utils';
-import stubChildren from 'helpers/stub_children';
+import { shallowMount } from '@vue/test-utils';
+import { GlSprintf } from '@gitlab/ui';
 import component from '~/registry/shared/components/expiration_policy_fields.vue';
 
 import { NAME_REGEX_LENGTH } from '~/registry/shared/constants';
@@ -15,9 +15,9 @@ describe('Expiration Policy Form', () => {
     parent.find(`${FORM_ELEMENTS_ID_PREFIX}-${name}`);
 
   const mountComponent = props => {
-    wrapper = mount(component, {
+    wrapper = shallowMount(component, {
       stubs: {
-        ...stubChildren(component),
+        GlSprintf,
       },
       propsData: {
         formOptions,