Sandbox Project Picker with Main Project Name

[theroinaochieng]

User Story

As a user, I want to know which project and which sandbox I'm in—and how to change back to main.

Current Experience

Project picker shows sandbox name only.

New Experience

Project Picker Button

Overall project state should indicate both parent project and sandbox name, not just sandbox.

• Eg if project is ethiopia-bdr and sandbox name is feb-red-team
• Project Picker says: ethiopia-bdr:feb-red-team

Button should use sandbox accent colour and hero-beacon icon.

Remove color switching on nav bar / other UI components (eg project picker highlight colour) and only show colour in the project picker.

Project Picker Overlay

• List sandboxes as children of the selected project. Sandboxes of other projects do not show up in the project picker list.
• Current behaviour: changing to a sandbox/project takes you to workflow list.
• New behaviour: changing to a sandbox/project keeps you on the same page, just inside a different project/sandbox

[brandonjackson]

I've been thinking about the UX a little bit more today, and wondering if folks have thoughts on doing something like this? (building on the pattern we use to note when you're "inside" a run in the step editor)

this would

• make it very clear that you are inside a sandbox
• make it very clear how to exit (click on the x)
  *make it somewhat clear how to do something with the sandbox (click anywhere else on the button...)

what i'm not sure about:

• does this take up too much room w/ long project and/or sandbox names
• are there any screens where this would be too confusing? i've clicked around and thinking that perhaps on the workflow editor it does make it a bit crowded up there. but it's even more essential context there!

@taylordowns2000 @josephjclark

[brandonjackson]

The other approach would be to go with a more Github style approach: make the picker a dropdown, and then extend project picker to enable sandbox picking.

[taylordowns2000]

I like the GitHub style approach, and having the dropdown allow you to merge or go back to the parent. Not well thought thru. Will chew on this throughout the day!

What does the command-p keystroke do in this case? That's how I do most of my project navigation

[brandonjackson]

@theroinaochieng designs done!

[brandonjackson]

Alternative, wdyt @taylordowns2000? [using the arrow-turn-down-right icon from hero icons set]