Hide setup instructions and stats until repository content loads

Rahul Chanilarequested to merge
629072-hide-setup-and-stats-until-loaded into master

What does this MR do and why?

This MR changes the Artifact Registry repository detail page (organization level). This page sits behind the default-off artifact_registry_ui feature flag.

Before this change, the page showed the "Setup instructions" button in the header and the sidebar stats (size, downloads, package count, or upstream repository count for a virtual repository) as soon as the repository itself loaded. The artifacts list (for hosted and remote repositories) or the upstream list (for virtual repositories) could still be loading at that point. When that list came back empty, the button and the stats disappeared. This happened because an empty hosted or virtual repository shows an empty state, and that empty state already has the setup steps inline.

After this change, the button and the stats stay hidden until the first artifacts or upstream read returns. Once that first read returns, the existing rules apply unchanged. A later page change, such as moving to the next page, does not hide the button or stats again, so they do not flicker between pages. If the artifacts or upstream read fails, the button and stats still show, as before.

Known behavior: when a user revisits this page inside the app, the artifacts and upstream queries use a cache-and-network fetch policy without notifyOnNetworkStatusChange. Because of this, vue-apollo does not hand over the cached list until the background refetch returns. During that time, the button and stats stay hidden, and the artifacts section shows its loading skeleton. This MR does not change that query setup.

The change adds one new computed property, isAwaitingMainContent, in ee/app/assets/javascripts/packages_and_registries/artifact_registry/repositories/detail/repository_detail.vue. This property gates showSetupInstructions and the sidebar hide-stats prop.

Tests live in ee/spec/frontend/packages_and_registries/artifact_registry/repositories/detail/repository_detail_spec.js. The test that said stats stay visible while the first page loads was replaced. New tests cover the first-load state for hosted and virtual repositories, and a later page load in flight.

This MR has no changelog entry, because the feature is behind a default-off flag.

References

Screenshots or screen recordings

These screenshots show a hosted Maven repository while its package list is still loading (the server response was delayed), and after the list loads.

Before After
Loading Before, loading After, loading
Loaded Before, loaded After, loaded

How to set up and validate locally

  1. Enable the flag in a Rails console:

    Feature.enable(:artifact_registry_ui)

  2. Open a repository detail page under /o/<organization>/-/artifact_registry/<registry>/repositories/<repository>.

  3. In browser DevTools, throttle the network (for example "Slow 4G") and reload.

  4. While the package or image list shows its loading skeleton, check that the header shows no Setup instructions button and the sidebar shows no stats.

  5. After the list loads, check that the button and stats appear for a repository with artifacts. For an empty hosted repository, check that they stay hidden and the empty state shows.

  6. Repeat for a virtual repository. Check that the button and the Repositories count appear only after the upstream list loads.

  7. On a repository with more than one page of artifacts, move to the next page. Check that the button and stats stay visible.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports