@grafana/aws-sdk 0.3.5 → 0.4.1

package/dist/index.js

@@ -6,8 +6,8 @@ var React = require('react');
 var ui = require('@grafana/ui');
 var data = require('@grafana/data');
 var runtime = require('@grafana/runtime');
-var experimental = require('@grafana/experimental');
 var css = require('@emotion/css');
+var experimental = require('@grafana/experimental');
 var lodash = require('lodash');
 var asyncQueryData = require('@grafana/async-query-data');
 
@@ -22,16 +22,25 @@ const standardRegions = [
   "ap-northeast-2",
   "ap-northeast-3",
   "ap-south-1",
+  "ap-south-2",
   "ap-southeast-1",
   "ap-southeast-2",
+  "ap-southeast-3",
+  "ap-southeast-4",
   "ca-central-1",
+  "ca-west-1",
   "cn-north-1",
   "cn-northwest-1",
   "eu-central-1",
+  "eu-central-2",
   "eu-north-1",
+  "eu-south-1",
+  "eu-south-2",
   "eu-west-1",
   "eu-west-2",
   "eu-west-3",
+  "il-central-1",
+  "me-central-1",
   "me-south-1",
   "sa-east-1",
   "us-east-1",
@@ -81,196 +90,6 @@ const assumeRoleInstructionsStyle = css.css({
   maxWidth: "715px"
 });
 
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const NewConnectionConfig = (_a) => {
-  var _b = _a, {
-    isARNInstructionsOpen,
-    setIsARNInstructionsOpen,
-    awsAssumeRoleEnabled,
-    currentProvider,
-    awsAllowedAuthProviders,
-    skipHeader,
-    regions
-  } = _b, props = __objRest(_b, [
-    "isARNInstructionsOpen",
-    "setIsARNInstructionsOpen",
-    "awsAssumeRoleEnabled",
-    "currentProvider",
-    "awsAllowedAuthProviders",
-    "skipHeader",
-    "regions"
-  ]);
-  var _a2, _b2, _c, _d, _e, _f, _g;
-  const options = props.options;
-  return /* @__PURE__ */ React__default["default"].createElement("div", { "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSection, { title: skipHeader ? "" : "Connection Details", "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Authentication" }, /* @__PURE__ */ React__default["default"].createElement(
-    ui.Field,
-    {
-      label: "Authentication Provider",
-      description: "Specify which AWS credentials chain to use.",
-      htmlFor: "authProvider"
-    },
-    /* @__PURE__ */ React__default["default"].createElement(
-      ui.Select,
-      {
-        inputId: "authProvider",
-        value: currentProvider,
-        options: awsAuthProviderOptions.filter((opt) => awsAllowedAuthProviders.includes(opt.value)),
-        defaultValue: options.jsonData.authType,
-        onChange: (option) => {
-          data.onUpdateDatasourceJsonDataOptionSelect(props, "authType")(option);
-        },
-        menuShouldPortal: true
-      }
-    )
-  ), options.jsonData.authType === "credentials" && /* @__PURE__ */ React__default["default"].createElement(
-    ui.Field,
-    {
-      label: "Credentials Profile Name",
-      description: "Credentials profile name, as specified in ~/.aws/credentials, leave blank for default.",
-      htmlFor: "credentialsProfileName"
-    },
-    /* @__PURE__ */ React__default["default"].createElement(
-      ui.Input,
-      {
-        id: "credentialsProfileName",
-        placeholder: "default",
-        value: options.jsonData.profile,
-        onChange: data.onUpdateDatasourceJsonDataOption(props, "profile")
-      }
-    )
-  ), options.jsonData.authType === "keys" && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.Field, { label: "Access Key ID", htmlFor: "accessKeyId" }, ((_a2 = props.options.secureJsonFields) == null ? void 0 : _a2.accessKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured", id: "accessKeyId" }), /* @__PURE__ */ React__default["default"].createElement(
-    ui.ToolbarButton,
-    {
-      icon: "edit",
-      tooltip: "Edit Access Key ID",
-      type: "button",
-      onClick: data.onUpdateDatasourceResetOption(props, "accessKey")
-    }
-  )) : /* @__PURE__ */ React__default["default"].createElement(
-    ui.Input,
-    {
-      id: "accessKeyId",
-      value: (_c = (_b2 = options.secureJsonData) == null ? void 0 : _b2.accessKey) != null ? _c : "",
-      onChange: data.onUpdateDatasourceSecureJsonDataOption(props, "accessKey")
-    }
-  )), /* @__PURE__ */ React__default["default"].createElement(ui.Field, { label: "Secret Access Key", htmlFor: "secretKey" }, ((_d = props.options.secureJsonFields) == null ? void 0 : _d.secretKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured" }), /* @__PURE__ */ React__default["default"].createElement(
-    ui.ToolbarButton,
-    {
-      id: "secretKey",
-      icon: "edit",
-      type: "button",
-      tooltip: "Edit Secret Access Key",
-      onClick: data.onUpdateDatasourceResetOption(props, "secretKey")
-    }
-  )) : /* @__PURE__ */ React__default["default"].createElement(
-    ui.Input,
-    {
-      id: "secretKey",
-      value: (_f = (_e = options.secureJsonData) == null ? void 0 : _e.secretKey) != null ? _f : "",
-      onChange: data.onUpdateDatasourceSecureJsonDataOption(props, "secretKey")
-    }
-  )))), /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Assume Role" }, options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement("div", { className: assumeRoleInstructionsStyle }, /* @__PURE__ */ React__default["default"].createElement(
-    ui.Collapse,
-    {
-      label: "How to create an IAM role for grafana to assume:",
-      collapsible: true,
-      isOpen: isARNInstructionsOpen,
-      onToggle: () => setIsARNInstructionsOpen(!isARNInstructionsOpen)
-    },
-    /* @__PURE__ */ React__default["default"].createElement("ol", null, /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "1. Create a new IAM role in the AWS console, and select ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Another AWS account"), " as the", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Trusted entity"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "2. Enter the account ID of the Grafana account that has permission to assume this role:", /* @__PURE__ */ React__default["default"].createElement("code", null, " 008923505280 "), " and check the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Require external ID"), " box.")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "3. Enter the following external ID:", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, props.externalId || "External Id is currently unavailable"), " and click", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Next"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "4. Add any required permissions you would like Grafana to be able to access on your behalf. For more details on our permissions please", " ", /* @__PURE__ */ React__default["default"].createElement(
-      "a",
-      {
-        href: "https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/",
-        target: "_blank",
-        rel: "noreferrer"
-      },
-      "read through our documentation"
-    ), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "5. Give the role a name and description, and click ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Create role"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "6. Copy the ARN of the role you just created and paste it into the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Assume Role ARN"), " ", "field below.")))
-  )), awsAssumeRoleEnabled && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
-    ui.Field,
-    {
-      htmlFor: "assumeRoleArn",
-      label: "Assume Role ARN",
-      description: "Optional. Specifying the ARN of a role will ensure that the\n                  selected authentication provider is used to assume the role rather than the\n                  credentials directly."
-    },
-    /* @__PURE__ */ React__default["default"].createElement(
-      ui.Input,
-      {
-        id: "assumeRoleArn",
-        placeholder: "arn:aws:iam:*",
-        value: options.jsonData.assumeRoleArn || "",
-        onChange: data.onUpdateDatasourceJsonDataOption(props, "assumeRoleArn")
-      }
-    )
-  ), options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement(
-    ui.Field,
-    {
-      htmlFor: "externalId",
-      label: "External ID",
-      description: "If you are assuming a role in another account, that has been created with an external ID, specify the external ID here."
-    },
-    /* @__PURE__ */ React__default["default"].createElement(
-      ui.Input,
-      {
-        id: "externalId",
-        placeholder: "External ID",
-        value: options.jsonData.externalId || "",
-        onChange: data.onUpdateDatasourceJsonDataOption(props, "externalId")
-      }
-    )
-  ))), /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Additional Settings" }, !props.skipEndpoint && options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement(
-    ui.Field,
-    {
-      label: "Endpoint",
-      description: "Optionally, specify a custom endpoint for the service",
-      htmlFor: "endpoint"
-    },
-    /* @__PURE__ */ React__default["default"].createElement(
-      ui.Input,
-      {
-        id: "endpoint",
-        placeholder: (_g = props.defaultEndpoint) != null ? _g : "https://{service}.{region}.amazonaws.com",
-        value: options.jsonData.endpoint || "",
-        onChange: data.onUpdateDatasourceJsonDataOption(props, "endpoint")
-      }
-    )
-  ), /* @__PURE__ */ React__default["default"].createElement(
-    ui.Field,
-    {
-      label: "Default Region",
-      description: "Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.",
-      htmlFor: "defaultRegion"
-    },
-    /* @__PURE__ */ React__default["default"].createElement(
-      ui.Select,
-      {
-        inputId: "defaultRegion",
-        value: regions.find((region) => region.value === options.jsonData.defaultRegion),
-        options: regions,
-        defaultValue: options.jsonData.defaultRegion,
-        allowCustomValue: true,
-        onChange: data.onUpdateDatasourceJsonDataOptionSelect(props, "defaultRegion"),
-        formatCreateLabel: (r) => `Use region: ${r}`,
-        menuShouldPortal: true
-      }
-    )
-  )), props.children));
-};
-
 var __defProp$7 = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
@@ -297,11 +116,10 @@ const isAwsAuthType = (value) => {
   return typeof value === "string" && awsAuthProviderOptions.some((opt) => opt.value === value);
 };
 const ConnectionConfig = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const [isARNInstructionsOpen, setIsARNInstructionsOpen] = React.useState(false);
   const [regions, setRegions] = React.useState((props.standardRegions || standardRegions).map(toOption));
-  const { loadRegions, onOptionsChange, skipHeader = false, skipEndpoint = false } = props;
-  const { labelWidth = DEFAULT_LABEL_WIDTH, options, inExperimentalAuthComponent } = props;
+  const { loadRegions, onOptionsChange, skipHeader = false, skipEndpoint = false, options } = props;
   let profile = options.jsonData.profile;
   if (profile === void 0) {
     profile = options.database;
@@ -328,30 +146,18 @@ const ConnectionConfig = (props) => {
     }
     loadRegions().then((regions2) => setRegions(regions2.map(toOption)));
   }, [loadRegions]);
-  const inputWidth = inExperimentalAuthComponent ? "width-20" : "width-30";
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(
-    NewConnectionConfig,
-    __spreadValues$7({
-      currentProvider,
-      awsAllowedAuthProviders,
-      isARNInstructionsOpen,
-      setIsARNInstructionsOpen,
-      awsAssumeRoleEnabled,
-      regions
-    }, props)
-  ) : /* @__PURE__ */ React__default["default"].createElement(ui.FieldSet, { label: skipHeader ? "" : "Connection Details", "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(
-    ui.InlineField,
+  return /* @__PURE__ */ React__default["default"].createElement("div", { "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSection, { title: skipHeader ? "" : "Connection Details", "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Authentication" }, /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
     {
       label: "Authentication Provider",
-      labelWidth,
-      tooltip: "Specify which AWS credentials chain to use.",
-      htmlFor: "authenticationProvider"
+      description: "Specify which AWS credentials chain to use.",
+      htmlFor: "authProvider"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       ui.Select,
       {
-        inputId: "authenticationProvider",
-        className: inputWidth,
+        "aria-label": "Authentication Provider",
+        inputId: "authProvider",
         value: currentProvider,
         options: awsAuthProviderOptions.filter((opt) => awsAllowedAuthProviders.includes(opt.value)),
         defaultValue: options.jsonData.authType,
@@ -362,24 +168,22 @@ const ConnectionConfig = (props) => {
       }
     )
   ), options.jsonData.authType === "credentials" && /* @__PURE__ */ React__default["default"].createElement(
-    ui.InlineField,
+    ui.Field,
     {
       label: "Credentials Profile Name",
-      labelWidth,
-      tooltip: "Credentials profile name, as specified in ~/.aws/credentials, leave blank for default.",
+      description: "Credentials profile name, as specified in ~/.aws/credentials, leave blank for default.",
       htmlFor: "credentialsProfileName"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       ui.Input,
       {
         id: "credentialsProfileName",
-        className: inputWidth,
         placeholder: "default",
-        value: profile,
+        value: options.jsonData.profile,
         onChange: data.onUpdateDatasourceJsonDataOption(props, "profile")
       }
     )
-  ), options.jsonData.authType === "keys" && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Access Key ID", htmlFor: "accessKeyId", labelWidth }, ((_b = props.options.secureJsonFields) == null ? void 0 : _b.accessKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, { className: inputWidth }, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured" }), /* @__PURE__ */ React__default["default"].createElement(
+  ), options.jsonData.authType === "keys" && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.Field, { label: "Access Key ID", htmlFor: "accessKeyId" }, ((_b = props.options.secureJsonFields) == null ? void 0 : _b.accessKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured", id: "accessKeyId" }), /* @__PURE__ */ React__default["default"].createElement(
     ui.ToolbarButton,
     {
       icon: "edit",
@@ -391,13 +195,13 @@ const ConnectionConfig = (props) => {
     ui.Input,
     {
       id: "accessKeyId",
-      className: inputWidth,
       value: (_d = (_c = options.secureJsonData) == null ? void 0 : _c.accessKey) != null ? _d : "",
       onChange: data.onUpdateDatasourceSecureJsonDataOption(props, "accessKey")
     }
-  )), /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Secret Access Key", htmlFor: "secretAccessKey", labelWidth }, ((_e = props.options.secureJsonFields) == null ? void 0 : _e.secretKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, { className: inputWidth }, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured" }), /* @__PURE__ */ React__default["default"].createElement(
+  )), /* @__PURE__ */ React__default["default"].createElement(ui.Field, { label: "Secret Access Key", htmlFor: "secretKey" }, ((_e = props.options.secureJsonFields) == null ? void 0 : _e.secretKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured" }), /* @__PURE__ */ React__default["default"].createElement(
     ui.ToolbarButton,
     {
+      id: "secretKey",
       icon: "edit",
       type: "button",
       tooltip: "Edit Secret Access Key",
@@ -406,12 +210,11 @@ const ConnectionConfig = (props) => {
   )) : /* @__PURE__ */ React__default["default"].createElement(
     ui.Input,
     {
-      id: "secretAccessKey",
-      className: inputWidth,
+      id: "secretKey",
       value: (_g = (_f = options.secureJsonData) == null ? void 0 : _f.secretKey) != null ? _g : "",
       onChange: data.onUpdateDatasourceSecureJsonDataOption(props, "secretKey")
     }
-  ))), options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement("div", { className: assumeRoleInstructionsStyle }, /* @__PURE__ */ React__default["default"].createElement(
+  )))), /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Assume Role" }, options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement("div", { className: assumeRoleInstructionsStyle }, /* @__PURE__ */ React__default["default"].createElement(
     ui.Collapse,
     {
       label: "How to create an IAM role for grafana to assume:",
@@ -419,7 +222,7 @@ const ConnectionConfig = (props) => {
       isOpen: isARNInstructionsOpen,
       onToggle: () => setIsARNInstructionsOpen(!isARNInstructionsOpen)
     },
-    /* @__PURE__ */ React__default["default"].createElement("ol", null, /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "1. Create a new IAM role in the AWS console, and select ", /* @__PURE__ */ React__default["default"].createElement("code", null, "AWS account"), " as the Trusted entity, and select ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Another AWS account"), " as the account.")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "2. Enter the account ID of the Grafana account that has permission to assume this role:", /* @__PURE__ */ React__default["default"].createElement("code", null, " 008923505280 "), " and check the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Require external ID"), " box.")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "3. Enter the following external ID:", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, props.externalId || "External Id is currently unavailable"), " and click", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Next"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "4. Add any required permissions you would like Grafana to be able to access on your behalf. For more details on our permissions please", " ", /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement("ol", null, /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "1. Create a new IAM role in the AWS console, and select ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Another AWS account"), " as the", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Trusted entity"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "2. Enter the account ID of the Grafana account that has permission to assume this role:", /* @__PURE__ */ React__default["default"].createElement("code", null, " 008923505280 "), " and check the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Require external ID"), " box.")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "3. Enter the following external ID:", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, props.externalId || "External Id is currently unavailable"), " and click", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Next"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "4. Add any required permissions you would like Grafana to be able to access on your behalf. For more details on our permissions please", " ", /* @__PURE__ */ React__default["default"].createElement(
       "a",
       {
         href: "https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/",
@@ -429,73 +232,68 @@ const ConnectionConfig = (props) => {
       "read through our documentation"
     ), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "5. Give the role a name and description, and click ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Create role"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "6. Copy the ARN of the role you just created and paste it into the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Assume Role ARN"), " ", "field below.")))
   )), awsAssumeRoleEnabled && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
-    ui.InlineField,
+    ui.Field,
     {
+      htmlFor: "assumeRoleArn",
       label: "Assume Role ARN",
-      labelWidth,
-      tooltip: "Optionally, specify the ARN of a role to assume. Specifying a role here will ensure that the selected authentication provider is used to assume the specified role rather than using the credentials directly. Leave blank if you don't need to assume a role at all",
-      htmlFor: "assumeRoleArn"
+      description: "Optional. Specifying the ARN of a role will ensure that the\n                     selected authentication provider is used to assume the role rather than the\n                     credentials directly."
     },
     /* @__PURE__ */ React__default["default"].createElement(
       ui.Input,
       {
         id: "assumeRoleArn",
-        className: inputWidth,
         placeholder: "arn:aws:iam:*",
         value: options.jsonData.assumeRoleArn || "",
         onChange: data.onUpdateDatasourceJsonDataOption(props, "assumeRoleArn")
       }
     )
   ), options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement(
-    ui.InlineField,
+    ui.Field,
     {
+      htmlFor: "externalId",
       label: "External ID",
-      labelWidth,
-      tooltip: "If you are assuming a role in another account, that has been created with an external ID, specify the external ID here.",
-      htmlFor: "externalId"
+      description: "If you are assuming a role in another account, that has been created with an external ID, specify the external ID here."
     },
     /* @__PURE__ */ React__default["default"].createElement(
       ui.Input,
       {
         id: "externalId",
-        className: inputWidth,
         placeholder: "External ID",
         value: options.jsonData.externalId || "",
         onChange: data.onUpdateDatasourceJsonDataOption(props, "externalId")
       }
     )
-  )), !skipEndpoint && options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement(
-    ui.InlineField,
+  ))), /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Additional Settings" }, !skipEndpoint && options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
     {
       label: "Endpoint",
-      labelWidth,
-      tooltip: "Optionally, specify a custom endpoint for the service",
+      description: "Optionally, specify a custom endpoint for the service",
       htmlFor: "endpoint"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       ui.Input,
       {
         id: "endpoint",
-        className: inputWidth,
         placeholder: (_h = props.defaultEndpoint) != null ? _h : "https://{service}.{region}.amazonaws.com",
         value: options.jsonData.endpoint || "",
         onChange: data.onUpdateDatasourceJsonDataOption(props, "endpoint")
       }
     )
   ), /* @__PURE__ */ React__default["default"].createElement(
-    ui.InlineField,
+    ui.Field,
     {
       label: "Default Region",
-      labelWidth,
-      tooltip: "Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.",
+      description: "Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.",
       htmlFor: "defaultRegion"
     },
     /* @__PURE__ */ React__default["default"].createElement(
       ui.Select,
       {
         inputId: "defaultRegion",
-        className: inputWidth,
-        value: regions.find((region) => region.value === options.jsonData.defaultRegion),
+        value: (_i = regions.find((region) => region.value === options.jsonData.defaultRegion)) != null ? _i : options.jsonData.defaultRegion ? {
+          label: options.jsonData.defaultRegion,
+          value: options.jsonData.defaultRegion
+        } : void 0,
         options: regions,
         defaultValue: options.jsonData.defaultRegion,
         allowCustomValue: true,
@@ -504,7 +302,7 @@ const ConnectionConfig = (props) => {
         menuShouldPortal: true
       }
     )
-  ), props.children));
+  )), props.children));
 };
 
 const versionPattern = /^(\d+)(?:\.(\d+))?(?:\.(\d+))?(?:-([0-9A-Za-z\.]+))?/;
@@ -728,7 +526,7 @@ function ResourceSelector(props) {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(
     ui.Select,
     __spreadProps$4(__spreadValues$5({}, props), {
       id: props.id,
@@ -741,30 +539,7 @@ function ResourceSelector(props) {
       onOpenMenu: () => props.fetch && onClick(),
       menuShouldPortal: true
     })
-  ) : /* @__PURE__ */ React__default["default"].createElement(
-    ui.InlineField,
-    {
-      label: props.label,
-      labelWidth: props.labelWidth,
-      tooltip: props.tooltip,
-      hidden: props.hidden,
-      htmlFor: props.id
-    },
-    /* @__PURE__ */ React__default["default"].createElement("div", { "data-testid": props["data-testid"], title: props.title }, /* @__PURE__ */ React__default["default"].createElement(
-      ui.Select,
-      __spreadProps$4(__spreadValues$5({}, props), {
-        id: props.id,
-        inputId: props.id,
-        "aria-label": props.label,
-        options,
-        onChange,
-        isLoading,
-        className: props.className || "min-width-6",
-        onOpenMenu: () => props.fetch && onClick(),
-        menuShouldPortal: true
-      })
-    ))
-  ));
+  );
 }
 
 var __defProp$4 = Object.defineProperty;
@@ -805,7 +580,6 @@ function ConfigSelect(props) {
     ResourceSelector,
     __spreadValues$4({
       id: props.id,
-      newFormStylingEnabled: props.newFormStylingEnabled,
       label: props.label,
       "data-testid": props["data-testid"],
       onChange: props.onChange,
@@ -927,7 +701,9 @@ function QueryEditorHeader({
       onRunQuery,
       enableRun: enableRunButton,
       query,
-      onCancelQuery: cancel,
+      onCancelQuery: (target) => {
+        cancel == null ? void 0 : cancel(target);
+      },
       state: data$1 == null ? void 0 : data$1.state
     }
   ) : /* @__PURE__ */ React__default["default"].createElement(
@@ -971,7 +747,7 @@ function FormatSelect(props) {
     }));
     (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
   };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(
     ui.Select,
     {
       "aria-label": "Format data frames as",
@@ -981,17 +757,7 @@ function FormatSelect(props) {
       onChange: onChangeFormat,
       menuShouldPortal: true
     }
-  ) : /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Format as", labelWidth: 11 }, /* @__PURE__ */ React__default["default"].createElement(
-    ui.Select,
-    {
-      "aria-label": "Format as",
-      options: props.options,
-      value: props.query.format,
-      onChange: onChangeFormat,
-      className: "width-12",
-      menuShouldPortal: true
-    }
-  )));
+  );
 }
 
 var __defProp$1 = Object.defineProperty;
@@ -1034,8 +800,8 @@ const SelectableFillValueOptions = [
   }
 ];
 function FillValueSelect(props) {
-  var _a, _b, _c, _d, _e, _f;
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(experimental.EditorField, { label: "Fill with", tooltip: "value to fill missing points", htmlFor: "fillWith" }, /* @__PURE__ */ React__default["default"].createElement(
+  var _a, _b, _c;
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(experimental.EditorField, { label: "Fill with", tooltip: "value to fill missing points", htmlFor: "fillWith" }, /* @__PURE__ */ React__default["default"].createElement(
     ui.Select,
     {
       id: "fillWith",
@@ -1070,40 +836,7 @@ function FillValueSelect(props) {
         return (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
       }
     }
-  ))) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Fill value", tooltip: "value to fill missing points" }, /* @__PURE__ */ React__default["default"].createElement(
-    ui.Select,
-    {
-      "aria-label": "Fill value",
-      options: SelectableFillValueOptions,
-      value: (_e = (_d = props.query.fillMode) == null ? void 0 : _d.mode) != null ? _e : 0 /* Previous */,
-      onChange: ({ value }) => {
-        var _a2;
-        props.onChange(__spreadProps$1(__spreadValues$1({}, props.query), {
-          fillMode: __spreadProps$1(__spreadValues$1({}, props.query.fillMode), { mode: value })
-        }));
-        (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
-      },
-      className: "width-12",
-      menuShouldPortal: true
-    }
-  )), ((_f = props.query.fillMode) == null ? void 0 : _f.mode) === 2 /* Value */ && /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Value", labelWidth: 11 }, /* @__PURE__ */ React__default["default"].createElement(
-    ui.Input,
-    {
-      type: "number",
-      "aria-label": "Value",
-      value: props.query.fillMode.value,
-      onChange: ({ currentTarget }) => props.onChange(__spreadProps$1(__spreadValues$1({}, props.query), {
-        fillMode: {
-          mode: 2 /* Value */,
-          value: currentTarget.valueAsNumber
-        }
-      })),
-      onBlur: () => {
-        var _a2;
-        return (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
-      }
-    }
-  ))));
+  )));
 }
 
 var __defProp = Object.defineProperty;