Adds header column to variables list

For the variables list in CI/CD settings
this commits adds an header row with titles

3 files changed, 26 insertions, 9 deletions

diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index dc9ccb6cc39..464b9faf282 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -10,6 +10,7 @@
     .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'
diff --git a/app/views/ci/variables/_variable_header.html.haml b/app/views/ci/variables/_variable_header.html.haml
new file mode 100644
index 00000000000..d3b7a5ae883
--- /dev/null
+++ b/app/views/ci/variables/_variable_header.html.haml
@@ -0,0 +1,16 @@
+- only_key_value = local_assigns.fetch(:only_key_value, false)
+
+%li.ci-variable-row.m-0.d-none.d-sm-block
+  .d-flex.w-100.align-items-center.pb-2
+    .bold.table-section.section-15.append-right-10
+      = s_('CiVariables|Type')
+    .bold.table-section.section-15.append-right-10
+      = s_('CiVariables|Key')
+    .bold.table-section.section-15.append-right-10
+      = s_('CiVariables|Value')
+    - unless only_key_value
+      .bold.table-section.section-20
+        = s_('CiVariables|State')
+    .bold.table-section.section-20
+      = s_('CiVariables|Masked')
+    = render_if_exists 'ci/variables/environment_scope_header'
diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index 37257b3aa1c..b4930b41c09 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -20,18 +20,18 @@
 - masked_input_name = "#{form_field}[variables_attributes][][masked]"
 
 %li.js-row.ci-variable-row{ data: { is_persisted: "#{!id.nil?}" } }
-  .ci-variable-row-body
+  .ci-variable-row-body.border-bottom
     %input.js-ci-variable-input-id{ type: "hidden", name: id_input_name, value: id }
     %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
-    %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control{ name: variable_type_input_name }
+    %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control.table-section.section-15{ name: variable_type_input_name }
       = options_for_select(ci_variable_type_options, variable_type)
-    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control{ type: "text",
+    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.table-section.section-15{ type: "text",
       name: key_input_name,
       value: key,
       placeholder: s_('CiVariables|Input variable key') }
-    .ci-variable-body-item.gl-show-field-errors
+    .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0
       .form-control.js-secret-value-placeholder.qa-ci-variable-input-value{ class: ('hide' unless id) }
-        = '*' * 20
+        = '*' * 17
       %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id),
         rows: 1,
         name: value_input_name,
@@ -41,7 +41,7 @@
         = s_("CiVariables|Cannot use Masked Variable with current value")
         = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'masked-variables'), target: '_blank', rel: 'noopener noreferrer'
     - unless only_key_value
-      .ci-variable-body-item.ci-variable-protected-item
+      .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0
         .append-right-default
           = s_("CiVariable|Protected")
         %button{ type: 'button',
@@ -55,7 +55,7 @@
           %span.toggle-icon
             = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
             = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
-      .ci-variable-body-item.ci-variable-masked-item
+      .ci-variable-body-item.ci-variable-masked-item.table-section.section-20.mr-0.border-top-0
         .append-right-default
           = s_("CiVariable|Masked")
         %button{ type: 'button',
@@ -70,5 +70,5 @@
             = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
             = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
       = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable
-  %button.js-row-remove-button.ci-variable-row-remove-button{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
-    = icon('minus-circle')
+    %button.js-row-remove-button.ci-variable-row-remove-button.table-section.section-5.border-top-0{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
+      = icon('minus-circle')