Group migration - Show available groups - frontend

As part of the GitLab Group Migration MVC epic, this issue will add the ability to show a list of top-level groups available for import, as discussed in this comment.

The list will contain the source group path/name, (editable) destination group path/name, status of the import, and the import button.

Out of scope

Solving pagination/infinite scrolling for long lists of groups is not in the scope of this issue.

Designs

Designs and prototype posted in the issue UX for GitLab Group Migration - MVC #237925 (closed)

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

added to epic &4374 (closed)

added Category:Importers UX devopsmanage direction estimationneeded featureenhancement frontend milestonep1 workflowrefinement + 1 deleted label

marked this issue as related to #249156 (closed)

changed the description

@amandakhughes Can you please attach the design for the view showing the group selection list to this issue? Please note the details on what's included in the view in the issue description above.

Done!

Issue refinement 🧵

@xanf:

This issue is a part of the GitLab Group Migration MVC deliverable, which we are targeting for 13.5. Please add any additional details to the description and vote on this thread if it is workflowready for development:

• ready
• not ready (add reason in the thread)
• weight

cc @lmcandrew @amandakhughes @dennis @rchan-gitlab @sliaquat @jhyson @kassio @georgekoltsov

This one will be headliner issue for epic :) This will be , taking that this is a brand new functionality, I will require a lot of help from backend :)

added 1 design

added sectiondev label

mentioned in issue #249160 (closed)

added workflowready for development label and removed workflowrefinement label

mentioned in issue gitlab-org/manage/general-discussion#17274

set weight to 5

changed milestone to %13.5

added Deliverable label

added estimationcompleted label and removed estimationneeded label

added [deprecated] Accepting merge requests label

removed 1 design

added 1 design

changed the description

removed 1 design

changed the description

mentioned in merge request !43155 (merged)

changed the description

added Next Up label

assigned to @xanf

added workflowin dev label and removed workflowready for development label

removed [deprecated] Accepting merge requests label

@illya I'm not sure if you noticed in the GitLab Migration MCV prototype, but the Group Import page has a different interaction than the Project Import experience. There is a different import in-progress state under the To GitLab column and the import in-progress under the To new group column.

Ideally, both project and group interactions should be identical and follow the proposed pattern of Group Imports.

Project Imports: To GitLab column in-progress interaction (not ideal):

Current_import_interaction

Steps	Screenshot of interaction (from production)
User is able to edit the dropdown and text field.
User clicks Import and the editable fields change to read-only text.
The project import is finished and the read-only text is still visible.

Group Imports: To new group column in-progress interaction (ideal):

Cancel_single_imports_prototype

Steps	Screenshot of interaction (from prototype)
User is able to edit the dropdown and text field.
User clicks Import and the dropdown and text field become disabled.
The project import is finished and disabled dropdown and text field becomes a links which directs the user to the new group page.

---

I started to create an issue to address this change for a future milestone, but I'd like to hear your thoughts on the best way to proceed.

Will the proposed interaction experience for the Group Import table be a part of the GitLab Group Migration - MVC, or should I create an issue for future work?

I'll definitely be creating an issue to update the interaction for Project Imports.

@amandakhughes Yep, I've noticed that. I will include a correct (ideal) behavior in my deliverable (happening any time this week, I hope). I will be happy to see this behavior unified though, since it will allow me to throw away a lot of code :)

changed milestone to %13.6

added missed-deliverable missed:13.5 labels

added typefeature label

removed featureenhancement label

@xanf I apologize, but I included the wrong color for the external link in the designs.

Incorrect	Correct link color

I'm not quite sure if this can be updated before the release so I've created a new issue just in case: #273824 (closed)

WDYT?

mentioned in issue #237925 (closed)

mentioned in merge request !47513 (closed)

changed milestone to %13.7

added missed:13.6 label

mentioned in merge request !48784 (merged)

mentioned in issue #289847

mentioned in merge request !49697 (merged)

created merge request !49699 (merged) to address this issue

mentioned in merge request !49699 (merged)

added workflowin review label and removed workflowin dev label

added workflowverification label and removed workflowin review label

Closing this as verified

closed

mentioned in issue #241657 (closed)

added groupimport and integrate label and removed 1 deleted label

changed the description