Add boilerplate for DAST Configuration Page

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

+import initDastConfiguration from 'ee/security_configuration/dast';
+
+initDastConfiguration();

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

+<script>
+import { GlTab, GlTabs } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import DastConfigurationForm from './configuration_form.vue';
+
+export default {
+  components: {
+    DastConfigurationForm,
+    GlTab,
+    GlTabs,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+    };
+  },
+  computed: {
+    dastSettings() {
+      return [
+        {
+          title: s__('DastConfig|Scan Configuration'),
+          component: DastConfigurationForm,
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<template>
+  <article>
+    <header class="gl-my-5">
+      <h4>
+        {{ s__('DastConfig|DAST Settings') }}
+      </h4>
+    </header>
+
+    <gl-tabs v-model="tabIndex">
+      <gl-tab v-for="(tab, index) in dastSettings" :key="index">
+        <template #title>
+          {{ tab.title }}
+        </template>
+
+        <component :is="tab.component" />
+      </gl-tab>
+    </gl-tabs>
+  </article>
+</template>

ee/app/assets/javascripts/security_configuration/dast/components/configuration_form.vue

+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { DAST_HELP_PATH } from '~/security_configuration/components/constants';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  i18n: {
+    helpText: s__(`
+      DastConfig|Customize DAST settings to suit your requirements. Configuration changes made here override those provided by GitLab and are excluded from updates. For details of more advanced configuration options, see the %{docsLinkStart}GitLab DAST documentation%{docsLinkEnd}.`),
+  },
+  DAST_HELP_PATH,
+};
+</script>
+
+<template>
+  <section class="gl-mt-5">
+    <p>
+      <gl-sprintf :message="$options.i18n.helpText">
+        <template #docsLink="{ content }">
+          <gl-link :href="$options.DAST_HELP_PATH" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </section>
+</template>

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

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import DastConfigurationApp from './components/app.vue';
+
+export default function init() {
+  const el = document.querySelector('.js-dast-configuration');
+
+  if (!el) {
+    return undefined;
+  }
+
+  Vue.use(VueApollo);
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
+  });
+
+  const { securityConfigurationPath, fullPath, gitlabCiYamlEditPath } = el.dataset;
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      securityConfigurationPath,
+      fullPath,
+      gitlabCiYamlEditPath,
+    },
+    render(createElement) {
+      return createElement(DastConfigurationApp);
+    },
+  });
+}

ee/app/helpers/projects/security/dast_configuration_helper.rb

+# frozen_string_literal: true
+
+module Projects::Security::DastConfigurationHelper
+  def dast_configuration_data(project)
+    {
+      security_configuration_path: project_security_configuration_path(project),
+      full_path: project.full_path,
+      gitlab_ci_yaml_edit_path: Rails.application.routes.url_helpers.project_ci_pipeline_editor_path(project)
+    }
+  end
+end

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

@@ -2,4 +2,4 @@
 - breadcrumb_title _("DAST Configuration")
 - page_title _("DAST Configuration")
 
-%h1= _("DAST Settings")
+.js-dast-configuration{ data: dast_configuration_data(@project) }

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

+import { GlTabs, GlTab } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import App from 'ee/security_configuration/dast/components/app.vue';
+import DastConfigurationForm from 'ee/security_configuration/dast/components/configuration_form.vue';
+
+describe('EE - DAST Configuration App', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(App, {
+      stubs: {
+        GlTab,
+        GlTabs,
+      },
+    });
+  };
+
+  const findForm = () => wrapper.findComponent(DastConfigurationForm);
+  const findTabs = () => wrapper.findAllComponents(GlTab);
+  const findTabsContainer = () => wrapper.findComponent(GlTabs);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('mounts', () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.text()).toContain('DAST Settings');
+  });
+
+  it('shows the tabs correctly', () => {
+    expect(findTabsContainer().exists()).toBe(true);
+    expect(findTabs()).toHaveLength(1);
+  });
+
+  it('loads the scan configuration form by default', () => {
+    expect(findForm().exists()).toBe(true);
+  });
+});

ee/spec/frontend/security_configuration/dast/components/configuration_form_spec.js

+import { GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ConfigurationForm from 'ee/security_configuration/dast/components/configuration_form.vue';
+import { DAST_HELP_PATH } from '~/security_configuration/components/constants';
+
+describe('EE - DAST Configuration Form', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(ConfigurationForm, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('mounts', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('includes a link to DAST Configuration documentation', () => {
+    expect(wrapper.html()).toContain(DAST_HELP_PATH);
+  });
+});

ee/spec/helpers/ee/projects/security/dast_configuration_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Projects::Security::DastConfigurationHelper do
+  let_it_be(:project) { create(:project) }
+
+  let(:security_configuration_path) { project_security_configuration_path(project) }
+  let(:full_path) { project.full_path }
+  let(:gitlab_ci_yaml_edit_path) { Rails.application.routes.url_helpers.project_ci_pipeline_editor_path(project) }
+
+  describe '#dast_configuration_data' do
+    subject { helper.dast_configuration_data(project) }
+
+    it {
+      is_expected.to eq({
+        security_configuration_path: security_configuration_path,
+        full_path: full_path,
+        gitlab_ci_yaml_edit_path: gitlab_ci_yaml_edit_path
+      })
+    }
+  end
+end

locale/gitlab.pot

@@ -10012,9 +10012,6 @@ msgstr ""
 msgid "DAST Scans"
 msgstr ""
 
-msgid "DAST Settings"
-msgstr ""
-
 msgid "DNS"
 msgstr ""
 
@@ -10081,6 +10078,15 @@ msgstr ""
 msgid "Dashboard|Unable to add %{invalidProjects}. This dashboard is available for public projects, and private projects in groups with a Premium plan."
 msgstr ""
 
+msgid "DastConfig|Customize DAST settings to suit your requirements. Configuration changes made here override those provided by GitLab and are excluded from updates. For details of more advanced configuration options, see the %{docsLinkStart}GitLab DAST documentation%{docsLinkEnd}."
+msgstr ""
+
+msgid "DastConfig|DAST Settings"
+msgstr ""
+
+msgid "DastConfig|Scan Configuration"
+msgstr ""
+
 msgid "DastProfiles|A passive scan monitors all HTTP messages (requests and responses) sent to the target. An active scan attacks the target to find potential vulnerabilities."
 msgstr ""