feat(connections-navigation): connect in new window via connect split-button COMPASS-8473

[kraenhansen]

Description

Merging this PR will:

• Adjust the "connect button" in the sidebar to display a SplitButton with a dropdown menu, containing options to "Connect Here" and "Connect in a New Window".
• Adding the concept of the ItemActionControls being "hideable" (through the setHideable callback) allowing children (the ConnectButton in particular) to prevent the controls from being hidden once the cursor leaves the connection row. I use this to prevent controls (hence SplitButton and it's Menu) to be removed from the tree as the cursor is moved out of the ConnectButton, across and into the menu: If the menu is opened, the controls stay visible.
• Propagate events through "connection actions" → "connections Redux store" → "globalAppRegistry" → Main IPC → Window Manager to finally create a new window and ultimately storing a "connection id" in main-process state associated with this window.
• Auto-connect the newly created window from the associated state.
• For consistency, I added auto-connect when invoked as a CLI and a connection ID is passed.

connect-in-new-window-1.mov

TODOs

• Rebase once chore(compass-components): refactor ItemActionControls #2 #6560 merge.
• Ensure the SplitButton is only shown on Compass Desktop (and add a test for this)
• Focus / activate the connection when auto-connected
• Update the LeafyGreen SplitButton component once we're able to pass renderDarkMenu LG-4721: Fix SplitButton's menu is rendered in dark-mode regardless of value passed through renderDarkMenu mongodb/leafygreen-ui#2601 and to get LG-4714: Fix using SplitButton as a managed component mongodb/leafygreen-ui#2596. I'm currently using a local install of the @leafygreen-ui/split-button.

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

• I did add support for passing a connection id as positional argument when invoked via the CLI, but is this desirable?

Dependents

• LG-4714: Fix using SplitButton as a managed component mongodb/leafygreen-ui#2596
• LG-4721: Fix SplitButton's menu is rendered in dark-mode regardless of value passed through renderDarkMenu mongodb/leafygreen-ui#2601
• chore(compass-components): refactor ItemActionControls #2 #6560

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[kraenhansen]

This is a temporary workaround and needs to be updated once my proposed changes merge and release.

[lerouxb]

TIL that you can have a default

[addaleax]

Yeah – it usually just reduces type safety, though, because then consumers are likely to omit the type (and the default is typically the most generic type available).

This also seems to be one of those cases where type safety goes away – I don't seen an obvious reason for that in the rest of the code, though, so maybe in this particular case we could reconsider?

[kraenhansen]

🙂 TBH, it's likely not strictly needed here, since we'll always be using this in a way that can infer the type of this type parameter from the props.

[kraenhansen]

That being said - those changes are actually a part of #6560 (which needs to be reviewed and merged first).

[gribnoysup]

Overall looks good, would be nice to try to run this locally after leafygreen patch is released

[gribnoysup]

Doesn't look like a great selector, anything better we can target here?

[kraenhansen]

What in particular don't you like about this? That it will break if the button label gets updated?

This is targeting a "trigger" button within the SplitButton, but most props are forwarded to the "left most" button: https://github.com/mongodb/leafygreen-ui/blob/main/packages/split-button/src/SplitButton/SplitButton.tsx#L88

This is the trigger I'm targeting 🤔

<button
  data-lgid="lg-button"
  type="button"
  class="lg-ui-button-0000 leafygreen-ui-lt73jo"
  aria-disabled="false"
  aria-label="see more connection options"
  aria-controls="lg-split-button-menu-56"
  aria-expanded="true"
  aria-haspopup="true">
  ...
</button>

Alternatively I can select this relative to its sibling:

[data-testid="sidebar-navigation-item-actions-connection-connect-action"] + button

[gribnoysup]

I don't like a brittle selector that targets specifically an aria-label attribute, if leafygreen team changes how they apply a label (for example switching to visually hidden element or using labelledby instead of label directly) this will break. If you want to select by inferred button label, you should use selectors designed for that, either a button=<text> or aria/<text> selectors. You can learn more about wdio selectors in the documentation

[gribnoysup]

We also usually use testid selectors in e2e tests, which are also mentioned as recommented by the documentation, so if we can pass a testid here, that's also an option and consistent with most of the other selectors. If we can't, it might be worth asking leafygreen team to add the option to pass it

[kraenhansen]

I've made a PR for LG adding a constant data-testid attribute to the trigger element: mongodb/leafygreen-ui#2621

Related, I noticed that LG was also selecting the trigger in their test, relative to the other button: https://github.com/mongodb/leafygreen-ui/blob/f5d842764faf5b498f799d1710288ca964a93141/packages/split-button/src/SplitButton/SplitButton.spec.tsx#L52