Add system redesign

[allisonking]

Part of #2434

(probably should've made it a separate ticket, but the new splash screen snuck in after sprint planning!)

Based off of this design: https://www.figma.com/file/dmEwdK3xZwjKfGVQ9t66xe/Fides-v.2-Master-Working-Files?node-id=3116%3A111644&t=tKcOdaMgM7kn2hRS-0

Code Changes

• Updates the add system page to match new design

Steps to Confirm

• Visit /add-systems and make sure everything works ok!
• Also try adjusting the width of your browser

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Documentation:
  • documentation complete, PR opened in fidesdocs
  • documentation issue created in fidesdocs
• Issue Requirements are Met
• Relevant Follow-Up Issues Created
• Update CHANGELOG.md

Description Of Changes

Screen.Recording.2023-02-02.at.5.29.04.PM.mov

When the data flow scanner is disabled (i.e. unhealthy cluster)

note @rsilvery I kind of went rogue and plopped the little green indicator in here. it's not in the new designs, but it seemed useful to keep from the old implementation so that we can tell when the data scanner is available. this feature was never really fully designed, so happy to update it if we get a new design for it

Without the plus server:

With the side nav (which only appears once there are systems):

[codecov]

Codecov Report

Base: 88.44% // Head: 88.43% // Decreases project coverage by -0.01% ⚠️

Coverage data is based on head (cbef8f5) compared to base (2205677).
Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2490      +/-   ##
==========================================
- Coverage   88.44%   88.43%   -0.01%     
==========================================
  Files         328      328              
  Lines       15954    15954              
  Branches     4431     4431              
==========================================
- Hits        14110    14109       -1     
- Misses       1689     1690       +1     
  Partials      155      155              

Impacted Files	Coverage Δ
src/fides/api/main.py	86.09% <0.00%> (-0.67%)	⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[rsilvery]

@allisonking looks good but just to make sure we're on the same page: Add Systems will go to the new screen with a list of systems next, right?

[allisonking]

@allisonking looks good but just to make sure we're on the same page: Add Systems will go to the new screen with a list of systems next, right?

yup yup! that'll be the bulk of #2434

[TheAndrewJackson]

Reviewing now 👀

[TheAndrewJackson]

The changes worked as expected. Only one small nit. I did notice one difference between the screenshots/video and my testing. The stepper was showing up.

I'm pretty sure we want the stepper. Do you have any insight into what makes the stepper show/not show? If the stepper showing is fine then it should be good to go!

[rsilvery]

@allisonking, @TheAndrewJackson we do not want the stepper.

[allisonking]

@allisonking, @TheAndrewJackson we do not want the stepper.

mm yeah the stepper shows up by default in dev environments because of the way our feature flags work. @rsilvery if we are sure we do not want the stepper anymore, can we remove it entirely from the code instead of it being feature flagged off?

[rsilvery]

@allisonking, @TheAndrewJackson we do not want the stepper.

mm yeah the stepper shows up by default in dev environments because of the way our feature flags work. @rsilvery if we are sure we do not want the stepper anymore, can we remove it entirely from the code instead of it being feature flagged off?

Yes. please!