web: add custom navbar button support

[milas]

Render Global:nav buttons in the global nav. User-defined buttons
show up first, then the built-ins (Tilt version, snapshot, help,
account).

The backend enforces that Global:nav buttons have an icon defined,
though there is no practical way on either backend or frontend to
determine that the icon name is valid; if it's not a real material
icon, you'll get a blank space, so it should be fairly straightforward
to debug regardless.

Log output (via backend) ends up in the (global) span viewable by
"All Resources" in the web interface.

[milas]

I'm going to be honest, I am not a wizard with styled-components. I tried to do what I thought was logical here in terms of making the ApiButton component re-usable since it has the logic for analytics + update API with last click (to actually trigger the command).

I basically had to convert a couple places to mix-ins so that I could re-use them across styled components. I also made the ApiButton by default render $icon $text but if children are passed in via props, that takes precedence for content, so that the nav version can send its custom MenuButtonLabel for the hover text.

If this is all totally wrong/insane and there's a better way to do things, let me know and I can happily re-work this PR!

[nicks]

i wonder if it makes sense to always disable the button if pathBuilder.isSnapshot(), so the button doesn't do anything in snapshots

[nicks]

i am...slightly worried about the multi-dimensional venn diagram of mixins. I'm not sure I have a better suggestion right now.

My instinct is that React component composition is great for expressing UI hierarchy (i.e., box A visually contains box B).

We probably shouldn't be using it for multiple-inheritance of functionality and data-flow (in particular, ApiButton and InstrumentedButton are examples of this pattern).

but that pattern wasn't introduced in this PR, so i think it's fine to punt on this for now and Han + Lizz + I can talk more about it next week

[milas]

multi-dimensional venn diagram

Yeah, that was precisely my concern - in no world is this sane, but I wasn't sure of a good alternative that wouldn't spiral scope. My only other thought was not share components at all but have some sort of CreateAPIButtonClickHandler function they could both use since it's really the onClick logic we need to share, but that also felt very un-React.

[milas]

Had to rebase for API changes, but committed SVG changes independently as 03e3ce7. I did have to pull in a new small package to handle safely creating <svg> DOM elements dynamically. (Can't just <img src="data:..." /> because then you can't style with CSS, so plain path SVGs won't get automatically colored for the UI theme.)

[milas]

Actually, hold on - I'll back out those changes from this PR and open a separate PR with just SVG support 😬

[milas]

Sorry for Git chaos here, just wanted to unbundle the changes - this is now the same as when originally approved minus dealing with codegen merge conflicts. See #4725 for SVG support.