Dashboard Rebuild

[tomjn]

Our dashboard is currently PHP + CSS on a single page, but this has some issues:

• it requires the VM to be running and PHP/Nginx installed and functional
• it's busy! Everything is shown at once
• there's no way to get it into an electron app
• the stylesheets are a bit messy and have no build/optimisation steps

Technical Details

So, I suggest the following:

• Bulma + dart sass
• React
• React router
• Redux
  • data store initialised by JSON bundled with page, API in the future
  • custom react hooks for sites etc
• webpack for building
• prebuilt, VVV should not be building the dashboard during provisioning
• eslint

We should be able to spin up a github pages site using a test store

UI details

• a site list
  • each site having its own page
  • column on the left and main area on the right
  • a helpful teddy bear when no sites are selected
  • an add site button at the top of the list
  • each site page will start with the current site information from the current dashboard
• a tools page
• a settings page that lists the config.yml page
• a header bar with an off button, VVV logo, VM status
• a search bar for sites tools, and fallback to the docs site
• a help and about page

[tomjn]

A consequence of using Bulma is that our colour scheme will disappear until we can recreate it, and we'll have a dark on white scheme. We can style the dashboard with VVV purple until dark mode can be reinstated.

Any interactive features should also be low priority, such as an off button or search, the initial goal is feature parity with the current dashboard

[evertiro]

Work-in-progress PR: Varying-Vagrant-Vagrants/dashboard#41