New Insights query UI, Option B

[samwinslow]

Changes

Adds to #4050. New query UI experiment in Insights. Note that in order to test, you must set feature flag 4050-query-ui-optB to true.

To do

• add Cohorts to SelectBox instance

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

[paolodamico]

Love the new dropdown, it just feels fast.

UX-wise found a couple of issues.

1. Clicking the dropdown again re-opens it instead of closing it.
   

2. Weird behaviour with same-named user/event properties. Different for keyboard & mouse navigation.
   

3. Improve description for PostHog properties.

[samwinslow]

EDIT: resolved

This part also makes zero sense to me — where is id defined?

[paolodamico]

Ping me when this is ready for another look 😉

I see you caught the TS error, it was actually in line 196, not sure why GH actions reported it in line 1. You can always run ./bin/check-typescript-strict locally to get more useful output.

[samwinslow]

Working on Cohorts in SelectBox. I think I partially fixed the error with duplicated keys in the dropdown, although now I'm also seeing strange behavior when pressing the Down / Up keys. In the video below, I'm continually hitting Down, then Up, but as you can see the N and N-1 elements are in the wrong order. This only happens with some searches — wonder if it's related to Fuse?

Screen.Cast.2021-05-06.at.5.53.53.PM.mp4

[paolodamico]

lgtm! let's get this in and continue from there.

TODOs for your next PR:

1. Selecting a cohort doesn't actually filter out the graph.
2. PropertyKeyInfo popover still showing for element outside the dropdown.

3. (Unrelated to this PR). Weird behavior when alternating mouse & keyboard selection.