[FLI-919] Context based command bar

[markphelps]

Problem

Now that we have a command bar in v1.39: https://twitter.com/flipt_io/status/1772254008809251019, it would be neat if it took into account the current section in the application that you are on.

More below 👇🏻

Ideal Solution

If im on the /flags page, and I open the command bar it should allow me to quickly jump to New Flag, same for segments

If I'm on a specific flag page like /flags/example, and I hit the command bar, it should allow me to quickly create a new variant or rule (variant flag type), or rollout (boolean flag type)

Similiar for segment -> constraint

Additional actions like Copy To Namespace should be able to be performed quickly by opening the command bar on a single flag or segment page in the UI

Theres likely more we can do, but these seem like good first steps

Search

• I searched for other open and closed issues before opening this

Additional Context

This is the library we use for command bar: https://github.com/pacocoursey/cmdk

Here is where its implemented in Flipt UI: https://github.com/flipt-io/flipt/blob/main/ui/src/components/command/CommandDialog.tsx

_FLI-919

[og118]

Hi, can I work on this issue?

[markphelps]

Yes please @og118 ! Assigning to you. Thank you!

[og118]

Hey @markphelps, I went through the code, and have a few questions before I start working on this issue:

If I'm on a specific flag page like /flags/example, and I hit the command bar, it should allow me to quickly create a new variant or rule (variant flag type), or rollout (boolean flag type)

Creating variants, rules and/or rollouts are currently being done in a navigation drawer, so ideally I assume that this command to create a new variant/rule/rollout should open up the navigation pane? Please confirm this behavior. (Attaching an image for your reference)

I need some guidance on how should I go about this? The variables that control the drawer open/close is in the local state of the components. How should I update them from CommandDialog? I think the solution to this should be to move the nav drawer control variables to a new redux store, that will be consumed by the components like Variants, Rollouts, etc. and we dispatch the actions to open/close the drawer from CommandDialog. What do you think?

[markphelps]

Hey @markphelps, I went through the code, and have a few questions before I start working on this issue:

If I'm on a specific flag page like /flags/example, and I hit the command bar, it should allow me to quickly create a new variant or rule (variant flag type), or rollout (boolean flag type)

Creating variants, rules and/or rollouts are currently being done in a navigation drawer, so ideally I assume that this command to create a new variant/rule/rollout should open up the navigation pane? Please confirm this behavior. (Attaching an image for your reference)

I need some guidance on how should I go about this? The variables that control the drawer open/close is in the local state of the components. How should I update them from CommandDialog? I think the solution to this should be to move the nav drawer control variables to a new redux store, that will be consumed by the components like Variants, Rollouts, etc. and we dispatch the actions to open/close the drawer from CommandDialog. What do you think?

Ah yeah I didnt think about the fact that some of the components are drawers instead of new pages. I think maybe in the short term we could just exclude anything that opens a drawer or modal?

Maybe we just support New Flag and New Segment if on the flags page / segment page respectively?

Unless you dont think it would be too much work to move the open / close props to redux?

[og118]

Sure, I'll go ahead and implement the routing based commands, they are pretty straightforward. Also I will let you know how much effort would be needed for moving the open/close drawer variables by today.