1 files changed, 51 insertions, 30 deletions
diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js
index e1dc6f24737..f05bd79258e 100644
--- a/app/assets/javascripts/security_configuration/index.js
+++ b/app/assets/javascripts/security_configuration/index.js
@@ -7,11 +7,7 @@ import { securityFeatures, complianceFeatures } from './components/constants';
 import RedesignedSecurityConfigurationApp from './components/redesigned_app.vue';
 import { augmentFeatures } from './utils';
 
-export const initStaticSecurityConfiguration = (el) => {
-  if (!el) {
-    return null;
-  }
-
+export const initRedesignedSecurityConfiguration = (el) => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
@@ -24,35 +20,60 @@ export const initStaticSecurityConfiguration = (el) => {
     features,
     latestPipelinePath,
     gitlabCiHistoryPath,
+    autoDevopsHelpPagePath,
+    autoDevopsPath,
   } = el.dataset;
 
-  if (gon.features.securityConfigurationRedesign) {
-    const { augmentedSecurityFeatures, augmentedComplianceFeatures } = augmentFeatures(
-      securityFeatures,
-      complianceFeatures,
-      features ? JSON.parse(features) : [],
-    );
+  const { augmentedSecurityFeatures, augmentedComplianceFeatures } = augmentFeatures(
+    securityFeatures,
+    complianceFeatures,
+    features ? JSON.parse(features) : [],
+  );
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      projectPath,
+      upgradePath,
+      autoDevopsHelpPagePath,
+      autoDevopsPath,
+    },
+    render(createElement) {
+      return createElement(RedesignedSecurityConfigurationApp, {
+        props: {
+          augmentedComplianceFeatures,
+          augmentedSecurityFeatures,
+          latestPipelinePath,
+          gitlabCiHistoryPath,
+          ...parseBooleanDataAttributes(el, [
+            'gitlabCiPresent',
+            'autoDevopsEnabled',
+            'canEnableAutoDevops',
+          ]),
+        },
+      });
+    },
+  });
+};
+
+export const initCESecurityConfiguration = (el) => {
+  if (!el) {
+    return null;
+  }
 
-    return new Vue({
-      el,
-      apolloProvider,
-      provide: {
-        projectPath,
-        upgradePath,
-      },
-      render(createElement) {
-        return createElement(RedesignedSecurityConfigurationApp, {
-          props: {
-            augmentedComplianceFeatures,
-            augmentedSecurityFeatures,
-            latestPipelinePath,
-            gitlabCiHistoryPath,
-            ...parseBooleanDataAttributes(el, ['gitlabCiPresent']),
-          },
-        });
-      },
-    });
+  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,