1 files changed, 6 insertions, 3 deletions
diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js
index a74af8aed12..f5bdd4c7b1e 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -4,6 +4,7 @@ import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import CiAdminVariables from './components/ci_admin_variables.vue';
 import CiGroupVariables from './components/ci_group_variables.vue';
+import CiProjectVariables from './components/ci_project_variables.vue';
 import LegacyCiVariableSettings from './components/legacy_ci_variable_settings.vue';
 import { resolvers } from './graphql/resolvers';
 import createStore from './store';
@@ -37,6 +38,8 @@ const mountCiVariableListApp = (containerEl) => {
 
   if (parsedIsGroup) {
     component = CiGroupVariables;
+  } else if (parsedIsProject) {
+    component = CiProjectVariables;
   }
 
   Vue.use(VueApollo);
@@ -77,7 +80,7 @@ const mountLegacyCiVariableListApp = (containerEl) => {
   const {
     endpoint,
     projectId,
-    group,
+    isGroup,
     maskableRegex,
     protectedByDefault,
     awsLogoSvgPath,
@@ -89,13 +92,13 @@ const mountLegacyCiVariableListApp = (containerEl) => {
     maskedEnvironmentVariablesLink,
     environmentScopeLink,
   } = containerEl.dataset;
-  const isGroup = parseBoolean(group);
+  const parsedIsGroup = parseBoolean(isGroup);
   const isProtectedByDefault = parseBoolean(protectedByDefault);
 
   const store = createStore({
     endpoint,
     projectId,
-    isGroup,
+    isGroup: parsedIsGroup,
     maskableRegex,
     isProtectedByDefault,
     awsLogoSvgPath,