@grafana/aws-sdk 0.3.5 → 0.4.0

package/dist/esm/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../src/types.ts"],"sourcesContent":["import type { DataSourceJsonData, DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';\n\nexport enum AwsAuthType {\n  Keys = 'keys',\n  Credentials = 'credentials',\n  Default = 'default', // was 'arn',\n  EC2IAMRole = 'ec2_iam_role',\n  /**\n   * @deprecated use default\n   */\n  ARN = 'arn',\n  GrafanaAssumeRole = 'grafana_assume_role'\n}\n\nexport interface AwsAuthDataSourceJsonData extends DataSourceJsonData {\n  authType?: AwsAuthType;\n  assumeRoleArn?: string;\n  externalId?: string;\n  profile?: string; // Credentials profile name, as specified in ~/.aws/credentials\n  defaultRegion?: string; // region if it is not defined by your credentials file\n  endpoint?: string;\n}\n\nexport interface AwsAuthDataSourceSecureJsonData {\n  accessKey?: string;\n  secretKey?: string;\n  sessionToken?: string;\n}\n\nexport type AwsAuthDataSourceSettings = DataSourceSettings<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>;\n\nexport interface ConnectionConfigProps<\n  J extends AwsAuthDataSourceJsonData = AwsAuthDataSourceJsonData,\n  S = AwsAuthDataSourceSecureJsonData\n> extends DataSourcePluginOptionsEditorProps<J, S> {\n  standardRegions?: string[];\n  loadRegions?: () => Promise<string[]>;\n  defaultEndpoint?: string;\n  skipHeader?: boolean;\n  skipEndpoint?: boolean;\n  children?: React.ReactNode;\n  labelWidth?: number;\n  inExperimentalAuthComponent?: boolean;\n  externalId?: string;\n  newFormStylingEnabled?: boolean;\n}\n"],"names":["AwsAuthType"],"mappings":"AAEY,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,aAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,aAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,aAAA,SAAU,CAAA,GAAA,SAAA,CAAA;AACV,EAAAA,aAAA,YAAa,CAAA,GAAA,cAAA,CAAA;AAIb,EAAAA,aAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,aAAA,mBAAoB,CAAA,GAAA,qBAAA,CAAA;AATV,EAAAA,OAAAA,YAAAA,CAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../src/types.ts"],"sourcesContent":["import type { DataSourceJsonData, DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';\n\nexport enum AwsAuthType {\n  Keys = 'keys',\n  Credentials = 'credentials',\n  Default = 'default', // was 'arn',\n  EC2IAMRole = 'ec2_iam_role',\n  /**\n   * @deprecated use default\n   */\n  ARN = 'arn',\n  GrafanaAssumeRole = 'grafana_assume_role'\n}\n\nexport interface AwsAuthDataSourceJsonData extends DataSourceJsonData {\n  authType?: AwsAuthType;\n  assumeRoleArn?: string;\n  externalId?: string;\n  profile?: string; // Credentials profile name, as specified in ~/.aws/credentials\n  defaultRegion?: string; // region if it is not defined by your credentials file\n  endpoint?: string;\n}\n\nexport interface AwsAuthDataSourceSecureJsonData {\n  accessKey?: string;\n  secretKey?: string;\n  sessionToken?: string;\n}\n\nexport type AwsAuthDataSourceSettings = DataSourceSettings<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>;\n\nexport interface ConnectionConfigProps<\n  J extends AwsAuthDataSourceJsonData = AwsAuthDataSourceJsonData,\n  S = AwsAuthDataSourceSecureJsonData\n> extends DataSourcePluginOptionsEditorProps<J, S> {\n  standardRegions?: string[];\n  loadRegions?: () => Promise<string[]>;\n  defaultEndpoint?: string;\n  skipHeader?: boolean;\n  skipEndpoint?: boolean;\n  children?: React.ReactNode;\n  labelWidth?: number;\n  inExperimentalAuthComponent?: boolean;\n  externalId?: string;\n}\n"],"names":["AwsAuthType"],"mappings":"AAEY,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,aAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,aAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,aAAA,SAAU,CAAA,GAAA,SAAA,CAAA;AACV,EAAAA,aAAA,YAAa,CAAA,GAAA,cAAA,CAAA;AAIb,EAAAA,aAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,aAAA,mBAAoB,CAAA,GAAA,qBAAA,CAAA;AATV,EAAAA,OAAAA,YAAAA,CAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;;;;"}

package/dist/index.d.ts

@@ -39,7 +39,6 @@ interface ConnectionConfigProps<J extends AwsAuthDataSourceJsonData = AwsAuthDat
     labelWidth?: number;
     inExperimentalAuthComponent?: boolean;
     externalId?: string;
-    newFormStylingEnabled?: boolean;
 }
 
 declare const DEFAULT_LABEL_WIDTH = 28;
@@ -85,7 +84,6 @@ interface ConfigSelectProps extends DataSourcePluginOptionsEditorProps<AwsAuthDa
     width?: number;
     isOptionDisabled?: () => boolean;
     labelWidth?: number;
-    newFormStylingEnabled?: boolean;
 }
 declare function ConfigSelect(props: ConfigSelectProps): JSX.Element;
 
@@ -105,7 +103,6 @@ declare function InlineInput(props: InlineInputProps): JSX.Element;
 interface ResourceSelectorProps extends SelectCommonProps<string> {
     tooltip?: string;
     hidden?: boolean;
-    newFormStylingEnabled?: boolean;
     value: string | null;
     dependencies?: DependencyList;
     id: string;
@@ -129,7 +126,6 @@ declare enum FillValueOptions {
 declare type FillValueSelectProps<TQuery extends DataQuery> = {
     query: TQuery;
     onChange: (value: TQuery) => void;
-    newFormStylingEnabled?: boolean;
     onRunQuery?: () => void;
 };
 declare function FillValueSelect<TQuery extends DataQuery & Record<string, any>>(props: FillValueSelectProps<TQuery>): JSX.Element;
@@ -172,7 +168,6 @@ interface Props<Datasource extends DataSourceApi<TQuery, JsonData>, TQuery exten
 declare function QueryEditorHeader<Datasource extends DataSourceApi<TQuery, JsonData>, TQuery extends DataQuery, JsonData extends DataSourceJsonData>({ query, showAsyncQueryButtons, extraHeaderElementLeft, extraHeaderElementRight, enableRunButton, onRunQuery, data, cancel, }: Props<Datasource, TQuery, JsonData>): JSX.Element;
 
 declare type FormatSelectProps<TQuery extends DataQuery, FormatOptions> = {
-    newFormStylingEnabled?: boolean;
     id?: string;
     query: TQuery;
     options: Array<SelectableValue<FormatOptions>>;

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');
 
@@ -81,196 +81,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;
@@ -300,8 +110,7 @@ const ConnectionConfig = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   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 +137,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 +159,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 +186,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 +201,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 +213,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,72 +223,64 @@ 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),
         options: regions,
         defaultValue: options.jsonData.defaultRegion,
@@ -504,7 +290,7 @@ const ConnectionConfig = (props) => {
         menuShouldPortal: true
       }
     )
-  ), props.children));
+  )), props.children));
 };
 
 const versionPattern = /^(\d+)(?:\.(\d+))?(?:\.(\d+))?(?:-([0-9A-Za-z\.]+))?/;
@@ -728,7 +514,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 +527,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 +568,6 @@ function ConfigSelect(props) {
     ResourceSelector,
     __spreadValues$4({
       id: props.id,
-      newFormStylingEnabled: props.newFormStylingEnabled,
       label: props.label,
       "data-testid": props["data-testid"],
       onChange: props.onChange,
@@ -971,7 +733,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 +743,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 +786,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 +822,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;