Update secret_values to support dynamic elements within parentupdate-secret-values-to-support-dynamic-elements

Used in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110
which introduces a dynamic variable list and needs secrets.

We use the valueSelector/placeholderSelector options to avoid selecting
the last empty row.

3 files changed, 21 insertions, 12 deletions

diff --git a/app/assets/javascripts/behaviors/secret_values.js b/app/assets/javascripts/behaviors/secret_values.js
index 1cf0b960eb0..7f70fce913a 100644
--- a/app/assets/javascripts/behaviors/secret_values.js
+++ b/app/assets/javascripts/behaviors/secret_values.js
@@ -2,18 +2,19 @@ import { n__ } from '../locale';
 import { convertPermissionToBoolean } from '../lib/utils/common_utils';
 
 export default class SecretValues {
-  constructor(container) {
+  constructor({
+    container,
+    valueSelector = '.js-secret-value',
+    placeholderSelector = '.js-secret-value-placeholder',
+  }) {
     this.container = container;
+    this.valueSelector = valueSelector;
+    this.placeholderSelector = placeholderSelector;
   }
 
   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);
 
@@ -28,15 +29,17 @@ export default class SecretValues {
   }
 
   updateDom(isRevealed) {
-    this.values.forEach((value) => {
+    const values = this.container.querySelectorAll(this.valueSelector);
+    values.forEach((value) => {
       value.classList.toggle('hide', !isRevealed);
     });
 
-    this.placeholders.forEach((placeholder) => {
+    const placeholders = this.container.querySelectorAll(this.placeholderSelector);
+    placeholders.forEach((placeholder) => {
       placeholder.classList.toggle('hide', isRevealed);
     });
 
-    this.revealButton.textContent = isRevealed ? this.hideText : this.revealText;
+    this.revealButton.textContent = isRevealed ? n__('Hide value', 'Hide values', values.length) : n__('Reveal value', 'Reveal values', values.length);
     this.revealButton.dataset.secretRevealStatus = isRevealed;
   }
 }
diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
index c4691cd367c..f26c7360fbe 100644
--- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
@@ -3,7 +3,9 @@ import SecretValues from '~/behaviors/secret_values';
 export default () => {
   const secretVariableTable = document.querySelector('.js-secret-variable-table');
   if (secretVariableTable) {
-    const secretVariableTableValues = new SecretValues(secretVariableTable);
+    const secretVariableTableValues = new SecretValues({
+      container: secretVariableTable,
+    });
     secretVariableTableValues.init();
   }
 };
diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 94b927a1548..18dc1dc03a5 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -6,13 +6,17 @@ export default function () {
   initSettingsPanels();
   const runnerToken = document.querySelector('.js-secret-runner-token');
   if (runnerToken) {
-    const runnerTokenSecretValue = new SecretValues(runnerToken);
+    const runnerTokenSecretValue = new SecretValues({
+      container: runnerToken,
+    });
     runnerTokenSecretValue.init();
   }
 
   const secretVariableTable = document.querySelector('.js-secret-variable-table');
   if (secretVariableTable) {
-    const secretVariableTableValues = new SecretValues(secretVariableTable);
+    const secretVariableTableValues = new SecretValues({
+      container: secretVariableTable,
+    });
     secretVariableTableValues.init();
   }
 }