Saved insights creation flow

[liyiy]

Changes

Please describe.
If this affects the frontend, include screenshots.

Connecting "create a new insight" to the saved insights page. Also updates to how insights get edited/saved.

To test, either have "dashboard_collaboration" turned on or set to "true" in the code

Screen.Recording.2021-08-27.at.10.02.14.AM.mov

• New main nav menu item added for "exploratory" mode and insights updated to saved insights. By default the user is directed to the "Explore" page

Screen.Recording.2021-09-14.at.10.24.50.AM.mov

Checklist

• All querysets/queries filter by Organization, by Team, and by User
• Django backend tests
• Jest frontend tests
• Cypress end-to-end tests
• Migrations are safe to run at scale (e.g. PostHog Cloud) – present proof if not obvious
• New/changed UI is decent on smartphones (viewport width around 360px)

[liyiy]

AFTER CONVENING WITH CHRIS, I believe this flow should make a lot more sense now. Basically we are dividing the insight flow into a view versus edit mode. When we click on "explore" (what used to be "insights"), we are sent straight to the insight creation edit mode. However when we open up a saved insight or dashboard item, we are sent to the insight's view mode (where there is an option to intentionally edit). In addition to that, whenever we're "editing" an insight now, we are editing the same insight per editing "session". Previously we were creating a brand new insight for every tab change, filter update, etc, but now we are updating the same one instead.

[liyiy]

Screen.Recording.2021-09-14.at.10.24.50.AM.mov

[mariusandra]

Found a few conflicts with dashboard logic, otherwise looks really good and can't wait to get this in! :)

[mariusandra]

This actions.createInsight is actually insightHistoryLogic.actions.createInsight, which calls api.create('api/insight'). The problem is that funnelLogic is also mounted for each dashboard item, so this makes a lot of mess when loading a dashboard:

You can just if (!props.dashboardItemId) all the code that touches insightLogic as a quick solution.

[liyiy]

good catch!!! I've feature flagged this (since it's a saved insights flow functionality) and also made sure to update only when an insight actually exists to be updated

[paolodamico]

Product-based review, as @mariusandra has reviewed the code. As a preamble, this is great so far!

No feature flag

1. When creating a new insight, this is the view you see. I found three things confusing: a) the "Insight #{x}", if this is the insight ID I think it'll cause confusion on Cloud, b) it's confusing to see "Edit" when you haven't actually saved anything, c) there's two "add to dashboard" buttons.
   
2. The funnels page still has a save button.
   

With enabled feature flag

3. UX-wise I think it's confusing that you can have the same insight named differently when saving on a dashboard than when saving it standalone (as when saving you get asked for a new insight name)
4. Clicking New Insight -> User Paths is broken
5. I'd remove the created by filter when on the "Your insights" tab
6. Some insight icons in the type of insight filter seem confusing as we use them for other things (e.g. sessions, stickiness)
7. Currently there's no way to access the /saved_insights page
8. In a fresh installation I had a saved insight created as "Funnel x3" but it was actually a retention graph.
9. There's some weird positioning of elements in some rows.

10. It's not obvious that you can click the 3 dots menu, I would change the color to `$primary`. 11. The more filter box does not have the appropriate rounding and shadowing.

12. I would add the relevant icons to the dropdown menu actions (like we have in the dashboard page).

[liyiy]

Addressed @mariusandra's comments and most of @paolodamico's (couldn't reproduce some of the issues). Will be leaving some of the UX improvements for a future PR so we can try to get this in :D

[paolodamico]

Makes sense @liyiy, I agree with merging and leaving UI/UX improvements for a subsequent PR. I'll just defer to @mariusandra for the final 👌 as he reviewed the code

[mariusandra]

Hey, unfortunately I can't approve it. The "loadResultsSuccess" listeners are still wrong and don't explicitly take into account that none of this code should be run if we're on a dashboard. Please keep the old if (!props.dashboardItemId) { code and move the new logic inside that.