1 files changed, 14 insertions, 9 deletions
diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
index 8a5300c9266..479c82265f2 100644
--- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
@@ -1,17 +1,22 @@
 import initSettingsPanels from '~/settings_panels';
 import AjaxVariableList from '~/ci_variable_list/ajax_variable_list';
+import initVariableList from '~/ci_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
   initSettingsPanels();
 
-  const variableListEl = document.querySelector('.js-ci-variable-list-section');
-  // eslint-disable-next-line no-new
-  new AjaxVariableList({
-    container: variableListEl,
-    saveButton: variableListEl.querySelector('.js-ci-variables-save-button'),
-    errorBox: variableListEl.querySelector('.js-ci-variable-error-box'),
-    saveEndpoint: variableListEl.dataset.saveEndpoint,
-    maskableRegex: variableListEl.dataset.maskableRegex,
-  });
+  if (gon.features.newVariablesUi) {
+    initVariableList();
+  } else {
+    const variableListEl = document.querySelector('.js-ci-variable-list-section');
+    // eslint-disable-next-line no-new
+    new AjaxVariableList({
+      container: variableListEl,
+      saveButton: variableListEl.querySelector('.js-ci-variables-save-button'),
+      errorBox: variableListEl.querySelector('.js-ci-variable-error-box'),
+      saveEndpoint: variableListEl.dataset.saveEndpoint,
+      maskableRegex: variableListEl.dataset.maskableRegex,
+    });
+  }
 });