Update namespace label text for managed clusters

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

1 files changed, 35 insertions, 0 deletions

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;