Enhanced and consistent ui for schemas

[pleek91]

Description

Deployment Parameters, Blocks, and Notifications all use schemas to generate forms. Prior to this refactor Deployments had its own code for work with schemas and Blocks and Notifications had their own.

Motivation

There are a lot of bug fixes an enhancements we'd like to do around schemas. And we would have to apply those changes to both code bases. Refactoring those features to use a unified code base for schema based forms means we can more easily make changes while ensuring a consistent user experience across the application.

How to test

There is a draft PR for the orion-design changes which is where most of the work for this refactor is. To test those changes with this branch

1. Checkout the orion-design branch locally
2. In the orion-design project directory run npm i and then npm run dev
3. Checkout this branch
4. In the orion-ui directory in this project run npm i.
5. Then run npm i @prefecthq/orion-design@.../.../orion-design where .../.../orion-design is the path to the orion design project where you ran npm run dev on step 2.
6. Then run npm run serve. You should be able to see the UI exposed on something like localhost:3000
7. If you're local orion isn't running on localhost:4200 run prefect orion start.

Related issues

Closes https://github.com/PrefectHQ/prefect/issues/6087 Closes https://github.com/PrefectHQ/prefect/issues/6460 Closes #6481 Closes #6287 Resolves https://github.com/PrefectHQ/prefect-email/issues/28

~~Addresses part of https://github.com/PrefectHQ/prefect/issues/6763 but I think we should leave that open as there's more possible enhancements around dateTime handling.~~ Closes https://github.com/PrefectHQ/prefect/issues/6763

[netlify[bot]]

✅ Deploy Preview for prefect-orion ready!

Name	Link
🔨 Latest commit	80c8ace69cca5ed3315f59a7dab7881da35b097a
🔍 Latest deploy log	https://app.netlify.com/sites/prefect-orion/deploys/632b1acbfc594c000883a033
😎 Deploy Preview	https://deploy-preview-6818--prefect-orion.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[zhen0]

Making a list here of related issues:

https://github.com/PrefectHQ/prefect/issues/6763 https://github.com/PrefectHQ/prefect/issues/6481 https://github.com/PrefectHQ/prefect/issues/6460 https://github.com/PrefectHQ/prefect/issues/6287 https://github.com/PrefectHQ/prefect/issues/6087

[pleek91]

Making a list here of related issues:

https://github.com/PrefectHQ/prefect/issues/6763

https://github.com/PrefectHQ/prefect/issues/6481

https://github.com/PrefectHQ/prefect/issues/6460

https://github.com/PrefectHQ/prefect/issues/6287

https://github.com/PrefectHQ/prefect/issues/6087

We should verify each but I believe all of those should be fixed in this feature branch except https://github.com/PrefectHQ/prefect/issues/6763

[anna-geller]

Closes https://github.com/PrefectHQ/prefect/issues/6087

Closes https://github.com/PrefectHQ/prefect/issues/6460

[ahuang11]

Unsure if related to the schema but here are my findings:

1. When I use enum typed field, e.g. smtp_server: SMTPServer = SMTPServer.GMAIL, I see a blank page

2. When a block requires another block, upon adding the new block, it goes to a "block created successfully page" rather than heading back to the original block form, thus all the form's contents are lost.

3. It would be nice to have the settings sorted by required; e.g. Block Name, Schema, and GCP Credentials listed first.

[pleek91]

@ahuang11 2, and 3 are enhancements we should address but not part of this update. 1 is a bug though. Do you mind sharing any errors in your console as well as the schema that's returned from the api for your block?

[ahuang11]

@ahuang11 2, and 3 are enhancements we should address but not part of this update. 1 is a bug though. Do you mind sharing any errors in your console as well as the schema that's returned from the api for your block?

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')
    at setInPath (orion-design.es.js:42374:23)
    at Object.stageInitialValue (orion-design.es.js:43848:5)
    at _useFieldValue (orion-design.es.js:42965:8)
    at useFieldState (orion-design.es.js:42909:52)
    at _useField (orion-design.es.js:43036:82)
    at useField (orion-design.es.js:43030:10)
    at useReactiveField (orion-design.es.js:44426:17)
    at setup (orion-design.es.js:48693:43)
    at callWithErrorHandling (chunk-ELSOFQXQ.js?v=bdf1bfb4:1373:18)

class EmailServerCredentials(Block):
    _block_type_name = "Email Server Credentials"
    _logo_url = "https://images.ctfassets.net/gm98wzqotmnx/3PcxFuO9XUqs7wU9MiUBMg/ca740e27815d15528373aced667f58b9/email__1_.png?h=250"  # noqa

    username: str
    password: SecretStr
    smtp_server: SMTPServer = SMTPServer.GMAIL
    smtp_type: SMTPType = SMTPType.SSL
    smtp_port: Optional[int] = None

EmailServerCredentials.schema()
{'title': 'EmailServerCredentials', 'description': 'Block used to manage generic email server authentication.\nIt is recommended you use a\n[Google App Password](https://support.google.com/accounts/answer/185833)\nif you use Gmail.', 'type': 'object', 'properties': {'username': {'title': 'Username', 'type': 'string'}, 'password': {'title': 'Password', 'type': 'string', 'writeOnly': True, 'format': 'password'}, 'smtp_server': {'default': 'smtp.gmail.com', 'allOf': [{'$ref': '#/definitions/SMTPServer'}]}, 'smtp_type': {'default': 465, 'allOf': [{'$ref': '#/definitions/SMTPType'}]}, 'smtp_port': {'title': 'Smtp Port', 'type': 'integer'}}, 'required': ['username', 'password'], 'block_type_slug': 'email-server-credentials', 'secret_fields': ['password'], 'block_schema_references': {}, 'definitions': {'SMTPServer': {'title': 'SMTPServer', 'description': 'Server used to send email.', 'enum': ['smtp.aol.com', 'smtp.mail.att.net', 'smtp.comcast.net', 'smtp.mail.me.com', 'smtp.gmail.com', 'smtp-mail.outlook.com', 'smtp.mail.yahoo.com']}, 'SMTPType': {'title': 'SMTPType', 'description': 'Protocols used to secure email transmissions.', 'enum': [465, 25]}}}

For context: https://github.com/PrefectHQ/prefect-email/issues/28

[zhen0]

Also resolves https://github.com/PrefectHQ/prefect-email/issues/28

[pleek91]

@znicholasbrown are working on the issues he found sync to try and get this wrapped up today