1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/settings/init_transfer_project_form.js b/app/assets/javascripts/projects/settings/init_transfer_project_form.js
new file mode 100644
index 00000000000..47b49031dc9
--- /dev/null
+++ b/app/assets/javascripts/projects/settings/init_transfer_project_form.js
@@ -0,0 +1,53 @@
+import Vue from 'vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import TransferProjectForm from './components/transfer_project_form.vue';
+
+const prepareNamespaces = (rawNamespaces = '') => {
+  const data = JSON.parse(rawNamespaces);
+  return {
+    group: data?.group.map(convertObjectPropsToCamelCase),
+    user: data?.user.map(convertObjectPropsToCamelCase),
+  };
+};
+
+export default () => {
+  const el = document.querySelector('.js-transfer-project-form');
+  if (!el) {
+    return false;
+  }
+
+  const {
+    targetFormId = null,
+    targetHiddenInputId = null,
+    buttonText: confirmButtonText = '',
+    phrase: confirmationPhrase = '',
+    confirmDangerMessage = '',
+    namespaces = '',
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      confirmDangerMessage,
+    },
+    render(createElement) {
+      return createElement(TransferProjectForm, {
+        props: {
+          confirmButtonText,
+          confirmationPhrase,
+          namespaces: prepareNamespaces(namespaces),
+        },
+        on: {
+          selectNamespace: (id) => {
+            if (targetHiddenInputId && document.getElementById(targetHiddenInputId)) {
+              document.getElementById(targetHiddenInputId).value = id;
+            }
+          },
+          confirm: () => {
+            if (targetFormId) document.getElementById(targetFormId)?.submit();
+          },
+        },
+      });
+    },
+  });
+};