Commit e0a46540 authored by Fatih Acet's avatar Fatih Acet

Merge branch 'hide-project-variables' into 'master'

Hide project variables values by default

Add a button to reveal/hide the values to help prevent accidental disclosure of sensitive information from wandering on a page.

![hide-vars](/uploads/5b5eeef9b4650776b529b780998bbb1b/hide-vars.gif)    

Closes #21358

See merge request !7731
parents 25c12567 59fa98dd
...@@ -208,6 +208,9 @@ ...@@ -208,6 +208,9 @@
new gl.ProtectedBranchCreate(); new gl.ProtectedBranchCreate();
new gl.ProtectedBranchEditList(); new gl.ProtectedBranchEditList();
break; break;
case 'projects:variables:index':
new gl.ProjectVariables();
break;
} }
switch (path.first()) { switch (path.first()) {
case 'admin': case 'admin':
......
(() => {
const HIDDEN_VALUE_TEXT = '******';
class ProjectVariables {
constructor() {
this.$revealBtn = $('.js-btn-toggle-reveal-values');
this.$revealBtn.on('click', this.toggleRevealState.bind(this));
}
toggleRevealState(e) {
e.preventDefault();
const oldStatus = this.$revealBtn.attr('data-status');
let newStatus = 'hidden';
let newAction = 'Reveal Values';
if (oldStatus === 'hidden') {
newStatus = 'revealed';
newAction = 'Hide Values';
}
this.$revealBtn.attr('data-status', newStatus);
const $variables = $('.variable-value');
$variables.each((_, variable) => {
const $variable = $(variable);
let newText = HIDDEN_VALUE_TEXT;
if (newStatus === 'revealed') {
newText = $variable.attr('data-value');
}
$variable.text(newText);
});
this.$revealBtn.text(newAction);
}
}
window.gl = window.gl || {};
window.gl.ProjectVariables = ProjectVariables;
})();
...@@ -876,3 +876,11 @@ pre.light-well { ...@@ -876,3 +876,11 @@ pre.light-well {
pointer-events: none; pointer-events: none;
} }
} }
.variables-table {
table-layout: fixed;
.variable-key {
width: 30%;
}
}
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
- @project.variables.order_key_asc.each do |variable| - @project.variables.order_key_asc.each do |variable|
- if variable.id? - if variable.id?
%tr %tr
%td= variable.key %td.variable-key= variable.key
%td= variable.value %td.variable-value{ "data-value" => variable.value }******
%td %td
= link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do
%span.sr-only %span.sr-only
......
...@@ -15,3 +15,4 @@ ...@@ -15,3 +15,4 @@
No variables found, add one with the form above. No variables found, add one with the form above.
- else - else
= render "table" = render "table"
%button.btn.btn-info.js-btn-toggle-reveal-values{"data-status" => 'hidden'} Reveal Values
...@@ -29,6 +29,31 @@ describe 'Project variables', js: true do ...@@ -29,6 +29,31 @@ describe 'Project variables', js: true do
end end
end end
it 'reveals and hides new variable' do
fill_in('variable_key', with: 'key')
fill_in('variable_value', with: 'key value')
click_button('Add new variable')
page.within('.variables-table') do
expect(page).to have_content('key')
expect(page).to have_content('******')
end
click_button('Reveal Values')
page.within('.variables-table') do
expect(page).to have_content('key')
expect(page).to have_content('key value')
end
click_button('Hide Values')
page.within('.variables-table') do
expect(page).to have_content('key')
expect(page).to have_content('******')
end
end
it 'deletes variable' do it 'deletes variable' do
page.within('.variables-table') do page.within('.variables-table') do
find('.btn-variable-delete').click find('.btn-variable-delete').click
......
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