Change position of CI Variable Error Box
Problem to solve
If you're editing a long list of CI/CD variables, you can miss the error box very easily. Don't have mention that if you're editing and also showing the variables values, you won't pay attention to the error box at all. (Because if there is an error, the new value won't be masked if the values are being hidden, that's not the case when they're being shown)
Intended users
Further details
If the error box is changed from the top of the variables section to the bottom of it, will be pretty easy to notice any error when pressing the Save button.
Proposal
Move the ci-variable-error box below the ci-variable-list.
Old
- save_endpoint = local_assigns.fetch(:save_endpoint, nil)
- 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 are configured by your administrator to be %{link_start}protected%{link_end} by default').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
.row
.col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint, maskable_regex: ci_variable_maskable_regex } }
.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'
.prepend-top-20
%button.btn.btn-success.js-ci-variables-save-button{ type: 'button' }
%span.hide.js-ci-variables-save-loading-icon
= icon('spinner spin')
= _('Save variables')
%button.btn.btn-info.btn-inverted.prepend-left-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }
- if @variables.size == 0
= n_('Hide value', 'Hide values', @variables.size)
- else
= n_('Reveal value', 'Reveal values', @variables.size)
- if !@group && @project.group
.settings-header.border-top.prepend-top-20
= render 'ci/group_variables/header'
.settings-content.pr-0
= render 'ci/group_variables/index'
New
.row
.col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint, maskable_regex: ci_variable_maskable_regex } }
%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'
.prepend-top-20
%button.btn.btn-success.js-ci-variables-save-button{ type: 'button' }
%span.hide.js-ci-variables-save-loading-icon
= icon('spinner spin')
= _('Save variables')
%button.btn.btn-info.btn-inverted.prepend-left-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }
- if @variables.size == 0
= n_('Hide value', 'Hide values', @variables.size)
- else
= n_('Reveal value', 'Reveal values', @variables.size)
- if !@group && @project.group
.settings-header.border-top.prepend-top-20
= render 'ci/group_variables/header'
.settings-content.pr-0
= render 'ci/group_variables/index'
.hide.alert.alert-danger.js-ci-variable-error-box
File: app/views/ci/variables/_index.html.haml
Edited by Marcos Huck