Merge branch '241865-Replace-v-html' into 'master'

Replace v-html with v-safe-html in configure_feature_flags_modal.vue

See merge request gitlab-org/gitlab!41210

ee/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlFormGroup,
   GlFormInput,
@@ -10,7 +9,7 @@ import {
   GlLink,
   GlIcon,
 } from '@gitlab/ui';
-import { s__, __, sprintf } from '~/locale';
+import { s__, __ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import Callout from '~/vue_shared/components/callout.vue';
 
@@ -111,20 +110,6 @@ export default {
           }
         : null;
     },
-    helpText() {
-      return sprintf(
-        s__(
-          'FeatureFlags|Install a %{docs_link_anchored_start}compatible client library%{docs_link_anchored_end} and specify the API URL, application name, and instance ID during the configuration setup. %{docs_link_start}More Information%{docs_link_end}',
-        ),
-        {
-          docs_link_anchored_start: `<a href="${this.helpClientLibrariesPath}" target="_blank">`,
-          docs_link_anchored_end: '</a>',
-          docs_link_start: `<a href="${this.helpPath}" target="_blank">`,
-          docs_link_end: '</a>',
-        },
-        false,
-      );
-    },
   },
 
   methods: {
@@ -150,7 +135,25 @@ export default {
     <template #modal-title>
       {{ $options.modalTitle }}
     </template>
-    <p v-html="helpText"></p>
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            'FeatureFlags|Install a %{docsLinkAnchoredStart}compatible client library%{docsLinkAnchoredEnd} and specify the API URL, application name, and instance ID during the configuration setup. %{docsLinkStart}More Information%{docsLinkEnd}',
+          )
+        "
+      >
+        <template #docsLinkAnchored="{ content }">
+          <gl-link :href="helpClientLibrariesPath" target="_blank" data-testid="help-client-link">
+            {{ content }}
+          </gl-link>
+        </template>
+        <template #docsLink="{ content }">
+          <gl-link :href="helpPath" target="_blank" data-testid="help-link">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+
     <callout category="warning">
       <gl-sprintf
         :message="

ee/changelogs/unreleased/241865-Replace-v-html.yml

+---
+title: Replace v-html with v-safe-html in configure_feature_flags_modal.vue
+merge_request: 41210
+author: Kev @KevSlashNull
+type: other

ee/spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js

@@ -7,14 +7,7 @@ describe('Configure Feature Flags Modal', () => {
   const mockEvent = { preventDefault: jest.fn() };
   const projectName = 'fakeProjectName';
 
-  let wrapper;
-  const factory = (props = {}, { mountFn = shallowMount, ...options } = {}) => {
-    wrapper = mountFn(Component, {
-      provide: {
-        projectName,
-      },
-      stubs: { GlSprintf },
-      propsData: {
+  const propsData = {
     helpPath: '/help/path',
     helpClientLibrariesPath: '/help/path/#flags',
     helpClientExamplePath: '/feature-flags#clientexample',
@@ -23,6 +16,17 @@ describe('Configure Feature Flags Modal', () => {
     isRotating: false,
     hasRotateError: false,
     canUserRotateToken: true,
+  };
+
+  let wrapper;
+  const factory = (props = {}, { mountFn = shallowMount, ...options } = {}) => {
+    wrapper = mountFn(Component, {
+      provide: {
+        projectName,
+      },
+      stubs: { GlSprintf },
+      propsData: {
+        ...propsData,
         ...props,
       },
       ...options,
@@ -74,11 +78,10 @@ describe('Configure Feature Flags Modal', () => {
     });
 
     it('should have links to the documentation', () => {
-      const help = wrapper.find('p');
-      const link = help.find('a[href="/help/path"]');
-      expect(link.exists()).toBe(true);
-      const anchoredLink = help.find('a[href="/help/path/#flags"]');
-      expect(anchoredLink.exists()).toBe(true);
+      expect(wrapper.find('[data-testid="help-link"]').attributes('href')).toBe(propsData.helpPath);
+      expect(wrapper.find('[data-testid="help-client-link"]').attributes('href')).toBe(
+        propsData.helpClientLibrariesPath,
+      );
     });
 
     it('should display one and only one danger callout', () => {

locale/gitlab.pot

@@ -10805,7 +10805,7 @@ msgstr ""
 msgid "FeatureFlags|Include additional user IDs"
 msgstr ""
 
-msgid "FeatureFlags|Install a %{docs_link_anchored_start}compatible client library%{docs_link_anchored_end} and specify the API URL, application name, and instance ID during the configuration setup. %{docs_link_start}More Information%{docs_link_end}"
+msgid "FeatureFlags|Install a %{docsLinkAnchoredStart}compatible client library%{docsLinkAnchoredEnd} and specify the API URL, application name, and instance ID during the configuration setup. %{docsLinkStart}More Information%{docsLinkEnd}"
 msgstr ""
 
 msgid "FeatureFlags|Instance ID"