1 files changed, 34 insertions, 4 deletions
diff --git a/app/assets/javascripts/pages/admin/projects/index.js b/app/assets/javascripts/pages/admin/projects/index.js
index b07ca815f13..3098d06510b 100644
--- a/app/assets/javascripts/pages/admin/projects/index.js
+++ b/app/assets/javascripts/pages/admin/projects/index.js
@@ -1,8 +1,38 @@
-import NamespaceSelect from '~/namespace_select';
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
 import ProjectsList from '~/projects_list';
+import NamespaceSelect from './components/namespace_select.vue';
 
 new ProjectsList(); // eslint-disable-line no-new
 
-document
-  .querySelectorAll('.js-namespace-select')
-  .forEach((dropdown) => new NamespaceSelect({ dropdown }));
+function mountNamespaceSelect() {
+  const el = document.querySelector('.js-namespace-select');
+  if (!el) {
+    return false;
+  }
+
+  const { showAny, fieldName, placeholder, updateLocation } = el.dataset;
+
+  return new Vue({
+    el,
+    render(createComponent) {
+      return createComponent(NamespaceSelect, {
+        props: {
+          showAny: parseBoolean(showAny),
+          fieldName,
+          placeholder,
+        },
+        on: {
+          setNamespace(newNamespace) {
+            if (fieldName && updateLocation) {
+              window.location = mergeUrlParams({ [fieldName]: newNamespace }, window.location.href);
+            }
+          },
+        },
+      });
+    },
+  });
+}
+
+mountNamespaceSelect();