Introduce feature flag for refactor

First MR of several for refactor of
ci variables from Haml to Vue. This MR
sets up a feature flag disabled by default
for the new Vue refactor.

app/controllers/groups/settings/ci_cd_controller.rb

@@ -6,6 +6,9 @@ module Groups
       skip_cross_project_access_check :show
       before_action :authorize_admin_group!
       before_action :authorize_update_max_artifacts_size!, only: [:update]
+      before_action do
+        push_frontend_feature_flag(:new_variables_ui, @group)
+      end
 
       def show
         define_ci_variables

app/controllers/projects/settings/ci_cd_controller.rb

@@ -5,6 +5,9 @@ module Projects
     class CiCdController < Projects::ApplicationController
       before_action :authorize_admin_pipeline!
       before_action :define_variables
+      before_action do
+        push_frontend_feature_flag(:new_variables_ui, @project)
+      end
 
       def show
       end

app/views/ci/variables/_index.html.haml

@@ -5,7 +5,13 @@
     - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protected-variables') }
     = s_('Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
-.row
+- if Feature.enabled?(:new_variables_ui, @project || @group)
+  - is_group = !@group.nil?
+
+  #js-ci-project-variables{ data: { endpoint: save_endpoint, project_id: @project&.id || '', group: is_group.to_s, maskable_regex: ci_variable_maskable_regex} }
+
+- else
+  .row
     .col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint, maskable_regex: ci_variable_maskable_regex } }
       .hide.alert.alert-danger.js-ci-variable-error-box
 
@@ -24,7 +30,8 @@
             = n_('Hide value', 'Hide values', @variables.size)
           - else
             = n_('Reveal value', 'Reveal values', @variables.size)
-    - if !@group && @project.group
+
+- if !@group && @project.group
   .settings-header.border-top.prepend-top-20
     = render 'ci/group_variables/header'
   .settings-content.pr-0

spec/features/group_variables_spec.rb

@@ -11,7 +11,7 @@ describe 'Group variables', :js do
   before do
     group.add_owner(user)
     gitlab_sign_in(user)
-
+    stub_feature_flags(new_variables_ui: false)
     visit page_path
   end
 

spec/features/project_group_variables_spec.rb

@@ -24,6 +24,7 @@ describe 'Project group variables', :js do
     sign_in(user)
     project.add_maintainer(user)
     group.add_owner(user)
+    stub_feature_flags(new_variables_ui: false)
   end
 
   it 'project in group shows inherited vars from ancestor group' do

spec/features/project_variables_spec.rb

@@ -12,7 +12,7 @@ describe 'Project variables', :js do
     sign_in(user)
     project.add_maintainer(user)
     project.variables << variable
-
+    stub_feature_flags(new_variables_ui: false)
     visit page_path
   end
 

spec/features/projects/settings/registry_settings_spec.rb

@@ -10,6 +10,7 @@ describe 'Project > Settings > CI/CD > Container registry tag expiration policy'
   before do
     sign_in(user)
     stub_container_registry_config(enabled: true)
+    stub_feature_flags(new_variables_ui: false)
   end
 
   context 'as owner' do

spec/frontend/fixtures/groups.rb

@@ -15,6 +15,7 @@ describe 'Groups (JavaScript fixtures)', type: :controller do
   end
 
   before do
+    stub_feature_flags(new_variables_ui: false)
     group.add_maintainer(admin)
     sign_in(admin)
   end

spec/frontend/fixtures/projects.rb

@@ -20,6 +20,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
   end
 
   before do
+    stub_feature_flags(new_variables_ui: false)
     project.add_maintainer(admin)
     sign_in(admin)
     allow(SecureRandom).to receive(:hex).and_return('securerandomhex:thereisnospoon')