Add reference documentation link to MetadataEditor

[ajbozarth]

Fixes #838

Adds a button to the top right of the MetadataEditor when a schema
has reference_url defined in it's uihints

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

[elyra-bot]

Thanks for making a pull request to Elyra!

To try out this branch on binder, follow this link:

[ajbozarth]

I'll upload a screenshot in a bit (forgot to take one before doing clean-jupyterlab.sh)

Though this would be fine to merge as is (thus not wip), I'm not 100% setting on the look and feel of the button, specifically the text and the text color. Should the text be different and should I change the text color to white or would it then be unclear that it's a link? @ptitzler your feedback on those items would be most appreciated.

[ajbozarth]

Screenshots

Airflow light mode

kfp dark mode

Code Snippet dark mode

Runtime images light mode with mouse over

airflow dark mode with mouse over

[ptitzler]

• Works as expected
• Light theme: good
• Labels: Perhaps we should add a text property to the schema that used used as label if it is defined? The current approach that concatenated the title property and the static string 'Documentation' does sound a bit odd to me due to the plural. e.g. "Runtime images documentation". Something like "Learn about STATIC_STRING" might work better but also leads to a translation problem.
• Dark theme: the blue (?) font color of the doc link doesn't really provide a good contrast. It's much better when hovering over the link.

[ajbozarth]

Dark theme: the blue (?) font color of the doc link doesn't really provide a good contrast. It's much better when hovering over the link.

I was going to argue that this was the color of all link text in lab, but upon checking I found that there was a css var for link text color we weren't using, so I updated both the editor and widget to use the lighter shade of blue, screenshots below:

[lresende]

Also, do we really want to have "ALL UPPERCASE" link content?

[ajbozarth]

@lresende how does this look instead? I switch from a Button to a Link (this was actually my original implementation)

Note: I haven't pushed this change yet

Screenshots of light/dark w&w/o mouseover

[ptitzler]

Food for thought - maybe make this part of the "description" to take into consideration how LTR consumers scan a page (Top left to bottom right)

All fields marked with an asterisk are required. [Learn more ...]

This way the critical information is all in one place.

[ajbozarth]

This way the critical information is all in one place.

I like this, let me try that and make some new screenshots

[ajbozarth]

@ptitzler is this what you were thinking?

[ptitzler]

Yep! I think this is much cleaner. Even though the dark theme is still not my cup of tea 😉

[ajbozarth]

I've pushed the changes as seen in my previous commit

[ptitzler]

LGTM. Tested code snippets, runtime configuration, and runtime image in light and dark theme