Redesign overrides frontend

[ilyakooo0]

Currently the overrides screen looks like this:

The new functionality added to the overrides is:

1. We now have default key-value pairs that need to be displayed to the user. The user can edit the default values (making them not default anymore), he can delete either existing or custom values (the deleted default overrides still need to be indicated somehow with the ability to add them back in), and the user can add completely new overrides.
   The designs we need:

   • default override
   • edited default
   • deleted default override
   • custom new override

2. We now also prove a list of keys that can be used (in addition to having the ability to add custom keys). I think it might make sense to show the default keys as hints or autocomplete.
   The design we need:

   • Key hints when adding new overrides

3. The default overrides can take a while to load, so we need to add a loading animation. The "deployment" and "application" overrides are loaded separately, so their loading state should also be separate. This will probably not influence the design, but changing deployment overrides will force us to relax the application overrides.
   The design we need:

   • loading state for the set of overrides

4. The same changes will affect the "All deployments" and "Deployment" screens. They currently look like this:

   

   For compactness reasons on the "All deployments" screen, we don't want to show the unchanged default key-value pairs. We only want to show the edits the user made (deleted a default value, edited a default value, added new values)

   

   On the "Deployment" screen we want to show the full set of key-value pairs: the default values with all of the edits applied. We want to show the exact same information as discussed in point 1.

   The design we need:

   • On "All deployments" screen:
     • edited default on
     • deleted default override
     • custom new override
   • On "Deployment" screen:
     • default override
     • edited default
     • deleted default override
     • custom new override

[ilyakooo0]

1. https://www.figma.com/file/RSiu3eq4NFLoZdkJeJCShJ/Octopod-UI?node-id=994%3A1265

   Defaults are thin+italic
   Edits (and custom fields) are bold
   deleted defaults are faded and strikethrough

   

2. https://www.figma.com/file/RSiu3eq4NFLoZdkJeJCShJ/Octopod-UI?node-id=989%3A397

   

3. https://www.figma.com/file/RSiu3eq4NFLoZdkJeJCShJ/Octopod-UI?node-id=989%3A679

   Already loaded fields are displayed as usual, with three "loading" blocked fields to indicate that additional things are being loaded

   

4. https://www.figma.com/file/RSiu3eq4NFLoZdkJeJCShJ/Octopod-UI?node-id=994%3A1403

   The visual indications for overrides in the "All Deployments" table are the same as in 1:

   

   The same goes for the "Deployment" page:

   https://www.figma.com/file/RSiu3eq4NFLoZdkJeJCShJ/Octopod-UI?node-id=994%3A1749