Add latest changes from gitlab-org/gitlab@master

4 files changed, 132 insertions, 50 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..ba8de2b0203
--- /dev/null
+++ b/app/assets/javascripts/groups/components/transfer_group_form.vue
@@ -0,0 +1,82 @@
+<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: {
+    parentGroups: {
+      type: Object,
+      required: true,
+    },
+    isPaidGroup: {
+      type: Boolean,
+      required: true,
+    },
+    confirmationPhrase: {
+      type: String,
+      required: true,
+    },
+    confirmButtonText: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedId: null,
+    };
+  },
+  computed: {
+    selectedNamespaceId() {
+      return this.selectedId;
+    },
+    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"
+        :data="parentGroups"
+        :empty-namespace-title="$options.i18n.emptyNamespaceTitle"
+        :include-headers="false"
+        include-empty-namespace
+        @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>
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..c60255e6ec3
--- /dev/null
+++ b/app/assets/javascripts/groups/init_transfer_group_form.js
@@ -0,0 +1,50 @@
+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) => {
+  const group = JSON.parse(rawGroups).map(({ id, text: humanName }) => ({
+    id,
+    humanName,
+  }));
+
+  return { group };
+};
+
+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, { groupName }),
+    },
+    render(createElement) {
+      return createElement(TransferGroupForm, {
+        props: {
+          parentGroups: prepareGroups(parentGroups),
+          isPaidGroup: parseBoolean(isPaidGroup),
+          confirmButtonText,
+          confirmationPhrase: groupName,
+        },
+        on: {
+          confirm: () => {
+            document.getElementById(targetFormId)?.submit();
+          },
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/groups/transfer_dropdown.js b/app/assets/javascripts/groups/transfer_dropdown.js
deleted file mode 100644
index d6343f698c0..00000000000
--- a/app/assets/javascripts/groups/transfer_dropdown.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import $ from 'jquery';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { __ } from '~/locale';
-
-export default class TransferDropdown {
-  constructor() {
-    this.groupDropdown = $('.js-groups-dropdown');
-    this.parentInput = $('#new_parent_group_id');
-    this.data = this.groupDropdown.data('data');
-    this.init();
-  }
-
-  init() {
-    this.buildDropdown();
-  }
-
-  buildDropdown() {
-    const extraOptions = [{ id: '-1', text: __('No parent group') }, { type: 'divider' }];
-
-    initDeprecatedJQueryDropdown(this.groupDropdown, {
-      selectable: true,
-      filterable: true,
-      toggleLabel: (item) => item.text,
-      search: { fields: ['text'] },
-      data: extraOptions.concat(this.data),
-      text: (item) => item.text,
-      clicked: (options) => {
-        const { e } = options;
-        e.preventDefault();
-        this.assignSelected(options.selectedObj);
-      },
-    });
-  }
-
-  assignSelected(selected) {
-    this.parentInput.val(selected.id);
-    this.parentInput.change();
-  }
-}
diff --git a/app/assets/javascripts/groups/transfer_edit.js b/app/assets/javascripts/groups/transfer_edit.js
deleted file mode 100644
index bb15e11fd4c..00000000000
--- a/app/assets/javascripts/groups/transfer_edit.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import $ from 'jquery';
-
-export default function setupTransferEdit(formSelector, targetSelector) {
-  const $transferForm = $(formSelector);
-  const $selectNamespace = $transferForm.find(targetSelector);
-
-  $selectNamespace.on('change', () => {
-    $transferForm.find(':submit').prop('disabled', !$selectNamespace.val());
-  });
-  $selectNamespace.trigger('change');
-}