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

6 files changed, 82 insertions, 2 deletions

diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index c2d4670b7e9..16df4b0b005 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -208,6 +208,9 @@
           new gl.ProtectedBranchCreate();
           new gl.ProtectedBranchEditList();
           break;
+        case 'projects:variables:index':
+          new gl.ProjectVariables();
+          break;
       }
       switch (path.first()) {
         case 'admin':
diff --git a/app/assets/javascripts/project_variables.js.es6 b/app/assets/javascripts/project_variables.js.es6
new file mode 100644
index 00000000000..4ee2e49306d
--- /dev/null
+++ b/app/assets/javascripts/project_variables.js.es6
@@ -0,0 +1,43 @@
+(() => {
+  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;
+})();
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 19a7a97ea0d..0562ee7b178 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -876,3 +876,11 @@ pre.light-well {
     pointer-events: none;
   }
 }
+
+.variables-table {
+  table-layout: fixed;
+
+  .variable-key {
+    width: 30%;
+  }
+}
diff --git a/app/views/projects/variables/_table.html.haml b/app/views/projects/variables/_table.html.haml
index 07cee86ba4c..c7cebf45160 100644
--- a/app/views/projects/variables/_table.html.haml
+++ b/app/views/projects/variables/_table.html.haml
@@ -12,8 +12,8 @@
       - @project.variables.order_key_asc.each do |variable|
         - if variable.id?
           %tr
-            %td= variable.key
-            %td= variable.value
+            %td.variable-key= variable.key
+            %td.variable-value{ "data-value" => variable.value }******
             %td
               = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do
                 %span.sr-only
diff --git a/app/views/projects/variables/index.html.haml b/app/views/projects/variables/index.html.haml
index 09bb54600af..39303700131 100644
--- a/app/views/projects/variables/index.html.haml
+++ b/app/views/projects/variables/index.html.haml
@@ -15,3 +15,4 @@
         No variables found, add one with the form above.
     - else
       = render "table"
+      %button.btn.btn-info.js-btn-toggle-reveal-values{"data-status" => 'hidden'} Reveal Values
diff --git a/spec/features/variables_spec.rb b/spec/features/variables_spec.rb
index d7880d5778f..ff30ffd7820 100644
--- a/spec/features/variables_spec.rb
+++ b/spec/features/variables_spec.rb
@@ -29,6 +29,31 @@ describe 'Project variables', js: true do
     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
     page.within('.variables-table') do
       find('.btn-variable-delete').click