1 files changed, 34 insertions, 3 deletions
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index 34e984a9bb9..fb0c47fe018 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -1,11 +1,38 @@
+import Vue from 'vue';
 import $ from 'jquery';
 import { escape } from 'lodash';
+import GroupSelect from '~/vue_shared/components/group_select/group_select.vue';
 import { groupsPath } from '~/vue_shared/components/group_select/utils';
 import { __ } from '~/locale';
 import Api from './api';
 import { loadCSSFile } from './lib/utils/css_utils';
 import { select2AxiosTransport } from './lib/utils/select2_utils';
 
+const initVueSelect = () => {
+  [...document.querySelectorAll('.ajax-groups-select')].forEach((el) => {
+    const { parentId: parentGroupID, groupsFilter, inputId } = el.dataset;
+
+    return new Vue({
+      el,
+      components: {
+        GroupSelect,
+      },
+      render(createElement) {
+        return createElement(GroupSelect, {
+          props: {
+            inputName: el.name,
+            initialSelection: el.value || null,
+            parentGroupID,
+            groupsFilter,
+            inputId,
+            clearable: el.classList.contains('allowClear'),
+          },
+        });
+      },
+    });
+  });
+};
+
 const groupsSelect = () => {
   loadCSSFile(gon.select2_css_path)
     .then(() => {
@@ -84,8 +111,12 @@ const groupsSelect = () => {
 
 export default () => {
   if ($('.ajax-groups-select').length) {
-    import(/* webpackChunkName: 'select2' */ 'select2/select2')
-      .then(groupsSelect)
-      .catch(() => {});
+    if (gon.features?.vueGroupSelect) {
+      initVueSelect();
+    } else {
+      import(/* webpackChunkName: 'select2' */ 'select2/select2')
+        .then(groupsSelect)
+        .catch(() => {});
+    }
   }
 };