From 5fa416018ba93d7fc1b322c3a46287c396046a63 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 6 Feb 2025 11:00:30 +0100
Subject: [PATCH] Import groups by direct transfer: Cleanup interface

Visually group search with filters, move migration details
action to actions and make it a button, some alignment
fixes.

Changelog: changed
---
 .../components/import_history_link.vue        |  6 +-
 .../components/import_source_cell.vue         |  8 +-
 .../import_groups/components/import_table.vue | 90 ++++++++++---------
 locale/gitlab.pot                             |  6 +-
 .../components/import_history_link_spec.js    |  8 +-
 5 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_history_link.vue b/app/assets/javascripts/import_entities/import_groups/components/import_history_link.vue
index 81c4fa55797b65..08f98a20eaf58c 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_history_link.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_history_link.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 
 export default {
   components: {
-    GlLink,
+    GlButton,
   },
 
   props: {
@@ -26,5 +26,5 @@ export default {
 };
 </script>
 <template>
-  <gl-link :href="historyPathWithId">{{ s__('BulkImport|Migration details') }} &gt;</gl-link>
+  <gl-button :href="historyPathWithId">{{ s__('BulkImport|Migration details') }}</gl-button>
 </template>
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue
index f95a977b5c5a51..b41fed4ea10540 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue
@@ -29,10 +29,14 @@ export default {
 
 <template>
   <div>
-    <gl-link :href="group.webUrl" target="_blank" class="gl-inline-flex gl-h-7 gl-items-center">
+    <gl-link
+      :href="group.webUrl"
+      target="_blank"
+      class="gl-inline-flex gl-h-7 gl-items-center gl-gap-2"
+    >
       {{ group.fullPath }} <gl-icon name="external-link" class="gl-fill-icon-link" />
     </gl-link>
-    <div v-if="group.flags.isFinished && fullLastImportPath" class="gl-text-sm">
+    <div v-if="group.flags.isFinished && fullLastImportPath" class="gl-text-sm gl-text-subtle">
       <gl-sprintf :message="s__('BulkImport|Last imported to %{link}')">
         <template #link>
           <gl-link :href="absoluteLastImportPath" class="gl-text-sm" target="_blank">{{
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
index 5f9e1fdf70f2c2..58283b82e50762 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
@@ -145,14 +145,14 @@ export default {
       key: 'selected',
       label: '',
       thClass: 'gl-w-3 !gl-pr-3',
-      tdClass: '!gl-pr-3',
+      tdClass: '!gl-flex lg:!gl-table-cell lg:!gl-pr-3',
     },
     {
       key: 'webUrl',
       label: s__('BulkImport|Source group'),
       // eslint-disable-next-line @gitlab/require-i18n-strings
-      thClass: '!gl-pl-0 gl-w-1/2',
-      tdClass: '!gl-pl-0',
+      thClass: 'lg:!gl-pl-0 gl-w-1/2',
+      tdClass: 'lg:!gl-pl-0',
     },
     {
       key: 'importTarget',
@@ -162,11 +162,13 @@ export default {
     {
       key: 'progress',
       label: __('Status'),
+      tdClass: '!gl-align-middle',
       tdAttr: { 'data-testid': 'import-status-indicator' },
     },
     {
       key: 'actions',
       label: '',
+      tdClass: '!gl-flex lg:!gl-table-cell',
     },
   ],
 
@@ -342,12 +344,7 @@ export default {
 
   methods: {
     rowClasses(groupTableItem) {
-      const DEFAULT_CLASSES = [
-        'gl-border-strong',
-        'gl-border-0',
-        'gl-border-b-1',
-        'gl-border-solid',
-      ];
+      const DEFAULT_CLASSES = ['gl-border-strong', 'gl-border-0', 'gl-border-b', 'gl-border-solid'];
       const result = [...DEFAULT_CLASSES];
       if (groupTableItem.flags.isUnselectable) {
         result.push('!gl-cursor-default');
@@ -675,24 +672,20 @@ export default {
           {{ s__('BulkImport|View import history') }}
         </gl-button>
       </template>
-      <template #description
-        ><span>{{ s__('BulkImport|Select the groups and projects you want to import.') }}</span>
-        <span>
-          <gl-sprintf
-            :message="
-              s__(
-                'BulkImport|Please note: importing projects is a %{docsLinkStart}beta%{docsLinkEnd} feature.',
-              )
-            "
+      <template #description>
+        {{ s__('BulkImport|Select the groups and projects you want to import.') }}
+        <gl-sprintf
+          :message="
+            s__('BulkImport|Importing projects is a %{docsLinkStart}beta%{docsLinkEnd} feature.')
+          "
+        >
+          <template #docsLink="{ content }"
+            ><gl-link :href="$options.betaFeatureHelpPath" target="_blank">{{
+              content
+            }}</gl-link></template
           >
-            <template #docsLink="{ content }"
-              ><gl-link :href="$options.betaFeatureHelpPath" target="_blank">{{
-                content
-              }}</gl-link></template
-            >
-          </gl-sprintf>
-        </span></template
-      >
+        </gl-sprintf>
+      </template>
     </page-heading>
 
     <gl-alert
@@ -728,7 +721,7 @@ export default {
         </template>
       </gl-sprintf>
     </gl-alert>
-    <gl-alert variant="warning" :dismissible="false" class="mt-3">
+    <gl-alert variant="warning" :dismissible="false">
       <gl-sprintf
         :message="
           s__(
@@ -742,13 +735,6 @@ export default {
       </gl-sprintf>
     </gl-alert>
     <div class="gl-border-0 gl-border-b-1 gl-border-solid gl-border-b-default gl-py-5">
-      <gl-search-box-by-click
-        class="gl-mb-5"
-        data-testid="filter-groups"
-        :placeholder="s__('BulkImport|Filter by source group')"
-        @submit="filter = $event"
-        @clear="filter = ''"
-      />
       <span v-if="!$apollo.loading && hasGroups">
         <gl-sprintf :message="statusMessage">
           <template #start>
@@ -784,6 +770,15 @@ export default {
         </help-popover>
       </span>
     </div>
+    <div class="gl-flex gl-flex-col gl-gap-3 gl-bg-subtle gl-p-5 gl-pb-4">
+      <gl-search-box-by-click
+        data-testid="filter-groups"
+        :placeholder="s__('BulkImport|Filter by source group')"
+        @submit="filter = $event"
+        @clear="filter = ''"
+      />
+    </div>
+
     <gl-loading-icon v-if="$apollo.loading" size="lg" class="gl-mt-5" />
     <template v-else>
       <gl-empty-state
@@ -806,9 +801,9 @@ export default {
       </gl-empty-state>
       <template v-else>
         <div
-          class="import-table-bar gl-sticky gl-z-3 gl-flex-col gl-bg-subtle gl-px-4 md:gl-flex md:gl-flex-row md:gl-items-center md:gl-justify-between"
+          class="import-table-bar gl-sticky gl-z-3 gl-flex-col gl-bg-subtle gl-px-5 md:gl-flex md:gl-flex-row md:gl-items-center md:gl-justify-between"
         >
-          <div class="gl-items-center gl-gap-4 gl-py-3 md:gl-flex">
+          <div class="gl-flex gl-w-full gl-items-center gl-gap-4 gl-pb-4">
             <span data-test-id="selection-count">
               <gl-sprintf :message="__('%{count} selected')">
                 <template #count>
@@ -834,7 +829,7 @@ export default {
                 v-gl-tooltip
                 :title="s__('BulkImport|Some groups will be imported without projects.')"
                 name="warning"
-                class="gl-text-orange-500"
+                variant="warning"
                 data-testid="import-projects-warning"
               />
             </span>
@@ -869,6 +864,7 @@ export default {
           selectable
           select-mode="multi"
           selected-variant="primary"
+          stacked="lg"
           @row-selected="preventSelectingAlreadyImportedGroups"
         >
           <template #head(selected)="{ selectAllRows, clearSelected }">
@@ -911,13 +907,13 @@ export default {
             />
           </template>
           <template #cell(progress)="{ item: group }">
-            <import-status-cell :status="group.visibleStatus" :has-failures="hasFailures(group)" />
-            <import-history-link
-              v-if="showHistoryLink(group)"
-              :id="group.progress.id"
-              :history-path="historyShowPath"
-              class="gl-mt-2 gl-inline-block"
-            />
+            <div class="gl-mt-3">
+              <import-status-cell
+                class="gl-items-end lg:gl-items-start"
+                :status="group.visibleStatus"
+                :has-failures="hasFailures(group)"
+              />
+            </div>
           </template>
           <template #cell(actions)="{ item: group, index }">
             <import-actions-cell
@@ -928,6 +924,12 @@ export default {
               :is-project-creation-allowed="group.flags.isProjectCreationAllowed"
               @import-group="importGroup({ group, extraArgs: $event, index })"
             />
+            <import-history-link
+              v-if="showHistoryLink(group)"
+              :id="group.progress.id"
+              :history-path="historyShowPath"
+              class="gl-mt-3"
+            />
           </template>
         </gl-table>
       </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 44ece5640608e3..c89f4c36e12018 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -10770,6 +10770,9 @@ msgstr ""
 msgid "BulkImport|Import without projects"
 msgstr ""
 
+msgid "BulkImport|Importing projects is a %{docsLinkStart}beta%{docsLinkEnd} feature."
+msgstr ""
+
 msgid "BulkImport|Importing the group failed."
 msgstr ""
 
@@ -10830,9 +10833,6 @@ msgstr ""
 msgid "BulkImport|Placeholder reassignments completed with errors"
 msgstr ""
 
-msgid "BulkImport|Please note: importing projects is a %{docsLinkStart}beta%{docsLinkEnd} feature."
-msgstr ""
-
 msgid "BulkImport|Please select a parent group."
 msgstr ""
 
diff --git a/spec/frontend/import_entities/import_groups/components/import_history_link_spec.js b/spec/frontend/import_entities/import_groups/components/import_history_link_spec.js
index 7b88c1d444910b..b6ae3bba85d75f 100644
--- a/spec/frontend/import_entities/import_groups/components/import_history_link_spec.js
+++ b/spec/frontend/import_entities/import_groups/components/import_history_link_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlLink } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 
 import ImportHistoryLink from '~/import_entities/import_groups/components/import_history_link.vue';
 
@@ -17,7 +17,7 @@ describe('import history link', () => {
     });
   };
 
-  const findGlLink = () => wrapper.findComponent(GlLink);
+  const findButton = () => wrapper.findComponent(GlButton);
 
   it('renders link with href', () => {
     const mockId = 174;
@@ -28,7 +28,7 @@ describe('import history link', () => {
       },
     });
 
-    expect(findGlLink().text()).toBe('Migration details >');
-    expect(findGlLink().attributes('href')).toBe('/import/174/history');
+    expect(findButton().text()).toBe('Migration details');
+    expect(findButton().attributes('href')).toBe('/import/174/history');
   });
 });
-- 
GitLab