Changes after review - improve UX

app/assets/javascripts/clusters/clusters_bundle.js

@@ -60,8 +60,6 @@ export default class Clusters {
     this.showTokenButton = document.querySelector('.js-show-cluster-token');
     this.tokenField = document.querySelector('.js-cluster-token');
 
-    this.showTokenButtonHasEventListener = false;
-
     initSettingsPanels();
     this.initApplications();
 
@@ -102,26 +100,13 @@ export default class Clusters {
 
   addListeners() {
     this.toggleButton.addEventListener('click', this.toggle);
-    this.addEventListenerToken();
+    if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken);
     eventHub.$on('installApplication', this.installApplication);
   }
-  /**
-   * This button only exists when the cluster is 'created'.
-   * Because we are polling cluster status we need to make sure we only set one event listener
-   */
-  addEventListenerToken() {
-    if (this.showTokenButton && !this.showTokenButtonHasEventListener) {
-      this.showTokenButtonHasEventListener = true;
-      this.showTokenButton.addEventListener('click', this.showToken);
-    }
-  }
 
   removeListeners() {
     this.toggleButton.removeEventListener('click', this.toggle);
-    if (this.showTokenButton) {
-      this.showTokenButton.removeEventListener('click', this.showToken);
-      this.showTokenButtonHasEventListener = false;
-    }
+    if (this.showTokenButton) this.showTokenButton.removeEventListener('click', this.showToken);
     eventHub.$off('installApplication', this.installApplication);
   }
 
@@ -208,7 +193,6 @@ export default class Clusters {
       switch (status) {
         case 'created':
           this.successContainer.classList.remove('hidden');
-          this.addEventListenerToken();
           break;
         case 'errored':
           this.errorContainer.classList.remove('hidden');

app/views/projects/clusters/gcp/_form.html.haml

@@ -30,4 +30,4 @@
       = provider_gcp_field.text_field :machine_type, class: 'form-control', placeholder: 'n1-standard-4'
 
     .form-group
-      = field.submit s_('ClusterIntegration|Create cluster'), class: 'btn btn-save'
+      = field.submit s_('ClusterIntegration|Create cluster'), class: 'btn btn-success'

app/views/projects/clusters/gcp/_show.html.haml

@@ -2,7 +2,7 @@
   %label.append-bottom-10{ for: 'cluster-name' }
     = s_('ClusterIntegration|Cluster name')
   .input-group
-    %input.form-control.cluster-name{ value: @cluster.name, readonly: true }
+    %input.form-control.cluster-name.js-select-on-focus{ value: @cluster.name, readonly: true }
     %span.input-group-btn
       = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy cluster name'), class: 'btn-default')
 
@@ -12,21 +12,21 @@
     .form-group
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
       .input-group
-        = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL'), readonly: true
+        = platform_kubernetes_field.text_field :api_url, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|API URL'), readonly: true
         %span.input-group-btn
           = clipboard_button(text: @cluster.platform_kubernetes.api_url, title: s_('ClusterIntegration|Copy API URL'), class: 'btn-default')
 
     .form-group
       = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
       .input-group
-        = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), readonly: true
+        = platform_kubernetes_field.text_area :ca_cert, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), readonly: true
         %span.input-group-addon.clipboard-addon
           = clipboard_button(text: @cluster.platform_kubernetes.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'), class: 'btn-blank')
 
     .form-group
       = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
       .input-group
-        = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token'), readonly: true
+        = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token js-select-on-focus', type: 'password', placeholder: s_('ClusterIntegration|Token'), readonly: true
         %span.input-group-btn
           %button.btn.btn-default.js-show-cluster-token{ type: 'button' }
             = s_('ClusterIntegration|Show')
@@ -37,4 +37,4 @@
       = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
 
     .form-group
-      = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-save'
+      = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-success'

app/views/projects/clusters/kubernetes/_form.html.haml

@@ -15,11 +15,11 @@
 
     .form-group
       = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
-      = platform_kubernetes_field.text_field :token, class: 'form-control', placeholder: s_('ClusterIntegration|Service token')
+      = platform_kubernetes_field.text_field :token, class: 'form-control', placeholder: s_('ClusterIntegration|Service token'), autocomplete: 'off'
 
     .form-group
       = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')
       = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
 
     .form-group
-      = field.submit s_('ClusterIntegration|Add cluster'), class: 'btn btn-save'
+      = field.submit s_('ClusterIntegration|Add cluster'), class: 'btn btn-success'

app/views/projects/clusters/kubernetes/_show.html.haml

 .form-group
   %label.append-bottom-10{ for: 'cluster-name' }
     = s_('ClusterIntegration|Cluster name')
-  .input-group
   %input.form-control.cluster-name{ value: @cluster.name }
-    %span.input-group-addon.clipboard-addon
-      = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy cluster name'))
 
 = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
   = form_errors(@cluster)
@@ -20,7 +17,7 @@
     .form-group
       = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
       .input-group
-        = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token')
+        = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token'), autocomplete: 'off'
         %span.input-group-addon.clipboard-addon
           %button.js-show-cluster-token.btn-blank{ type: 'button' }
             = s_('ClusterIntegration|Show')
@@ -30,4 +27,4 @@
       = platform_kubernetes_field.text_field :namespace, class: 'form-control', placeholder: s_('ClusterIntegration|Project namespace')
 
     .form-group
-      = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-save'
+      = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-success'

app/views/projects/clusters/show.html.haml

@@ -29,7 +29,7 @@
         = s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
 
       .hidden.js-cluster-success.alert.alert-success.alert-block.append-bottom-10{ role: 'alert' }
-        = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine')
+        = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine. Refresh this page to see cluster\'s details')
 
       %p
         - if @cluster.enabled?

spec/javascripts/clusters/clusters_bundle_spec.js

@@ -127,7 +127,7 @@ describe('Clusters', () => {
     });
 
     describe('when cluster is created', () => {
-      it('should show the success container', () => {
+      it('should show the success container and fresh the page', () => {
         cluster.updateContainer(null, 'created');
 
         expect(