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,27 +5,34 @@
     - 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
-  .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
+- if Feature.enabled?(:new_variables_ui, @project || @group)
+  - is_group = !@group.nil?
 
-    %ul.ci-variable-list
-      = render 'ci/variables/variable_header'
-      - @variables.each.each do |variable|
-        = render 'ci/variables/variable_row', form_field: 'variables', variable: variable
-      = render 'ci/variables/variable_row', form_field: 'variables'
-    .prepend-top-20
-      %button.btn.btn-success.js-ci-variables-save-button{ type: 'button' }
-        %span.hide.js-ci-variables-save-loading-icon
-          = icon('spinner spin')
-        = _('Save variables')
-      %button.btn.btn-info.btn-inverted.prepend-left-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }
-        - if @variables.size == 0
-          = n_('Hide value', 'Hide values', @variables.size)
-        - else
-          = n_('Reveal value', 'Reveal values', @variables.size)
-    - if !@group && @project.group
-      .settings-header.border-top.prepend-top-20
-        = render 'ci/group_variables/header'
-      .settings-content.pr-0
-        = render 'ci/group_variables/index'
+  #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
+
+      %ul.ci-variable-list
+        = render 'ci/variables/variable_header'
+        - @variables.each.each do |variable|
+          = render 'ci/variables/variable_row', form_field: 'variables', variable: variable
+        = render 'ci/variables/variable_row', form_field: 'variables'
+      .prepend-top-20
+        %button.btn.btn-success.js-ci-variables-save-button{ type: 'button' }
+          %span.hide.js-ci-variables-save-loading-icon
+            = icon('spinner spin')
+          = _('Save variables')
+        %button.btn.btn-info.btn-inverted.prepend-left-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }
+          - if @variables.size == 0
+            = n_('Hide value', 'Hide values', @variables.size)
+          - else
+            = n_('Reveal value', 'Reveal values', @variables.size)
+
+- if !@group && @project.group
+  .settings-header.border-top.prepend-top-20
+    = render 'ci/group_variables/header'
+  .settings-content.pr-0
+    = render 'ci/group_variables/index'

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')