Scaffold basic SAST Configuration Vue app

Part of [SAST Basic and Pipeline Config UI page - Frontend][1].

Behind feature flag `sast_configuration_ui` (disabled by default).

[1]: https://gitlab.com/gitlab-org/gitlab/-/issues/225224

ee/app/assets/javascripts/pages/projects/security/sast_configuration/index.js

+import initSASTConfiguration from 'ee/security_configuration/sast';
+
+document.addEventListener('DOMContentLoaded', initSASTConfiguration);

ee/app/assets/javascripts/security_configuration/sast/components/app.vue

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

ee/app/assets/javascripts/security_configuration/sast/index.js

+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,
+        },
+      });
+    },
+  });
+}

ee/app/views/projects/security/sast_configuration/show.html.haml

@@ -2,4 +2,4 @@
 - breadcrumb_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') } }

ee/spec/frontend/security_configuration/sast/components/app_spec.js

+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);
+    });
+  });
+});

locale/gitlab.pot

@@ -20868,6 +20868,9 @@ msgstr ""
 msgid "SecurityConfiguration|Configure"
 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"
 msgstr ""