Convert Package Details page to use GraphQL

Context

We've done a lot of work to create GraphQL APIs for the GitLab Package Registry. With that work wrapping up in 14.1, it would be great to start updating the Package Registry UI to leverage the new API. This will help with performance and help to unblock future feature development.

Proposal

Refactor the package details page from using a mix of controllers/rest API to use the new GraphQL API.

added Category:Package Registry GraphQL devopspackage frontend grouppackage registry typefeature typemaintenance labels

set weight to 3

/cc @trizzi

Thanks for opening this issue @nmezzopera! Do you think it's reasonable to schedule this and the list page implementation in a single milestone?

@trizzi yes, they are completely unlinked anyhow!

@nmezzopera Should this issue be updated to workflowready for development?

mentioned in issue #285467 (closed)

marked this issue as related to #330846 (closed)

changed milestone to %14.1

added [deprecated] Accepting merge requests label

added sectionops label

mentioned in issue #331743 (closed)

added Package:P1 label

mentioned in merge request !61985 (merged)

changed the description

added workflowready for development label

mentioned in issue gitlab-org/quality/triage-reports#3490 (closed)

added Deliverable label

mentioned in issue gitlab-org/quality/triage-reports#3564 (closed)

marked this issue as related to gitlab-org/ci-cd/package-stage/risk-mapping#31

mentioned in issue gitlab-org/quality/triage-reports#3662 (closed)

assigned to @nmezzopera

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

mentioned in merge request !64939 (merged)

removed [deprecated] Accepting merge requests label

mentioned in issue #233724 (closed)

marked this issue as related to #233724 (closed)

added workflowin dev label and removed workflowready for development label

Async Issue Update

Status

• Complete: 60%
• Confidence: 90%

Notes

This work will be done in 4 steps

1. Add feature flag and new page bundle
2. Add apollo and fetch data from API
3. Wire Page components
4. Remove feature flag and old code

Merge Requests

1. !64939 (merged)

added bugperformance label

changed title from Convert Package Details page to use apollo/graphql to Convert Package Details page to use GraphQL

changed the description

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

mentioned in merge request !65810 (merged)

@trizzi @dcroft I won't be able to complete this work for 14.1, following a small retrospective on why:

Wrong estimation

I've estimated this work a frontend-weight3 based on my experience with the Container Registry similar refactor, this was wrong because of a few points:

• The Infrastructure registry is tied to the package app, requiring more planning and work
• The sheer number of Package managers that we support and all the nuances around them, I have much more moving parts to take in account, test and double check
• A few bug that we currently have that I stumbled upon doing the refactor, forcing me to stop and address them

Missing data from the API

• While the package related GraphQL API is done, in the details API we rely on data coming from other part of the models/schema in particular we lack some info from the pipeline schema, I will be opening an MR to add those.

Unplanned time off on my part

Due to some personal circumstances I had to take more time off, I was less focused, than I had thought this milestone, leading to a small than usual throughput

Since the work started already, I am confident that this can be closed in 14.2

Thanks for the heads up @nmezzopera, I updated the milestone to 14.2 and will update the planning issue.

changed milestone to %14.2

mentioned in issue #333869 (closed)

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

mentioned in merge request !66241 (merged)

mentioned in merge request !66313 (merged)

Async Issue Update

Status

• Complete: 70%
• Confidence: 90%

Notes

Merge Requests

1. !64939 (merged)
2. !65810 (merged)
3. !66313 (merged)

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

mentioned in merge request !66749 (merged)

Async Issue Update

Status

• Complete: 75%
• Confidence: 90%

Notes

Merge Requests

1. !64939 (merged)
2. !65810 (merged)
3. !66313 (merged)
4. !66749 (merged)

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

mentioned in merge request !67122 (merged)

mentioned in merge request !67320 (merged)

Async Issue Update

Status

• Complete: 85%
• Confidence: 90%

Notes

Merge Requests

1. !64939 (merged)
2. !65810 (merged)
3. !66313 (merged)
4. !66749 (merged)
5. !67122 (merged)
6. !67320 (merged)

mentioned in merge request !67594 (merged)

Async Issue Update

Status

• Complete: 90%
• Confidence: 90%

Notes

Merge Requests

1. !64939 (merged)
2. !65810 (merged)
3. !66313 (merged)
4. !66749 (merged)
5. !67122 (merged)
6. !67320 (merged)
7. !67594 (merged)

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

mentioned in merge request !67604 (merged)

Async Issue Update

Status

• Complete: 93%
• Confidence: 90%

Notes

Merge Requests

1. !64939 (merged)
2. !65810 (merged)
3. !66313 (merged)
4. !66749 (merged)
5. !67122 (merged)
6. !67320 (merged)
7. !67594 (merged)
8. !67604 (merged)