ui: updated the ui of list items on deployments tab

[sabrinako]

Notes

• The URL shown on each list item is the deployment URL, the designs state it should be the release URL, but in consideration of the context and after discussion, we chose to show the deployment URL here
• Currently the frontend does not receive the commit message with git commit information at all, so that needs to be implemented later
• As noted in some other PRs, currently there are no animated icons in flight, so the Deploying... icon is the clock icon until the animated loading one is available

Screenshots

Note the left sidebar

Before

After

How to test

1. Pull down the branch git checkout ui/deployment-card-state
2. yarn start
3. Check the deployments tab of an application
4. Optional: test UI against a real Waypoint server

[github-actions]

Ember Asset Size action

As of 64d0ccb

Files that got Bigger 🚨:

File	raw	gzip
vendor.js	+205 B	+14 B
waypoint.js	+8.57 kB	+780 B
waypoint.css	+756 B	+234 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.css	0 B	0 B

[jgwhite]

Looking good. I have one significant comment regarding accessibility of the health status indicator but all great apart from that.

[jgwhite]

When a URL is present, it looks like we’re only using the color of the indicator to convey the health status. We should add an additional means to convey this information.

Per WCAG SC 1.4.1:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element

[jgwhite]

Just to hammer the point home, here’s how a simulation of how this would look to someone with deuteranopia (via Sim Daltonism):

[jgwhite]

@sabrinako How about we show the URL if and only if the health status is available? I think that would adhere pretty closely to the WCAG guidelines, on the basis that the presence of a URL implies availability.

[jgwhite]

@gregone pointed out that we might want to also show the URL in the unknown state, for deployments that don’t/can’t provide health status. I think this is worth digging into, but perhaps in a subsequent PR.

[almonk]

I didn't make this clear enough so my bad – but my idea was to only show the release URL if the state was healthy. So in the case of any state OTHER than healthy, you'd see the status text...

[jgwhite]

🎉