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.

Closes #21358

5 files changed, 58 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..51ee55946e4
--- /dev/null
+++ b/app/assets/javascripts/project_variables.js.es6
@@ -0,0 +1,44 @@
+/* eslint-disable */
+((global) => {
+  const HIDDEN_VALUE_TEXT = '******';
+
+  class ProjectVariables {
+    constructor() {
+      this.$reveal = $('.js-btn-toggle-reveal-values');
+
+      this.$reveal.on('click', this.toggleRevealState.bind(this));
+    }
+
+    toggleRevealState(event) {
+      event.preventDefault();
+
+      const $btn = $(event.currentTarget);
+      const oldStatus = $btn.attr('data-status');
+
+      if (oldStatus == 'hidden') {
+        [newStatus, newAction] = ['revealed', 'Hide Values'];
+      } else {
+        [newStatus, newAction] = ['hidden', 'Reveal Values'];
+      }
+
+      $btn.attr('data-status', newStatus);
+
+      $variables = $('.variable-value');
+
+      for (let variable of $variables) {
+        let $variable = $(variable);
+        let newText = HIDDEN_VALUE_TEXT;
+
+        if (newStatus == 'revealed') {
+          newText = $variable.attr('data-value');
+        }
+
+        $variable.text(newText);
+      }
+
+      $btn.text(newAction);
+    }
+  }
+
+  global.ProjectVariables = ProjectVariables;
+})(window.gl || (window.gl = {}));
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