Update namespace label text for managed clusters

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

3 files changed, 39 insertions, 0 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;