1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/init_transfer_group_form.js b/app/assets/javascripts/groups/init_transfer_group_form.js
new file mode 100644
index 00000000000..f055b926918
--- /dev/null
+++ b/app/assets/javascripts/groups/init_transfer_group_form.js
@@ -0,0 +1,52 @@
+import Vue from 'vue';
+import { sprintf } from '~/locale';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import TransferGroupForm, { i18n } from './components/transfer_group_form.vue';
+
+const prepareGroups = (rawGroups) => {
+  if (!rawGroups) {
+    return [];
+  }
+
+  return JSON.parse(rawGroups).map(({ id, text: humanName }) => ({
+    id,
+    humanName,
+  }));
+};
+
+export default () => {
+  const el = document.querySelector('.js-transfer-group-form');
+  if (!el) {
+    return false;
+  }
+
+  const {
+    targetFormId = null,
+    buttonText: confirmButtonText = '',
+    groupName = '',
+    parentGroups,
+    isPaidGroup,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      confirmDangerMessage: sprintf(i18n.confirmationMessage, { group_name: groupName }),
+    },
+    render(createElement) {
+      return createElement(TransferGroupForm, {
+        props: {
+          groupNamespaces: prepareGroups(parentGroups),
+          isPaidGroup: parseBoolean(isPaidGroup),
+          confirmButtonText,
+          confirmationPhrase: groupName,
+        },
+        on: {
+          confirm: () => {
+            document.getElementById(targetFormId)?.submit();
+          },
+        },
+      });
+    },
+  });
+};