Update grafana/experimental and fix Cloudwatch components (#48132)

* Update grafana/experimental and fix components

* Simplify

public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx

@@ -1,8 +1,8 @@
 import React, { ChangeEvent } from 'react';
 
 import { PanelData } from '@grafana/data';
-import { EditorField, EditorHeader, EditorRow, InlineSelect, Space } from '@grafana/experimental';
-import { Input, Switch } from '@grafana/ui';
+import { EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Space } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../datasource';
 import { useRegions } from '../hooks';
@@ -52,7 +52,7 @@ export function AnnotationQueryEditor(props: React.PropsWithChildren<Props>) {
           />
         </EditorField>
         <EditorField label="Enable Prefix Matching" optional={true}>
-          <Switch
+          <EditorSwitch
             value={query.prefixMatching}
             onChange={(e) => {
               onChange({
@@ -62,18 +62,16 @@ export function AnnotationQueryEditor(props: React.PropsWithChildren<Props>) {
             }}
           />
         </EditorField>
-        <EditorField label="Action" optional={true}>
+        <EditorField label="Action" optional={true} disabled={!query.prefixMatching}>
           <Input
-            disabled={!query.prefixMatching}
             value={query.actionPrefix || ''}
             onChange={(event: ChangeEvent<HTMLInputElement>) =>
               onChange({ ...query, actionPrefix: event.target.value })
             }
           />
         </EditorField>
-        <EditorField label="Alarm Name" optional={true}>
+        <EditorField label="Alarm Name" optional={true} disabled={!query.prefixMatching}>
           <Input
-            disabled={!query.prefixMatching}
             value={query.alarmNamePrefix || ''}
             onChange={(event: ChangeEvent<HTMLInputElement>) =>
               onChange({ ...query, alarmNamePrefix: event.target.value })

public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
-import { Select, Switch } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { Dimensions } from '..';
 import { CloudWatchDatasource } from '../../datasource';
@@ -128,7 +128,7 @@ export function MetricStatEditor({
             optional={true}
             tooltip="Only show metrics that exactly match all defined dimension names."
           >
-            <Switch
+            <EditorSwitch
               id={`${query.refId}-cloudwatch-match-exact`}
               value={!!query.matchExact}
               onChange={(e) => {

public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx

@@ -147,6 +147,7 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
             width={26}
             optional
             tooltip="ID can be used to reference other queries in math expressions. The ID can include numbers, letters, and underscore, and must start with a lowercase letter."
+            invalid={!!query.id && !/^$|^[a-z][a-zA-Z0-9_]*$/.test(query.id)}
           >
             <Input
               id={`${query.refId}-cloudwatch-metric-query-editor-id`}
@@ -155,7 +156,6 @@ export class MetricsQueryEditor extends PureComponent<Props, State> {
                 this.onChange({ ...metricsQuery, id: event.target.value })
               }
               type="text"
-              invalid={!!query.id && !/^$|^[a-z][a-zA-Z0-9_]*$/.test(query.id)}
               value={query.id}
             />
           </EditorField>

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, EditorFieldGroup } from '@grafana/experimental';
-import { Select, Switch } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
@@ -87,7 +87,7 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
         </EditorField>
 
         <EditorField label="With schema">
-          <Switch
+          <EditorSwitch
             id={`${query.refId}-cloudwatch-sql-withSchema`}
             value={withSchemaEnabled}
             onChange={(ev) =>
@@ -97,12 +97,11 @@ const SQLBuilderSelectRow: React.FC<SQLBuilderSelectRowProps> = ({ datasource, q
         </EditorField>
 
         {withSchemaEnabled && (
-          <EditorField label="Schema labels">
+          <EditorField label="Schema labels" disabled={!namespace}>
             <Select
               id={`${query.refId}-cloudwatch-sql-schema-label-keys`}
               width="auto"
               isMulti={true}
-              disabled={!namespace}
               value={schemaLabels ? schemaLabels.map(toOption) : null}
               options={dimensionKeys}
               allowCustomValue

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
 
 import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
@@ -30,7 +30,7 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
   return (
     <EditorFieldGroup>
       <EditorField label="Order by" optional width={16}>
-        <>
+        <InputGroup>
           <Select
             aria-label="Order by"
             onChange={({ value }) => value && onQueryChange(setOrderBy(query, value))}
@@ -46,14 +46,13 @@ const SQLOrderByGroup: React.FC<SQLBuilderSelectRowProps> = ({ query, onQueryCha
               onClick={() => onQueryChange(setSql(query, { orderBy: undefined }))}
             />
           )}
-        </>
+        </InputGroup>
       </EditorField>
 
-      <EditorField label="Direction" width={16}>
+      <EditorField label="Direction" disabled={!orderBy} width={16}>
         <Select
           aria-label="Direction"
           inputId="cloudwatch-sql-order-by-direction"
-          disabled={!orderBy}
           value={orderByDirection ? toOption(orderByDirection) : orderByDirections[0]}
           options={appendTemplateVariables(datasource, orderByDirections)}
           onChange={(item) => item && onQueryChange(setSql(query, { orderByDirection: item.value }))}