Present call-to-actions to configure dashboards in shared dashboard listing

Problem to solve

The existing onboarding flow is triggered when a user visits the dashboard listing. The problem is that this listing is going to contain all analytics related dashboards, not just the Product Analytics ones. So we can't automatically redirect to onboarding when the page is visited.

Therefore, we need a clear and obvious way of triggering the onboarding process for users who haven't set up Product Analytics yet.

Flowcharts

Internal preview

Customer-facing MVC

Proposed solutions

1. Have a static call-to-action on the dashboards listing which looks similar to a listing item but directs users to the onboarding flow. Similarly to how the licence check and coverage check MR approval rules are surfaced:

1. Using the Configuration screen that we plan on creating, have a section for Product Analytics which, when not configured, shows an empty state which leads onto the onboarding flow. Visually similar to what we did for Compliance Frameworks:

Chosen solution

Implementation plan

frontend - 3️⃣

In Replace product analytics dashboard listing wit... (#388557 - closed) we will be creating a shared dashboard listing for all project-level analytics features to make use of. As such, we need to change the current onboarding flow (Listing -> [has been onboarded?] -> [No?] -> Go to onboarding -> [Yes?] -> Show listing page -> Select dashboard).

The changes to the onboarding flow are as follows:

• The shared listing page is shown whether Product Analytics is enabled or not
• Product Analytics logic is only ran when the feature flag's are enabled
• Onboarding is manually triggered by the user selecting the Product Analytics option
• The Product Analytics option is hidden once onboarding has been completed (has jitsuKey and data)
• If onboarding is complete, show the product analytics dashboards

1. Update analytics_dashboard_list.vue to include a hardcoded list of features to be set up/configured.
   • It may be worth moving the li structure to a separate component to keep things DRY.
   • Hardcoded features are not clickable except for the buttons. The row is essentially acting like read-only placeholders.
   • Only add Product Analytics to the list of features, Insights is for illustrative purposes only.
   • Use the term Set up for the button text.
   • Only show Product Analytics feature if onboarding hasn't occurred.
2. Remove onboarding flow from product_analytics_app.vue.
   • Remove product_analytics_app.vue entirely since it will only render the dashboards_view.vue.
3. Trigger onboarding flow when the Product Analytics row button is clicked.
   • Copy the data check in the onboarding flow to the dashboard listing to be run if the jitsuKey exists.
   • Move the fetch logic elsewhere to DRY this approach.
4. Update associated tests.
   • This should not affect any of our documentation