Show default group name in epic tree

In Epic Tree, when creating a new epic
the dropdown shows a default selected current Group Name
instead of being empty.

Changelog: fixed

ee/app/assets/javascripts/related_items_tree/components/create_epic_form.vue

@@ -8,6 +8,7 @@ import {
   GlDropdownItem,
   GlLoadingIcon,
 } from '@gitlab/ui';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { mapState, mapActions } from 'vuex';
 
 import { __ } from '~/locale';
@@ -51,7 +52,7 @@ export default {
       return this.isSubmitting ? __('Creating epic') : __('Create epic');
     },
     dropdownPlaceholderText() {
-      return this.selectedGroup?.name || __('Search a group');
+      return this.selectedGroup?.name || this.parentItem?.groupName || __('Search a group');
     },
     canRenderNoResults() {
       return !this.descendantGroupsFetchInProgress && !this.descendantGroups?.length;
@@ -59,6 +60,13 @@ export default {
     canRenderSearchResults() {
       return !this.descendantGroupsFetchInProgress;
     },
+    canShowParentGroup() {
+      if (!this.searchTerm) {
+        return true;
+      }
+
+      return fuzzaldrinPlus.filter([this.parentItem.groupName], this.searchTerm).length === 1;
+    },
   },
   watch: {
     searchTerm() {
@@ -142,6 +150,19 @@ export default {
           />
 
           <template v-if="canRenderSearchResults">
+            <gl-dropdown-item v-if="canShowParentGroup" class="w-100" @click="selectedGroup = null">
+              <gl-avatar
+                :entity-name="parentItem.groupName"
+                shape="rect"
+                :size="32"
+                class="d-inline-flex"
+              />
+              <div class="d-inline-flex flex-column">
+                {{ parentItem.groupName }}
+                <div class="text-secondary">{{ parentItem.fullPath }}</div>
+              </div>
+            </gl-dropdown-item>
+
             <gl-dropdown-item
               v-for="group in descendantGroups"
               :key="group.id"
@@ -162,7 +183,7 @@ export default {
             </gl-dropdown-item>
           </template>
 
-          <gl-dropdown-item v-if="canRenderNoResults">{{
+          <gl-dropdown-item v-if="canRenderNoResults && !canShowParentGroup">{{
             __('No matching results')
           }}</gl-dropdown-item>
         </gl-dropdown>

ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js

@@ -23,6 +23,7 @@ export default () => {
     numericalId,
     fullPath,
     groupId,
+    groupName,
     autoCompleteEpics,
     autoCompleteIssues,
     userSignedIn,
@@ -43,6 +44,7 @@ export default () => {
         fullPath,
         numericalId: parseInt(numericalId, 10),
         groupId: parseInt(groupId, 10),
+        groupName,
         id,
         iid: parseInt(iid, 10),
         title: initialData.initialTitleText,

ee/app/views/groups/epics/show.html.haml

@@ -48,6 +48,7 @@
           #js-tree{ data: { id: @epic.to_global_id,
             numerical_id: @epic.id,
             iid: @epic.iid,
+            group_name: @group.name,
             group_id: @group.id,
             full_path: @group.full_path,
             auto_complete_epics: 'true',

ee/changelogs/unreleased/default-group.yml

+---
+title: Show default group name in epic tree
+merge_request: 59725
+author:
+type: changed

ee/spec/frontend/related_items_tree/components/create_epic_form_spec.js

-import { GlFormInput, GlButton } from '@gitlab/ui';
+import { GlFormInput, GlButton, GlDropdownItem } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
 
 import CreateEpicForm from 'ee/related_items_tree/components/create_epic_form.vue';
@@ -28,13 +30,16 @@ const createComponent = (isSubmitting = false) => {
 describe('RelatedItemsTree', () => {
   describe('CreateEpicForm', () => {
     let wrapper;
+    let mock;
 
     beforeEach(() => {
+      mock = new MockAdapter(axios);
       wrapper = createComponent();
     });
 
     afterEach(() => {
       wrapper.destroy();
+      mock.restore();
     });
 
     describe('computed', () => {
@@ -75,8 +80,8 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('dropdownPlaceholderText', () => {
-        it('returns placeholder when no group is selected', () => {
-          expect(wrapper.vm.dropdownPlaceholderText).toBe('Search a group');
+        it('returns parent group name when no group is selected', () => {
+          expect(wrapper.vm.dropdownPlaceholderText).toBe(mockParentItem.groupName);
         });
 
         it('returns group name when a group is selected', () => {
@@ -85,6 +90,18 @@ describe('RelatedItemsTree', () => {
           expect(wrapper.vm.dropdownPlaceholderText).toBe(group.name);
         });
       });
+
+      describe('canShowParentGroup', () => {
+        it.each`
+          searchTerm                  | expected
+          ${undefined}                | ${true}
+          ${'FooBar'}                 | ${false}
+          ${mockParentItem.groupName} | ${true}
+        `('returns `$expected` when searchTerm is $searchTerm', ({ searchTerm, expected }) => {
+          wrapper.setData({ searchTerm });
+          expect(wrapper.vm.canShowParentGroup).toBe(expected);
+        });
+      });
     });
 
     describe('methods', () => {
@@ -136,6 +153,12 @@ describe('RelatedItemsTree', () => {
         expect(actionButtons.at(0).text()).toBe('Create epic');
         expect(actionButtons.at(1).text()).toBe('Cancel');
       });
+
+      it('renders parent group item as the first dropdown item', () => {
+        const items = wrapper.findAll(GlDropdownItem);
+
+        expect(items.at(0).text()).toContain(mockParentItem.groupName);
+      });
     });
   });
 });

ee/spec/frontend/related_items_tree/mock_data.js

@@ -15,6 +15,7 @@ export const mockParentItem = {
   id: 'gid://gitlab/Epic/42',
   iid: 1,
   fullPath: 'gitlab-org',
+  groupName: 'GitLab Org',
   title: 'Some sample epic',
   reference: 'gitlab-org&1',
   type: 'Epic',