Add pinned dashboards to new navigation

[paolodamico]

Changes

• Adds an easily accessible list of dashboards (with a special section for pinned dashboards), that appears when hovering the dashboards menu item.
  
• Handles the special case where no dashboards have been created.
  
• If dashboards have been created but there are none for either the non-pinned or pinned sections, the sections will not be shown.

Checklist

• All querysets/queries filter by Organization, by Team, and by User
• Django backend tests
• Jest frontend tests
• Cypress end-to-end tests

[Twixes]

My 2c: "Pinned dashboards" shouldn't appear if there are none. Pinnability should be discoverable without the "please pin something" prompt, as that takes quite a bit of space.

[paolodamico]

My 2c: "Pinned dashboards" shouldn't appear if there are none. Pinnability should be discoverable without the "please pin something" prompt, as that takes quite a bit of space.

I have mixed feelings about this. One the one hand I agree with you, it can be a waste of space to have that there (not a great UX). On the other I think getting users to pin dashboards could be pretty powerful. We know that a large percentage of long-term retained users are the ones who create custom dashboards (and presumably look at them regularly), and it can be beneficial in the long run to get more users to pin dashboards. Happy to welcome more feedback on this! Otherwise I think a good approach would be to follow your suggestion, and after this experiment is over, if it still makes sense, we can do an experiment for guiding users to creating their first pinned dashboard.

[Twixes]

My concept is that pinning should be discoverable with the list looking like in /dashboard. An intuitive pin button.

[paolodamico]

Feedback addressed, feel free (if you can) to do a full review @Twixes

[Twixes]

Personally I'd really love to see an interactive pin button. That'd make pinning easily discoverable.
Also, I think it'd be a bit more aesthetic if section contents (e.g "Pinned dashboards") were left-aligned along with section name, as opposed to inset, but that's nitpicking.

[mariusandra]

Some smaller nits:

• The arrow is pointing to "insights" not "dashboards". Probably hard/annoying to fix, so can be as is
• The blue hover is very light and doesn't provide clear visual feedback when hovering. Some grey background effect might improve the UX
• I'd make the popup hide after clicking on a dashboard. Otherwise I need to move my mouse to see the first graph
• Something feels a bit off with the left padding. Either everything should be left-aligned, or then just the text left-aligned with the icons to the left of that. (Just proposing, not sure if it'll actually look good in the end)

Bigger bug:

• It's broken in mobile mode:
  

Possible improvement:

• Since I see all dashboards in the popup (not just pinned), it might be cool to be able to pin them from within the popup. It feels a bit unintuitive that I need to click on the "dashboards" main sidebar item just to reach a place where I can pin things.

[mariusandra]

Just adding an official review as well...

[paolodamico]

Thanks @mariusandra & @Twixes for the feedback, will address today and ping you

[paolodamico]

Thanks for the suggestion @Twixes and the thorough review @mariusandra! All the comments (except the pinning directly from the overlay, which I'm leaving for a future improvement) have been addressed. Would you mind reviewing once more?

[mariusandra]

Much better! Although I still find the arrow slightly off-putting. I think it would be better without any arrow:

.pinned-dashboards-popover {
    z-index: $z_pinned_dashboards_popup;
    &.ant-popover-placement-right {
        padding-left: 0;
    }
    .ant-popover-arrow {
        display: none;
    }
}

... or then as a standard dropdown component, but then the alignment will be bad as well.

Feel free to make these adjustments if you think they improve things. Approved otherwise!

[Twixes]

I really tried to make pinning from the popover work, but Link is unbearable and just takes over the whole of MenuItem when present anywhere… Just can't detect any other events (like icon onClick) inside MenuItem because of it. But overall this looks OK.