Add richer empty state for product analytics usage quota
Placeholder issue from these MR comments:
Having a tab without data but with a CTA is something that's been done on the Pipelines page but not on Usage quota. We could adopt that pattern here of always showing with a CTA.
Can we add a sentence with an action the user can take after this message? Maybe "Set up product analytics for your projects.".
Proposal
- adjust tab logic, so the product analytics tab is always visible (aside from the
product_analytics_usage_quota
development feature flag) - when product analytics is not enabled, show empty state
- when product analytics is enabled but no projects within the group have product analytics enabled, show empty state
- empty state should include relevant call to action (link to docs?)
Design
Standard <gl-empty-state>
Reuse the dashboard empty state SVG illustration:
Implementation plan
- modify groups_helper.rb such that the feature flag is the only thing which hides the tab
- provide a
productAnalyticsEnabled
flag to frontend - update the current vue empty state:
- add a
gl-empty-state
to parent usage quota component- empty state call to action changes depending on
productAnalyticsEnabled
Enable product analytics
Onboard projects with product analytics
- both link to the product analytics docs (we can't link directly to the onboarding flow as that is project specific and this usage quota page is at the group level) at the relevant anchors.
- empty state call to action changes depending on
- remove the existing plain empty state sentence in the projects usage breakdown. Component should render nothing when empty state, same as group totals component.
- if
productAnalyticsEnabled
is false, skip rendering child components - otherwise emit event after fetching data if there are no product analytics projects. This causes empty state in parent to show.
- add a
- add/update tests
Edited by Elwyn Benson