fix: integrate connections into the sidebar navigation tree COMPASS-7773

[paula-stacho]

TODO:

• Server icon
• Fix active workspace highlighting
• Click on a connection
• New tests for the navigation tree
• Check figma for actual leftPadding values for the tree items

Description

=== READ FIRST ===

The focus of this piece is purely on the presentation.

That means

• the changes in compass-sidebar are mainly preparation. what really matters at this point is that we're not breaking the legacy sidebar
• we're reusing the same list of databases for each connection
• activation of the sidebar items based on activeNamespace is not sufficient because it doesn't include connection, we'll need something like activeConnection alongside it

The actual state management will be implemented in https://jira.mongodb.org/browse/COMPASS-7775

Changes:

• compass-databases-navigation changes to compass-connections-navigation
• the legacy usage is preserved, with databasesLegacy and expandedLegacy parameters. This is also covered by the original set of tests, now legacy-connections-navigation-tree.spec.tsx
• the new top level is connections
• clicking on a connection item opens the databases tab (openDatabasesWorkspace). focusing on the tab later activates the connection item
• connections-navigation-tree.tsx is an updated copy of databases-navigation-tree.tsx. I can only recommend viewing the diff between the two files, unfortunately github doesn't do this (same for the .spec file)
• similar case is connection-item.tsx, which is based on database-item.tsx

Missing: In the new designs, the icons are lighter and the highlighting has a different color. I ran out of time (and the PR is already very big), so looks like this will be a follow up.

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

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)

[paula-stacho]

Note: I made the namespace parameter for databases workspace required, forcing a bunch of namespace: '' placeholders. I have since started to doubt this decision, especially knowing that DE will be working with single connections for the time being. I'll probably change it to optional.

[gribnoysup]

This was a deliberate design decision to prevent collection list and the content below it from "jumping" when collections finished loading. Why we'd want to remove that?

[kmruiz]

Not sure, I believe the current behaviour is the correct one. I'll revert this change so we keep the placeholder.

[paula-stacho]

sorry, what did we want to revert here? or is it reverted already? @gribnoysup @kmruiz

[paula-stacho]

note: this file is moved from compass-databases-navigation

[kmruiz]

I think nothing needs to be reverted, looking at what the code does, it still keeps the placeholders as expected.

[gribnoysup]

This feels like an unnecessary fork in logic here. We will need to support single connection in compass-web with the new sidebar: the logic is pretty straightforward, if there is only one connection and only one collection is allowed, this tree should render as before, can we just incorporate this logic into the component and not have a hard fork on this logic based on props? It's low effort and less cleaning-up afterwards when the multiple connections are enabled in Compass

[kmruiz]

I agree, I'll do the change when I take this ticket.

[paula-stacho]

@gribnoysup not sure if I follow here.. is the idea just to keep the databases name and expanded type will depend on whether connections or databases are set? we can do that for sure, it just doesn't seem like a "fork in logic" for me, it's really just the props layer. that's why I'm not sure if I understand correctly.
when I started on this I wasn't aware of the compass-web single connection scenario, so I thought the cleanup would be easiest if we clearly mark the legacy bits.

[paula-stacho]

also relevant note - the compass-web will likely keep using a separate sidebar because the new sidebar structure doesn't make sense for single connection. whether we call it legacy or single-connection (likely the latter, but I'm afraid to rename the sidebar folder at this moment, there are too many conflicts with the main branch already and at least one rebase last week apparently went wrong 🙈 )

[paula-stacho]

update: I've changed the props and also internally removed the "legacy" notation in favour of "single connection (SC)"

[addaleax]

I've seen this disable directive in a couple of files here, it doesn't seem to trigger anything locally though?

[paula-stacho]

yup, might not be needed anymore. I'll try removing it and see if it triggers anything in the CI