Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce new command bar design behind feature flag #1933

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

analogrelay
Copy link
Contributor

@analogrelay analogrelay commented Aug 13, 2024

Preview this branch

This introduces a new command bar component, based off Fluent UI 9, behind a feature flag. It also moves the command bar under the tab bar, as specified in the new designs.

To activate the new command bar, you need the feature.commandBarV2=true feature flag (which is enabled in the preview link above). I wanted to do a bit more iteration here before pushing this live, and I'm also interested in figuring out if/how we can control this flag in production to have even more flexibility here. The design spec also includes changes to the button layout and groupings of buttons which is not yet present, but will be done behind the feature flag in later PRs.

This PR does include a few small changes that will affect the old command bar too:

  1. Refactored some of the logic in CommandBarComponentAdapter into common methods (specifically the logic around Postgres/Mongo shell buttons)
  2. Changed the onCommandClick handler for command buttons to take an Explorer, thus allowing all the button creation logic to run without having an Explorer. This allows buttons to be created as static constants, where appropriate, or in other environments that don't have access to Explorer, while still allowing them to take actions on the Explorer when clicked. The only thing we were using Explorer for when constructing the buttons was to capture it for the onCommandClick handler, so this seemed like a safe refactor. The Explorer is provided when we translate our "abstract" CommandButtonProps into an actual button for rendering.

A quick preview of the new Command Bar:

new-command-bar

Because of it's location, there are some weird things. The global account-level "Call to Action" buttons (Synapse, Data-Plane RBAC, etc.) are in the command bar under the tab bar. Other global account-level actions (New Container/Database) were moved to the sidebar, but we haven't figured out the right home for the "Call to Action" buttons, DE settings, portal full screen, etc.

It works for now, but we're continuing to iterate on that. For example, if you have no tabs open, the command bar is still present (in order to show the global account-level actions).

no-open-tab

Another quirk of the new command bar for now, is that the Fluent UI 9 toolbar doesn't have a great Split Button/Menu experience. You can put a standard split-button in, but it looks clunky. For now, I've used a standard button for commands with children:

image

I'm also working on improving this.

Since this is behind a feature flag, we can continue iterating on these before we start to roll it out to customers.

@analogrelay analogrelay marked this pull request as ready for review August 13, 2024 23:11
@analogrelay analogrelay requested a review from a team as a code owner August 13, 2024 23:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants