Show detailed status for GitHub Importer

Problem

When importing large projects from GitHub (which may take minutes or hours to complete), the user is left without any information about the progress of the import. Once the import is completed, the user can only see either Complete or Failed, but there's no insight into whether all the objects that were supposed to be imported were successfully imported.

Moreover, the GitHub Importer will show the status of ✅ Complete, even if some parts of the projects were not imported.

Original proposal

Make the 🔵 `Importing` icon clickable and expose the current status of this import process. This window would auto-refresh every 1s (subject to change for performance).

Then, add a new final status for the import job 🟠 Partial Success which will be displayed when the import job is completed successfully, but not all the objects were imported. Clicking on this icon would also show detailed information about this import job.

An (?) icon could be added to the pop-up that would (on hover) show a tip about what this information means to the user. This would be a "nice-to-have".

Note: the look&feel in the above example is just for illustration. The final UX is still TBD and we should probably look to reuse existing icons and patterns. For example, we should consider (re)using the pipeline status component:

Problem update

JTBD: When I import a project from GitHub, But not everything imports correctly, Alert me to the fact that not everything imported correctly and help me identify what has and hasn’t been imported, So I can take steps to complete or redo the import.

Assumption	Confidence	Comment	Solution
A successful import is ready for use as soon as possible.	High	Yes	The proposed solution allows users to navigate to the newly imported project as soon as it it ready for use.
The most important information is the final status of the import.	Mid	Yes	Using a badge positions the final status high in the visual hierarchy. The supporting text, icons, and colours should help users to scan and quickly process the information. Further work to support this is detailed in #233161
The detailed status is not important to users after a successful import.	Mid	Not quite. The detailed status is the evidence that the import was successful. The user may even compare the numbers import issues (e.g.) to the number of issues in GitHub.	The proposed solution allows users to see the detailed import breakdown for successful imports.
The detailed status is important to users after a partially successful import.	High	Yes	The solution could be improved in the future to provide more details about the specifics.
The detailed status is important to users after an unsuccessful import.	Low	Yes, as it is now. However, if we add more data in the future, such as duration, what failed, etc., this may be important even for failed imports.	The solution doesn't give relevant details in a failed import.
The detailed status alone is enough information for users to resolve a partially successful import.	Low	Only in some (few) cases. That said, even if they don't know how to fix it, the user could still use the detailed status to decide to reimport, or leave it as-is (good enough).	The solution could be improved in the future to provide more details about the specifics.

Which fields do we want to show?

This is the final list of fields that we want displayed:

issue
label
milestone
pull_request (merge request)
release

Additional details

This additional information was added to the import status endpoint.

Here is a sample output:

{
  "id": 27,
  "description": null,
  "name": "gh_30086",
  "name_with_namespace": "Administrator / gh_30086",
  "path": "gh_30086",
  "path_with_namespace": "root/gh_30086",
  "created_at": "2021-12-07T17:45:44.870Z",
  "import_status": "finished",
  "import_type": "github",
  "correlation_id": "01FPB00M3VX3SGVQYGBPBY6QCH",
  "failed_relations": [],
  "import_error": null,
  "stats": {                              // <=== This is the new field
    "fetched": {
      "diff_note": 19,
      "issue": 3,
      "label": 1,
      "note": 3,
      "pull_request": 2,
      "pull_request_merged_by": 1,
      "pull_request_review": 16
    },
    "imported": {
      "diff_note": 19,
      "issue": 3,
      "label": 1,
      "note": 3,
      "pull_request": 2,
      "pull_request_merged_by": 1,
      "pull_request_review": 16
    }
  }
}

Availability & Testing

Existing github import e2e test should be updated to additionally check that final status contains the correct imported objects.

Solution

The solution adds a Details accordion to the table.

The solution also details other potential improvements that could be made to to the importer experience.

Add partial import status.
Display status as a badge.
Allow cancel of an individual import.
Allow cancel of all remaining imports.

Screenshot	Description
	List of statuses and their corresponding visual treatments. - Pending changed to `neutral muted` to allow `warning` for Partial import
	List of status and their corresponding visual treatments for the details view.
	1.0 Default view List of repo's ready for import. Primary CTA is to import all repo's.
	2.0 Import all List of repos change to `Pending` status. Primary CTA change to `loading` variant. Destination's not editable. Cancel button on list items.
	2.1 Import one Individual repo change to `Pending` status. Primary CTA text change to reflect number remaining available to import. Cancel button on `Pending`/`Importing...` list item.
	3.0 Importing Show `Details` accordion in closed position. Multiple accordions can be opened be opened by users. Update content regularly. Line items that have finished but aren't 100% successful mark with bold numbers.
	3.1 Importing, mixed status Example showing multiple statuses in the same view.
	4.0 Success Shows successful view. Cancel button no longer available. Button to `Go to project` on list items.

Link to Figma file ➡

Rough prototype to play with some of the interactions ➡

Additional context

Here are some additional links that supported this process.

Update the status icons for migrating groups an... (#271505 - closed) details the discussion about naming, colours, and icons for statuses.
#247325 (closed)+ explores wording and flows for cancelling imports. The icon only cancel buttons in the solution above lean on the patterns from pipelines.

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.

Edited Mar 16, 2022 by Dan MH