Migrate ConfigEditor and QueryEditor to the new form styling

[idastambuk]

This migrates X-Ray Config and Query editors to the new form styling. The old styling is preserved and the new one is added under a feature toggle: awsDatasourcesNewFormStyling

Config Editor:

• Upgraded aws-sdk-react to use the new ConnectionConfig and passed the feature flag value

Query Editor

Screen.Recording.2023-10-26.at.4.06.40.PM.mov

• changed the order of the input so that query type comes the first at the top. Since, depending on the query types, different form inputs are rendered, I found this looked better and less 'jumpy' above the query type selector.
• uses Editor components from grafana/experimental
• moved the old styling components to {componentName}Old so they can be easily removed when we remove the feature flag
• tested in grafana 8.4.11, 9.4.7 and latest main

[sarahzinger]

Sounds neat, saw one thing that I think would be nice to fix if we can! Thanks for taking this on!

[sarahzinger]

just curious if this div is still necessary with the new components

[idastambuk]

It is, since the new components adjust to the width of the container which we have to define at the top here. I don't think we have a fixed width requirement for our datasources (as long as it's not more that 578px, but that looks way too wide)

[sarahzinger]

So I think as a best practice we want to make sure that regardless of the configuration of the machine running these tests, we are properly testing both scenarios. We don't want to make an assumption for example that grafanaRuntime.config.featureToggles.awsDatasourcesNewFormStyling is false by default, because you might have it enabled on your machine. We also want to have some kind of clean up task so that there's no risk that this config could be set differently than expected in other tests down the line. Here's one way you could do that:

const originalValue = grafanaRuntime.config.featureToggles.awsDatasourcesNewFormStyling;

afterEach(() => {
    grafanaRuntime.config.featureToggles.awsDatasourcesNewFormStyling = originalValue
})

describe("it should render properly when awsDatasourcesNewFormStyling is enabled, () => {
    grafanaRuntime.config.featureToggles.awsDatasourcesNewFormStyling = true
    run()
})

describe("it should render properly when awsDatasourcesNewFormStyling is disabled, () => {
    grafanaRuntime.config.featureToggles.awsDatasourcesNewFormStyling = false
    run()
})

[idastambuk]

Fixed it! Followed the same process like in Redshift and Athena if that sounds good :)