From c0ee94a04d497d192b56efc387ec7db19dd90612 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Tue, 26 Apr 2022 11:28:34 +0200
Subject: [PATCH] Update grafana/experimental and fix Cloudwatch components
 (#48132)

* Update grafana/experimental and fix components

* Simplify
---
 package.json                                         |  2 +-
 .../cloudwatch/components/AnnotationQueryEditor.tsx  | 12 +++++-------
 .../components/MetricStatEditor/MetricStatEditor.tsx |  6 +++---
 .../cloudwatch/components/MetricsQueryEditor.tsx     |  2 +-
 .../SQLBuilderEditor/SQLBuilderSelectRow.tsx         |  9 ++++-----
 .../components/SQLBuilderEditor/SQLOrderByGroup.tsx  |  9 ++++-----
 .../components/PromQueryBuilderOptions.tsx           |  6 +++---
 yarn.lock                                            | 10 +++++-----
 8 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index f29a1f170c9..359c944c8c7 100644
--- a/package.json
+++ b/package.json
@@ -250,7 +250,7 @@
     "@grafana/aws-sdk": "0.0.35",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "^0.0.2-canary.25",
+    "@grafana/experimental": "^0.0.2-canary.30",
     "@grafana/google-sdk": "0.0.3",
     "@grafana/lezer-logql": "^0.0.11",
     "@grafana/runtime": "workspace:*",
diff --git a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
index 72bb082d99e..84660850dc7 100644
--- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
+++ b/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 })
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
index 079b53d3010..db61ea5cd8d 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
+++ b/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) => {
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
index 38f63c9b58f..9b33f26cce2 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
+++ b/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>
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
index 4caa43aa03d..6b1a6781980 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
+++ b/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
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
index 67d24c6811d..ea98f2e2d4f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
+++ b/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 }))}
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
index f4a6b0f141c..f2c395e10c1 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
@@ -1,8 +1,8 @@
 import React, { SyntheticEvent } from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
-import { EditorRow, EditorField } from '@grafana/experimental';
-import { RadioButtonGroup, Select, Switch } from '@grafana/ui';
+import { EditorRow, EditorField, EditorSwitch } from '@grafana/experimental';
+import { RadioButtonGroup, Select } from '@grafana/ui';
 
 import { getQueryTypeChangeHandler, getQueryTypeOptions } from '../../components/PromExploreExtraField';
 import { FORMAT_OPTIONS, INTERVAL_FACTOR_OPTIONS } from '../../components/PromQueryEditor';
@@ -82,7 +82,7 @@ export const PromQueryBuilderOptions = React.memo<Props>(({ query, app, onChange
         </EditorField>
         {shouldShowExemplarSwitch(query, app) && (
           <EditorField label="Exemplars">
-            <Switch value={query.exemplar} onChange={onExemplarChange} />
+            <EditorSwitch value={query.exemplar} onChange={onExemplarChange} />
           </EditorField>
         )}
         {query.intervalFactor && query.intervalFactor > 1 && (
diff --git a/yarn.lock b/yarn.lock
index 89c0142448e..396815c78c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4135,9 +4135,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/experimental@npm:^0.0.2-canary.25":
-  version: 0.0.2-canary.25
-  resolution: "@grafana/experimental@npm:0.0.2-canary.25"
+"@grafana/experimental@npm:^0.0.2-canary.30":
+  version: 0.0.2-canary.30
+  resolution: "@grafana/experimental@npm:0.0.2-canary.30"
   dependencies:
     "@types/uuid": ^8.3.3
     uuid: ^8.3.2
@@ -4145,7 +4145,7 @@ __metadata:
     "@emotion/css": 11.1.3
     react: 17.0.1
     react-select: 5.2.1
-  checksum: 20532d6a1ff1bb7a98db71728bc34474f87663431fef349a53f4673d12b6356336b9250bc85028693e7bbfeec8e468d9910837f4062cb49239d581dc974c55c9
+  checksum: b5b453b9372cde8f89021c50ae1191a2506ebbb069ad6331d22a5c7267ecd8c0db7f9f5fdd9cfab49fafce4e0b6809609e67449b78fe3ccc63cedfeceb64b911
   languageName: node
   linkType: hard
 
@@ -20530,7 +20530,7 @@ __metadata:
     "@grafana/e2e": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
     "@grafana/eslint-config": 3.0.0
-    "@grafana/experimental": ^0.0.2-canary.25
+    "@grafana/experimental": ^0.0.2-canary.30
     "@grafana/google-sdk": 0.0.3
     "@grafana/lezer-logql": ^0.0.11
     "@grafana/runtime": "workspace:*"