1 files changed, 38 insertions, 1 deletions
diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js
index 1134a1ffb44..e1dc6f24737 100644
--- a/app/assets/javascripts/security_configuration/index.js
+++ b/app/assets/javascripts/security_configuration/index.js
@@ -1,7 +1,11 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 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 initStaticSecurityConfiguration = (el) => {
   if (!el) {
@@ -14,8 +18,41 @@ export const initStaticSecurityConfiguration = (el) => {
     defaultClient: createDefaultClient(),
   });
 
-  const { projectPath, upgradePath } = el.dataset;
+  const {
+    projectPath,
+    upgradePath,
+    features,
+    latestPipelinePath,
+    gitlabCiHistoryPath,
+  } = el.dataset;
 
+  if (gon.features.securityConfigurationRedesign) {
+    const { augmentedSecurityFeatures, augmentedComplianceFeatures } = augmentFeatures(
+      securityFeatures,
+      complianceFeatures,
+      features ? JSON.parse(features) : [],
+    );
+
+    return new Vue({
+      el,
+      apolloProvider,
+      provide: {
+        projectPath,
+        upgradePath,
+      },
+      render(createElement) {
+        return createElement(RedesignedSecurityConfigurationApp, {
+          props: {
+            augmentedComplianceFeatures,
+            augmentedSecurityFeatures,
+            latestPipelinePath,
+            gitlabCiHistoryPath,
+            ...parseBooleanDataAttributes(el, ['gitlabCiPresent']),
+          },
+        });
+      },
+    });
+  }
   return new Vue({
     el,
     apolloProvider,