tooling/development GUI panel

[johncowen]

Description

We currently have lots of little things that you can set to tailor the GUI during development:

1. Numbers of things in mocks
2. Feature flags for mocks and for the application itself
3. Development helpers (turning on/off mocks, turning on/off i18n helpers)

Currently the interface for these things is the Web Inspector > Cookies panel (we store the state of these things in browser cookies so they are available to frontend and backend).

As this is the only interface, you need to actually know the name of the variable to set in order to do things, and then think about: "well, is the variable name KUMA_MOCK_API_ENABLED, KUMA_MOCK_API_ENABLE, or KUMA_MOCK_API_DISABLED 🤯 ?

You can kinda of get around this with browser bookmarklets, but even then (even if you know about these) actually creating these is an extra task you have to think about and do, and even I, working on the GUI every day, all day find it tedious to have to do this.

---

It would be nice if we have an in-page GUI tooling panel in the application itself, giving you access to all the variables you can set using a simple "click click done!" interface to be able to set the GUI up to test during PR previews etc. We have our debug injection capabilities already so it should be relatively easy to make sure this only appears in the PR previews and not the production build. We probably need some kind of dropdown, pop-over panel in the application header where we can "house" all these options/settings.