Implement Pajamas tree component for deploy boards on Environments Page
The environments page currently lists all environments used by a project. If deploy boards are enabled, top-level environments (not review apps) will be shown as an accordion. When expanded, the deploy board is shown.
Problem
Currently, deploy boards are lacking a visual cue that ties them to the environment above. The only indicator is the down arrow.
This problem is exacerbated when there is a problem with the deploy board and a warning is shown.
When a user is viewing their environments, they should be able to quickly understand which deploy board is associated with which environment. When there is an issue with a board, it should be clear to the user which board is having the issue.
Proposal
Phase 1
Small UI tweaks to aid in creating a visual hierarchy. Such as increasing border size or adding box shadows to create an emphasis that a deploy board belongs to an environment. Adjusting the proximity and placement of UI elements. De-emphasizing less important visual cues. As there is currently no design to go off of, this will require UX collaboration.
Phase 2
Once the Pajamas Tree component is complete, revisit this issue and evaluate implementing the Environments Row and Deploy Board as a tree component.