Migrate ConfigEditor and QueryEditor to the new form styling

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.8.0
+
+- Migrate ConfigEditor and QueryEditor to the new form styling [#211](https://github.com/grafana/x-ray-datasource/pull/211)
+
+- Bump google.golang.org/grpc from 1.54.0 to 1.56.3 in [#210](https://github.com/grafana/x-ray-datasource/pull/210)
+
+- Support Node 18 in [201](https://github.com/grafana/x-ray-datasource/pull/201)
+
 ## 2.7.2
 
 - Fix X-Ray Service Map filter trace list query by @jamesrwhite in https://github.com/grafana/x-ray-datasource/pull/203

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grafana-x-ray-datasource",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "AWS X-Ray data source",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@babel/core": "^7.16.7",
     "@emotion/css": "^11.1.3",
-    "@grafana/aws-sdk": "0.1.2",
+    "@grafana/aws-sdk": "0.3.0",
     "@grafana/data": "9.3.2",
     "@grafana/e2e": "9.3.2",
     "@grafana/e2e-selectors": "9.3.2",
@@ -76,6 +76,7 @@
     "webpack-livereload-plugin": "^3.0.2"
   },
   "dependencies": {
+    "@grafana/experimental": "1.7.3",
     "react-use": "^15.3.4",
     "tslib": "^2.2.0"
   }

src/components/ConfigEditor/ConfigEditor.tsx

@@ -1,17 +1,17 @@
 import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { standardRegions } from './regions';
+import { config } from '@grafana/runtime';
 
 export type Props = DataSourcePluginOptionsEditorProps<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>;
 
-export class ConfigEditor extends PureComponent<Props> {
-  render() {
-    return (
-      <div>
-        <ConnectionConfig {...this.props} standardRegions={standardRegions} />
-        {/* can add x-ray specific things here */}
-      </div>
-    );
-  }
+export function ConfigEditor(props: Props) {
+  const newFormStylingEnabled = config.featureToggles.awsDatasourcesNewFormStyling;
+
+  return (
+    <div className="width-30">
+      <ConnectionConfig {...props} standardRegions={standardRegions} newFormStylingEnabled={newFormStylingEnabled} />
+    </div>
+  );
 }

src/components/QueryEditor/AccountIdDropdown.tsx

@@ -5,10 +5,11 @@ import { TimeRange } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import React from 'react';
 import { InlineFormLabel, MultiSelect } from '@grafana/ui';
-
+import { EditorField } from '@grafana/experimental';
 type Props = {
   datasource: XrayDataSource;
   query: XrayQuery;
+  newFormStylingEnabled?: boolean;
   range?: TimeRange;
   onChange: (items: string[]) => void;
 };
@@ -22,7 +23,20 @@ export const AccountIdDropdown = (props: Props) => {
     return null;
   }
 
-  return (
+  return props.newFormStylingEnabled ? (
+    <EditorField label="AccountId" className="query-keyword" htmlFor="accountId">
+      <MultiSelect
+        id="accountId"
+        options={(accountIds || []).map((accountId: string) => ({
+          value: accountId,
+          label: accountId,
+        }))}
+        value={props.query.accountIds}
+        onChange={(items) => props.onChange(items.map((item) => item.value || ''))}
+        placeholder={'All'}
+      />
+    </EditorField>
+  ) : (
     <div className="gf-form">
       <InlineFormLabel className="query-keyword" width="auto">
         AccountId