Cloudwatch: Metrics Query Builder should clear old query (#88950)

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

@@ -5,6 +5,7 @@ import { EditorField, EditorRow, InlineSelect } from '@grafana/experimental';
 import { ConfirmModal, Input, RadioButtonGroup, Space } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../../datasource';
+import { DEFAULT_METRICS_QUERY } from '../../../defaultQueries';
 import useMigratedMetricsQuery from '../../../migrations/useMigratedMetricsQuery';
 import {
   CloudWatchJsonData,
@@ -39,13 +40,13 @@ const editorModes = [
 export const MetricsQueryEditor = (props: Props) => {
   const { query, datasource, extraHeaderElementLeft, extraHeaderElementRight, onChange } = props;
   const [showConfirm, setShowConfirm] = useState(false);
-  const [sqlCodeEditorIsDirty, setSQLCodeEditorIsDirty] = useState(false);
+  const [codeEditorIsDirty, setCodeEditorIsDirty] = useState(false);
   const migratedQuery = useMigratedMetricsQuery(query, props.onChange);
 
   const onEditorModeChange = useCallback(
     (newMetricEditorMode: MetricEditorMode) => {
       if (
-        sqlCodeEditorIsDirty &&
+        codeEditorIsDirty &&
         query.metricQueryType === MetricQueryType.Query &&
         query.metricEditorMode === MetricEditorMode.Code
       ) {
@@ -54,7 +55,7 @@ export const MetricsQueryEditor = (props: Props) => {
       }
       onChange({ ...query, metricEditorMode: newMetricEditorMode });
     },
-    [setShowConfirm, onChange, sqlCodeEditorIsDirty, query]
+    [setShowConfirm, onChange, codeEditorIsDirty, query]
   );
 
   useEffect(() => {
@@ -64,6 +65,14 @@ export const MetricsQueryEditor = (props: Props) => {
         value={metricEditorModes.find((m) => m.value === query.metricQueryType)}
         options={metricEditorModes}
         onChange={({ value }) => {
+          if (
+            codeEditorIsDirty &&
+            query.metricQueryType === MetricQueryType.Search &&
+            query.metricEditorMode === MetricEditorMode.Builder
+          ) {
+            setShowConfirm(true);
+            return;
+          }
           onChange({ ...query, metricQueryType: value });
         }}
       />
@@ -80,13 +89,19 @@ export const MetricsQueryEditor = (props: Props) => {
         <ConfirmModal
           isOpen={showConfirm}
           title="Are you sure?"
-          body="You will lose manual changes done to the query if you go back to the visual builder."
+          body="You will lose changes made to the query if you change to Metric Query Builder mode."
           confirmText="Yes, I am sure."
-          dismissText="No, continue editing the query manually."
+          dismissText="No, continue editing the query."
           icon="exclamation-triangle"
           onConfirm={() => {
             setShowConfirm(false);
-            onChange({ ...query, metricEditorMode: MetricEditorMode.Builder });
+            setCodeEditorIsDirty(false);
+            onChange({
+              ...query,
+              ...DEFAULT_METRICS_QUERY,
+              metricQueryType: MetricQueryType.Query,
+              metricEditorMode: MetricEditorMode.Builder,
+            });
           }}
           onDismiss={() => setShowConfirm(false)}
         />
@@ -99,7 +114,7 @@ export const MetricsQueryEditor = (props: Props) => {
     };
   }, [
     query,
-    sqlCodeEditorIsDirty,
+    codeEditorIsDirty,
     datasource,
     onChange,
     extraHeaderElementLeft,
@@ -119,7 +134,12 @@ export const MetricsQueryEditor = (props: Props) => {
               {...props}
               refId={query.refId}
               metricStat={query}
-              onChange={(metricStat: MetricStat) => props.onChange({ ...query, ...metricStat })}
+              onChange={(metricStat: MetricStat) => {
+                if (!codeEditorIsDirty) {
+                  setCodeEditorIsDirty(true);
+                }
+                props.onChange({ ...query, ...metricStat });
+              }}
             ></MetricStatEditor>
           )}
           {query.metricEditorMode === MetricEditorMode.Code && (
@@ -138,8 +158,8 @@ export const MetricsQueryEditor = (props: Props) => {
               region={query.region}
               sql={query.sqlExpression ?? ''}
               onChange={(sqlExpression) => {
-                if (!sqlCodeEditorIsDirty) {
-                  setSQLCodeEditorIsDirty(true);
+                if (!codeEditorIsDirty) {
+                  setCodeEditorIsDirty(true);
                 }
                 props.onChange({ ...migratedQuery, sqlExpression });
               }}

public/app/plugins/datasource/cloudwatch/defaultQueries.ts

@@ -21,6 +21,7 @@ export const DEFAULT_METRICS_QUERY: Omit<CloudWatchMetricsQuery, 'refId'> = {
   period: '',
   metricQueryType: MetricQueryType.Search,
   metricEditorMode: MetricEditorMode.Builder,
+  sql: undefined,
   sqlExpression: '',
   matchExact: true,
 };