From f0b2ef0b5fc4600c2a941a9b506873bc9dd80594 Mon Sep 17 00:00:00 2001 From: Jacques Erasmus Date: Thu, 25 Jul 2019 17:38:06 +0000 Subject: Update namespace label text for managed clusters Added the ability to update the namespace label text for gitlab-managed --- .../pages/projects/clusters/show/index.js | 2 + app/assets/javascripts/pages/projects/index.js | 2 + .../projects/gke_cluster_namespace/index.js | 35 +++++++++++++ app/views/clusters/clusters/_namespace.html.haml | 14 +++++ app/views/clusters/clusters/user/_form.html.haml | 9 ++-- .../clusters/platforms/kubernetes/_form.html.haml | 8 +-- changelogs/unreleased/je-separate-namespace-fe.yml | 5 ++ locale/gitlab.pot | 9 ++++ .../gke_cluster_namespace_spec.js | 61 ++++++++++++++++++++++ 9 files changed, 137 insertions(+), 8 deletions(-) create mode 100644 app/assets/javascripts/projects/gke_cluster_namespace/index.js create mode 100644 app/views/clusters/clusters/_namespace.html.haml create mode 100644 changelogs/unreleased/je-separate-namespace-fe.yml create mode 100644 spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js diff --git a/app/assets/javascripts/pages/projects/clusters/show/index.js b/app/assets/javascripts/pages/projects/clusters/show/index.js index 8001d2dd1da..f091c01fc98 100644 --- a/app/assets/javascripts/pages/projects/clusters/show/index.js +++ b/app/assets/javascripts/pages/projects/clusters/show/index.js @@ -1,5 +1,7 @@ import ClustersBundle from '~/clusters/clusters_bundle'; +import initGkeNamespace from '~/projects/gke_cluster_namespace'; document.addEventListener('DOMContentLoaded', () => { new ClustersBundle(); // eslint-disable-line no-new + initGkeNamespace(); }); diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js index d4bd02c14e9..55c377ebec0 100644 --- a/app/assets/javascripts/pages/projects/index.js +++ b/app/assets/javascripts/pages/projects/index.js @@ -1,4 +1,5 @@ import initGkeDropdowns from '~/projects/gke_cluster_dropdowns'; +import initGkeNamespace from '~/projects/gke_cluster_namespace'; import PersistentUserCallout from '../../persistent_user_callout'; import Project from './project'; import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation'; @@ -16,6 +17,7 @@ document.addEventListener('DOMContentLoaded', () => { PersistentUserCallout.factory(callout); initGkeDropdowns(); + initGkeNamespace(); } new Project(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/projects/gke_cluster_namespace/index.js b/app/assets/javascripts/projects/gke_cluster_namespace/index.js new file mode 100644 index 00000000000..288740203ad --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_namespace/index.js @@ -0,0 +1,35 @@ +/** + * Disables & hides the namespace inputs when the gitlab-managed checkbox is checked/unchecked. + */ + +const setDisabled = (el, isDisabled) => { + if (isDisabled) { + el.classList.add('hidden'); + el.querySelector('input').setAttribute('disabled', true); + } else { + el.classList.remove('hidden'); + el.querySelector('input').removeAttribute('disabled'); + } +}; + +const setState = glManagedCheckbox => { + const glManaged = document.querySelector('.js-namespace-prefixed'); + const selfManaged = document.querySelector('.js-namespace'); + + if (glManagedCheckbox.checked) { + setDisabled(glManaged, false); + setDisabled(selfManaged, true); + } else { + setDisabled(glManaged, true); + setDisabled(selfManaged, false); + } +}; + +const initGkeNamespace = () => { + const glManagedCheckbox = document.querySelector('.js-gl-managed'); + + setState(glManagedCheckbox); // this is needed in order to set the initial state + glManagedCheckbox.addEventListener('change', () => setState(glManagedCheckbox)); +}; + +export default initGkeNamespace; diff --git a/app/views/clusters/clusters/_namespace.html.haml b/app/views/clusters/clusters/_namespace.html.haml new file mode 100644 index 00000000000..0c64819ad62 --- /dev/null +++ b/app/views/clusters/clusters/_namespace.html.haml @@ -0,0 +1,14 @@ +- managed_namespace_help_text = s_('ClusterIntegration|Choose a prefix to be used for your namespaces. Defaults to your project path.') +- non_managed_namespace_help_text = s_('ClusterIntegration|The namespace associated with your project. This will be used for deploy boards, pod logs, and Web terminals.') +- managed_namespace_help_link = link_to _('More information'), help_page_path('user/project/clusters/index.md', + anchor: 'gitlab-managed-clusters'), target: '_blank' + +.js-namespace-prefixed + = platform_field.text_field :namespace, + label: s_('ClusterIntegration|Project namespace prefix (optional, unique)'), label_class: 'label-bold', + help: '%{help_text} %{help_link}'.html_safe % { help_text: managed_namespace_help_text, help_link: managed_namespace_help_link } +.js-namespace.hidden + = platform_field.text_field :namespace, + label: s_('ClusterIntegration|Project namespace (optional, unique)'), label_class: 'label-bold', + help: '%{help_text}'.html_safe % { help_text: non_managed_namespace_help_text }, + disabled: true diff --git a/app/views/clusters/clusters/user/_form.html.haml b/app/views/clusters/clusters/user/_form.html.haml index f2fc5ac93fb..1d212553c3b 100644 --- a/app/views/clusters/clusters/user/_form.html.haml +++ b/app/views/clusters/clusters/user/_form.html.haml @@ -34,10 +34,6 @@ autocomplete: 'off', label_class: 'label-bold', help: '%{help_text} %{help_link}'.html_safe % { help_text: token_help_text, help_link: more_info_link } - - if @user_cluster.allow_user_defined_namespace? - = platform_kubernetes_field.text_field :namespace, - label: s_('ClusterIntegration|Project namespace (optional, unique)'), label_class: 'label-bold' - = platform_kubernetes_field.form_group :authorization_type, { help: '%{help_text} %{help_link}'.html_safe % { help_text: rbac_help_text, help_link: rbac_help_link } } do = platform_kubernetes_field.check_box :authorization_type, @@ -46,10 +42,15 @@ .form-group = field.check_box :managed, { label: s_('ClusterIntegration|GitLab-managed cluster'), + class: 'js-gl-managed', label_class: 'label-bold' } .form-text.text-muted = s_('ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster.') = link_to _('More information'), help_page_path('user/project/clusters/index.md', anchor: 'gitlab-managed-clusters'), target: '_blank' + = field.fields_for :platform_kubernetes, @user_cluster.platform_kubernetes do |platform_kubernetes_field| + - if @user_cluster.allow_user_defined_namespace? + = render('clusters/clusters/namespace', platform_field: platform_kubernetes_field) + .form-group = field.submit s_('ClusterIntegration|Add Kubernetes cluster'), class: 'btn btn-success' diff --git a/app/views/clusters/platforms/kubernetes/_form.html.haml b/app/views/clusters/platforms/kubernetes/_form.html.haml index f2e44462226..e50c573bd90 100644 --- a/app/views/clusters/platforms/kubernetes/_form.html.haml +++ b/app/views/clusters/platforms/kubernetes/_form.html.haml @@ -36,10 +36,6 @@ label: s_('ClusterIntegration|Service Token'), label_class: 'label-bold', input_group_class: 'gl-field-error-anchor', append: show_token_btn + copy_token_btn - - if cluster.allow_user_defined_namespace? - = platform_field.text_field :namespace, label: s_('ClusterIntegration|Project namespace (optional, unique)'), - label_class: 'label-bold' - = platform_field.form_group :authorization_type do = platform_field.check_box :authorization_type, { disabled: true, label: s_('ClusterIntegration|RBAC-enabled cluster'), label_class: 'label-bold', inline: true }, 'rbac', 'abac' @@ -49,10 +45,14 @@ .form-group = field.check_box :managed, { label: s_('ClusterIntegration|GitLab-managed cluster'), + class: 'js-gl-managed', label_class: 'label-bold' } .form-text.text-muted = s_('ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster.') = link_to _('More information'), help_page_path('user/project/clusters/index.md', anchor: 'gitlab-managed-clusters'), target: '_blank' + - if cluster.allow_user_defined_namespace? + = render('clusters/clusters/namespace', platform_field: platform_field) + .form-group = field.submit s_('ClusterIntegration|Save changes'), class: 'btn btn-success' diff --git a/changelogs/unreleased/je-separate-namespace-fe.yml b/changelogs/unreleased/je-separate-namespace-fe.yml new file mode 100644 index 00000000000..fb6be071eb6 --- /dev/null +++ b/changelogs/unreleased/je-separate-namespace-fe.yml @@ -0,0 +1,5 @@ +--- +title: Update namespace label for GitLab-managed clusters +merge_request: 30935 +author: +type: added diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 996f082f197..ed71a4b42d9 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -2383,6 +2383,9 @@ msgstr "" msgid "ClusterIntegration|Certificate Authority bundle (PEM format)" msgstr "" +msgid "ClusterIntegration|Choose a prefix to be used for your namespaces. Defaults to your project path." +msgstr "" + msgid "ClusterIntegration|Choose which applications to install on your Kubernetes cluster. Helm Tiller is required to install any of the following applications." msgstr "" @@ -2620,6 +2623,9 @@ msgstr "" msgid "ClusterIntegration|Project namespace (optional, unique)" msgstr "" +msgid "ClusterIntegration|Project namespace prefix (optional, unique)" +msgstr "" + msgid "ClusterIntegration|Prometheus" msgstr "" @@ -2728,6 +2734,9 @@ msgstr "" msgid "ClusterIntegration|The endpoint is in the process of being assigned. Please check your Kubernetes cluster or Quotas on Google Kubernetes Engine if it takes a long time." msgstr "" +msgid "ClusterIntegration|The namespace associated with your project. This will be used for deploy boards, pod logs, and Web terminals." +msgstr "" + msgid "ClusterIntegration|There was a problem authenticating with your cluster. Please ensure your CA Certificate and Token are valid." msgstr "" diff --git a/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js new file mode 100644 index 00000000000..7b8df03d3c3 --- /dev/null +++ b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js @@ -0,0 +1,61 @@ +import initGkeNamespace from '~/projects/gke_cluster_namespace'; + +describe('GKE cluster namespace', () => { + const changeEvent = new Event('change'); + const isHidden = el => el.classList.contains('hidden'); + const hasDisabledInput = el => el.querySelector('input').disabled; + + let glManagedCheckbox; + let selfManaged; + let glManaged; + + beforeEach(() => { + setFixtures(` + +
+ +
+
+ +
+ `); + + glManagedCheckbox = document.querySelector('.js-gl-managed'); + selfManaged = document.querySelector('.js-namespace'); + glManaged = document.querySelector('.js-namespace-prefixed'); + + initGkeNamespace(); + }); + + describe('GKE cluster namespace toggles', () => { + it('initially displays the GitLab-managed label and input', () => { + expect(isHidden(glManaged)).toEqual(false); + expect(hasDisabledInput(glManaged)).toEqual(false); + + expect(isHidden(selfManaged)).toEqual(true); + expect(hasDisabledInput(selfManaged)).toEqual(true); + }); + + it('displays the self-managed label and input when the Gitlab-managed checkbox is unchecked', () => { + glManagedCheckbox.checked = false; + glManagedCheckbox.dispatchEvent(changeEvent); + + expect(isHidden(glManaged)).toEqual(true); + expect(hasDisabledInput(glManaged)).toEqual(true); + + expect(isHidden(selfManaged)).toEqual(false); + expect(hasDisabledInput(selfManaged)).toEqual(false); + }); + + it('displays the GitLab-managed label and input when the Gitlab-managed checkbox is checked', () => { + glManagedCheckbox.checked = true; + glManagedCheckbox.dispatchEvent(changeEvent); + + expect(isHidden(glManaged)).toEqual(false); + expect(hasDisabledInput(glManaged)).toEqual(false); + + expect(isHidden(selfManaged)).toEqual(true); + expect(hasDisabledInput(selfManaged)).toEqual(true); + }); + }); +}); -- cgit v1.2.1