1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/group_select/init_group_selects.js b/app/assets/javascripts/vue_shared/components/group_select/init_group_selects.js
new file mode 100644
index 00000000000..dbfac8a0339
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/group_select/init_group_selects.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import GroupSelect from './group_select.vue';
+
+const SELECTOR = '.js-vue-group-select';
+
+export const initGroupSelects = () => {
+  if (process.env.NODE_ENV !== 'production' && document.querySelector(SELECTOR) === null) {
+    // eslint-disable-next-line no-console
+    console.warn(`Attempted to initialize GroupSelect but '${SELECTOR}' not found in the page`);
+  }
+
+  [...document.querySelectorAll(SELECTOR)].forEach((el) => {
+    const {
+      parentId: parentGroupID,
+      groupsFilter,
+      label,
+      inputName,
+      inputId,
+      selected: initialSelection,
+      testid,
+    } = el.dataset;
+    const clearable = parseBoolean(el.dataset.clearable);
+
+    return new Vue({
+      el,
+      components: {
+        GroupSelect,
+      },
+      render(createElement) {
+        return createElement(GroupSelect, {
+          props: {
+            label,
+            inputName,
+            initialSelection,
+            parentGroupID,
+            groupsFilter,
+            inputId,
+            clearable,
+          },
+          attrs: {
+            'data-testid': testid,
+          },
+        });
+      },
+    });
+  });
+};