Commit 69cfdfae authored by Phil Hughes's avatar Phil Hughes

Merge branch 'fe-header-row' into 'master'

Adds header column to variables list

Closes #46806

See merge request gitlab-org/gitlab-ce!28060
parents 18dd29c0 31861b0f
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
padding-bottom: $gl-padding;
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
display: block; display: block;
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
.hide.alert.alert-danger.js-ci-variable-error-box .hide.alert.alert-danger.js-ci-variable-error-box
%ul.ci-variable-list %ul.ci-variable-list
= render 'ci/variables/variable_header'
- @variables.each.each do |variable| - @variables.each.each do |variable|
= render 'ci/variables/variable_row', form_field: 'variables', variable: variable = render 'ci/variables/variable_row', form_field: 'variables', variable: variable
= render 'ci/variables/variable_row', form_field: 'variables' = render 'ci/variables/variable_row', form_field: 'variables'
......
- 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'
...@@ -20,18 +20,18 @@ ...@@ -20,18 +20,18 @@
- masked_input_name = "#{form_field}[variables_attributes][][masked]" - masked_input_name = "#{form_field}[variables_attributes][][masked]"
%li.js-row.ci-variable-row{ data: { is_persisted: "#{!id.nil?}" } } %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-id{ type: "hidden", name: id_input_name, value: id }
%input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name } %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) = 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, name: key_input_name,
value: key, value: key,
placeholder: s_('CiVariables|Input variable 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) } .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), %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id),
rows: 1, rows: 1,
name: value_input_name, name: value_input_name,
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
= s_("CiVariables|Cannot use Masked Variable with current value") = 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' = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'masked-variables'), target: '_blank', rel: 'noopener noreferrer'
- unless only_key_value - 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 .append-right-default
= s_("CiVariable|Protected") = s_("CiVariable|Protected")
%button{ type: 'button', %button{ type: 'button',
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
%span.toggle-icon %span.toggle-icon
= sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked') = 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') = 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 .append-right-default
= s_("CiVariable|Masked") = s_("CiVariable|Masked")
%button{ type: 'button', %button{ type: 'button',
...@@ -70,5 +70,5 @@ ...@@ -70,5 +70,5 @@
= sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked') = 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') = 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 = 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') } %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') = icon('minus-circle')
...@@ -1894,9 +1894,24 @@ msgstr "" ...@@ -1894,9 +1894,24 @@ msgstr ""
msgid "CiVariables|Input variable value" msgid "CiVariables|Input variable value"
msgstr "" msgstr ""
msgid "CiVariables|Key"
msgstr ""
msgid "CiVariables|Masked"
msgstr ""
msgid "CiVariables|Remove variable row" msgid "CiVariables|Remove variable row"
msgstr "" msgstr ""
msgid "CiVariables|State"
msgstr ""
msgid "CiVariables|Type"
msgstr ""
msgid "CiVariables|Value"
msgstr ""
msgid "CiVariable|* (All environments)" msgid "CiVariable|* (All environments)"
msgstr "" msgstr ""
......
...@@ -113,7 +113,7 @@ describe('AjaxFormVariableList', () => { ...@@ -113,7 +113,7 @@ describe('AjaxFormVariableList', () => {
it('hides secret values', done => { it('hides secret values', done => {
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, {}); 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 valueInput = row.querySelector('.js-ci-variable-input-value');
const valuePlaceholder = row.querySelector('.js-secret-value-placeholder'); const valuePlaceholder = row.querySelector('.js-secret-value-placeholder');
......
...@@ -17,7 +17,7 @@ shared_examples 'variable list' do ...@@ -17,7 +17,7 @@ shared_examples 'variable list' do
visit page_path visit page_path
# We check the first row because it re-sorts to alphabetical order on refresh # 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-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-value', visible: false).value).to eq('key_value')
end end
...@@ -38,7 +38,7 @@ shared_examples 'variable list' do ...@@ -38,7 +38,7 @@ shared_examples 'variable list' do
visit page_path visit page_path
# We check the first row because it re-sorts to alphabetical order on refresh # 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-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-value', visible: false).value).to eq('key_value')
expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true') expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true')
...@@ -59,7 +59,7 @@ shared_examples 'variable list' do ...@@ -59,7 +59,7 @@ shared_examples 'variable list' do
visit page_path visit page_path
# We check the first row because it re-sorts to alphabetical order on refresh # 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-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-value', visible: false).value).to eq('key_value')
expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true') expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
...@@ -116,19 +116,19 @@ shared_examples 'variable list' do ...@@ -116,19 +116,19 @@ shared_examples 'variable list' do
page.within('.js-ci-variable-list-section') 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-key').value).to eq(variable.key)
expect(first('.js-ci-variable-input-value', visible: false).value).to eq(variable.value) 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') click_button('Reveal value')
expect(first('.js-ci-variable-input-key').value).to eq(variable.key) 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(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') click_button('Hide value')
expect(first('.js-ci-variable-input-key').value).to eq(variable.key) 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(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
end end
...@@ -149,7 +149,7 @@ shared_examples 'variable list' do ...@@ -149,7 +149,7 @@ shared_examples 'variable list' do
page.within('.js-ci-variable-list-section') do page.within('.js-ci-variable-list-section') do
click_button('Reveal value') 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-key').set('new_key')
find('.js-ci-variable-input-value').set('new_value') find('.js-ci-variable-input-value').set('new_value')
end end
...@@ -159,7 +159,7 @@ shared_examples 'variable list' do ...@@ -159,7 +159,7 @@ shared_examples 'variable list' do
visit page_path 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-key').value).to eq('new_key')
expect(find('.js-ci-variable-input-value', visible: false).value).to eq('new_value') expect(find('.js-ci-variable-input-value', visible: false).value).to eq('new_value')
end end
...@@ -181,7 +181,7 @@ shared_examples 'variable list' do ...@@ -181,7 +181,7 @@ shared_examples 'variable list' do
visit page_path visit page_path
# We check the first row because it re-sorts to alphabetical order on refresh # 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 find('.ci-variable-protected-item .js-project-feature-toggle').click
expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true') expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true')
...@@ -193,7 +193,7 @@ shared_examples 'variable list' do ...@@ -193,7 +193,7 @@ shared_examples 'variable list' do
visit page_path visit page_path
# We check the first row because it re-sorts to alphabetical order on refresh # 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-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-value', visible: false).value).to eq('unprotected_value')
expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true') expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('true')
...@@ -215,7 +215,7 @@ shared_examples 'variable list' do ...@@ -215,7 +215,7 @@ shared_examples 'variable list' do
visit page_path 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 find('.ci-variable-protected-item .js-project-feature-toggle').click
expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('false') expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('false')
...@@ -226,7 +226,7 @@ shared_examples 'variable list' do ...@@ -226,7 +226,7 @@ shared_examples 'variable list' do
visit page_path 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-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-value', visible: false).value).to eq('protected_value')
expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('false') expect(find('.js-ci-variable-input-protected', visible: false).value).to eq('false')
...@@ -234,7 +234,7 @@ shared_examples 'variable list' do ...@@ -234,7 +234,7 @@ shared_examples 'variable list' do
end end
it 'edits variable to be unmasked' do 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') expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
find('.ci-variable-masked-item .js-project-feature-toggle').click find('.ci-variable-masked-item .js-project-feature-toggle').click
...@@ -247,13 +247,13 @@ shared_examples 'variable list' do ...@@ -247,13 +247,13 @@ shared_examples 'variable list' do
visit page_path 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') expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('false')
end end
end end
it 'edits variable to be masked' do 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') expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
find('.ci-variable-masked-item .js-project-feature-toggle').click find('.ci-variable-masked-item .js-project-feature-toggle').click
...@@ -266,7 +266,7 @@ shared_examples 'variable list' do ...@@ -266,7 +266,7 @@ shared_examples 'variable list' do
visit page_path 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') expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('false')
find('.ci-variable-masked-item .js-project-feature-toggle').click find('.ci-variable-masked-item .js-project-feature-toggle').click
...@@ -279,7 +279,7 @@ shared_examples 'variable list' do ...@@ -279,7 +279,7 @@ shared_examples 'variable list' do
visit page_path 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') expect(find('.js-ci-variable-input-masked', visible: false).value).to eq('true')
end end
end end
...@@ -302,7 +302,7 @@ shared_examples 'variable list' do ...@@ -302,7 +302,7 @@ shared_examples 'variable list' do
expect(page).to have_selector('.js-row', count: 4) expect(page).to have_selector('.js-row', count: 4)
# Remove the `akey` variable # 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 first('.js-row-remove-button').click
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment