Second iteration of Move Kubernetes from service to Cluster page

2 files changed, 21 insertions, 0 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index dc443475952..cdb5c430aa9 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -48,6 +48,7 @@ export default class Clusters {
 
     this.toggle = this.toggle.bind(this);
     this.installApplication = this.installApplication.bind(this);
+    this.showToken = this.showToken.bind(this);
 
     this.toggleButton = document.querySelector('.js-toggle-cluster');
     this.toggleInput = document.querySelector('.js-toggle-input');
@@ -56,6 +57,8 @@ export default class Clusters {
     this.creatingContainer = document.querySelector('.js-cluster-creating');
     this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason');
     this.successApplicationContainer = document.querySelector('.js-cluster-application-notice');
+    this.showTokenButton = document.querySelector('.js-show-cluster-token');
+    this.tokenField = document.querySelector('.js-cluster-token');
 
     initSettingsPanels();
     this.initApplications();
@@ -97,11 +100,13 @@ export default class Clusters {
 
   addListeners() {
     this.toggleButton.addEventListener('click', this.toggle);
+    if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken);
     eventHub.$on('installApplication', this.installApplication);
   }
 
   removeListeners() {
     this.toggleButton.removeEventListener('click', this.toggle);
+    if (this.showTokenButton) this.showTokenButton.removeEventListener('click', this.showToken);
     eventHub.$off('installApplication', this.installApplication);
   }
 
@@ -149,6 +154,16 @@ export default class Clusters {
     this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
   }
 
+  showToken() {
+    const type = this.tokenField.getAttribute('type');
+
+    if (type === 'password') {
+      this.tokenField.setAttribute('type', 'text');
+    } else {
+      this.tokenField.setAttribute('type', 'password');
+    }
+  }
+
   hideAll() {
     this.errorContainer.classList.add('hidden');
     this.successContainer.classList.add('hidden');
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index e5b9e1f2de6..83e211d6086 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -8,3 +8,9 @@
   // Wait for the Vue to kick-in and render the applications block
   min-height: 302px;
 }
+
+.clusters-dropdown-menu {
+  max-width: 100%;
+}
+
+@include new-style-dropdown('.clusters-dropdown ');