Update namespace label text for managed clusters

Added the ability to update the namespace label text for gitlab-managed

6 files changed, 62 insertions, 8 deletions

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'