Update import table component to use cell components

* switch to fresh cell components

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

@@ -9,19 +9,19 @@ import {
   GlLoadingIcon,
   GlSearchBoxByClick,
   GlSprintf,
-  GlSafeHtmlDirective as SafeHtml,
   GlTable,
   GlFormCheckbox,
 } from '@gitlab/ui';
 import { s__, __, n__ } from '~/locale';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
-import ImportStatus from '../../components/import_status.vue';
-import { STATUSES } from '../../constants';
+import ImportStatusCell from '../../components/import_status.vue';
 import importGroupsMutation from '../graphql/mutations/import_groups.mutation.graphql';
 import setImportTargetMutation from '../graphql/mutations/set_import_target.mutation.graphql';
 import availableNamespacesQuery from '../graphql/queries/available_namespaces.query.graphql';
 import bulkImportSourceGroupsQuery from '../graphql/queries/bulk_import_source_groups.query.graphql';
-import { isInvalid } from '../utils';
+import { isInvalid, isFinished, isAvailableForImport } from '../utils';
+import ImportActionsCell from './import_actions_cell.vue';
+import ImportSourceCell from './import_source_cell.vue';
 import ImportTargetCell from './import_target_cell.vue';
 
 const PAGE_SIZES = [20, 50, 100];
@@ -43,13 +43,12 @@ export default {
     GlFormCheckbox,
     GlSprintf,
     GlTable,
-    ImportStatus,
+    ImportSourceCell,
     ImportTargetCell,
+    ImportStatusCell,
+    ImportActionsCell,
     PaginationLinks,
   },
-  directives: {
-    SafeHtml,
-  },
 
   props: {
     sourceUrl: {
@@ -136,7 +135,7 @@ export default {
     },
 
     availableGroupsForImport() {
-      return this.groups.filter((g) => g.progress.status === STATUSES.NONE && !this.isInvalid(g));
+      return this.groups.filter((g) => isAvailableForImport(g) && !this.isInvalid(g));
     },
 
     humanizedTotal() {
@@ -201,10 +200,8 @@ export default {
       return {};
     },
 
-    isAlreadyImported(group) {
-      return group.progress.status !== STATUSES.NONE;
-    },
-
+    isAvailableForImport,
+    isFinished,
     isInvalid(group) {
       return isInvalid(group, this.groupPathRegex);
     },
@@ -253,7 +250,10 @@ export default {
 
       const table = this.getTableRef();
       this.groups.forEach((group, idx) => {
-        if (table.isRowSelected(idx) && (this.isAlreadyImported(group) || this.isInvalid(group))) {
+        if (
+          table.isRowSelected(idx) &&
+          (!this.isAvailableForImport(group) || this.isInvalid(group))
+        ) {
           table.unselectRow(idx);
         }
       });
@@ -291,7 +291,7 @@ export default {
             <strong>{{ filter }}</strong>
           </template>
           <template #link>
-            <gl-link class="gl-display-inline-block" :href="sourceUrl" target="_blank">
+            <gl-link :href="sourceUrl" target="_blank">
               {{ sourceUrl }} <gl-icon name="external-link" class="vertical-align-middle" />
             </gl-link>
           </template>
@@ -360,18 +360,12 @@ export default {
             <gl-form-checkbox
               class="gl-h-7 gl-pt-3"
               :checked="rowSelected"
-              :disabled="isAlreadyImported(group) || isInvalid(group)"
+              :disabled="!isAvailableForImport(group) || isInvalid(group)"
               @change="rowSelected ? unselectRow() : selectRow()"
             />
           </template>
-          <template #cell(web_url)="{ value: web_url, item: { full_path } }">
-            <gl-link
-              :href="web_url"
-              target="_blank"
-              class="gl-display-inline-flex gl-align-items-center gl-h-7"
-            >
-              {{ full_path }} <gl-icon name="external-link" />
-            </gl-link>
+          <template #cell(web_url)="{ item: group }">
+            <import-source-cell :group="group" />
           </template>
           <template #cell(import_target)="{ item: group }">
             <import-target-cell
@@ -388,19 +382,14 @@ export default {
             />
           </template>
           <template #cell(progress)="{ value: { status } }">
-            <import-status :status="status" class="gl-line-height-32" />
+            <import-status-cell :status="status" class="gl-line-height-32" />
           </template>
           <template #cell(actions)="{ item: group }">
-            <gl-button
-              v-if="!isAlreadyImported(group)"
-              :disabled="isInvalid(group)"
-              variant="confirm"
-              category="secondary"
-              data-qa-selector="import_group_button"
-              @click="importGroups([group.id])"
-            >
-              {{ __('Import') }}
-            </gl-button>
+            <import-actions-cell
+              :group="group"
+              :group-path-regex="groupPathRegex"
+              @import-group="importGroups([group.id])"
+            />
           </template>
         </gl-table>
         <div v-if="hasGroups" class="gl-display-flex gl-mt-3 gl-align-items-center">

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

@@ -15,6 +15,7 @@ import stubChildren from 'helpers/stub_children';
 import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
 import { STATUSES } from '~/import_entities/constants';
+import ImportActionsCell from '~/import_entities/import_groups/components/import_actions_cell.vue';
 import ImportTable from '~/import_entities/import_groups/components/import_table.vue';
 import ImportTargetCell from '~/import_entities/import_groups/components/import_target_cell.vue';
 import importGroupsMutation from '~/import_entities/import_groups/graphql/mutations/import_groups.mutation.graphql';
@@ -163,11 +164,8 @@ describe('import table', () => {
 
     it('invokes importGroups mutation when row button is clicked', async () => {
       jest.spyOn(apolloProvider.defaultClient, 'mutate');
-      const triggerImportButton = wrapper
-        .findAllComponents(GlButton)
-        .wrappers.find((w) => w.text() === 'Import');
 
-      triggerImportButton.vm.$emit('click');
+      wrapper.findComponent(ImportActionsCell).vm.$emit('import-group');
       await waitForPromises();
       expect(apolloProvider.defaultClient.mutate).toHaveBeenCalledWith({
         mutation: importGroupsMutation,
@@ -329,7 +327,7 @@ describe('import table', () => {
     });
 
     it('does not allow selecting already started groups', async () => {
-      const NEW_GROUPS = [generateFakeEntry({ id: 1, status: STATUSES.FINISHED })];
+      const NEW_GROUPS = [generateFakeEntry({ id: 1, status: STATUSES.STARTED })];
 
       createComponent({
         bulkImportSourceGroups: () => ({