Fetch every page of milestones on the roadmap

What does this MR do and why?

The roadmap fetched milestones in one GraphQL request without first, so the schema's page size limit of 100 applied and every milestone after the 100 due earliest was dropped without notice.

The query now selects pageInfo, and roadmap_shell.vue follows hasNextPage with fetchMore, requesting each cursor once. It stops after 20 requests, the cap inherited_ci_variables_app.vue uses, or once 2,000 milestones are held, and shows a warning alert. The alert is dismissed when the range or the milestone title filter changes, when milestones are hidden, and when the roadmap is left. A type policy merges the pages and skips any milestone whose id it already holds, the merge analytics/shared/graphql/client.js uses for labels, so a page that arrives twice is merged once. That happens when an epics sort change redraws the roadmap while a page is still loading. When a page fails, returning to the same range and filter shows the error alert again instead of a partial list alone.

Fixed path

flowchart TD
  A["roadmap_shell.vue milestonesQueryVariables<br/>first: 100"] --> B["groupMilestonesEE<br/>selects pageInfo"]
  B --> C["MilestoneConnection.nodes<br/>merges the page, deduped by id"]
  C --> D{"result()<br/>pageInfo.hasNextPage?"}
  D -->|"no"| E["every milestone in range is shown"]
  D -->|"yes"| F{"under 20 requests<br/>and 2,000 milestones?"}
  F -->|"yes"| G["fetchNextMilestonesPage()<br/>fetchMore with after: endCursor,<br/>once per cursor"]
  G --> B
  F -->|"no, 2,000 loaded"| H["createAlert, warning variant<br/>Maximum number of milestones loaded (2,000)"]

References

Screenshots or screen recordings

Before After At the cap
before: 100 milestones after: 102 milestones cap: 2,000 milestones and the warning
before: no December milestone after: Subgroup December milestone

How to set up and validate locally

  1. In a top-level group, create 101 milestones dated January to April this year.
  2. In its subgroup, create a December milestone and an epic dated this year.
  3. Open the subgroup's roadmap with ?layout=MONTHS&timeframe_range_type=CURRENT_YEAR&show_milestones=true.
  4. Milestones counts 100 on master and 102 on this branch.

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.

  • On master the roadmap shows 100 of 102 milestones. With this change it shows 102 under Vue 2 and Vue 3, and the roadmap Jest specs pass under both, with the new ones failing without the change.
  • ee/spec/features/groups/group_roadmap_spec.rb passes with quarantined examples excluded, as CI runs it, along with the roadmap controller spec and the group milestones GraphQL and resolver specs.
  • The diff is over 500 lines, mostly specs. graphql.js is re-indented, so Hide whitespace changes gives the readable view.
Edited by Andrew Dunn

Merge request reports

Loading
Loading