1 files changed, 80 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/transfer_group_form.vue b/app/assets/javascripts/groups/components/transfer_group_form.vue
new file mode 100644
index 00000000000..e848f10352d
--- /dev/null
+++ b/app/assets/javascripts/groups/components/transfer_group_form.vue
@@ -0,0 +1,80 @@
+<script>
+import { GlFormGroup } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
+
+export const i18n = {
+  confirmationMessage: __(
+    'You are going to transfer %{group_name} to another namespace. Are you ABSOLUTELY sure?',
+  ),
+  emptyNamespaceTitle: __('No parent group'),
+  dropdownTitle: s__('GroupSettings|Select parent group'),
+};
+
+export default {
+  name: 'TransferGroupForm',
+  components: {
+    ConfirmDanger,
+    GlFormGroup,
+    NamespaceSelect,
+  },
+  props: {
+    groupNamespaces: {
+      type: Array,
+      required: true,
+    },
+    isPaidGroup: {
+      type: Boolean,
+      required: true,
+    },
+    confirmationPhrase: {
+      type: String,
+      required: true,
+    },
+    confirmButtonText: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedId: null,
+    };
+  },
+  computed: {
+    disableSubmitButton() {
+      return this.isPaidGroup || !this.selectedId;
+    },
+  },
+  methods: {
+    handleSelected({ id }) {
+      this.selectedId = id;
+    },
+  },
+  i18n,
+};
+</script>
+<template>
+  <div>
+    <gl-form-group v-if="!isPaidGroup">
+      <namespace-select
+        :default-text="$options.i18n.dropdownTitle"
+        :group-namespaces="groupNamespaces"
+        :empty-namespace-title="$options.i18n.emptyNamespaceTitle"
+        :include-headers="false"
+        include-empty-namespace
+        data-testid="transfer-group-namespace-select"
+        @select="handleSelected"
+      />
+      <input type="hidden" name="new_parent_group_id" :value="selectedId" />
+    </gl-form-group>
+    <confirm-danger
+      button-class="qa-transfer-button"
+      :disabled="disableSubmitButton"
+      :phrase="confirmationPhrase"
+      :button-text="confirmButtonText"
+      @confirm="$emit('confirm')"
+    />
+  </div>
+</template>