Replace group dropdown with vue gl-dropdown

Replaces the haml dropdown for groups and
namespaces with a vue dropdown

app/assets/javascripts/groups/components/transfer_group_form.vue

+<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 default {
+  name: 'TransferGroupForm',
+  components: {
+    ConfirmDanger,
+    GlFormGroup,
+    NamespaceSelect,
+  },
+  props: {
+    parentGroups: {
+      type: Object,
+      required: true,
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    confirmationPhrase: {
+      type: String,
+      required: true,
+    },
+    confirmButtonText: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedId: null,
+    };
+  },
+  computed: {
+    selectedNamespaceId() {
+      return this.selectedId;
+    },
+  },
+  methods: {
+    handleSelected({ id }) {
+      this.selectedId = id;
+    },
+  },
+  i18n: {
+    dropdownTitle: s__('GroupSettings|Select parent group'),
+    emptyNamespaceTitle: __('No parent group'),
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-form-group>
+      <namespace-select
+        data-qa-selector="select_group_dropdown"
+        :default-text="$options.i18n.dropdownTitle"
+        :data="parentGroups"
+        :empty-namespace-title="$options.i18n.emptyNamespaceTitle"
+        include-empty-namespace
+        include-headers
+        @select="handleSelected"
+      />
+      <input
+        id="new_parent_group_id"
+        type="hidden"
+        name="new_parent_group_id"
+        :value="selectedId"
+      />
+      <confirm-danger
+        button-class="qa-transfer-button"
+        :disabled="isDisabled"
+        :phrase="confirmationPhrase"
+        :button-text="confirmButtonText"
+        @confirm="$emit('confirm')"
+      />
+    </gl-form-group>
+  </div>
+</template>

app/assets/javascripts/groups/init_transfer_group_form.js

+import Vue from 'vue';
+import { __ } from '~/locale';
+import TransferGroupForm 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 = '',
+    phrase: confirmationPhrase = '',
+    confirmDangerMessage = '',
+    parentGroups = [],
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      confirmDangerMessage,
+    },
+    render(createElement) {
+      return createElement(TransferGroupForm, {
+        props: {
+          parentGroups: prepareGroups(parentGroups),
+          confirmButtonText,
+          confirmationPhrase,
+        },
+        on: {
+          confirm: () => {
+            if (targetFormId) document.getElementById(targetFormId)?.submit();
+          },
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/pages/groups/edit/index.js

@@ -2,6 +2,7 @@ import { GROUP_BADGE } from '~/badges/constants';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import initFilePickers from '~/file_pickers';
 import TransferDropdown from '~/groups/transfer_dropdown';
+import initTransferGroupForm from '~/groups/init_transfer_group_form';
 import setupTransferEdit from '~/groups/transfer_edit';
 import groupsSelect from '~/groups_select';
 import { initCascadingSettingsLockPopovers } from '~/namespaces/cascading_settings';
@@ -15,12 +16,12 @@ document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
   initConfirmDanger();
   initSettingsPanels();
+  initTransferGroupForm();
   dirtySubmitFactory(
     document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'),
   );
   mountBadgeSettings(GROUP_BADGE);
-
-  setupTransferEdit('.js-group-transfer-form', '.dropdown-group-transfer', '#new_parent_group_id');
+  // setupTransferEdit('.js-group-transfer-form', '#new_parent_group_id');
 
   // Initialize Subgroups selector
   groupsSelect();

app/assets/javascripts/vue_shared/components/namespace_select/namespace_select.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownItem,
+  GlDropdownSectionHeader,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export const i18n = {
   DEFAULT_TEXT: __('Select a new namespace'),
+  DEFAULT_EMPTY_NAMESPACE_TEXT: __('No namespace'),
   GROUPS: __('Groups'),
   USERS: __('Users'),
 };
@@ -15,6 +22,7 @@ export default {
   name: 'NamespaceSelect',
   components: {
     GlDropdown,
+    GlDropdownDivider,
     GlDropdownItem,
     GlDropdownSectionHeader,
     GlSearchBoxByType,
@@ -29,6 +37,26 @@ export default {
       required: false,
       default: false,
     },
+    defaultText: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    includeHeaders: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    emptyNamespaceTitle: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    includeEmptyNamespace: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -37,6 +65,12 @@ export default {
     };
   },
   computed: {
+    defaultTextDisplay() {
+      return this.defaultText || this.$options.i18n.DEFAULT_TEXT;
+    },
+    emptyNamespace() {
+      return this.emptyNamespaceTitle || this.$options.i18n.DEFAULT_EMPTY_NAMESPACE_TEXT;
+    },
     hasUserNamespaces() {
       return this.data.user?.length;
     },
@@ -52,7 +86,7 @@ export default {
       return filterByName(this.data.user, this.searchTerm);
     },
     selectedNamespaceText() {
-      return this.selectedNamespace?.humanName || this.$options.i18n.DEFAULT_TEXT;
+      return this.selectedNamespace?.humanName || this.defaultTextDisplay;
     },
   },
   methods: {
@@ -60,6 +94,9 @@ export default {
       this.selectedNamespace = item;
       this.$emit('select', item);
     },
+    handleSelectEmptyNamespace() {
+      this.handleSelect({ id: -1, humanName: this.emptyNamespace });
+    },
   },
   i18n,
 };
@@ -69,8 +106,16 @@ export default {
     <template #header>
       <gl-search-box-by-type v-model.trim="searchTerm" />
     </template>
+    <div v-if="includeEmptyNamespace">
+      <gl-dropdown-item class="qa-namespaces-list-item" @click="handleSelectEmptyNamespace()">
+        {{ emptyNamespace }}
+      </gl-dropdown-item>
+      <gl-dropdown-divider />
+    </div>
     <div v-if="hasGroupNamespaces" class="qa-namespaces-list-groups">
-      <gl-dropdown-section-header>{{ $options.i18n.GROUPS }}</gl-dropdown-section-header>
+      <gl-dropdown-section-header v-if="includeHeaders">{{
+        $options.i18n.GROUPS
+      }}</gl-dropdown-section-header>
       <gl-dropdown-item
         v-for="item in filteredGroupNamespaces"
         :key="item.id"
@@ -80,7 +125,9 @@ export default {
       >
     </div>
     <div v-if="hasUserNamespaces" class="qa-namespaces-list-users">
-      <gl-dropdown-section-header>{{ $options.i18n.USERS }}</gl-dropdown-section-header>
+      <gl-dropdown-section-header v-if="includeHeaders">{{
+        $options.i18n.USERS
+      }}</gl-dropdown-section-header>
       <gl-dropdown-item
         v-for="item in filteredUserNamespaces"
         :key="item.id"

app/assets/stylesheets/pages/groups.scss

@@ -112,10 +112,12 @@ table.pipeline-project-metrics tr td {
   font-weight: $gl-font-weight-normal;
 }
 
+// TODO: Remove these
 .js-groups-dropdown {
   width: 100%;
 }
 
+// TODO: Remove these
 .dropdown-group-transfer {
   bottom: 100%;
   top: initial;

app/helpers/groups_helper.rb

@@ -90,6 +90,11 @@ module GroupsHelper
       { group_name: group.name }
   end
 
+  def transfer_group_message(group)
+    _("You are going to transfer %{group_name} to another namespace. Are you ABSOLUTELY sure?") %
+      { group_name: group.name }
+  end
+
   def share_with_group_lock_help_text(group)
     return default_help unless group.parent&.share_with_group_lock?
 

app/views/groups/settings/_transfer.html.haml

+- form_id = "transfer-group-form"
+- initial_data = { button_text: s_('GroupSettings|Transfer group'), confirm_danger_message: transfer_group_message(@group), phrase: @group.name, target_form_id: form_id, qa_selector: "transfer_group_button", parent_groups: parent_group_options(group) }
+
 .sub-section
   %h4.warning-title= s_('GroupSettings|Transfer group')
   %p= _('Transfer group to another parent group.')
-  = form_for group, url: transfer_group_path(group), method: :put, html: { class: 'js-group-transfer-form' } do |f|
-
+  = form_for group, url: transfer_group_path(group), method: :put, html: { id: form_id, class: 'js-group-transfer-form' } do |f|
     %ul
       - learn_more_link_start = '<a href="https://docs.gitlab.com/ee/user/project/index.html#redirects-when-changing-repository-paths" target="_blank" rel="noopener noreferrer">'.html_safe
       - warning_text = s_("GroupSettings|Be careful. Changing a group's parent can have unintended side effects. %{learn_more_link_start}Learn more.%{learn_more_link_end}") % { learn_more_link_start: learn_more_link_start, learn_more_link_end: '</a>'.html_safe }
@@ -11,13 +13,11 @@
       %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
       %li= s_("GroupSettings|If the parent group's visibility is lower than the group current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
 
+    -# TODO: move this all into the form
     .form-group
-      = dropdown_tag(s_('GroupSettings|Select parent group'), options: { toggle_class: 'js-groups-dropdown', title: s_('GroupSettings|Parent Group'), filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: s_('GroupSettings|Search groups'), disabled: group.paid?, data: { data: parent_group_options(group), qa_selector: 'select_group_dropdown' } })
-      = hidden_field_tag 'new_parent_group_id'
     - if group.paid?
       .gl-alert.gl-alert-info.gl-mb-5
         = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
         .gl-alert-body
           = html_escape(_("This group can't be transfered because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
-
-    = f.submit s_('GroupSettings|Transfer group'), class: 'btn gl-button btn-warning', data: { qa_selector: "transfer_group_button" }
+    .js-transfer-group-form{ data: initial_data }