Commit 8ca6b163 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

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
parents 75525684 352fb6a1
<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="
......
---
title: Replace v-html with v-safe-html in configure_feature_flags_modal.vue
merge_request: 41210
author: Kev @KevSlashNull
type: other
......@@ -7,6 +7,17 @@ describe('Configure Feature Flags Modal', () => {
const mockEvent = { preventDefault: jest.fn() };
const projectName = 'fakeProjectName';
const propsData = {
helpPath: '/help/path',
helpClientLibrariesPath: '/help/path/#flags',
helpClientExamplePath: '/feature-flags#clientexample',
apiUrl: '/api/url',
instanceId: 'instance-id-token',
isRotating: false,
hasRotateError: false,
canUserRotateToken: true,
};
let wrapper;
const factory = (props = {}, { mountFn = shallowMount, ...options } = {}) => {
wrapper = mountFn(Component, {
......@@ -15,14 +26,7 @@ describe('Configure Feature Flags Modal', () => {
},
stubs: { GlSprintf },
propsData: {
helpPath: '/help/path',
helpClientLibrariesPath: '/help/path/#flags',
helpClientExamplePath: '/feature-flags#clientexample',
apiUrl: '/api/url',
instanceId: 'instance-id-token',
isRotating: false,
hasRotateError: false,
canUserRotateToken: true,
...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', () => {
......
......@@ -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"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment