Merge branch '367430-import-groups-page-column-titles-are-confusing' into 'master'

Import Groups page: Add icon with tooltip to table header

See merge request !101914



Merged-by: Illya Klymov <xanf@xanf.me>
Approved-by: Evan Read <eread@gitlab.com>
Approved-by: Illya Klymov <xanf@xanf.me>
Co-authored-by: Martin Wortschack <mwortschack@gitlab.com>

app/assets/javascripts/import_entities/import_groups/components/import_table.vue

@@ -10,6 +10,7 @@ import {
   GlSprintf,
   GlTable,
   GlFormCheckbox,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { createAlert } from '~/flash';
@@ -60,7 +61,9 @@ export default {
     PaginationBar,
     HelpPopover,
   },
-
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     sourceUrl: {
       type: String,
@@ -118,14 +121,14 @@ export default {
     },
     {
       key: 'webUrl',
-      label: s__('BulkImport|From source group'),
+      label: s__('BulkImport|Source group'),
       thClass: `${DEFAULT_TH_CLASSES} gl-pl-0! import-jobs-from-col`,
       // eslint-disable-next-line @gitlab/require-i18n-strings
       tdClass: `${DEFAULT_TD_CLASSES} gl-pl-0!`,
     },
     {
       key: 'importTarget',
-      label: s__('BulkImport|To new group'),
+      label: s__('BulkImport|New group'),
       thClass: `${DEFAULT_TH_CLASSES} import-jobs-to-col`,
       tdClass: DEFAULT_TD_CLASSES,
     },
@@ -665,6 +668,16 @@ export default {
               @change="hasAllAvailableGroupsSelected ? clearSelected() : selectAllRows()"
             />
           </template>
+          <template #head(importTarget)="data">
+            <span data-test-id="new-path-col">
+              <span class="gl-mr-2">{{ data.label }}</span
+              ><gl-icon
+                v-gl-tooltip="s__('BulkImport|Path of the new group.')"
+                name="information"
+                :size="12"
+              />
+            </span>
+          </template>
           <template #cell(selected)="{ rowSelected, selectRow, unselectRow, item: group }">
             <gl-form-checkbox
               class="gl-h-7 gl-pt-3"

locale/gitlab.pot

@@ -7158,9 +7158,6 @@ msgstr ""
 msgid "BulkImport|Following data will not be migrated: %{bullets} Contact system administrator of %{host} to upgrade GitLab if you need this data in your migration"
 msgstr ""
-msgid "BulkImport|From source group"
-msgstr ""
-
 msgid "BulkImport|Group import history"
 msgstr ""
@@ -7191,6 +7188,9 @@ msgstr ""
 msgid "BulkImport|Name already used as a target for another group."
 msgstr ""
+msgid "BulkImport|New group"
+msgstr ""
+
 msgid "BulkImport|No additional information provided."
 msgstr ""
@@ -7206,6 +7206,9 @@ msgstr ""
 msgid "BulkImport|Only groups that you have the %{role} role for are listed as groups you can import."
 msgstr ""
+msgid "BulkImport|Path of the new group."
+msgstr ""
+
 msgid "BulkImport|Project import history"
 msgstr ""
@@ -7230,9 +7233,6 @@ msgstr ""
 msgid "BulkImport|Template / File-based import / GitLab Migration"
 msgstr ""
-msgid "BulkImport|To new group"
-msgstr ""
-
 msgid "BulkImport|Update of import statuses with realtime changes failed"
 msgstr ""

spec/frontend/import_entities/import_groups/components/import_table_spec.js

-import { GlAlert, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import MockAdapter from 'axios-mock-adapter';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createAlert } from '~/flash';
 import httpStatus from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
@@ -50,6 +51,7 @@ describe('import table', () => {
     rowWrapper.find('[data-testid="target-namespace-selector"]');
   const findPaginationDropdownText = () => findPaginationDropdown().find('button').text();
   const findSelectionCount = () => wrapper.find('[data-test-id="selection-count"]');
+  const findNewPathCol = () => wrapper.find('[data-test-id="new-path-col"]');
 
   const triggerSelectAllCheckbox = (checked = true) =>
     wrapper.find('thead input[type=checkbox]').setChecked(checked);
@@ -76,6 +78,9 @@ describe('import table', () => {
         historyPath: '/fake_history_path',
         defaultTargetNamespace,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
       apolloProvider,
     });
   };
@@ -540,6 +545,26 @@ describe('import table', () => {
     );
   });
 
+  it('displays info icon with a tooltip', async () => {
+    const NEW_GROUPS = [generateFakeEntry({ id: 1, status: STATUSES.NONE })];
+
+    createComponent({
+      bulkImportSourceGroups: () => ({
+        nodes: NEW_GROUPS,
+        pageInfo: FAKE_PAGE_INFO,
+        versionValidation: FAKE_VERSION_VALIDATION,
+      }),
+    });
+    jest.spyOn(apolloProvider.defaultClient, 'mutate');
+    await waitForPromises();
+
+    const icon = findNewPathCol().findComponent(GlIcon);
+    const tooltip = getBinding(icon.element, 'gl-tooltip');
+
+    expect(tooltip).toBeDefined();
+    expect(tooltip.value).toBe('Path of the new group.');
+  });
+
   describe('unavailable features warning', () => {
     it('renders alert when there are unavailable features', async () => {
       createComponent({