Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

10 files changed, 273 insertions, 447 deletions

diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue
index 513a7353d28..6c70a8c33db 100644
--- a/app/assets/javascripts/security_configuration/components/app.vue
+++ b/app/assets/javascripts/security_configuration/components/app.vue
@@ -1,23 +1,216 @@
 <script>
-import ConfigurationTable from './configuration_table.vue';
+import { GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import AutoDevOpsAlert from './auto_dev_ops_alert.vue';
+import AutoDevOpsEnabledAlert from './auto_dev_ops_enabled_alert.vue';
+import { AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY } from './constants';
+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'),
+  configurationHistory: s__('SecurityConfiguration|Configuration history'),
+  securityTesting: s__('SecurityConfiguration|Security testing'),
+  latestPipelineDescription: s__(
+    `SecurityConfiguration|The status of the tools only applies to the
+     default branch and is based on the %{linkStart}latest pipeline%{linkEnd}.`,
+  ),
+  description: s__(
+    `SecurityConfiguration|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: {
-    ConfigurationTable,
+    AutoDevOpsAlert,
+    AutoDevOpsEnabledAlert,
+    FeatureCard,
+    GlLink,
+    GlSprintf,
+    GlTab,
+    GlTabs,
+    LocalStorageSync,
+    SectionLayout,
+    UpgradeBanner,
+    UserCalloutDismisser,
+  },
+  inject: ['projectPath'],
+  props: {
+    augmentedSecurityFeatures: {
+      type: Array,
+      required: true,
+    },
+    augmentedComplianceFeatures: {
+      type: Array,
+      required: true,
+    },
+    gitlabCiPresent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    autoDevopsEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canEnableAutoDevops: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    gitlabCiHistoryPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    latestPipelinePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      autoDevopsEnabledAlertDismissedProjects: [],
+    };
+  },
+  computed: {
+    canUpgrade() {
+      return [...this.augmentedSecurityFeatures, ...this.augmentedComplianceFeatures].some(
+        ({ available }) => !available,
+      );
+    },
+    canViewCiHistory() {
+      return Boolean(this.gitlabCiPresent && this.gitlabCiHistoryPath);
+    },
+    shouldShowDevopsAlert() {
+      return !this.autoDevopsEnabled && !this.gitlabCiPresent && this.canEnableAutoDevops;
+    },
+    shouldShowAutoDevopsEnabledAlert() {
+      return (
+        this.autoDevopsEnabled &&
+        !this.autoDevopsEnabledAlertDismissedProjects.includes(this.projectPath)
+      );
+    },
+  },
+  methods: {
+    dismissAutoDevopsEnabledAlert() {
+      const dismissedProjects = new Set(this.autoDevopsEnabledAlertDismissedProjects);
+      dismissedProjects.add(this.projectPath);
+      this.autoDevopsEnabledAlertDismissedProjects = Array.from(dismissedProjects);
+    },
   },
+  autoDevopsEnabledAlertStorageKey: AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
 };
 </script>
 
 <template>
   <article>
+    <local-storage-sync
+      v-model="autoDevopsEnabledAlertDismissedProjects"
+      :storage-key="$options.autoDevopsEnabledAlertStorageKey"
+      as-json
+    />
+
+    <user-callout-dismisser
+      v-if="shouldShowDevopsAlert"
+      feature-name="security_configuration_devops_alert"
+    >
+      <template #default="{ dismiss, shouldShowCallout }">
+        <auto-dev-ops-alert v-if="shouldShowCallout" class="gl-mt-3" @dismiss="dismiss" />
+      </template>
+    </user-callout-dismisser>
     <header>
-      <h4 class="gl-my-5">
-        {{ __('Security Configuration') }}
-      </h4>
-      <h5 class="gl-font-lg gl-mt-7">
-        {{ s__('SecurityConfiguration|Testing & Compliance') }}
-      </h5>
+      <h1 class="gl-font-size-h1">{{ $options.i18n.securityConfiguration }}</h1>
     </header>
-    <configuration-table />
+    <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-0">
+      <gl-tab data-testid="security-testing-tab" :title="$options.i18n.securityTesting">
+        <auto-dev-ops-enabled-alert
+          v-if="shouldShowAutoDevopsEnabledAlert"
+          class="gl-mt-3"
+          @dismiss="dismissAutoDevopsEnabledAlert"
+        />
+
+        <section-layout :heading="$options.i18n.securityTesting">
+          <template #description>
+            <p>
+              <span data-testid="latest-pipeline-info-security">
+                <gl-sprintf
+                  v-if="latestPipelinePath"
+                  :message="$options.i18n.latestPipelineDescription"
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
+                  </template>
+                </gl-sprintf>
+              </span>
+
+              {{ $options.i18n.description }}
+            </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"
+              data-testid="security-testing-card"
+              :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>
+              <span data-testid="latest-pipeline-info-compliance">
+                <gl-sprintf
+                  v-if="latestPipelinePath"
+                  :message="$options.i18n.latestPipelineDescription"
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
+                  </template>
+                </gl-sprintf>
+              </span>
+
+              {{ $options.i18n.description }}
+            </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>
diff --git a/app/assets/javascripts/security_configuration/components/auto_dev_ops_enabled_alert.vue b/app/assets/javascripts/security_configuration/components/auto_dev_ops_enabled_alert.vue
new file mode 100644
index 00000000000..7192108f7c5
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/auto_dev_ops_enabled_alert.vue
@@ -0,0 +1,30 @@
+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['autoDevopsHelpPagePath'],
+  i18n: {
+    body: s__(
+      'AutoDevopsAlert|Security testing tools enabled with %{linkStart}Auto DevOps%{linkEnd}',
+    ),
+  },
+};
+</script>
+
+<template>
+  <gl-alert variant="success" @dismiss="$emit('dismiss')">
+    <gl-sprintf :message="$options.i18n.body">
+      <template #link="{ content }">
+        <gl-link :href="autoDevopsHelpPagePath">
+          {{ content }}
+        </gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/security_configuration/components/configuration_table.vue b/app/assets/javascripts/security_configuration/components/configuration_table.vue
deleted file mode 100644
index 7f250bf1365..00000000000
--- a/app/assets/javascripts/security_configuration/components/configuration_table.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-import { GlLink, GlTable, GlAlert } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
-import ManageViaMR from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
-import {
-  REPORT_TYPE_SAST,
-  REPORT_TYPE_DAST,
-  REPORT_TYPE_DAST_PROFILES,
-  REPORT_TYPE_DEPENDENCY_SCANNING,
-  REPORT_TYPE_CONTAINER_SCANNING,
-  REPORT_TYPE_CLUSTER_IMAGE_SCANNING,
-  REPORT_TYPE_COVERAGE_FUZZING,
-  REPORT_TYPE_API_FUZZING,
-  REPORT_TYPE_LICENSE_COMPLIANCE,
-} from '~/vue_shared/security_reports/constants';
-
-import { scanners } from './constants';
-import Upgrade from './upgrade.vue';
-
-const borderClasses = 'gl-border-b-1! gl-border-b-solid! gl-border-gray-100!';
-const thClass = `gl-text-gray-900 gl-bg-transparent! ${borderClasses}`;
-
-export default {
-  components: {
-    GlLink,
-    GlTable,
-    GlAlert,
-  },
-  data() {
-    return {
-      errorMessage: '',
-    };
-  },
-  methods: {
-    getFeatureDocumentationLinkLabel(item) {
-      return sprintf(s__('SecurityConfiguration|Feature documentation for %{featureName}'), {
-        featureName: item.name,
-      });
-    },
-    onError(value) {
-      this.errorMessage = value;
-    },
-    getComponentForItem(item) {
-      const COMPONENTS = {
-        [REPORT_TYPE_SAST]: ManageViaMR,
-        [REPORT_TYPE_DAST]: Upgrade,
-        [REPORT_TYPE_DAST_PROFILES]: Upgrade,
-        [REPORT_TYPE_DEPENDENCY_SCANNING]: Upgrade,
-        [REPORT_TYPE_CONTAINER_SCANNING]: Upgrade,
-        [REPORT_TYPE_CLUSTER_IMAGE_SCANNING]: Upgrade,
-        [REPORT_TYPE_COVERAGE_FUZZING]: Upgrade,
-        [REPORT_TYPE_API_FUZZING]: Upgrade,
-        [REPORT_TYPE_LICENSE_COMPLIANCE]: Upgrade,
-      };
-      return COMPONENTS[item.type];
-    },
-  },
-  table: {
-    fields: [
-      {
-        key: 'feature',
-        label: s__('SecurityConfiguration|Security Control'),
-        thClass,
-      },
-      {
-        key: 'manage',
-        label: s__('SecurityConfiguration|Manage'),
-        thClass,
-      },
-    ],
-    items: scanners,
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-alert v-if="errorMessage" variant="danger" :dismissible="false">
-      {{ errorMessage }}
-    </gl-alert>
-    <gl-table :items="$options.table.items" :fields="$options.table.fields" stacked="md">
-      <template #cell(feature)="{ item }">
-        <div class="gl-text-gray-900">
-          {{ item.name }}
-        </div>
-        <div>
-          {{ item.description }}
-          <gl-link
-            target="_blank"
-            data-testid="help-link"
-            :href="item.helpPath"
-            :aria-label="getFeatureDocumentationLinkLabel(item)"
-          >
-            {{ s__('SecurityConfiguration|More information') }}
-          </gl-link>
-        </div>
-      </template>
-
-      <template #cell(manage)="{ item }">
-        <component
-          :is="getComponentForItem(item)"
-          :feature="item"
-          :data-testid="item.type"
-          @error="onError"
-        />
-      </template>
-    </gl-table>
-  </div>
-</template>
diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js
index 5cb9277040d..ebe0138f046 100644
--- a/app/assets/javascripts/security_configuration/components/constants.js
+++ b/app/assets/javascripts/security_configuration/components/constants.js
@@ -18,8 +18,9 @@ import configureSastMutation from '../graphql/configure_sast.mutation.graphql';
 import configureSecretDetectionMutation from '../graphql/configure_secret_detection.mutation.graphql';
 
 /**
- * Translations & helpPagePaths for Static Security Configuration Page
+ * Translations & helpPagePaths for 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.');
@@ -98,6 +99,10 @@ export const COVERAGE_FUZZING_DESCRIPTION = __(
 export const COVERAGE_FUZZING_HELP_PATH = helpPagePath(
   'user/application_security/coverage_fuzzing/index',
 );
+export const COVERAGE_FUZZING_CONFIG_HELP_PATH = helpPagePath(
+  'user/application_security/coverage_fuzzing/index',
+  { anchor: 'configuration' },
+);
 
 export const API_FUZZING_NAME = __('API Fuzzing');
 export const API_FUZZING_DESCRIPTION = __('Find bugs in your code with API fuzzing.');
@@ -111,73 +116,6 @@ export const LICENSE_COMPLIANCE_HELP_PATH = helpPagePath(
   'user/compliance/license_compliance/index',
 );
 
-export const UPGRADE_CTA = s__(
-  'SecurityConfiguration|Available with %{linkStart}upgrade or free trial%{linkEnd}',
-);
-
-export const scanners = [
-  {
-    name: SAST_NAME,
-    description: SAST_DESCRIPTION,
-    helpPath: SAST_HELP_PATH,
-    type: REPORT_TYPE_SAST,
-  },
-  {
-    name: DAST_NAME,
-    description: DAST_DESCRIPTION,
-    helpPath: DAST_HELP_PATH,
-    type: REPORT_TYPE_DAST,
-  },
-  {
-    name: DAST_PROFILES_NAME,
-    description: DAST_PROFILES_DESCRIPTION,
-    helpPath: DAST_PROFILES_HELP_PATH,
-    type: REPORT_TYPE_DAST_PROFILES,
-  },
-  {
-    name: DEPENDENCY_SCANNING_NAME,
-    description: DEPENDENCY_SCANNING_DESCRIPTION,
-    helpPath: DEPENDENCY_SCANNING_HELP_PATH,
-    type: REPORT_TYPE_DEPENDENCY_SCANNING,
-  },
-  {
-    name: CONTAINER_SCANNING_NAME,
-    description: CONTAINER_SCANNING_DESCRIPTION,
-    helpPath: CONTAINER_SCANNING_HELP_PATH,
-    type: REPORT_TYPE_CONTAINER_SCANNING,
-  },
-  {
-    name: CLUSTER_IMAGE_SCANNING_NAME,
-    description: CLUSTER_IMAGE_SCANNING_DESCRIPTION,
-    helpPath: CLUSTER_IMAGE_SCANNING_HELP_PATH,
-    type: REPORT_TYPE_CLUSTER_IMAGE_SCANNING,
-  },
-  {
-    name: SECRET_DETECTION_NAME,
-    description: SECRET_DETECTION_DESCRIPTION,
-    helpPath: SECRET_DETECTION_HELP_PATH,
-    type: REPORT_TYPE_SECRET_DETECTION,
-  },
-  {
-    name: COVERAGE_FUZZING_NAME,
-    description: COVERAGE_FUZZING_DESCRIPTION,
-    helpPath: COVERAGE_FUZZING_HELP_PATH,
-    type: REPORT_TYPE_COVERAGE_FUZZING,
-  },
-  {
-    name: API_FUZZING_NAME,
-    description: API_FUZZING_DESCRIPTION,
-    helpPath: API_FUZZING_HELP_PATH,
-    type: REPORT_TYPE_API_FUZZING,
-  },
-  {
-    name: LICENSE_COMPLIANCE_NAME,
-    description: LICENSE_COMPLIANCE_DESCRIPTION,
-    helpPath: LICENSE_COMPLIANCE_HELP_PATH,
-    type: REPORT_TYPE_LICENSE_COMPLIANCE,
-  },
-];
-
 export const securityFeatures = [
   {
     name: SAST_NAME,
@@ -219,7 +157,7 @@ export const securityFeatures = [
 
     // This field will eventually come from the backend, the progress is
     // tracked in https://gitlab.com/gitlab-org/gitlab/-/issues/331621
-    canEnableByMergeRequest: window.gon.features?.secDependencyScanningUiEnable,
+    canEnableByMergeRequest: true,
   },
   {
     name: CONTAINER_SCANNING_NAME,
@@ -262,6 +200,7 @@ export const securityFeatures = [
     name: COVERAGE_FUZZING_NAME,
     description: COVERAGE_FUZZING_DESCRIPTION,
     helpPath: COVERAGE_FUZZING_HELP_PATH,
+    configurationHelpPath: COVERAGE_FUZZING_CONFIG_HELP_PATH,
     type: REPORT_TYPE_COVERAGE_FUZZING,
   },
 ];
@@ -300,3 +239,6 @@ export const featureToMutationMap = {
     }),
   },
 };
+
+export const AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY =
+  'security_configuration_auto_devops_enabled_dismissed_projects';
diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue
index 23cffde1f83..0ecfdf420db 100644
--- a/app/assets/javascripts/security_configuration/components/feature_card.vue
+++ b/app/assets/javascripts/security_configuration/components/feature_card.vue
@@ -83,7 +83,11 @@ export default {
     <div class="gl-display-flex gl-align-items-baseline">
       <h3 class="gl-font-lg gl-m-0 gl-mr-3">{{ feature.name }}</h3>
 
-      <div :class="statusClasses" data-testid="feature-status">
+      <div
+        :class="statusClasses"
+        data-testid="feature-status"
+        :data-qa-selector="`${feature.type}_status`"
+      >
         <template v-if="hasStatus">
           <template v-if="enabled">
             <gl-icon name="check-circle-filled" />
@@ -112,6 +116,7 @@ export default {
         :href="feature.configurationPath"
         variant="confirm"
         :category="configurationButton.category"
+        :data-qa-selector="`${feature.type}_enable_button`"
         class="gl-mt-5"
       >
         {{ configurationButton.text }}
@@ -125,7 +130,12 @@ export default {
         class="gl-mt-5"
       />
 
-      <gl-button v-else icon="external-link" :href="feature.configurationHelpPath" class="gl-mt-5">
+      <gl-button
+        v-else-if="feature.configurationHelpPath"
+        icon="external-link"
+        :href="feature.configurationHelpPath"
+        class="gl-mt-5"
+      >
         {{ $options.i18n.configurationGuide }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/security_configuration/components/redesigned_app.vue b/app/assets/javascripts/security_configuration/components/redesigned_app.vue
deleted file mode 100644
index 915da378a4f..00000000000
--- a/app/assets/javascripts/security_configuration/components/redesigned_app.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<script>
-import { GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
-import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
-import AutoDevOpsAlert from './auto_dev_ops_alert.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'),
-  configurationHistory: s__('SecurityConfiguration|Configuration history'),
-  securityTesting: s__('SecurityConfiguration|Security testing'),
-  latestPipelineDescription: s__(
-    `SecurityConfiguration|The status of the tools only applies to the
-     default branch and is based on the %{linkStart}latest pipeline%{linkEnd}.`,
-  ),
-  description: s__(
-    `SecurityConfiguration|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,
-    AutoDevOpsAlert,
-    UserCalloutDismisser,
-  },
-  props: {
-    augmentedSecurityFeatures: {
-      type: Array,
-      required: true,
-    },
-    augmentedComplianceFeatures: {
-      type: Array,
-      required: true,
-    },
-    gitlabCiPresent: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    autoDevopsEnabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    canEnableAutoDevops: {
-      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);
-    },
-    shouldShowDevopsAlert() {
-      return !this.autoDevopsEnabled && !this.gitlabCiPresent && this.canEnableAutoDevops;
-    },
-  },
-};
-</script>
-
-<template>
-  <article>
-    <user-callout-dismisser
-      v-if="shouldShowDevopsAlert"
-      feature-name="security_configuration_devops_alert"
-    >
-      <template #default="{ dismiss, shouldShowCallout }">
-        <auto-dev-ops-alert v-if="shouldShowCallout" class="gl-mt-3" @dismiss="dismiss" />
-      </template>
-    </user-callout-dismisser>
-    <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>
-              <span data-testid="latest-pipeline-info-security">
-                <gl-sprintf
-                  v-if="latestPipelinePath"
-                  :message="$options.i18n.latestPipelineDescription"
-                >
-                  <template #link="{ content }">
-                    <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
-                  </template>
-                </gl-sprintf>
-              </span>
-
-              {{ $options.i18n.description }}
-            </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"
-              data-testid="security-testing-card"
-              :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>
-              <span data-testid="latest-pipeline-info-compliance">
-                <gl-sprintf
-                  v-if="latestPipelinePath"
-                  :message="$options.i18n.latestPipelineDescription"
-                >
-                  <template #link="{ content }">
-                    <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
-                  </template>
-                </gl-sprintf>
-              </span>
-
-              {{ $options.i18n.description }}
-            </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>
diff --git a/app/assets/javascripts/security_configuration/components/section_layout.vue b/app/assets/javascripts/security_configuration/components/section_layout.vue
index e351f9b9d8d..1fe8dd862a0 100644
--- a/app/assets/javascripts/security_configuration/components/section_layout.vue
+++ b/app/assets/javascripts/security_configuration/components/section_layout.vue
@@ -11,7 +11,7 @@ export default {
 </script>
 
 <template>
-  <div class="row gl-line-height-20">
+  <div class="row gl-line-height-20 gl-pt-6">
     <div class="col-lg-4">
       <h2 class="gl-font-size-h2 gl-mt-0">{{ heading }}</h2>
       <slot name="description"></slot>
diff --git a/app/assets/javascripts/security_configuration/components/upgrade.vue b/app/assets/javascripts/security_configuration/components/upgrade.vue
deleted file mode 100644
index 2541c29224a..00000000000
--- a/app/assets/javascripts/security_configuration/components/upgrade.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
-import { UPGRADE_CTA } from './constants';
-
-export default {
-  components: {
-    GlLink,
-    GlSprintf,
-  },
-  inject: {
-    upgradePath: {
-      from: 'upgradePath',
-      default: '#',
-    },
-  },
-  i18n: {
-    UPGRADE_CTA,
-  },
-};
-</script>
-
-<template>
-  <span>
-    <gl-sprintf :message="$options.i18n.UPGRADE_CTA">
-      <template #link="{ content }">
-        <gl-link target="_blank" :href="upgradePath">
-          {{ content }}
-        </gl-link>
-      </template>
-    </gl-sprintf>
-  </span>
-</template>
diff --git a/app/assets/javascripts/security_configuration/components/upgrade_banner.vue b/app/assets/javascripts/security_configuration/components/upgrade_banner.vue
index ca0f9e5c85a..79e6b9d7a23 100644
--- a/app/assets/javascripts/security_configuration/components/upgrade_banner.vue
+++ b/app/assets/javascripts/security_configuration/components/upgrade_banner.vue
@@ -8,20 +8,18 @@ export default {
   },
   inject: ['upgradePath'],
   i18n: {
-    title: s__('SecurityConfiguration|Secure your project with Ultimate'),
+    title: s__('SecurityConfiguration|Secure your project'),
     bodyStart: s__(
-      `SecurityConfiguration|GitLab Ultimate checks your application for security vulnerabilities
-      that may lead to unauthorized access, data leaks, and denial of service
-      attacks. Its features include:`,
+      `SecurityConfiguration|Immediately begin risk analysis and remediation with application security features. Start with SAST and Secret Detection, available to all plans. Upgrade to Ultimate to get all features, including:`,
     ),
     bodyListItems: [
-      s__('SecurityConfiguration|Vulnerability details and statistics in the merge request.'),
-      s__('SecurityConfiguration|High-level vulnerability statistics across projects and groups.'),
-      s__('SecurityConfiguration|Runtime security metrics for application environments.'),
+      s__('SecurityConfiguration|Vulnerability details and statistics in the merge request'),
+      s__('SecurityConfiguration|High-level vulnerability statistics across projects and groups'),
+      s__('SecurityConfiguration|Runtime security metrics for application environments'),
+      s__(
+        'SecurityConfiguration|More scan types, including Container Scanning, DAST, Dependency Scanning, Fuzzing, and Licence Compliance',
+      ),
     ],
-    bodyEnd: s__(
-      'SecurityConfiguration|With the information provided, you can immediately begin risk analysis and remediation within GitLab.',
-    ),
     buttonText: s__('SecurityConfiguration|Upgrade or start a free trial'),
   },
 };
@@ -32,14 +30,14 @@ export default {
     :title="$options.i18n.title"
     :button-text="$options.i18n.buttonText"
     :button-link="upgradePath"
+    variant="introduction"
     v-on="$listeners"
   >
     <p>{{ $options.i18n.bodyStart }}</p>
-    <ul>
+    <ul class="gl-pl-6">
       <li v-for="bodyListItem in $options.i18n.bodyListItems" :key="bodyListItem">
         {{ bodyListItem }}
       </li>
     </ul>
-    <p>{{ $options.i18n.bodyEnd }}</p>
   </gl-banner>
 </template>
diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js
index f05bd79258e..60d2c0d4e5a 100644
--- a/app/assets/javascripts/security_configuration/index.js
+++ b/app/assets/javascripts/security_configuration/index.js
@@ -4,14 +4,17 @@ import createDefaultClient from '~/lib/graphql';
 import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils';
 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 initRedesignedSecurityConfiguration = (el) => {
+export const initSecurityConfiguration = (el) => {
+  if (!el) {
+    return null;
+  }
+
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
+    defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
   });
 
   const {
@@ -40,7 +43,7 @@ export const initRedesignedSecurityConfiguration = (el) => {
       autoDevopsPath,
     },
     render(createElement) {
-      return createElement(RedesignedSecurityConfigurationApp, {
+      return createElement(SecurityConfigurationApp, {
         props: {
           augmentedComplianceFeatures,
           augmentedSecurityFeatures,
@@ -56,33 +59,3 @@ export const initRedesignedSecurityConfiguration = (el) => {
     },
   });
 };
-
-export const initCESecurityConfiguration = (el) => {
-  if (!el) {
-    return null;
-  }
-
-  if (gon.features?.securityConfigurationRedesign) {
-    return initRedesignedSecurityConfiguration(el);
-  }
-
-  Vue.use(VueApollo);
-
-  const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
-  });
-
-  const { projectPath, upgradePath } = el.dataset;
-
-  return new Vue({
-    el,
-    apolloProvider,
-    provide: {
-      projectPath,
-      upgradePath,
-    },
-    render(createElement) {
-      return createElement(SecurityConfigurationApp);
-    },
-  });
-};