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

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':

app/assets/javascripts/project_variables.js.es6

+(() => {
+  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;
+})();

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%;
+  }
+}

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

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

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