Cloud Monitoring: Use new annotation API (#49026)

* remove angular code

* format annotation on backend

* format time with time type instead of string

* update annotation query tests

* update get alignment data function

* update annotation query editor

* add annotation query editor test

* update struct

* add tests

* remove extracted function

* remove non-null assertion

* remove stray commented out console.log

* fix jest haste map warning

* add alignment period

* add AnnotationMetricQuery type

public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { createMockDatasource } from '../__mocks__/cloudMonitoringDatasource';
+import { createMockQuery } from '../__mocks__/cloudMonitoringQuery';
+
+import { AnnotationQueryEditor } from './AnnotationQueryEditor';
+
+describe('AnnotationQueryEditor', () => {
+  it('renders correctly', async () => {
+    const onChange = jest.fn();
+    const onRunQuery = jest.fn();
+    const datasource = createMockDatasource();
+    const query = createMockQuery();
+    render(<AnnotationQueryEditor onChange={onChange} onRunQuery={onRunQuery} query={query} datasource={datasource} />);
+
+    expect(await screen.findByLabelText('Project')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Service')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Metric name')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Group by')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Group by function')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Alignment function')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Alignment period')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Alias by')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Title')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Text')).toBeInTheDocument();
+    expect(await screen.findByText('Annotation Query Format')).toBeInTheDocument();
+  });
+
+  it('can set the title', async () => {
+    const onChange = jest.fn();
+    const onRunQuery = jest.fn();
+    const datasource = createMockDatasource();
+    const query = createMockQuery();
+    render(<AnnotationQueryEditor onChange={onChange} onRunQuery={onRunQuery} query={query} datasource={datasource} />);
+
+    const title = 'user-title';
+    await userEvent.type(screen.getByLabelText('Title'), title);
+    expect(await screen.findByDisplayValue(title)).toBeInTheDocument();
+  });
+
+  it('can set the text', async () => {
+    const onChange = jest.fn();
+    const onRunQuery = jest.fn();
+    const datasource = createMockDatasource();
+    const query = createMockQuery();
+    render(<AnnotationQueryEditor onChange={onChange} onRunQuery={onRunQuery} query={query} datasource={datasource} />);
+
+    const text = 'user-text';
+    await userEvent.type(screen.getByLabelText('Text'), text);
+    expect(await screen.findByDisplayValue(text)).toBeInTheDocument();
+  });
+});