1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/entity_select/init_project_selects.js b/app/assets/javascripts/vue_shared/components/entity_select/init_project_selects.js
new file mode 100644
index 00000000000..1afbeda74c4
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/entity_select/init_project_selects.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import ProjectSelect from './project_select.vue';
+
+const SELECTOR = '.js-vue-project-select';
+
+export const initProjectSelects = () => {
+  if (process.env.NODE_ENV !== 'production' && document.querySelector(SELECTOR) === null) {
+    // eslint-disable-next-line no-console
+    console.warn(`Attempted to initialize ProjectSelect but '${SELECTOR}' not found in the page`);
+  }
+
+  document.querySelectorAll(SELECTOR).forEach((el) => {
+    const {
+      label,
+      inputName,
+      inputId,
+      groupId,
+      userId,
+      orderBy,
+      selected: initialSelection,
+    } = el.dataset;
+    const includeSubgroups = parseBoolean(el.dataset.includeSubgroups);
+    const membership = parseBoolean(el.dataset.membership);
+    const hasHtmlLabel = parseBoolean(el.dataset.hasHtmlLabel);
+
+    return new Vue({
+      el,
+      name: 'ProjectSelectRoot',
+      render(createElement) {
+        return createElement(ProjectSelect, {
+          props: {
+            label,
+            hasHtmlLabel,
+            inputName,
+            inputId,
+            groupId,
+            userId,
+            orderBy,
+            includeSubgroups,
+            membership,
+            initialSelection,
+          },
+        });
+      },
+    });
+  });
+};