Apply changes from review

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

@@ -8,7 +8,6 @@ import {
   GlSprintf,
   GlLink,
   GlIcon,
-  GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
@@ -40,7 +39,6 @@ export default {
 
   directives: {
     GlTooltip: GlTooltipDirective,
-    SafeHtml,
   },
 
   props: {
@@ -146,10 +144,12 @@ export default {
         "
       >
         <template #docsLinkAnchored="{ content }">
-          <gl-link :href="helpClientLibrariesPath" target="_blank">{{ content }}</gl-link>
+          <gl-link :href="helpClientLibrariesPath" target="_blank" data-testid="help-client-link">
+            {{ content }}
+          </gl-link>
         </template>
         <template #docsLink="{ content }">
-          <gl-link :href="helpPath" target="_blank">{{ content }}</gl-link>
+          <gl-link :href="helpPath" target="_blank" data-testid="help-link">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </p>

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('gl-link-stub[href="/help/path"]');
-      expect(link.exists()).toBe(true);
-      const anchoredLink = help.find('gl-link-stub[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

@@ -10716,7 +10716,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"