This is a part of migration to the new saga design system, namely using components from grafana/ui or the experimental components from /experimental. There are two parts to this, migrating query editor components and migrating config editor components, let me know if you'd rather have them split into two. Resource Selector cannot be split in the way I chose to do it, so I'm submitting a PR for both.
Thank you @aangelisc for all the support on this one!
Config Editor migration:
Before & After
(in Redshift Config editor)
What was done:
updated Grafana dependencies to 9.4.9. They will be updated as part of this epic to 10 afaik, since there needs to be some work done to migrate away from grafana/toolkit (deprecated in 10)
Connection Config:
replaced InlineFields with Fields from grafana/ui
removed fixed widths for the labels/fields from the config, as the width can be adjusted wherever the config is included. This means we no longer have to define a separate width especially for Auth
removed tooltips in favor of descriptions (as this is the recommendation). Some descriptions look a bit busy, but I chose consistency instead of having a combination of tooltips and descriptions.
Separated the auth part into 3 ConfigSubSections, Authentication, Assume Role and Additional Settings to break the form up a little bit. It made it look a bit busier, so if anyone feels strongly about removing this, I'd be happy to.
Added a Divider component to separate Config and datasource-specific fields. The Divider component is in grafana/ui>10. For this reason, I copied the logic from Azure Data Explorer (thanks @aangelisc!) that supports versions lower than 10. However, since our repo deps haven't been updated to v10, I had to comment the import for now. After we migrate away from grafana/toolkit, upgrade to Node 18 and upgrade grafana deps to 10, this can be included. Task here
removed the InlineInput component, as it will no longer be used in plugins
since ResourceSelector can be used in both Config editors and Query editors, whose fields are supposed to be wrapped in different components (Field as parent for config editor fields, and EditorField for query editor fields), I only left the Select component in the render. I'm still passing it the aria-label (for testing), id (for a11y).
I removed the "hidden" prop since we can hide the component from Field and EditorField props.
did the same thing for FormatSelect. However, since FillValueSelect wraps a few components, I wrapped those in . Theoretically, it can be used in the config editor, but it isn't currently, so I'm ok with leaving like this and improving it if we ever need it for something else
removed fixed widths for the labels/fields, like in the config
changed the labels a bit to make them more clear (taking suggestions for any I missed!)
This is what the query editor looks like in Redshift now. The changes from this PR are only with regards to the fields, not the layout. The layout changes are Redshift-specific.
This is a part of migration to the new saga design system, namely using components from grafana/ui or the experimental components from /experimental. There are two parts to this, migrating query editor components and migrating config editor components, let me know if you'd rather have them split into two. Resource Selector cannot be split in the way I chose to do it, so I'm submitting a PR for both.
Thank you @aangelisc for all the support on this one!
Config Editor migration:
Before & After (in Redshift Config editor)
What was done:
Connection Config:
Authentication
,Assume Role
andAdditional Setting
s to break the form up a little bit. It made it look a bit busier, so if anyone feels strongly about removing this, I'd be happy to.Query Editor components (ResourceSelector, FillValueSelect, FormatSelect)
This is what the query editor looks like in Redshift now. The changes from this PR are only with regards to the fields, not the layout. The layout changes are Redshift-specific.