Commit 5e1d1100 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch '225224-sast-basic-vue-app' into 'master'

Scaffold basic SAST Configuration Vue app

See merge request gitlab-org/gitlab!35866
parents 9d4f3835 f9a31cde
import initSASTConfiguration from 'ee/security_configuration/sast';
document.addEventListener('DOMContentLoaded', initSASTConfiguration);
<script>
import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
export default {
components: {
GlIcon,
GlLink,
GlSprintf,
},
props: {
sastDocumentationPath: {
type: String,
required: true,
},
},
helpText: s__(
`SecurityConfiguration|Customize common SAST settings to suit your
requirements. More advanced configuration options exist, which you can add
to the configuration file this tool generates. It's important to note that
if you make any configurations, they will be saved as overrides and will be
%{strongStart}excluded from automatic updates%{strongEnd}.`,
),
};
</script>
<template>
<article>
<header class="my-3 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
<h2 class="h4">
{{ __('SAST Configuration') }}
<gl-link
:href="sastDocumentationPath"
class="vertical-align-middle"
target="_blank"
:aria-label="__('Help')"
>
<gl-icon name="question" />
</gl-link>
</h2>
<p>
<gl-sprintf :message="$options.helpText">
<template #strong="{ content }">
<strong>{{ content }}</strong>
</template>
</gl-sprintf>
</p>
</header>
</article>
</template>
import Vue from 'vue';
import SASTConfigurationApp from './components/app.vue';
export default function init() {
const el = document.querySelector('.js-sast-configuration');
if (!el) {
return undefined;
}
const { sastDocumentationPath } = el.dataset;
return new Vue({
el,
render(createElement) {
return createElement(SASTConfigurationApp, {
props: {
sastDocumentationPath,
},
});
},
});
}
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
- breadcrumb_title _("SAST Configuration") - breadcrumb_title _("SAST Configuration")
- page_title _("SAST Configuration") - page_title _("SAST Configuration")
.js-sast-configuration .js-sast-configuration{ data: { sast_documentation_path: help_page_path('user/application_security/sast/index', anchor: 'configuration') } }
import { shallowMount } from '@vue/test-utils';
import { GlLink, GlSprintf } from '@gitlab/ui';
import SASTConfigurationApp from 'ee/security_configuration/sast/components/app.vue';
const sastDocumentationPath = '/help/sast';
describe('SAST Configuration App', () => {
let wrapper;
const createComponent = ({ props = {}, stubs = {} } = {}) => {
wrapper = shallowMount(SASTConfigurationApp, {
stubs,
propsData: {
...props,
},
});
};
const findHeader = () => wrapper.find('header');
const findSubHeading = () => findHeader().find('p');
const findLink = (container = wrapper) => container.find(GlLink);
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('header', () => {
beforeEach(() => {
createComponent({
props: { sastDocumentationPath },
stubs: { GlSprintf },
});
});
it('displays a link to sastDocumentationPath', () => {
expect(findLink(findHeader()).attributes('href')).toBe(sastDocumentationPath);
});
it('displays the subheading', () => {
expect(findSubHeading().text()).toMatchInterpolatedText(SASTConfigurationApp.helpText);
});
});
});
...@@ -20901,6 +20901,9 @@ msgstr "" ...@@ -20901,6 +20901,9 @@ msgstr ""
msgid "SecurityConfiguration|Configure" msgid "SecurityConfiguration|Configure"
msgstr "" msgstr ""
msgid "SecurityConfiguration|Customize common SAST settings to suit your requirements. More advanced configuration options exist, which you can add to the configuration file this tool generates. It's important to note that if you make any configurations, they will be saved as overrides and will be %{strongStart}excluded from automatic updates%{strongEnd}."
msgstr ""
msgid "SecurityConfiguration|Enable via Merge Request" msgid "SecurityConfiguration|Enable via Merge Request"
msgstr "" msgstr ""
......
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