Use ShadCN's DropdownMenu in the Cloud UI

[ericpgreen2]

This PR follows #3736, which introduces the ShadCN DropdownMenu component set. This PR uses the new dropdown menu in the following places in the Cloud UI:

• The top bar's breadcrumbs' dropdown menus
• The one-element menu that opens upon clicking a dashboard's "Share" button
• The user avatar's dropdown menu in the top-right-hand corner of the application
• The scheduled report page's dropdown (which shows the "Edit report", "Delete report" actions)

Closes #3630

Note: In the user avatar menu, I'd prefer if the "View As" submenu opened on click rather than on hover. I think I'm blocked by a bug with controlled dropdown menus. I've opened up the following issue in ShadCN-Svelte: huntabyte/bits-ui#245

[bcolloran]

LGTM, digging it.

[briangregoryholmes]

This is a nit, but I think import * as DropdownMenu and then accessing Content, Root, Trigger, etc. keeps this a lot cleaner.

[ericpgreen2]

Agreed, and just updated. I was relying on VSCode auto-imports, so I'm curious – would you do this import * by hand, or do you happen to have a VSCode trick?

[briangregoryholmes]

Looks really great and solves a ton of little problems in one fell swoop. Added some comments about small implementation details.

[briangregoryholmes]

Regarding your issue with the DropdownMenuSub, I agree that it's unintuitive. You have to also set disabled={true} on the SubTrigger and then you can add a control function via on:click

@ericpgreen2 Here's what I had to do to get it work:

 <DropdownMenuSub bind:open={subOpen} >
      <DropdownMenuSubTrigger
        disabled={true}
        on:click={() => (subOpen = !subOpen)}>View as</DropdownMenuSubTrigger
      >
      <DropdownMenuSubContent
        class="min-w-[150px] max-w-[300px] min-h-[150px] max-h-[190px] flex flex-col"
      >
        <ViewAsUserPopover
          organization={$page.params.organization}
          project={$page.params.project}
        />
      </DropdownMenuSubContent>
    </DropdownMenuSub>

[ericpgreen2]

Regarding your issue with the DropdownMenuSub, I agree that it's unintuitive. You have to also set disabled={true} on the SubTrigger and then you can add a control function via on:click

Oh, nice find. Works 👍