prefect
prefect copied to clipboard
Enhanced and consistent ui for schemas
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
- Checkout the orion-design branch locally
- In the orion-design project directory run
npm i
and thennpm run dev
- Checkout this branch
- In the
orion-ui
directory in this project runnpm i
. - Then run
npm i @prefecthq/orion-design@.../.../orion-design
where.../.../orion-design
is the path to the orion design project where you rannpm run dev
on step 2. - Then run
npm run serve
. You should be able to see the UI exposed on something likelocalhost:3000
- If you're local orion isn't running on
localhost:4200
runprefect 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
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.
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
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
Closes https://github.com/PrefectHQ/prefect/issues/6087
Closes https://github.com/PrefectHQ/prefect/issues/6460
Unsure if related to the schema but here are my findings:
-
When I use enum typed field, e.g.
smtp_server: SMTPServer = SMTPServer.GMAIL
, I see a blank page -
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.
-
It would be nice to have the settings sorted by required; e.g. Block Name, Schema, and GCP Credentials listed first.
@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 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
![image](https://user-images.githubusercontent.com/40272060/190855929-4696e1cb-9c3e-44a7-ba93-2e91cbd49b23.png)
@znicholasbrown are working on the issues he found sync to try and get this wrapped up today