1 files changed, 147 insertions, 0 deletions
diff --git a/app/assets/javascripts/security_configuration/components/redesigned_app.vue b/app/assets/javascripts/security_configuration/components/redesigned_app.vue
new file mode 100644
index 00000000000..d8a12f4a792
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/redesigned_app.vue
@@ -0,0 +1,147 @@
+<script>
+import { GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import FeatureCard from './feature_card.vue';
+import SectionLayout from './section_layout.vue';
+import UpgradeBanner from './upgrade_banner.vue';
+
+export const i18n = {
+  compliance: s__('SecurityConfiguration|Compliance'),
+  securityTesting: s__('SecurityConfiguration|Security testing'),
+  securityTestingDescription: s__(
+    `SecurityConfiguration|The status of the tools only applies to the
+      default branch and is based on the %{linkStart}latest pipeline%{linkEnd}.
+      Once you've enabled a scan for the default branch, any subsequent feature
+      branch you create will include the scan.`,
+  ),
+  securityConfiguration: __('Security Configuration'),
+};
+
+export default {
+  i18n,
+  components: {
+    GlTab,
+    GlLink,
+    GlTabs,
+    GlSprintf,
+    FeatureCard,
+    SectionLayout,
+    UpgradeBanner,
+    UserCalloutDismisser,
+  },
+  props: {
+    augmentedSecurityFeatures: {
+      type: Array,
+      required: true,
+    },
+    augmentedComplianceFeatures: {
+      type: Array,
+      required: true,
+    },
+    gitlabCiPresent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    gitlabCiHistoryPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    latestPipelinePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    canUpgrade() {
+      return [...this.augmentedSecurityFeatures, ...this.augmentedComplianceFeatures].some(
+        ({ available }) => !available,
+      );
+    },
+    canViewCiHistory() {
+      return Boolean(this.gitlabCiPresent && this.gitlabCiHistoryPath);
+    },
+  },
+};
+</script>
+
+<template>
+  <article>
+    <header>
+      <h1 class="gl-font-size-h1">{{ $options.i18n.securityConfiguration }}</h1>
+    </header>
+
+    <user-callout-dismisser v-if="canUpgrade" feature-name="security_configuration_upgrade_banner">
+      <template #default="{ dismiss, shouldShowCallout }">
+        <upgrade-banner v-if="shouldShowCallout" @close="dismiss" />
+      </template>
+    </user-callout-dismisser>
+
+    <gl-tabs content-class="gl-pt-6">
+      <gl-tab data-testid="security-testing-tab" :title="$options.i18n.securityTesting">
+        <section-layout :heading="$options.i18n.securityTesting">
+          <template #description>
+            <p
+              v-if="latestPipelinePath"
+              data-testid="latest-pipeline-info-security"
+              class="gl-line-height-20"
+            >
+              <gl-sprintf :message="$options.i18n.securityTestingDescription">
+                <template #link="{ content }">
+                  <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
+                </template>
+              </gl-sprintf>
+            </p>
+            <p v-if="canViewCiHistory">
+              <gl-link data-testid="security-view-history-link" :href="gitlabCiHistoryPath">{{
+                $options.i18n.configurationHistory
+              }}</gl-link>
+            </p>
+          </template>
+
+          <template #features>
+            <feature-card
+              v-for="feature in augmentedSecurityFeatures"
+              :key="feature.type"
+              :feature="feature"
+              class="gl-mb-6"
+            />
+          </template>
+        </section-layout>
+      </gl-tab>
+      <gl-tab data-testid="compliance-testing-tab" :title="$options.i18n.compliance">
+        <section-layout :heading="$options.i18n.compliance">
+          <template #description>
+            <p
+              v-if="latestPipelinePath"
+              class="gl-line-height-20"
+              data-testid="latest-pipeline-info-compliance"
+            >
+              <gl-sprintf :message="$options.i18n.securityTestingDescription">
+                <template #link="{ content }">
+                  <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
+                </template>
+              </gl-sprintf>
+            </p>
+            <p v-if="canViewCiHistory">
+              <gl-link data-testid="compliance-view-history-link" :href="gitlabCiHistoryPath">{{
+                $options.i18n.configurationHistory
+              }}</gl-link>
+            </p>
+          </template>
+          <template #features>
+            <feature-card
+              v-for="feature in augmentedComplianceFeatures"
+              :key="feature.type"
+              :feature="feature"
+              class="gl-mb-6"
+            />
+          </template>
+        </section-layout>
+      </gl-tab>
+    </gl-tabs>
+  </article>
+</template>