Chore: ESlint import order (#44959)

* Add and configure eslint-plugin-import

* Fix the lint:ts npm command

* Autofix + prettier all the files

* Manually fix remaining files

* Move jquery code in jest-setup to external file to safely reorder imports

* Resolve issue caused by circular dependencies within Prometheus

* Update .betterer.results

* Fix missing // @ts-ignore

* ignore iconBundle.ts

* Fix missing // @ts-ignore

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

@@ -1,5 +1,6 @@
-import React, { FunctionComponent, useState } from 'react';
 import { debounce } from 'lodash';
+import React, { FunctionComponent, useState } from 'react';
+
 import { Input } from '@grafana/ui';
 
 export interface Props {

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

@@ -1,8 +1,9 @@
-import React from 'react';
-import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
 import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
 import { CloudWatchAnnotationQuery } from '../types';
+
 import { AnnotationQueryEditor } from './AnnotationQueryEditor';
 
 const ds = setupMockedDataSource({

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

@@ -1,10 +1,13 @@
 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 { CloudWatchDatasource } from '../datasource';
 import { useRegions } from '../hooks';
 import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from '../types';
+
 import { MetricStatEditor } from './MetricStatEditor';
 
 export type Props = {

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

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 
-import { CloudWatchLogsQuery } from '../types';
 import { PanelData } from '@grafana/data';
 import { Icon } from '@grafana/ui';
+
 import { encodeUrl, AwsUrl } from '../aws_url';
 import { CloudWatchDatasource } from '../datasource';
+import { CloudWatchLogsQuery } from '../types';
 
 interface Props {
   query: CloudWatchLogsQuery;

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

@@ -1,6 +1,8 @@
-import React from 'react';
 import { shallow } from 'enzyme';
+import React from 'react';
+
 import { AwsAuthType } from '@grafana/aws-sdk';
+
 import { ConfigEditor, Props } from './ConfigEditor';
 
 jest.mock('app/features/plugins/datasource_srv', () => ({

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

@@ -1,21 +1,22 @@
 import React, { FC, useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
-import { Input, InlineField } from '@grafana/ui';
+
+import { ConnectionConfig } from '@grafana/aws-sdk';
 import {
   rangeUtil,
   DataSourcePluginOptionsEditorProps,
   onUpdateDatasourceJsonDataOption,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConnectionConfig } from '@grafana/aws-sdk';
-
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { store } from 'app/store/store';
+import { Input, InlineField } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { createWarningNotification } from 'app/core/copy/appNotification';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { store } from 'app/store/store';
 
-import { CloudWatchJsonData, CloudWatchSecureJsonData } from '../types';
 import { CloudWatchDatasource } from '../datasource';
+import { CloudWatchJsonData, CloudWatchSecureJsonData } from '../types';
+
 import { XrayLinkConfig } from './XrayLinkConfig';
 
 export type Props = DataSourcePluginOptionsEditorProps<CloudWatchJsonData, CloudWatchSecureJsonData>;

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

@@ -1,9 +1,10 @@
-import React from 'react';
 import { fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { Dimensions } from '..';
 import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
 import { CloudWatchMetricsQuery } from '../../types';
-import userEvent from '@testing-library/user-event';
-import { Dimensions } from '..';
 
 const ds = setupMockedDataSource({
   variables: [],

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

@@ -1,9 +1,12 @@
 import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
+
 import { SelectableValue } from '@grafana/data';
 import { EditorList } from '@grafana/experimental';
+
 import { CloudWatchDatasource } from '../../datasource';
 import { Dimensions as DimensionsType, DimensionsQuery } from '../../types';
+
 import { FilterItem } from './FilterItem';
 
 export interface Props {

public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx

@@ -1,12 +1,15 @@
-import React, { FunctionComponent, useMemo } from 'react';
 import { css, cx } from '@emotion/css';
+import React, { FunctionComponent, useMemo } from 'react';
 import { useAsyncFn } from 'react-use';
+
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
 import { InputGroup, AccessoryButton } from '@grafana/experimental';
 import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
+
 import { CloudWatchDatasource } from '../../datasource';
 import { Dimensions, DimensionsQuery } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
+
 import { DimensionFilterCondition } from './Dimensions';
 
 export interface Props {

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

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
+
 import { InlineFormLabel } from '@grafana/ui';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {

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

@@ -1,10 +1,12 @@
-import React, { PureComponent } from 'react';
-import { stripIndent, stripIndents } from 'common-tags';
-import { QueryEditorHelpProps } from '@grafana/data';
-import Prism from 'prismjs';
-import tokenizer from '../syntax';
-import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 import { css, cx } from '@emotion/css';
+import { stripIndent, stripIndents } from 'common-tags';
+import Prism from 'prismjs';
+import React, { PureComponent } from 'react';
+
+import { QueryEditorHelpProps } from '@grafana/data';
+import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
+
+import tokenizer from '../syntax';
 import { CloudWatchQuery } from '../types';
 
 interface QueryExample {

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

@@ -1,14 +1,16 @@
 // Libraries
+import { css } from '@emotion/css';
 import React, { memo } from 'react';
 
 // Types
 import { AbsoluteTimeRange, QueryEditorProps } from '@grafana/data';
 import { InlineFormLabel } from '@grafana/ui';
+
 import { CloudWatchDatasource } from '../datasource';
 import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
-import { CloudWatchLogsQueryField } from './LogsQueryField';
+
 import CloudWatchLink from './CloudWatchLink';
-import { css } from '@emotion/css';
+import { CloudWatchLogsQueryField } from './LogsQueryField';
 
 type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData> & {
   allowCustomValue?: boolean;

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

@@ -1,14 +1,16 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { CloudWatchLogsQueryField } from './LogsQueryField';
-import { ExploreId } from '../../../../types';
-import { DescribeLogGroupsRequest } from '../types';
-import { SelectableValue } from '@grafana/data';
-// eslint-disable-next-line lodash/import-scope
-import _, { DebouncedFunc } from 'lodash';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { shallow } from 'enzyme';
+import _, { DebouncedFunc } from 'lodash'; // eslint-disable-line lodash/import-scope
+import React from 'react';
 import { act } from 'react-dom/test-utils';
+
+import { SelectableValue } from '@grafana/data';
+
+import { ExploreId } from '../../../../types';
 import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
+import { DescribeLogGroupsRequest } from '../types';
+
+import { CloudWatchLogsQueryField } from './LogsQueryField';
 
 jest
   .spyOn(_, 'debounce')

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

@@ -1,7 +1,10 @@
-// Libraries
-import React, { ReactNode } from 'react';
+import { css } from '@emotion/css';
 import { intersectionBy, debounce, unionBy } from 'lodash';
+import { LanguageMap, languages as prismLanguages } from 'prismjs';
+import React, { ReactNode } from 'react';
+import { Editor, Node, Plugin } from 'slate';
 
+import { AbsoluteTimeRange, QueryEditorProps, SelectableValue } from '@grafana/data';
 import {
   BracesPlugin,
   LegacyForms,
@@ -11,25 +14,18 @@ import {
   TypeaheadInput,
   TypeaheadOutput,
 } from '@grafana/ui';
-
-// Utils & Services
-// dom also includes Element polyfills
-import { Editor, Node, Plugin } from 'slate';
-import syntax from '../syntax';
-
-// Types
-import { AbsoluteTimeRange, QueryEditorProps, SelectableValue } from '@grafana/data';
-import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
-import { CloudWatchDatasource } from '../datasource';
-import { LanguageMap, languages as prismLanguages } from 'prismjs';
-import { CloudWatchLanguageProvider } from '../language_provider';
-import { css } from '@emotion/css';
-import { ExploreId } from 'app/types';
-import { dispatch } from 'app/store/store';
+import { InputActionMeta } from '@grafana/ui/src/components/Select/types';
 import { notifyApp } from 'app/core/actions';
 import { createErrorNotification } from 'app/core/copy/appNotification';
-import { InputActionMeta } from '@grafana/ui/src/components/Select/types';
+import { dispatch } from 'app/store/store';
+import { ExploreId } from 'app/types';
+
+import { CloudWatchDatasource } from '../datasource';
+import { CloudWatchLanguageProvider } from '../language_provider';
+import syntax from '../syntax';
+import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
 import { getStatsGroups } from '../utils/query/getStatsGroups';
+
 import QueryHeader from './QueryHeader';
 
 export interface CloudWatchLogsQueryFieldProps

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

@@ -1,10 +1,12 @@
-import React, { useCallback, useRef } from 'react';
-import { CodeEditor, Monaco } from '@grafana/ui';
-import language from '../metric-math/definition';
-import { registerLanguage } from '../monarch/register';
 import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
-import { TRIGGER_SUGGEST } from '../monarch/commands';
+import React, { useCallback, useRef } from 'react';
+
+import { CodeEditor, Monaco } from '@grafana/ui';
+
 import { CloudWatchDatasource } from '../datasource';
+import language from '../metric-math/definition';
+import { TRIGGER_SUGGEST } from '../monarch/commands';
+import { registerLanguage } from '../monarch/register';
 
 export interface Props {
   onChange: (query: string) => void;

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

@@ -1,8 +1,10 @@
+import { groupBy } from 'lodash';
 import React, { useMemo } from 'react';
+
 import { MetadataInspectorProps } from '@grafana/data';
+
 import { CloudWatchDatasource } from '../datasource';
 import { CloudWatchQuery, CloudWatchJsonData } from '../types';
-import { groupBy } from 'lodash';
 
 export type Props = MetadataInspectorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>;
 

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

@@ -1,10 +1,11 @@
-import React from 'react';
 import { fireEvent, render, screen, act, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 import selectEvent from 'react-select-event';
+
+import { MetricStatEditor } from '..';
 import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
 import { CloudWatchMetricsQuery } from '../../types';
-import userEvent from '@testing-library/user-event';
-import { MetricStatEditor } from '..';
 
 const ds = setupMockedDataSource({
   variables: [],

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

@@ -1,12 +1,14 @@
 import React from 'react';
+
+import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
 import { Select, Switch } from '@grafana/ui';
+
 import { Dimensions } from '..';
 import { CloudWatchDatasource } from '../../datasource';
 import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
 import { CloudWatchMetricsQuery } from '../../types';
 import { appendTemplateVariables, toOption } from '../../utils/utils';
-import { SelectableValue } from '@grafana/data';
 
 export type Props = {
   query: CloudWatchMetricsQuery;

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

@@ -1,14 +1,17 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
 import { render, screen, act } from '@testing-library/react';
+import React from 'react';
 import selectEvent from 'react-select-event';
+import renderer from 'react-test-renderer';
+
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { TemplateSrv } from 'app/features/templating/template_srv';
-import { MetricsQueryEditor, normalizeQuery, Props } from './MetricsQueryEditor';
-import { CloudWatchDatasource } from '../datasource';
+
 import { CustomVariableModel, initialVariableModelState } from '../../../../features/variables/types';
+import { CloudWatchDatasource } from '../datasource';
 import { CloudWatchJsonData, MetricEditorMode, MetricQueryType } from '../types';
 
+import { MetricsQueryEditor, normalizeQuery, Props } from './MetricsQueryEditor';
+
 const setup = () => {
   const instanceSettings = {
     jsonData: { defaultRegion: 'us-east-1' },

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

@@ -1,7 +1,9 @@
 import React, { ChangeEvent, PureComponent } from 'react';
+
 import { QueryEditorProps } from '@grafana/data';
 import { EditorField, EditorRow, Space } from '@grafana/experimental';
 import { Input } from '@grafana/ui';
+
 import { CloudWatchDatasource } from '../datasource';
 import { isMetricsQuery } from '../guards';
 import {
@@ -11,9 +13,11 @@ import {
   MetricEditorMode,
   MetricQueryType,
 } from '../types';
-import { Alias, MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from './';
+
 import QueryHeader from './QueryHeader';
 
+import { Alias, MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from './';
+
 export type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>;
 
 interface State {

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

@@ -1,8 +1,10 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types';
+
 import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
+import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types';
+
 import MetricsQueryHeader from './MetricsQueryHeader';
 
 const ds = setupMockedDataSource({

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui';
 import { InlineSelect, FlexItem } from '@grafana/experimental';
+import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../datasource';
 import { CloudWatchMetricsQuery, CloudWatchQuery, MetricEditorMode, MetricQueryType } from '../types';

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

@@ -1,9 +1,12 @@
 import React, { PureComponent } from 'react';
+
 import { QueryEditorProps, ExploreMode } from '@grafana/data';
-import { CloudWatchJsonData, CloudWatchQuery } from '../types';
+
 import { CloudWatchDatasource } from '../datasource';
-import { MetricsQueryEditor } from './MetricsQueryEditor';
+import { CloudWatchJsonData, CloudWatchQuery } from '../types';
+
 import LogsQueryEditor from './LogsQueryEditor';
+import { MetricsQueryEditor } from './MetricsQueryEditor';
 
 export type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>;
 

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

@@ -1,7 +1,9 @@
-import React from 'react';
 import { render, screen, waitFor, act } from '@testing-library/react';
-import { CloudWatchLogsQuery, CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types';
+import React from 'react';
+
 import { setupMockedDataSource } from '../__mocks__/CloudWatchDataSource';
+import { CloudWatchLogsQuery, CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types';
+
 import QueryHeader from './QueryHeader';
 
 const ds = setupMockedDataSource({

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

@@ -1,11 +1,13 @@
-import { ExploreMode, SelectableValue } from '@grafana/data';
-import { EditorHeader, InlineSelect } from '@grafana/experimental';
 import { pick } from 'lodash';
 import React from 'react';
 
+import { ExploreMode, SelectableValue } from '@grafana/data';
+import { EditorHeader, InlineSelect } from '@grafana/experimental';
+
 import { CloudWatchDatasource } from '../datasource';
 import { useRegions } from '../hooks';
 import { CloudWatchQuery, CloudWatchQueryMode } from '../types';
+
 import MetricsQueryHeader from './MetricsQueryHeader';
 
 interface QueryHeaderProps {

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

@@ -1,9 +1,10 @@
-import React from 'react';
-import { SQLBuilderEditor } from '..';
 import { render, screen, waitFor } from '@testing-library/react';
-import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+import React from 'react';
+
+import { SQLBuilderEditor } from '..';
 import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
 import { QueryEditorExpressionType, QueryEditorPropertyType } from '../../expressions';
+import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
 
 const { datasource } = setupMockedDataSource();
 

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

@@ -1,9 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
+
 import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
 import { Input } from '@grafana/ui';
+
 import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
 import { CloudWatchDatasource } from '../../datasource';
 import { CloudWatchMetricsQuery } from '../../types';
+
 import SQLBuilderSelectRow from './SQLBuilderSelectRow';
 import SQLFilter from './SQLFilter';
 import SQLGroupBy from './SQLGroupBy';

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

@@ -1,9 +1,12 @@
-import React from 'react';
-import { selectOptionInTest } from '@grafana/ui';
 import { act, render, screen } from '@testing-library/react';
-import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+import React from 'react';
+
+import { selectOptionInTest } from '@grafana/ui';
+
 import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
 import { QueryEditorExpressionType, QueryEditorPropertyType } from '../../expressions';
+import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+
 import SQLBuilderSelectRow from './SQLBuilderSelectRow';
 
 const { datasource } = setupMockedDataSource();

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

@@ -1,12 +1,15 @@
 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 { STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
 import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
 import { CloudWatchMetricsQuery } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
+
 import {
   getMetricNameFromExpression,
   getNamespaceFromExpression,

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

@@ -1,14 +1,17 @@
 import React, { useMemo, useState } from 'react';
 import { useAsyncFn } from 'react-use';
+
 import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
+
 import { COMPARISON_OPERATORS, EQUALS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
 import { QueryEditorExpressionType, QueryEditorOperatorExpression, QueryEditorPropertyType } from '../../expressions';
 import { useDimensionKeys } from '../../hooks';
 import { CloudWatchMetricsQuery } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
+
 import {
   getFlattenedFilters,
   getMetricNameFromExpression,

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.test.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
 import selectEvent from 'react-select-event';
-import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+
 import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
 import { createArray, createGroupBy } from '../../__mocks__/sqlUtils';
+import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
+
 import SQLGroupBy from './SQLGroupBy';
 
 const { datasource } = setupMockedDataSource();

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

@@ -1,11 +1,14 @@
 import React, { useMemo, useState } from 'react';
+
 import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
+
 import { CloudWatchDatasource } from '../../datasource';
 import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions';
 import { useDimensionKeys } from '../../hooks';
 import { CloudWatchMetricsQuery } from '../../types';
+
 import {
   getFlattenedGroupBys,
   getMetricNameFromExpression,

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

@@ -1,11 +1,14 @@
 import React from 'react';
+
 import { SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, EditorField, EditorFieldGroup } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
+
 import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
 import { CloudWatchMetricsQuery } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
+
 import { setOrderBy, setSql } from './utils';
 
 interface SQLBuilderSelectRowProps {

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/utils.ts

@@ -1,4 +1,3 @@
-import { SelectableValue } from './../../../../../../../packages/grafana-data/src/types/select';
 import { SCHEMA } from '../../cloudwatch-sql/language';
 import {
   QueryEditorExpressionType,
@@ -10,6 +9,8 @@ import {
 } from '../../expressions';
 import { SQLExpression, CloudWatchMetricsQuery, Dimensions } from '../../types';
 
+import { SelectableValue } from './../../../../../../../packages/grafana-data/src/types/select';
+
 export function getMetricNameFromExpression(selectExpression: SQLExpression['select']): string | undefined {
   return selectExpression?.parameters?.[0].name;
 }

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

@@ -1,8 +1,10 @@
-import React, { FunctionComponent, useCallback, useEffect } from 'react';
 import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
+import React, { FunctionComponent, useCallback, useEffect } from 'react';
+
 import { CodeEditor, Monaco } from '@grafana/ui';
-import { CloudWatchDatasource } from '../datasource';
+
 import language from '../cloudwatch-sql/definition';
+import { CloudWatchDatasource } from '../datasource';
 import { TRIGGER_SUGGEST } from '../monarch/commands';
 import { registerLanguage } from '../monarch/register';
 

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

@@ -1,8 +1,10 @@
 import { render, screen, waitFor, within } from '@testing-library/react';
 import React from 'react';
 import { select } from 'react-select-event';
-import { Dimensions, VariableQueryType } from '../../types';
+
 import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
+import { Dimensions, VariableQueryType } from '../../types';
+
 import { VariableQueryEditor, Props } from './VariableQueryEditor';
 
 const defaultQuery = {

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

@@ -1,14 +1,16 @@
 import React from 'react';
 
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
-import { VariableTextField } from './VariableTextField';
+import { InlineField } from '@grafana/ui';
+
+import { Dimensions } from '..';
 import { CloudWatchDatasource } from '../../datasource';
 import { useDimensionKeys, useMetrics, useNamespaces, useRegions } from '../../hooks';
-import { CloudWatchJsonData, CloudWatchQuery, VariableQuery, VariableQueryType } from '../../types';
 import { migrateVariableQuery } from '../../migrations';
+import { CloudWatchJsonData, CloudWatchQuery, VariableQuery, VariableQueryType } from '../../types';
+
 import { VariableQueryField } from './VariableQueryField';
-import { Dimensions } from '..';
-import { InlineField } from '@grafana/ui';
+import { VariableTextField } from './VariableTextField';
 
 export type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData, VariableQuery>;
 

public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryField.tsx

@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { SelectableValue } from '@grafana/data';
 import { InlineField, Select } from '@grafana/ui';
-import React from 'react';
+
 import { VariableQueryType } from '../../types';
 
 const LABEL_WIDTH = 20;

public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx

@@ -1,6 +1,7 @@
-import { InlineField, Input } from '@grafana/ui';
 import React, { FC, useState } from 'react';
 
+import { InlineField, Input } from '@grafana/ui';
+
 const LABEL_WIDTH = 20;
 
 interface VariableTextFieldProps {

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

@@ -1,10 +1,10 @@
-import React from 'react';
 import { css } from '@emotion/css';
-import { Alert, InlineField, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
+import React from 'react';
 
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { GrafanaTheme2 } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
+import { Alert, InlineField, useStyles2 } from '@grafana/ui';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   infoText: css`