Separate group and user props for namespace select

Add separate props to the namespace select
dropdown to differentiate group and user
namespaces.

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

@@ -20,8 +20,8 @@ export default {
     NamespaceSelect,
   },
   props: {
-    parentGroups: {
-      type: Object,
+    groupNamespaces: {
+      type: Array,
       required: true,
     },
     isPaidGroup: {
@@ -60,7 +60,7 @@ export default {
     <gl-form-group v-if="!isPaidGroup">
       <namespace-select
         :default-text="$options.i18n.dropdownTitle"
-        :data="parentGroups"
+        :group-namespaces="groupNamespaces"
         :empty-namespace-title="$options.i18n.emptyNamespaceTitle"
         :include-headers="false"
         include-empty-namespace

app/assets/javascripts/groups/init_transfer_group_form.js

@@ -5,15 +5,13 @@ import TransferGroupForm, { i18n } from './components/transfer_group_form.vue';
 
 const prepareGroups = (rawGroups) => {
   if (!rawGroups) {
-    return { group: [] };
+    return [];
   }
 
-  const group = JSON.parse(rawGroups).map(({ id, text: humanName }) => ({
+  return JSON.parse(rawGroups).map(({ id, text: humanName }) => ({
     id,
     humanName,
   }));
-
-  return { group };
 };
 
 export default () => {
@@ -38,7 +36,7 @@ export default () => {
     render(createElement) {
       return createElement(TransferGroupForm, {
         props: {
-          parentGroups: prepareGroups(parentGroups),
+          groupNamespaces: prepareGroups(parentGroups),
           isPaidGroup: parseBoolean(isPaidGroup),
           confirmButtonText,
           confirmationPhrase: groupName,

app/assets/javascripts/projects/settings/components/transfer_project_form.vue

@@ -11,8 +11,12 @@ export default {
     ConfirmDanger,
   },
   props: {
-    namespaces: {
-      type: Object,
+    groupNamespaces: {
+      type: Array,
+      required: true,
+    },
+    userNamespaces: {
+      type: Array,
       required: true,
     },
     confirmationPhrase: {
@@ -46,7 +50,8 @@ export default {
       <namespace-select
         data-testid="transfer-project-namespace"
         :full-width="true"
-        :data="namespaces"
+        :group-namespaces="groupNamespaces"
+        :user-namespaces="userNamespaces"
         :selected-namespace="selectedNamespace"
         @select="handleSelect"
       />

app/assets/javascripts/projects/settings/init_transfer_project_form.js

@@ -3,10 +3,14 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import TransferProjectForm from './components/transfer_project_form.vue';
 
 const prepareNamespaces = (rawNamespaces = '') => {
+  if (!rawNamespaces) {
+    return { groupNamespaces: [], userNamespaces: [] };
+  }
+
   const data = JSON.parse(rawNamespaces);
   return {
-    group: data?.group.map(convertObjectPropsToCamelCase),
-    user: data?.user.map(convertObjectPropsToCamelCase),
+    groupNamespaces: data?.group?.map(convertObjectPropsToCamelCase) || [],
+    userNamespaces: data?.user?.map(convertObjectPropsToCamelCase) || [],
   };
 };
 
@@ -35,7 +39,7 @@ export default () => {
         props: {
           confirmButtonText,
           confirmationPhrase,
-          namespaces: prepareNamespaces(namespaces),
+          ...prepareNamespaces(namespaces),
         },
         on: {
           selectNamespace: (id) => {

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

@@ -34,9 +34,15 @@ export default {
     GlSearchBoxByType,
   },
   props: {
-    data: {
-      type: Object,
-      required: true,
+    groupNamespaces: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    userNamespaces: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
     fullWidth: {
       type: Boolean,
@@ -72,18 +78,18 @@ export default {
   },
   computed: {
     hasUserNamespaces() {
-      return this.data.user?.length;
+      return this.userNamespaces.length;
     },
     hasGroupNamespaces() {
-      return this.data.group?.length;
+      return this.groupNamespaces.length;
     },
     filteredGroupNamespaces() {
       if (!this.hasGroupNamespaces) return [];
-      return filterByName(this.data.group, this.searchTerm);
+      return filterByName(this.groupNamespaces, this.searchTerm);
     },
     filteredUserNamespaces() {
       if (!this.hasUserNamespaces) return [];
-      return filterByName(this.data.user, this.searchTerm);
+      return filterByName(this.userNamespaces, this.searchTerm);
     },
     selectedNamespaceText() {
       return this.selectedNamespace?.humanName || this.defaultText;

spec/frontend/groups/components/transfer_group_form_spec.js

@@ -10,7 +10,7 @@ describe('Transfer group form', () => {
   const confirmButtonText = 'confirm';
   const confirmationPhrase = 'confirmation-phrase';
   const paidGroupHelpLink = 'some/fake/link';
-  const groups = [
+  const groupNamespaces = [
     {
       id: 1,
       humanName: 'Group 1',
@@ -22,7 +22,7 @@ describe('Transfer group form', () => {
   ];
 
   const defaultProps = {
-    parentGroups: { groups },
+    groupNamespaces,
     paidGroupHelpLink,
     isPaidGroup: false,
     confirmationPhrase,
@@ -63,7 +63,7 @@ describe('Transfer group form', () => {
         includeHeaders: false,
         emptyNamespaceTitle: 'No parent group',
         includeEmptyNamespace: true,
-        data: { groups },
+        groupNamespaces,
       });
     });
 
@@ -91,7 +91,7 @@ describe('Transfer group form', () => {
   });
 
   describe('with a selected project', () => {
-    const [firstGroup] = groups;
+    const [firstGroup] = groupNamespaces;
     beforeEach(() => {
       wrapper = createComponent();
       findNamespaceSelect().vm.$emit('select', firstGroup);

spec/frontend/projects/settings/components/transfer_project_form_spec.js

-import { namespaces } from 'jest/vue_shared/components/namespace_select/mock_data';
+import {
+  groupNamespaces,
+  userNamespaces,
+} from 'jest/vue_shared/components/namespace_select/mock_data';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import TransferProjectForm from '~/projects/settings/components/transfer_project_form.vue';
 import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
@@ -13,7 +16,8 @@ describe('Transfer project form', () => {
   const createComponent = () =>
     shallowMountExtended(TransferProjectForm, {
       propsData: {
-        namespaces,
+        userNamespaces,
+        groupNamespaces,
         confirmButtonText,
         confirmationPhrase,
       },
@@ -43,7 +47,7 @@ describe('Transfer project form', () => {
   });
 
   describe('with a selected namespace', () => {
-    const [selectedItem] = namespaces.group;
+    const [selectedItem] = groupNamespaces;
 
     beforeEach(() => {
       findNamespaceSelect().vm.$emit('select', selectedItem);

spec/frontend/vue_shared/components/namespace_select/mock_data.js

-export const group = [
+export const groupNamespaces = [
   { id: 1, name: 'Group 1', humanName: 'Group 1' },
   { id: 2, name: 'Subgroup 1', humanName: 'Group 1 / Subgroup 1' },
 ];
 
-export const user = [{ id: 3, name: 'User namespace 1', humanName: 'User namespace 1' }];
-
-export const namespaces = {
-  group,
-  user,
-};
+export const userNamespaces = [{ id: 3, name: 'User namespace 1', humanName: 'User namespace 1' }];

spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js

@@ -5,9 +5,9 @@ import NamespaceSelect, {
   i18n,
   EMPTY_NAMESPACE_ID,
 } from '~/vue_shared/components/namespace_select/namespace_select.vue';
-import { user, group, namespaces } from './mock_data';
+import { userNamespaces, groupNamespaces } from './mock_data';
 
-const FLAT_NAMESPACES = [...group, ...user];
+const FLAT_NAMESPACES = [...groupNamespaces, ...userNamespaces];
 const EMPTY_NAMESPACE_TITLE = 'Empty namespace TEST';
 const EMPTY_NAMESPACE_ITEM = { id: EMPTY_NAMESPACE_ID, humanName: EMPTY_NAMESPACE_TITLE };
 
@@ -17,7 +17,8 @@ describe('Namespace Select', () => {
   const createComponent = (props = {}) =>
     shallowMountExtended(NamespaceSelect, {
       propsData: {
-        data: namespaces,
+        userNamespaces,
+        groupNamespaces,
         ...props,
       },
       stubs: {
@@ -89,11 +90,11 @@ describe('Namespace Select', () => {
   describe('with search', () => {
     it.each`
       term           | includeEmptyNamespace | expectedItems
-      ${''}          | ${false}              | ${[...namespaces.group, ...namespaces.user]}
-      ${'sub'}       | ${false}              | ${[namespaces.group[1]]}
-      ${'User'}      | ${false}              | ${[...namespaces.user]}
-      ${'User'}      | ${true}               | ${[...namespaces.user]}
-      ${'namespace'} | ${true}               | ${[EMPTY_NAMESPACE_ITEM, ...namespaces.user]}
+      ${''}          | ${false}              | ${[...groupNamespaces, ...userNamespaces]}
+      ${'sub'}       | ${false}              | ${[groupNamespaces[1]]}
+      ${'User'}      | ${false}              | ${[...userNamespaces]}
+      ${'User'}      | ${true}               | ${[...userNamespaces]}
+      ${'namespace'} | ${true}               | ${[EMPTY_NAMESPACE_ITEM, ...userNamespaces]}
     `(
       'with term=$term and includeEmptyNamespace=$includeEmptyNamespace, should show $expectedItems.length',
       async ({ term, includeEmptyNamespace, expectedItems }) => {
@@ -115,7 +116,7 @@ describe('Namespace Select', () => {
 
   describe('with a selected namespace', () => {
     const selectedGroupIndex = 1;
-    const selectedItem = group[selectedGroupIndex];
+    const selectedItem = groupNamespaces[selectedGroupIndex];
 
     beforeEach(() => {
       wrapper = createComponent();