Add clipboard button to readonly inputs

app/assets/javascripts/clusters/clusters_bundle.js

@@ -60,6 +60,8 @@ 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();
 
@@ -100,13 +102,26 @@ export default class Clusters {
 
   addListeners() {
     this.toggleButton.addEventListener('click', this.toggle);
-    this.showTokenButton.addEventListener('click', this.showToken);
+    this.addEventListenerToken();
     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;
+    }
     eventHub.$off('installApplication', this.installApplication);
   }
 
@@ -193,6 +208,7 @@ 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/_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, readonly: true }
+    %span.input-group-btn
+      = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy cluster name'), class: 'btn-default')
+
+= form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
+  = form_errors(@cluster)
+  = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
+    .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
+        %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
+        %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
+        %span.input-group-btn
+          %button.btn.btn-default.js-show-cluster-token{ type: 'button' }
+            = s_('ClusterIntegration|Show')
+          = clipboard_button(text: @cluster.platform_kubernetes.token, title: s_('ClusterIntegration|Copy Token'), class: 'btn-default')
+
+    .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'), readonly: true
+
+    .form-group
+      = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-save'

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

 = form_for @cluster, url: platforms_kubernetes_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
   = form_errors(@cluster)
+  .form-group
+    = field.label :name, s_('ClusterIntegration|Cluster name')
+    = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Cluster name')
+
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')

app/views/projects/clusters/_form.html.haml → app/views/projects/clusters/kubernetes/_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, disabled: true }
+    %input.form-control.cluster-name{ value: @cluster.name, readonly: true }
     %span.input-group-addon.clipboard-addon
       = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy cluster name'))
 
@@ -11,23 +11,23 @@
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
-      = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL'), disabled: @cluster.managed?
+      = platform_kubernetes_field.text_field :api_url, class: 'form-control', placeholder: s_('ClusterIntegration|API URL')
 
     .form-group
       = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
-      = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), disabled: @cluster.managed?
+      = platform_kubernetes_field.text_area :ca_cert, class: 'form-control', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)')
 
     .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'), disabled: @cluster.managed?
+        = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token')
         %span.input-group-addon.clipboard-addon
           %button.js-show-cluster-token.btn-blank{ type: 'button' }
             = s_('ClusterIntegration|Show')
 
     .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'), disabled: @cluster.managed?
+      = 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'

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

@@ -66,7 +66,10 @@
       %p= s_('ClusterIntegration|See and edit the details for your cluster')
 
     .settings-content
-      = render 'form'
+      - if @cluster.managed?
+        = render 'projects/clusters/gcp/show'
+      - else
+        = render 'projects/clusters/kubernetes/show'
 
   %section.settings.no-animate#js-cluster-advanced-settings{ class: ('expanded' if expanded) }
     .settings-header