From 31861b0f050ab4ba728c8d17bbe9d1970c4ce190 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 3 May 2019 12:12:58 +0100 Subject: Adds header column to variables list For the variables list in CI/CD settings this commits adds an header row with titles --- .../stylesheets/framework/ci_variable_list.scss | 1 + app/views/ci/variables/_index.html.haml | 1 + app/views/ci/variables/_variable_header.html.haml | 16 ++++++++++ app/views/ci/variables/_variable_row.html.haml | 18 +++++------ locale/gitlab.pot | 15 +++++++++ .../ci_variable_list/ajax_variable_list_spec.js | 2 +- .../features/variable_list_shared_examples.rb | 36 +++++++++++----------- 7 files changed, 61 insertions(+), 28 deletions(-) create mode 100644 app/views/ci/variables/_variable_header.html.haml 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 -- cgit v1.2.3