ui: added sidebar/panel ui to deployments tab

[sabrinako]

Screenshot

Notes

• Build + release tabs are actually going to be in a different table format, so this PR just changes the deployments tab
• Changes to paths
  • The sidebar view that outlets to the details page is now the deployment route/template
  • The details page is the deployment/deployment-seq route/template
  • deployments route exists just to redirect to the deployment route
  • There's obviously some changes, but a lot of the code was just relocated
  • StatusReportMetaTable alignment is fixed (but this could have been from a previous PR and I just didn't notice)

How to test

1. Pull down this branch git checkout ui/sidebar-panel
2. yarn (new ember-route-helpers dependency)
3. yarn start
4. Navigate to the deployments tab (should automatically load when you select an application)
5. Make sure everything is working as expected

[github-actions]

Ember Asset Size action

As of 6f9f3bb

Files that got Bigger 🚨:

File	raw	gzip
vendor.js	+7.03 kB	+942 B
waypoint.js	+4.45 kB	+677 B
waypoint.css	+548 B	+241 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.css	0 B	0 B

[jgwhite]

I wonder if we can boost the z-index for this state, so the outline doesn’t go below other items:

[jgwhite]

Empty state seems fine to me, but noting for other reviewers:

[almonk]

Nice to see this coming to life! There's some work to do to make this sparkle. Here's some thoughts below... For styling issues I'm always happy to pair on resolving them – just let me know.

General styling

I've outlined some issues with the styling below.

List items in the overview component don't sit at equal distance from each other:

As an side, I'm seeing some very odd resizing behaviour (probably unrelated to this PR)....

Screen.Recording.2021-11-24.at.10.24.14.mov

Deployment list info

In the designs I removed all the platform info and replaced it with commit info. I know this won't always be available but maybe we should have a whiteboarding session on how this component should behave given varying levels of data.

If we want to do that work in a different PR thats totally fine with me – we can instead focus on polishing what we have right now.

Further design required

I'll have a think about how we can represent mutable deployments in a way that works with the reduced horizontal space. Right now this is too busy to be easily parseable I think.

[jgwhite]

Looking so good! I’ve made a few superficial comments, but certainly no structural changes needed.

[jgwhite]

Changes all look great. From my perspective, this looks ready to merge.

[gregone]

Looking good! I have a comment about what I think is a UI bug (see below), but I don't think it's related.

[gregone]

@sabrinako Possibly not related:

On the builds page, the build time badges are flowing below the item. I believe this could be because we remove the display: flex on app-item

[gregone]

A few more comments: cc @almonk

[sabrinako]

Comments Addressed (not including comments addresssed before 11/29)

This is mainly for me but also transparency on what might be pushed to future work

@almonk

• Badge styling
• Gray well styling (logs + resources table)
• Text truncation (and title added to link element)
  • Sidebar
  • Resources table
• List items in Overview equal distance
• Resizing behavior
• Deployment list info (LATER, needs to be discussed)
• Mutable deployment list info (LATER, needs to be discussed)

@jgwhite

• Dark mode selected list item
• Fix focus ring hidden on list item

@gregone

• Empty state height as vh
• Scrollable list
• Display destroyed deployments button match design

[jgwhite]

Cool to see Percy playing its part on this PR! And it looks like it may have actually spotted some unintended behavior:

[gregone]

Sorry for being misleading, as discussed in Zoom, let's drop the vh change

[jgwhite]

🎉