Insert variables table

Insert variables table to
admin settings, to manage
instance variables via the
UI.

app/assets/javascripts/ci_variable_list/index.js

@@ -3,9 +3,9 @@ import CiVariableSettings from './components/ci_variable_settings.vue';
 import createStore from './store';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
-export default () => {
-  const el = document.getElementById('js-ci-project-variables');
-  const { endpoint, projectId, group, maskableRegex, protectedByDefault } = el.dataset;
+export default (containerId = 'js-ci-project-variables') => {
+  const containerEl = document.getElementById(containerId);
+  const { endpoint, projectId, group, maskableRegex, protectedByDefault } = containerEl.dataset;
   const isGroup = parseBoolean(group);
   const isProtectedByDefault = parseBoolean(protectedByDefault);
 
@@ -18,7 +18,7 @@ export default () => {
   });
 
   return new Vue({
-    el,
+    el: containerEl,
     store,
     render(createElement) {
       return createElement(CiVariableSettings);

app/assets/javascripts/pages/admin/application_settings/index.js

@@ -2,8 +2,12 @@ import initSettingsPanels from '~/settings_panels';
 import projectSelect from '~/project_select';
 import selfMonitor from '~/self_monitor';
 import maintenanceModeSettings from '~/maintenance_mode_settings';
+import initVariableList from '~/ci_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
+  if (gon.features?.ciInstanceVariablesUi) {
+    initVariableList('js-instance-variables');
+  }
   selfMonitor();
   maintenanceModeSettings();
   // Initialize expandable settings panels

app/controllers/admin/application_settings_controller.rb

@@ -12,6 +12,10 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
 
   before_action :whitelist_query_limiting, only: [:usage_data]
 
+  before_action only: [:ci_cd] do
+    push_frontend_feature_flag(:ci_instance_variables_ui, default_enabled: true)
+  end
+
   VALID_SETTING_PANELS = %w(general integrations repository
                             ci_cd reporting metrics_and_profiling
                             network preferences).freeze

app/views/admin/application_settings/ci/_header.html.haml

+- expanded = local_assigns.fetch(:expanded)
+
+%h4
+  = _('Variables')
+  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'variables'), target: '_blank', rel: 'noopener noreferrer'
+
+%button.btn.btn-default.js-settings-toggle{ type: 'button' }
+  = expanded ? _('Collapse') : _('Expand')
+
+%p
+  = _('Environment variables are applied to all project environments in this instance via the Runner. You can use environment variables for passwords, secret keys, etc. Make variables available to the running application by prepending the variable key with <code>K8S_SECRET_</code>. You can set variables to be:').html_safe
+
+%ul
+  %li
+    = _('<code>Protected</code> to expose them to protected branches or tags only.').html_safe
+  %li
+    = _('<code>Masked</code> to prevent the values from being displayed in job logs (must match certain regexp requirements).').html_safe
+
+%p
+  = link_to _('More information'), help_page_path('ci/variables/README', anchor: 'instance-level-cicd-environment-variables')

app/views/admin/application_settings/ci_cd.html.haml

@@ -2,6 +2,17 @@
 - page_title _("CI/CD")
 - @content_class = "limit-container-width" unless fluid_layout
 
+- if ::Gitlab::Ci::Features.instance_variables_ui_enabled?
+  %section.settings.no-animate#js-ci-cd-variables{ class: ('expanded' if expanded_by_default?) }
+    .settings-header
+      = render 'admin/application_settings/ci/header', expanded: expanded_by_default?
+    .settings-content
+      - if ci_variable_protected_by_default?
+        %p.settings-message.text-center
+          - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protected-variables') }
+          = s_('Environment variables on this GitLab instance are configured to be %{link_start}protected%{link_end} by default').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+      #js-instance-variables{ data: { endpoint: admin_ci_variables_path, group: 'true', maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
+
 %section.settings.as-ci-cd.no-animate#js-ci-cd-settings{ class: ('expanded' if expanded_by_default?) }
   .settings-header
     %h4

changelogs/unreleased/instance-variables-ui.yml

+---
+title: New instance-level variables UI
+merge_request: 33510
+author:
+type: added

doc/ci/variables/README.md

@@ -427,6 +427,51 @@ Once you set them, they will be available for all subsequent pipelines. Any grou
 
 ![CI/CD settings - inherited variables](img/inherited_group_variables_v12_5.png)
 
+## Instance-level CI/CD environment variables
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/14108) in GitLab 13.0.
+
+Instance variables are useful for no longer needing to manually enter the same credentials repeatedly for all your projects. Instance-level variables are available to all projects and groups on the instance.
+
+NOTE: **Note:**
+The maximum number of instance-level variables is [planned to be 25](https://gitlab.com/gitlab-org/gitlab/-/issues/216097).
+
+You can define instance-level variables via the UI or [API](../../api/instance_level_ci_variables.md).
+
+To add an instance-level variable:
+
+1. Navigate to your admin area's **Settings > CI/CD** and expand the **Variables** section.
+1. Click the **Add variable** button, and fill in the details:
+
+    - **Key**: Must be one line, using only letters, numbers, or `_` (underscore), with no spaces.
+    - **Value**: 700 characters allowed.
+    - **Type**: `File` or `Variable`.
+    - **Protect variable** (Optional): If selected, the variable will only be available in pipelines that run on protected branches or tags.
+    - **Mask variable** (Optional): If selected, the variable's **Value** will not be shown in job logs. The variable will not be saved if the value does not meet the [masking requirements](#masked-variable-requirements).
+
+After a variable is created, you can update any of the details by clicking the **{pencil}** **Edit** button.
+
+### Enable or disable UI interface for instance-level CI/CD variables
+
+The UI interface for Instance-level CI/CD variables is under development but ready for production use.
+It is deployed behind a feature flag that is **enabled by default**.
+[GitLab administrators with access to the GitLab Rails console](../../administration/feature_flags.md) can opt to disable it for your instance.
+
+NOTE: **Note:**
+This feature will not work if the [instance-level CI/CD variables API feature flag is disabled](../../api/instance_level_ci_variables.md#enable-or-disable-instance-level-cicd-variables-core-only).
+
+To disable it:
+
+```ruby
+Feature.disable(:instance_variables_ui)
+```
+
+To enable it:
+
+```ruby
+Feature.enable(:instance_variables_ui)
+```
+
 ## Inherit environment variables
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/22638) in GitLab 13.0.

lib/gitlab/ci/features.rb

@@ -25,6 +25,10 @@ module Gitlab
       def self.pipeline_fixed_notifications?
         ::Feature.enabled?(:ci_pipeline_fixed_notifications)
       end
+
+      def self.instance_variables_ui_enabled?
+        ::Feature.enabled?(:ci_instance_variables_ui, default_enabled: true)
+      end
     end
   end
 end

locale/gitlab.pot

@@ -903,6 +903,12 @@ msgstr ""
 msgid "<code>\"johnsmith@example.com\": \"johnsmith@example.com\"</code> will add \"By <a href=\"#\">johnsmith@example.com</a>\" to all issues and comments originally created by johnsmith@example.com. By default, the email address or username is masked to ensure the user's privacy. Use this option if you want to show the full email address."
 msgstr ""
 
+msgid "<code>Masked</code> to prevent the values from being displayed in job logs (must match certain regexp requirements)."
+msgstr ""
+
+msgid "<code>Protected</code> to expose them to protected branches or tags only."
+msgstr ""
+
 msgid "<namespace / project>"
 msgstr ""
 
@@ -8468,12 +8474,18 @@ msgstr ""
 msgid "Environment scope"
 msgstr ""
 
+msgid "Environment variables are applied to all project environments in this instance via the Runner. You can use environment variables for passwords, secret keys, etc. Make variables available to the running application by prepending the variable key with <code>K8S_SECRET_</code>. You can set variables to be:"
+msgstr ""
+
 msgid "Environment variables are applied to environments via the runner. They can be protected by only exposing them to protected branches or tags. Additionally, they can be masked so they are hidden in job logs, though they must match certain regexp requirements to do so. You can use environment variables for passwords, secret keys, or whatever you want."
 msgstr ""
 
 msgid "Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default"
 msgstr ""
 
+msgid "Environment variables on this GitLab instance are configured to be %{link_start}protected%{link_end} by default"
+msgstr ""
+
 msgid "Environment:"
 msgstr ""