Update metadata editor to use JupyterLab's new form editor

[marthacryan]

This PR adds the package rjsf(react JSON schema form - a renderer for showing JSON schema as a form) to the metadata editor for consistency with JupyterLab (moved to using this package in the most recent release with jupyterlab/jupyterlab#11079. Going forward, this will also handle many of the more complex cases for rendering the metadata editor and provide built-in features that will solves issues such as #2269 and #2268.

Screenshots / gifs to come

Todo:

• Still need to address validation failing on some categories and preventing save and close
  - [ ] Update documentation Follow up PR to come
• Clean up look and feel with CSS

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]

a few comments on the code changes since my last review, and I'm building this to test locally atm

[ajbozarth]

UI/UX Review as mentioned above, all tested in Safari:

• The mouseover description shows when mousing over both the title and input area for a filed as well as if you mouse over the description itself. This hides the title for the field below. Unless there's a reason to read it while filling out the field, or to copy/paste the descriptions contents I think a better UX would be to only show when mousing over the title. (@ptitzler option on this?) (it can be seen in the video in bullet 3)
• Show hide icon css not quite right
  
• Form spacing changes on initial mouseover, see video below:

Screen.Recording.2022-05-23.at.4.13.14.PM.mov

• some escaping is going wrong here:
  
• description tooltips are misaligned for code snippet fields, also there is no description for tags (dont know if that's intentional)
  
  
• css for this field looks off
  
• there's no longer button highlighting when mousing over the save button like before

That's all I found on an initial pass, I only played with it for less than an hour

[marthacryan]

• The mouseover description shows when mousing over both the title and input area for a filed as well as if you mouse over the description itself. This hides the title for the field below. Unless there's a reason to read it while filling out the field, or to copy/paste the descriptions contents I think a better UX would be to only show when mousing over the title. (@ptitzler option on this?) (it can be seen in the video in bullet 3)

Yeah this is the current behavior so I figured it was the UX we wanted, but I could see that being a little annoying. If @ptitzler has an opinion let us know!

• Show hide icon css not quite right

Fixed

• Form spacing changes on initial mouseover, see video below:

I'm not able to reproduce this? Maybe we can do a call to debug

• some escaping is going wrong here:

Fixed

• description tooltips are misaligned for code snippet fields, also there is no description for tags (dont know if that's intentional)

Fixed misalignment of tooltips and added tooltip to code field. I don't think tags already had that so not sure if I should add that in?

• css for this field looks off

Fixed the spacing up a little, let me know if you have more input on the style

• there's no longer button highlighting when mousing over the save button like before

Fixed

[ptitzler]

It appears that the required annotation (*) isn't displayed for all required properties, as seen in this code snippet example. Note the discrepancy between the validation messages and the property annotations:

[ptitzler]

In various forms the label styling is inconsistent. For example (small, regular font vs bigger, bold font):

[ptitzler]

It appears that for list-valued properties there are two new buttons displayed (move up, move down) that appear to give the user the ability to reorder list items.

Is this something that could be disabled? While there might be general use cases where order matters, I can't think of one for any of our properties.

Part of the problem is that the list-specific action buttons are rendered in a way that feels too attention grabbing, considering that they don't serve a practical purpose.

The old/existing rendering (shown here for a list-valued pipeline property) of list-specific blends in nicely and doesn't require additional screen real estate:

[ptitzler]

Ageneral observation that the current styling appears to use almost always bold fonts (section headers, property labels, ...) as shown here for runtime configurations:

As a result everything seems to blend in, eliminating the benefits, for example, of section headers that were meant to help the user put labels into proper context. For comparison, here's the current rendering, which is a lot less attention grabbing:

[marthacryan]

Thanks @ptitzler! think I addressed all of those points. I also added those two password fields that hadn't been updated to be detected yet so all the password fields should be working now. I also added the tooltips over an info icon:

This tooltip shows up when the mouse is hovering over the "?" icon

Here's the updated look for the airflow runtime editor:

[ajbozarth]

This LGTM, I gave @marthacryan a couple UI tweaks to follow up on over a Webex that I would consider non-blocking