Add latest changes from gitlab-org/gitlab@master

5 files changed, 227 insertions, 4 deletions

diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js
index 3cdcac4c0b4..142dade914b 100644
--- a/app/assets/javascripts/security_configuration/components/constants.js
+++ b/app/assets/javascripts/security_configuration/components/constants.js
@@ -18,18 +18,27 @@ import {
  * Translations & helpPagePaths for Static Security Configuration Page
  */
 export const SAST_NAME = __('Static Application Security Testing (SAST)');
+export const SAST_SHORT_NAME = s__('ciReport|SAST');
 export const SAST_DESCRIPTION = __('Analyze your source code for known vulnerabilities.');
 export const SAST_HELP_PATH = helpPagePath('user/application_security/sast/index');
+export const SAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/sast/index', {
+  anchor: 'configuration',
+});
 
 export const DAST_NAME = __('Dynamic Application Security Testing (DAST)');
+export const DAST_SHORT_NAME = s__('ciReport|DAST');
 export const DAST_DESCRIPTION = __('Analyze a review version of your web application.');
 export const DAST_HELP_PATH = helpPagePath('user/application_security/dast/index');
+export const DAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/dast/index', {
+  anchor: 'enable-dast',
+});
 
 export const DAST_PROFILES_NAME = __('DAST Scans');
 export const DAST_PROFILES_DESCRIPTION = __(
   'Saved scan settings and target site settings which are reusable.',
 );
 export const DAST_PROFILES_HELP_PATH = helpPagePath('user/application_security/dast/index');
+export const DAST_PROFILES_CONFIG_TEXT = s__('SecurityConfiguration|Manage scans');
 
 export const SECRET_DETECTION_NAME = __('Secret Detection');
 export const SECRET_DETECTION_DESCRIPTION = __(
@@ -38,6 +47,10 @@ export const SECRET_DETECTION_DESCRIPTION = __(
 export const SECRET_DETECTION_HELP_PATH = helpPagePath(
   'user/application_security/secret_detection/index',
 );
+export const SECRET_DETECTION_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/secret_detection/index',
+  { anchor: 'configuration' },
+);
 
 export const DEPENDENCY_SCANNING_NAME = __('Dependency Scanning');
 export const DEPENDENCY_SCANNING_DESCRIPTION = __(
@@ -46,6 +59,10 @@ export const DEPENDENCY_SCANNING_DESCRIPTION = __(
 export const DEPENDENCY_SCANNING_HELP_PATH = helpPagePath(
   'user/application_security/dependency_scanning/index',
 );
+export const DEPENDENCY_SCANNING_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/dependency_scanning/index',
+  { anchor: 'configuration' },
+);
 
 export const CONTAINER_SCANNING_NAME = __('Container Scanning');
 export const CONTAINER_SCANNING_DESCRIPTION = __(
@@ -54,6 +71,10 @@ export const CONTAINER_SCANNING_DESCRIPTION = __(
 export const CONTAINER_SCANNING_HELP_PATH = helpPagePath(
   'user/application_security/container_scanning/index',
 );
+export const CONTAINER_SCANNING_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/container_scanning/index',
+  { anchor: 'configuration' },
+);
 
 export const COVERAGE_FUZZING_NAME = __('Coverage Fuzzing');
 export const COVERAGE_FUZZING_DESCRIPTION = __(
@@ -136,6 +157,83 @@ export const scanners = [
   },
 ];
 
+export const securityFeatures = [
+  {
+    name: SAST_NAME,
+    shortName: SAST_SHORT_NAME,
+    description: SAST_DESCRIPTION,
+    helpPath: SAST_HELP_PATH,
+    configurationHelpPath: SAST_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_SAST,
+    // This field is currently hardcoded because SAST is always available.
+    // It will eventually come from the Backend, the progress is tracked in
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/331622
+    available: true,
+
+    // This field is currently hardcoded because SAST can always be enabled via MR
+    // It will eventually come from the Backend, the progress is tracked in
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/331621
+    canEnableByMergeRequest: true,
+  },
+  {
+    name: DAST_NAME,
+    shortName: DAST_SHORT_NAME,
+    description: DAST_DESCRIPTION,
+    helpPath: DAST_HELP_PATH,
+    configurationHelpPath: DAST_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_DAST,
+    secondary: {
+      type: REPORT_TYPE_DAST_PROFILES,
+      name: DAST_PROFILES_NAME,
+      description: DAST_PROFILES_DESCRIPTION,
+      configurationText: DAST_PROFILES_CONFIG_TEXT,
+    },
+  },
+  {
+    name: DEPENDENCY_SCANNING_NAME,
+    description: DEPENDENCY_SCANNING_DESCRIPTION,
+    helpPath: DEPENDENCY_SCANNING_HELP_PATH,
+    configurationHelpPath: DEPENDENCY_SCANNING_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_DEPENDENCY_SCANNING,
+  },
+  {
+    name: CONTAINER_SCANNING_NAME,
+    description: CONTAINER_SCANNING_DESCRIPTION,
+    helpPath: CONTAINER_SCANNING_HELP_PATH,
+    configurationHelpPath: CONTAINER_SCANNING_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_CONTAINER_SCANNING,
+  },
+  {
+    name: SECRET_DETECTION_NAME,
+    description: SECRET_DETECTION_DESCRIPTION,
+    helpPath: SECRET_DETECTION_HELP_PATH,
+    configurationHelpPath: SECRET_DETECTION_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_SECRET_DETECTION,
+    available: true,
+  },
+  {
+    name: API_FUZZING_NAME,
+    description: API_FUZZING_DESCRIPTION,
+    helpPath: API_FUZZING_HELP_PATH,
+    type: REPORT_TYPE_API_FUZZING,
+  },
+  {
+    name: COVERAGE_FUZZING_NAME,
+    description: COVERAGE_FUZZING_DESCRIPTION,
+    helpPath: COVERAGE_FUZZING_HELP_PATH,
+    type: REPORT_TYPE_COVERAGE_FUZZING,
+  },
+];
+
+export const complianceFeatures = [
+  {
+    name: LICENSE_COMPLIANCE_NAME,
+    description: LICENSE_COMPLIANCE_DESCRIPTION,
+    helpPath: LICENSE_COMPLIANCE_HELP_PATH,
+    type: REPORT_TYPE_LICENSE_COMPLIANCE,
+  },
+];
+
 export const featureToMutationMap = {
   [REPORT_TYPE_SAST]: {
     mutationId: 'configureSast',
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..9f3f7f2f703
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/redesigned_app.vue
@@ -0,0 +1,76 @@
+<script>
+import { GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import FeatureCard from './feature_card.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,
+  },
+  props: {
+    augmentedSecurityFeatures: {
+      type: Array,
+      required: true,
+    },
+    latestPipelinePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <article>
+    <header>
+      <h1 class="gl-font-size-h1">{{ $options.i18n.securityConfiguration }}</h1>
+    </header>
+
+    <gl-tabs content-class="gl-pt-6">
+      <gl-tab data-testid="security-testing-tab" :title="$options.i18n.securityTesting">
+        <div class="row">
+          <div class="col-lg-5">
+            <h2 class="gl-font-size-h2 gl-mt-0">{{ $options.i18n.securityTesting }}</h2>
+            <p
+              v-if="latestPipelinePath"
+              data-testid="latest-pipeline-info"
+              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>
+          </div>
+          <div class="col-lg-7">
+            <feature-card
+              v-for="feature in augmentedSecurityFeatures"
+              :key="feature.type"
+              :feature="feature"
+              class="gl-mb-6"
+            />
+          </div>
+        </div>
+      </gl-tab>
+    </gl-tabs>
+  </article>
+</template>
diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js
index 1134a1ffb44..a74bc5163d0 100644
--- a/app/assets/javascripts/security_configuration/index.js
+++ b/app/assets/javascripts/security_configuration/index.js
@@ -2,6 +2,9 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import SecurityConfigurationApp from './components/app.vue';
+import { securityFeatures, complianceFeatures } from './components/constants';
+import RedesignedSecurityConfigurationApp from './components/redesigned_app.vue';
+import { augmentFeatures } from './utils';
 
 export const initStaticSecurityConfiguration = (el) => {
   if (!el) {
@@ -14,8 +17,32 @@ export const initStaticSecurityConfiguration = (el) => {
     defaultClient: createDefaultClient(),
   });
 
-  const { projectPath, upgradePath } = el.dataset;
+  const { projectPath, upgradePath, features, latestPipelinePath } = el.dataset;
 
+  if (gon.features.securityConfigurationRedesign) {
+    const { augmentedSecurityFeatures } = augmentFeatures(
+      securityFeatures,
+      complianceFeatures,
+      features ? JSON.parse(features) : [],
+    );
+
+    return new Vue({
+      el,
+      apolloProvider,
+      provide: {
+        projectPath,
+        upgradePath,
+      },
+      render(createElement) {
+        return createElement(RedesignedSecurityConfigurationApp, {
+          props: {
+            augmentedSecurityFeatures,
+            latestPipelinePath,
+          },
+        });
+      },
+    });
+  }
   return new Vue({
     el,
     apolloProvider,
diff --git a/app/assets/javascripts/security_configuration/utils.js b/app/assets/javascripts/security_configuration/utils.js
new file mode 100644
index 00000000000..071ebff4f21
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/utils.js
@@ -0,0 +1,24 @@
+export const augmentFeatures = (securityFeatures, complianceFeatures, features = []) => {
+  const featuresByType = features.reduce((acc, feature) => {
+    acc[feature.type] = feature;
+    return acc;
+  }, {});
+
+  const augmentFeature = (feature) => {
+    const augmented = {
+      ...feature,
+      ...featuresByType[feature.type],
+    };
+
+    if (augmented.secondary) {
+      augmented.secondary = { ...augmented.secondary, ...featuresByType[feature.secondary.type] };
+    }
+
+    return augmented;
+  };
+
+  return {
+    augmentedSecurityFeatures: securityFeatures.map((feature) => augmentFeature(feature)),
+    augmentedComplianceFeatures: complianceFeatures.map((feature) => augmentFeature(feature)),
+  };
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 7b99286d2ee..95804e11b4a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -435,9 +435,7 @@ export default {
 </script>
 <template>
   <div v-if="isLoaded" class="mr-state-widget gl-mt-3">
-    <header
-      class="gl-overflow-hidden gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100"
-    >
+    <header class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100">
       <mr-widget-alert-message v-if="shouldRenderCollaborationStatus" type="info">
         {{ s__('mrWidget|Members who can merge are allowed to add commits.') }}
       </mr-widget-alert-message>