Use Apollo fragments to combine homepage queries

Created by: philipp-spiess

Fixes #32414 (closed)

The homepage is currently loading data for all its panels in parallel resulting in multiple simultaneous GraphQL queries and an awkward loading situation where data is displayed as soon as it comes in. This approach doesn't scale and would lead to us making multiple concurrent requests on the homepage loads in the future. This PR is an attempt to clean this up while keeping the following properties:

1. Initial loaded queries should be colocated in one network request.
2. We want to keep the details of what data is needed for a panel as close to the panel implementation as possible (hence the use of Fragments).
3. Individual panels need to be able to load more results like they do right now. Doing this should not re-render any other panel.
4. We don't want to overfetch. If a panel is not shown, we don't need its data. We do this by using Apollo directives.

This approach

The biggest change here comes from the fact that I have removed the different data fetching calls in favor of one Relay query in the parent component. The query combines fragments from the children it renders and defines a sensible set of default element. This query needs to know which fragment it renders, however we can use Apollo directives to avoid forking the query and have the logic relatively concise.

Inside the individual panels, we make use of the fetchMore filter to load more results. This will cause the query to be re-run with a new set of arguments but does not update it's data. We can then keep a separate copy in the component's state that appends the new results while every other panel is kept as-is.

Test plan

• There are a lot of tests that cover these areas including storybook and Jest tests. Check out the test status.
• I've also verified that this runs in any permutation of onprem/cloud, with/without collaborators, forced loading state etc.