Hide runner token in CI/CD settings page

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38019

3 files changed, 54 insertions, 41 deletions

diff --git a/app/assets/javascripts/behaviors/secret_values.js b/app/assets/javascripts/behaviors/secret_values.js
new file mode 100644
index 00000000000..1cf0b960eb0
--- /dev/null
+++ b/app/assets/javascripts/behaviors/secret_values.js
@@ -0,0 +1,42 @@
+import { n__ } from '../locale';
+import { convertPermissionToBoolean } from '../lib/utils/common_utils';
+
+export default class SecretValues {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init() {
+    this.values = this.container.querySelectorAll('.js-secret-value');
+    this.placeholders = this.container.querySelectorAll('.js-secret-value-placeholder');
+    this.revealButton = this.container.querySelector('.js-secret-value-reveal-button');
+
+    this.revealText = n__('Reveal value', 'Reveal values', this.values.length);
+    this.hideText = n__('Hide value', 'Hide values', this.values.length);
+
+    const isRevealed = convertPermissionToBoolean(this.revealButton.dataset.secretRevealStatus);
+    this.updateDom(isRevealed);
+
+    this.revealButton.addEventListener('click', this.onRevealButtonClicked.bind(this));
+  }
+
+  onRevealButtonClicked() {
+    const previousIsRevealed = convertPermissionToBoolean(
+      this.revealButton.dataset.secretRevealStatus,
+    );
+    this.updateDom(!previousIsRevealed);
+  }
+
+  updateDom(isRevealed) {
+    this.values.forEach((value) => {
+      value.classList.toggle('hide', !isRevealed);
+    });
+
+    this.placeholders.forEach((placeholder) => {
+      placeholder.classList.toggle('hide', isRevealed);
+    });
+
+    this.revealButton.textContent = isRevealed ? this.hideText : this.revealText;
+    this.revealButton.dataset.secretRevealStatus = isRevealed;
+  }
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 5721375f4c6..f62a0208110 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -35,6 +35,7 @@ import Flash from './flash';
 import CommitsList from './commits';
 import Issue from './issue';
 import BindInOut from './behaviors/bind_in_out';
+import SecretValues from './behaviors/secret_values';
 import DeleteModal from './branches/branches_delete_modal';
 import Group from './group';
 import GroupsList from './groups_list';
@@ -90,7 +91,6 @@ import memberExpirationDate from './member_expiration_date';
 import DueDateSelectors from './due_date_select';
 import Diff from './diff';
 import ProjectLabelSubscription from './project_label_subscription';
-import ProjectVariables from './project_variables';
 import SearchAutocomplete from './search_autocomplete';
 import Activities from './activities';
 
@@ -527,8 +527,18 @@ import Activities from './activities';
         case 'projects:settings:ci_cd:show':
           // Initialize expandable settings panels
           initSettingsPanels();
+
+          const runnerToken = document.querySelector('.js-secret-runner-token');
+          if (runnerToken) {
+            const runnerTokenSecretValue = new SecretValues(runnerToken);
+            runnerTokenSecretValue.init();
+          }
         case 'groups:settings:ci_cd:show':
-          new ProjectVariables();
+          const secretVariableTable = document.querySelector('.js-secret-variable-table');
+          if (secretVariableTable) {
+            const secretVariableTableValues = new SecretValues(secretVariableTable);
+            secretVariableTableValues.init();
+          }
           break;
         case 'ci:lints:create':
         case 'ci:lints:show':
diff --git a/app/assets/javascripts/project_variables.js b/app/assets/javascripts/project_variables.js
deleted file mode 100644
index 567c311f119..00000000000
--- a/app/assets/javascripts/project_variables.js
+++ /dev/null
@@ -1,39 +0,0 @@
-
-const HIDDEN_VALUE_TEXT = '******';
-
-export default 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);
-  }
-}