CloudWatch/Metrics: Fix error with expression only query (#24362)

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

@@ -70,6 +70,37 @@ describe('QueryEditor', () => {
     });
     });
   });
   });
 
 
+  it('normalizes query on mount', async () => {
+    const { act } = renderer;
+    const props = setup();
+    // This does not actually even conform to the prop type but this happens on initialisation somehow
+    props.query = {
+      queryMode: 'Metrics',
+      apiMode: 'Metrics',
+      refId: '',
+      expression: '',
+      matchExact: true,
+    } as any;
+    await act(async () => {
+      renderer.create(<MetricsQueryEditor {...props} />);
+    });
+    expect((props.onChange as jest.Mock).mock.calls[0][0]).toEqual({
+      namespace: '',
+      metricName: '',
+      expression: '',
+      dimensions: {},
+      region: 'default',
+      id: '',
+      alias: '',
+      statistics: ['Average'],
+      period: '',
+      queryMode: 'Metrics',
+      apiMode: 'Metrics',
+      refId: '',
+      matchExact: true,
+    });
+  });
+
   describe('should use correct default values', () => {
   describe('should use correct default values', () => {
     it('when region is null is display default in the label', async () => {
     it('when region is null is display default in the label', async () => {
       // @ts-ignore strict null error TS2345: Argument of type '() => Promise<void>' is not assignable to parameter of type '() => void | undefined'.
       // @ts-ignore strict null error TS2345: Argument of type '() => Promise<void>' is not assignable to parameter of type '() => void | undefined'.

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

@@ -53,6 +53,12 @@ export const normalizeQuery = ({
 export class MetricsQueryEditor extends PureComponent<Props, State> {
 export class MetricsQueryEditor extends PureComponent<Props, State> {
   state: State = { showMeta: false };
   state: State = { showMeta: false };
 
 
+  componentDidMount(): void {
+    const metricsQuery = this.props.query as CloudWatchMetricsQuery;
+    const query = normalizeQuery(metricsQuery);
+    this.props.onChange(query);
+  }
+
   onChange(query: CloudWatchMetricsQuery) {
   onChange(query: CloudWatchMetricsQuery) {
     const { onChange, onRunQuery } = this.props;
     const { onChange, onRunQuery } = this.props;
     onChange(query);
     onChange(query);