3 files changed, 54 insertions, 0 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%;
+  }
+}