Toggle Show / Hide Button for Kubernetes Password

Closes #49193.

4 files changed, 27 insertions, 1 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 8139aa69fc7..e565af800d0 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -162,8 +162,10 @@ export default class Clusters {
 
     if (type === 'password') {
       this.tokenField.setAttribute('type', 'text');
+      this.showTokenButton.textContent = s__('ClusterIntegration|Hide');
     } else {
       this.tokenField.setAttribute('type', 'password');
+      this.showTokenButton.textContent = s__('ClusterIntegration|Show');
     }
   }
 
diff --git a/changelogs/unreleased/toggle-password-cluster.yml b/changelogs/unreleased/toggle-password-cluster.yml
new file mode 100644
index 00000000000..1a43c4baa25
--- /dev/null
+++ b/changelogs/unreleased/toggle-password-cluster.yml
@@ -0,0 +1,5 @@
+---
+title: Toggle Show / Hide Button for Kubernetes Password
+merge_request: 20659
+author: gfyoung
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8ba05827682..19973f4f321 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1286,6 +1286,9 @@ msgstr ""
 msgid "ClusterIntegration|Helm Tiller"
 msgstr ""
 
+msgid "ClusterIntegration|Hide"
+msgstr ""
+
 msgid "ClusterIntegration|Ingress"
 msgstr ""
 
diff --git a/spec/javascripts/clusters/clusters_bundle_spec.js b/spec/javascripts/clusters/clusters_bundle_spec.js
index abe2954d506..839b8a06b48 100644
--- a/spec/javascripts/clusters/clusters_bundle_spec.js
+++ b/spec/javascripts/clusters/clusters_bundle_spec.js
@@ -45,17 +45,33 @@ describe('Clusters', () => {
   });
 
   describe('showToken', () => {
-    it('should update tye field type', () => {
+    it('should update token field type', () => {
       cluster.showTokenButton.click();
+
       expect(
         cluster.tokenField.getAttribute('type'),
       ).toEqual('text');
 
       cluster.showTokenButton.click();
+
       expect(
         cluster.tokenField.getAttribute('type'),
       ).toEqual('password');
     });
+
+    it('should update show token button text', () => {
+      cluster.showTokenButton.click();
+
+      expect(
+        cluster.showTokenButton.textContent,
+      ).toEqual('Hide');
+
+      cluster.showTokenButton.click();
+
+      expect(
+        cluster.showTokenButton.textContent,
+      ).toEqual('Show');
+    });
   });
 
   describe('checkForNewInstalls', () => {