Adds header column to variables listfe-header-row

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

7 files changed, 61 insertions, 28 deletions

diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index d9b0e4558ad..28d7492b99c 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -47,6 +47,7 @@
   display: flex;
   align-items: flex-start;
   width: 100%;
+  padding-bottom: $gl-padding;
 
   @include media-breakpoint-down(xs) {
     display: block;
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')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ea883d3b20a..5eaf87025d0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1891,9 +1891,24 @@ msgstr ""
 msgid "CiVariables|Input variable value"
 msgstr ""
 
+msgid "CiVariables|Key"
+msgstr ""
+
+msgid "CiVariables|Masked"
+msgstr ""
+
 msgid "CiVariables|Remove variable row"
 msgstr ""
 
+msgid "CiVariables|State"
+msgstr ""
+
+msgid "CiVariables|Type"
+msgstr ""
+
+msgid "CiVariables|Value"
+msgstr ""
+
 msgid "CiVariable|* (All environments)"
 msgstr ""
 
diff --git a/spec/javascripts/ci_variable_list/ajax_variable_list_spec.js b/spec/javascripts/ci_variable_list/ajax_variable_list_spec.js
index 481b1a4d4b0..2839922fbd3 100644
--- a/spec/javascripts/ci_variable_list/ajax_variable_list_spec.js
+++ b/spec/javascripts/ci_variable_list/ajax_variable_list_spec.js
@@ -113,7 +113,7 @@ describe('AjaxFormVariableList', () => {
     it('hides secret values', done => {
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, {});
 
-      const row = container.querySelector('.js-row:first-child');
+      const row = container.querySelector('.js-row');
       const valueInput = row.querySelector('.js-ci-variable-input-value');
       const valuePlaceholder = row.querySelector('.js-secret-value-placeholder');
 
diff --git a/spec/support/features/variable_list_shared_examples.rb b/spec/support/features/variable_list_shared_examples.rb
index 693b796fbdc..92a19dd22a2 100644
--- a/spec/support/features/variable_list_shared_examples.rb
+++ b/spec/support/features/variable_list_shared_examples.rb
@@ -17,7 +17,7 @@ shared_examples 'variable list' do
     visit page_path
 
     # We check the first row because it re-sorts to alphabetical order on refresh
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-key').value).to eq('key')
       expect(find('.js-ci-variable-input-value', visible: false).value).to eq('key_value')
     end
@@ -38,7 +38,7 @@ shared_examples 'variable list' do
     visit page_path
 
     # We check the first row because it re-sorts to alphabetical order on refresh
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-key').value).to eq('key')
       expect(find('.js-ci-variable-input-value', visible: false).value).to eq('key_value')
       expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true')
@@ -59,7 +59,7 @@ shared_examples 'variable list' do
     visit page_path
 
     # We check the first row because it re-sorts to alphabetical order on refresh
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-key').value).to eq('key')
       expect(find('.js-ci-variable-input-value', visible: false).value).to eq('key_value')
       expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
@@ -116,19 +116,19 @@ shared_examples 'variable list' do
     page.within('.js-ci-variable-list-section') do
       expect(first('.js-ci-variable-input-key').value).to eq(variable.key)
       expect(first('.js-ci-variable-input-value', visible: false).value).to eq(variable.value)
-      expect(page).to have_content('*' * 20)
+      expect(page).to have_content('*' * 17)
 
       click_button('Reveal value')
 
       expect(first('.js-ci-variable-input-key').value).to eq(variable.key)
       expect(first('.js-ci-variable-input-value').value).to eq(variable.value)
-      expect(page).not_to have_content('*' * 20)
+      expect(page).not_to have_content('*' * 17)
 
       click_button('Hide value')
 
       expect(first('.js-ci-variable-input-key').value).to eq(variable.key)
       expect(first('.js-ci-variable-input-value', visible: false).value).to eq(variable.value)
-      expect(page).to have_content('*' * 20)
+      expect(page).to have_content('*' * 17)
     end
   end
 
@@ -149,7 +149,7 @@ shared_examples 'variable list' do
     page.within('.js-ci-variable-list-section') do
       click_button('Reveal value')
 
-      page.within('.js-row:nth-child(1)') do
+      page.within('.js-row:nth-child(2)') do
         find('.js-ci-variable-input-key').set('new_key')
         find('.js-ci-variable-input-value').set('new_value')
       end
@@ -159,7 +159,7 @@ shared_examples 'variable list' do
 
       visit page_path
 
-      page.within('.js-row:nth-child(1)') do
+      page.within('.js-row:nth-child(2)') do
         expect(find('.js-ci-variable-input-key').value).to eq('new_key')
         expect(find('.js-ci-variable-input-value', visible: false).value).to eq('new_value')
       end
@@ -181,7 +181,7 @@ shared_examples 'variable list' do
     visit page_path
 
     # We check the first row because it re-sorts to alphabetical order on refresh
-    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(3)') do
       find('.ci-variable-protected-item .js-project-feature-toggle').click
 
       expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true')
@@ -193,7 +193,7 @@ shared_examples 'variable list' do
     visit page_path
 
     # We check the first row because it re-sorts to alphabetical order on refresh
-    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(3)') do
       expect(find('.js-ci-variable-input-key').value).to eq('unprotected_key')
       expect(find('.js-ci-variable-input-value', visible: false).value).to eq('unprotected_value')
       expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true')
@@ -215,7 +215,7 @@ shared_examples 'variable list' do
 
     visit page_path
 
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       find('.ci-variable-protected-item .js-project-feature-toggle').click
 
       expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('false')
@@ -226,7 +226,7 @@ shared_examples 'variable list' do
 
     visit page_path
 
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-key').value).to eq('protected_key')
       expect(find('.js-ci-variable-input-value', visible: false).value).to eq('protected_value')
       expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('false')
@@ -234,7 +234,7 @@ shared_examples 'variable list' do
   end
 
   it 'edits variable to be unmasked' do
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
 
       find('.ci-variable-masked-item .js-project-feature-toggle').click
@@ -247,13 +247,13 @@ shared_examples 'variable list' do
 
     visit page_path
 
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('false')
     end
   end
 
   it 'edits variable to be masked' do
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
 
       find('.ci-variable-masked-item .js-project-feature-toggle').click
@@ -266,7 +266,7 @@ shared_examples 'variable list' do
 
     visit page_path
 
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('false')
 
       find('.ci-variable-masked-item .js-project-feature-toggle').click
@@ -279,7 +279,7 @@ shared_examples 'variable list' do
 
     visit page_path
 
-    page.within('.js-ci-variable-list-section .js-row:nth-child(1)') do
+    page.within('.js-ci-variable-list-section .js-row:nth-child(2)') do
       expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
     end
   end
@@ -302,7 +302,7 @@ shared_examples 'variable list' do
       expect(page).to have_selector('.js-row', count: 4)
 
       # Remove the `akey` variable
-      page.within('.js-row:nth-child(2)') do
+      page.within('.js-row:nth-child(3)') do
         first('.js-row-remove-button').click
       end