Add clipboard button to readonly inputs
This commit is contained in:
parent
a78c4b22c7
commit
e25a8e1265
|
@ -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);
|
||||
this.showTokenButton.removeEventListener('click', this.showToken);
|
||||
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');
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
.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'
|
|
@ -1,5 +1,9 @@
|
|||
= 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')
|
||||
|
|
|
@ -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'
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue