Direct Transfer Page main component not refreshing when re-import is selected

Summary

Following the update in this MR, when triggering a re-import with an invalid group URL/slug, the old UI behavior/error message persists. But when reattempting with another invalid URL/path/slug, the new error message appears.

Steps to reproduce

1. Initiate a Direct Transfer import on Gitlab.com
2. on the /bulk_imports UI page, re-import a group with projects, using a Group URL with trailing underscores __
3. notice the import immediately fails, but no error message is shown.
4. re-click the [Import with Projects] button and notice the error message now appears. Please refer to the video below for detailed replication steps.

What is the current bug behavior?

When triggering a re-import in the Direct Transfer UI with an invalid group URL/slug, the import fails and no error message is shown.

What is the expected correct behavior?

When triggering a re-import in the Direct Transfer UI with an invalid group URL/slug, the correct error message is shown.

Relevant logs and/or screenshots

Video demonstrating the buggy behavior:

UI-example-10MB

This bug happens on GitLab.com

Possible fixes

@justin_ho has found a possible fix (see the diff below), although it isn't thoroughly tested yet. It addresses the bug described here, but may cause other issues:

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 2e6e7cddf8f8..7af87bc47df8 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
@@ -393,7 +393,7 @@ export default {
       }
     },
 
-    importGroup({ group, extraArgs, index }) {
+    async importGroup({ group, extraArgs, index }) {
       if (group.flags.isFinished && !this.reimportRequests.includes(group.id)) {
         this.validateImportTarget(group.importTarget);
         this.reimportRequests.push(group.id);
@@ -402,7 +402,7 @@ export default {
         });
       } else {
         this.reimportRequests = this.reimportRequests.filter((id) => id !== group.id);
-        this.requestGroupsImport([
+        await this.requestGroupsImport([
           {
             sourceGroupId: group.id,
             targetNamespace: group.importTarget.targetNamespace.fullPath,
@@ -410,6 +410,12 @@ export default {
             ...extraArgs,
           },
         ]);
+
+        const updatedGroup = this.groups?.find((g) => g.id === group.id);
+
+        if (updatedGroup.progress.status === STATUSES.FAILED && updatedGroup.progress.message) {
+          this.reimportRequests.push(group.id);
+        }
       }
     },