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/influxdb/components/ConfigEditor.test.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import { shallow } from 'enzyme';
+import React from 'react';
+
 import ConfigEditor, { Props } from './ConfigEditor';
 
 jest.mock('lodash', () => {

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

@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react';
 import { uniqueId } from 'lodash';
+import React, { PureComponent } from 'react';
+
 import {
   DataSourcePluginOptionsEditorProps,
   SelectableValue,
@@ -11,6 +12,7 @@ import {
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
 import { Alert, DataSourceHttpSettings, InfoBox, InlineField, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
+
 const { Input, SecretFormField } = LegacyForms;
 import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
 

public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx

@@ -1,7 +1,8 @@
-import React, { PureComponent } from 'react';
-import { InfluxQuery } from '../types';
-import { SelectableValue } from '@grafana/data';
 import { cx, css } from '@emotion/css';
+import React, { PureComponent } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
 import {
   InlineFormLabel,
   LinkButton,
@@ -11,8 +12,9 @@ import {
   CodeEditorSuggestionItem,
   CodeEditorSuggestionItemKind,
 } from '@grafana/ui';
-import { getTemplateSrv } from '@grafana/runtime';
+
 import InfluxDatasource from '../datasource';
+import { InfluxQuery } from '../types';
 
 type Props = {
   onChange: (query: InfluxQuery) => void;

public/app/plugins/datasource/influxdb/components/InfluxStartPage.tsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react';
+
 import { QueryEditorHelpProps } from '@grafana/data';
+
 import InfluxCheatSheet from './InfluxCheatSheet';
 
 export default class InfluxStartPage extends PureComponent<QueryEditorHelpProps> {

public/app/plugins/datasource/influxdb/components/QueryEditor.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
 import { css } from '@emotion/css';
+import React from 'react';
+
 import { QueryEditorProps } from '@grafana/data';
-import { InfluxOptions, InfluxQuery } from '../types';
+
 import InfluxDatasource from '../datasource';
+import { buildRawQuery } from '../queryUtils';
+import { InfluxOptions, InfluxQuery } from '../types';
+
 import { FluxQueryEditor } from './FluxQueryEditor';
+import { QueryEditorModeSwitcher } from './QueryEditorModeSwitcher';
 import { RawInfluxQLEditor } from './RawInfluxQLEditor';
 import { Editor as VisualInfluxQLEditor } from './VisualInfluxQLEditor/Editor';
-import { QueryEditorModeSwitcher } from './QueryEditorModeSwitcher';
-import { buildRawQuery } from '../queryUtils';
 
 type Props = QueryEditorProps<InfluxDatasource, InfluxQuery, InfluxOptions>;
 

public/app/plugins/datasource/influxdb/components/QueryEditorModeSwitcher.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+
 import { Button, ConfirmModal } from '@grafana/ui';
 
 type Props = {

public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.test.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import React from 'react';
+
 import { selectOptionInTest } from '@grafana/ui';
-import { RawInfluxQLEditor } from './RawInfluxQLEditor';
+
 import { InfluxQuery } from '../types';
 
+import { RawInfluxQLEditor } from './RawInfluxQLEditor';
+
 const query: InfluxQuery = {
   refId: 'A',
   query: 'test query 1',

public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+
 import { TextArea, InlineFormLabel, Input, Select, HorizontalGroup } from '@grafana/ui';
+
 import { InfluxQuery } from '../types';
+
+import { RESULT_FORMATS, DEFAULT_RESULT_FORMAT } from './constants';
 import { useShadowedState } from './useShadowedState';
 import { useUniqueId } from './useUniqueId';
-import { RESULT_FORMATS, DEFAULT_RESULT_FORMAT } from './constants';
 
 type Props = {
   query: InfluxQuery;

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

@@ -1,6 +1,9 @@
 import React, { PureComponent } from 'react';
-import InfluxDatasource from '../datasource';
+
 import { InlineFormLabel, TextArea } from '@grafana/ui';
+
+import InfluxDatasource from '../datasource';
+
 import { FluxQueryEditor } from './FluxQueryEditor';
 
 interface Props {

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/AddButton.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { SelectableValue } from '@grafana/data';
+
 import { Seg } from './Seg';
 import { unwrap } from './unwrap';
 

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tags.test.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import { InfluxQuery } from '../../types';
-import InfluxDatasource from '../../datasource';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Editor } from './Editor';
+import React from 'react';
+
+import InfluxDatasource from '../../datasource';
 import * as mockedMeta from '../../influxQLMetadataQuery';
+import { InfluxQuery } from '../../types';
+
+import { Editor } from './Editor';
 
 jest.mock('../../influxQLMetadataQuery', () => {
   return {

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.test.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
-import { InfluxQuery } from '../../types';
-import InfluxDatasource from '../../datasource';
 import { render } from '@testing-library/react';
+import React from 'react';
+
+import InfluxDatasource from '../../datasource';
+import { InfluxQuery } from '../../types';
+
 import { Editor } from './Editor';
 
 // we mock the @grafana/ui components we use to make sure they just show their "value".

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx

@@ -1,12 +1,11 @@
+import { css } from '@emotion/css';
 import React, { useMemo } from 'react';
-import { InfluxQuery, InfluxQueryTag } from '../../types';
+
+import { GrafanaTheme2 } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
+import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui';
+
 import InfluxDatasource from '../../datasource';
-import { FromSection } from './FromSection';
-import { TagsSection } from './TagsSection';
-import { PartListSection } from './PartListSection';
-import { OrderByTimeSection } from './OrderByTimeSection';
-import { InputSection } from './InputSection';
 import {
   getAllMeasurementsForTags,
   getAllPolicies,
@@ -23,14 +22,18 @@ import {
   changeSelectPart,
   changeGroupByPart,
 } from '../../queryUtils';
-import { FormatAsSection } from './FormatAsSection';
+import { InfluxQuery, InfluxQueryTag } from '../../types';
 import { DEFAULT_RESULT_FORMAT } from '../constants';
-import { getNewSelectPartOptions, getNewGroupByPartOptions, makePartList } from './partListUtils';
-import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
-import { css } from '@emotion/css';
 import { useUniqueId } from '../useUniqueId';
 
+import { FormatAsSection } from './FormatAsSection';
+import { FromSection } from './FromSection';
+import { InputSection } from './InputSection';
+import { OrderByTimeSection } from './OrderByTimeSection';
+import { PartListSection } from './PartListSection';
+import { TagsSection } from './TagsSection';
+import { getNewSelectPartOptions, getNewGroupByPartOptions, makePartList } from './partListUtils';
+
 type Props = {
   query: InfluxQuery;
   onChange: (query: InfluxQuery) => void;

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FormatAsSection.tsx

@@ -1,10 +1,13 @@
-import { Select } from '@grafana/ui';
 import { cx } from '@emotion/css';
-import { ResultFormat } from '../../types';
 import React from 'react';
-import { unwrap } from './unwrap';
+
+import { Select } from '@grafana/ui';
+
+import { ResultFormat } from '../../types';
 import { RESULT_FORMATS } from '../constants';
+
 import { paddingRightClass } from './styles';
+import { unwrap } from './unwrap';
 
 type Props = {
   inputId?: string;

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/FromSection.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Seg } from './Seg';
 import { toSelectableValue } from './toSelectableValue';
 

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/InputSection.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
 import { cx } from '@emotion/css';
+import React from 'react';
+
 import { Input } from '@grafana/ui';
+
 import { useShadowedState } from '../useShadowedState';
+
 import { paddingRightClass } from './styles';
 
 type Props = {

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/OrderByTimeSection.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
 import { cx } from '@emotion/css';
+import React from 'react';
+
 import { SelectableValue } from '@grafana/data';
-import { unwrap } from './unwrap';
 import { Select } from '@grafana/ui';
+
 import { paddingRightClass } from './styles';
+import { unwrap } from './unwrap';
 
 type Mode = 'ASC' | 'DESC';
 

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/PartListSection.tsx

@@ -1,11 +1,13 @@
-import React, { useMemo } from 'react';
 import { cx, css } from '@emotion/css';
-import { MenuItem, WithContextMenu, MenuGroup, useTheme2 } from '@grafana/ui';
+import React, { useMemo } from 'react';
+
 import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
-import { Seg } from './Seg';
-import { unwrap } from './unwrap';
-import { toSelectableValue } from './toSelectableValue';
+import { MenuItem, WithContextMenu, MenuGroup, useTheme2 } from '@grafana/ui';
+
 import { AddButton } from './AddButton';
+import { Seg } from './Seg';
+import { toSelectableValue } from './toSelectableValue';
+import { unwrap } from './unwrap';
 
 export type PartParams = Array<{
   value: string;

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react';
-import debouncePromise from 'debounce-promise';
 import { cx, css } from '@emotion/css';
-import { SelectableValue } from '@grafana/data';
+import debouncePromise from 'debounce-promise';
+import React, { useState, useEffect } from 'react';
 import { useAsyncFn } from 'react-use';
+
+import { SelectableValue } from '@grafana/data';
 import { InlineLabel, Select, AsyncSelect, Input } from '@grafana/ui';
+
 import { useShadowedState } from '../useShadowedState';
 
 // this file is a simpler version of `grafana-ui / SegmentAsync.tsx`

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.test.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
 import { fireEvent, render, screen, act, waitFor } from '@testing-library/react';
-import { TagsSection } from './TagsSection';
+import React from 'react';
+
 import { InfluxQueryTag } from '../../types';
 
+import { TagsSection } from './TagsSection';
+
 function getTagKeys() {
   return Promise.resolve(['t1', 't2', 't3', 't4', 't5', 't6']);
 }

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/TagsSection.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
+
 import { SelectableValue } from '@grafana/data';
-import { Seg } from './Seg';
+
 import { InfluxQueryTag } from '../../types';
-import { toSelectableValue } from './toSelectableValue';
-import { adjustOperatorIfNeeded, getCondition, getOperator } from './tagUtils';
+
 import { AddButton } from './AddButton';
+import { Seg } from './Seg';
+import { adjustOperatorIfNeeded, getCondition, getOperator } from './tagUtils';
+import { toSelectableValue } from './toSelectableValue';
 
 type KnownOperator = '=' | '!=' | '<>' | '<' | '>' | '=~' | '!~';
 const knownOperators: KnownOperator[] = ['=', '!=', '<>', '<', '>', '=~', '!~'];

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/partListUtils.tsx

@@ -1,12 +1,14 @@
-import { InfluxQuery, InfluxQueryPart } from '../../types';
 import { SelectableValue } from '@grafana/data';
-import { PartParams } from './PartListSection';
-import InfluxQueryModel from '../../influx_query_model';
-import { unwrap } from './unwrap';
-import queryPart from '../../query_part';
-import { toSelectableValue } from './toSelectableValue';
 import { QueryPartDef } from 'app/features/alerting/state/query_part';
 
+import InfluxQueryModel from '../../influx_query_model';
+import queryPart from '../../query_part';
+import { InfluxQuery, InfluxQueryPart } from '../../types';
+
+import { PartParams } from './PartListSection';
+import { toSelectableValue } from './toSelectableValue';
+import { unwrap } from './unwrap';
+
 type Categories = Record<string, QueryPartDef[]>;
 
 export function getNewSelectPartOptions(): SelectableValue[] {

public/app/plugins/datasource/influxdb/components/constants.ts

@@ -1,4 +1,5 @@
 import { SelectableValue } from '@grafana/data';
+
 import { ResultFormat } from '../types';
 
 export const RESULT_FORMATS: Array<SelectableValue<ResultFormat>> = [

public/app/plugins/datasource/influxdb/components/useShadowedState.test.ts

@@ -1,4 +1,5 @@
 import { renderHook, act } from '@testing-library/react-hooks';
+
 import { useShadowedState } from './useShadowedState';
 
 describe('useShadowedState', () => {

public/app/plugins/datasource/influxdb/components/useUniqueId.test.ts

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
+
 import { useUniqueId } from './useUniqueId';
 
 describe('useUniqueId', () => {

public/app/plugins/datasource/influxdb/components/useUniqueId.ts

@@ -1,5 +1,5 @@
-import { useRef } from 'react';
 import { uniqueId } from 'lodash';
+import { useRef } from 'react';
 
 export function useUniqueId(): string {
   // we need to lazy-init this ref.

public/app/plugins/datasource/influxdb/datasource.ts

@@ -2,13 +2,7 @@ import { cloneDeep, extend, get, groupBy, has, isString, map as _map, omit, pick
 import { lastValueFrom, Observable, of, throwError } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { v4 as uuidv4 } from 'uuid';
-import {
-  BackendDataSourceResponse,
-  DataSourceWithBackend,
-  FetchResponse,
-  frameToMetricFindValue,
-  getBackendSrv,
-} from '@grafana/runtime';
+
 import {
   AnnotationEvent,
   ArrayVector,
@@ -29,15 +23,23 @@ import {
   TimeSeries,
   AnnotationQueryRequest,
 } from '@grafana/data';
-import InfluxSeries from './influx_series';
-import InfluxQueryModel from './influx_query_model';
-import ResponseParser from './response_parser';
-import { InfluxQueryBuilder } from './query_builder';
-import { InfluxOptions, InfluxQuery, InfluxVersion } from './types';
-import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
-import { FluxQueryEditor } from './components/FluxQueryEditor';
-import { buildRawQuery } from './queryUtils';
+import {
+  BackendDataSourceResponse,
+  DataSourceWithBackend,
+  FetchResponse,
+  frameToMetricFindValue,
+  getBackendSrv,
+} from '@grafana/runtime';
 import config from 'app/core/config';
+import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
+
+import { FluxQueryEditor } from './components/FluxQueryEditor';
+import InfluxQueryModel from './influx_query_model';
+import InfluxSeries from './influx_series';
+import { buildRawQuery } from './queryUtils';
+import { InfluxQueryBuilder } from './query_builder';
+import ResponseParser from './response_parser';
+import { InfluxOptions, InfluxQuery, InfluxVersion } from './types';
 
 // we detect the field type based on the value-array
 function getFieldType(values: unknown[]): FieldType {

public/app/plugins/datasource/influxdb/influxQLMetadataQuery.ts

@@ -1,6 +1,6 @@
-import { InfluxQueryTag } from './types';
 import InfluxDatasource from './datasource';
 import { InfluxQueryBuilder } from './query_builder';
+import { InfluxQueryTag } from './types';
 
 const runExploreQuery = (
   type: string,

public/app/plugins/datasource/influxdb/influx_query_model.ts

@@ -1,9 +1,11 @@
 import { map, find, filter, indexOf } from 'lodash';
-import queryPart from './query_part';
-import kbn from 'app/core/utils/kbn';
-import { InfluxQuery, InfluxQueryTag } from './types';
+
 import { ScopedVars } from '@grafana/data';
 import { TemplateSrv } from '@grafana/runtime';
+import kbn from 'app/core/utils/kbn';
+
+import queryPart from './query_part';
+import { InfluxQuery, InfluxQueryTag } from './types';
 
 export default class InfluxQueryModel {
   target: InfluxQuery;

public/app/plugins/datasource/influxdb/influx_series.ts

@@ -1,6 +1,7 @@
 import { each, map, includes, flatten, keys } from 'lodash';
-import TableModel from 'app/core/table_model';
+
 import { FieldType, QueryResultMeta, TimeSeries, TableData } from '@grafana/data';
+import TableModel from 'app/core/table_model';
 
 export default class InfluxSeries {
   refId?: string;

public/app/plugins/datasource/influxdb/module.ts

@@ -1,9 +1,10 @@
-import InfluxDatasource from './datasource';
-import { QueryEditor } from './components/QueryEditor';
-import InfluxStartPage from './components/InfluxStartPage';
 import { DataSourcePlugin } from '@grafana/data';
+
 import ConfigEditor from './components/ConfigEditor';
+import InfluxStartPage from './components/InfluxStartPage';
+import { QueryEditor } from './components/QueryEditor';
 import VariableQueryEditor from './components/VariableQueryEditor';
+import InfluxDatasource from './datasource';
 
 class InfluxAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';

public/app/plugins/datasource/influxdb/queryUtils.test.ts

@@ -1,6 +1,7 @@
 import { cloneDeep } from 'lodash';
-import { InfluxQuery } from './types';
+
 import { buildRawQuery, normalizeQuery, changeSelectPart, changeGroupByPart } from './queryUtils';
+import { InfluxQuery } from './types';
 
 describe('InfluxDB query utils', () => {
   describe('buildRawQuery', () => {

public/app/plugins/datasource/influxdb/queryUtils.ts

@@ -1,4 +1,5 @@
 import { cloneDeep } from 'lodash';
+
 import InfluxQueryModel from './influx_query_model';
 import { InfluxQuery } from './types';
 

public/app/plugins/datasource/influxdb/query_builder.ts

@@ -1,4 +1,5 @@
 import { reduce } from 'lodash';
+
 import kbn from 'app/core/utils/kbn';
 
 function renderTagCondition(tag: { operator: any; value: string; condition: any; key: string }, index: number) {

public/app/plugins/datasource/influxdb/query_part.ts

@@ -1,4 +1,5 @@
 import { map, clone } from 'lodash';
+
 import { QueryPartDef, QueryPart, functionRenderer, suffixRenderer } from 'app/features/alerting/state/query_part';
 
 const index: any[] = [];

public/app/plugins/datasource/influxdb/response_parser.ts

@@ -1,7 +1,9 @@
+import { each, flatten, groupBy, isArray } from 'lodash';
+
 import { AnnotationEvent, DataFrame, DataQuery, FieldType, QueryResultMeta } from '@grafana/data';
 import { toDataQueryResponse } from '@grafana/runtime';
 import TableModel from 'app/core/table_model';
-import { each, flatten, groupBy, isArray } from 'lodash';
+
 import { InfluxQuery } from './types';
 
 export default class ResponseParser {

public/app/plugins/datasource/influxdb/specs/datasource.test.ts

@@ -1,10 +1,11 @@
 import { lastValueFrom, of } from 'rxjs';
+import { TemplateSrvStub } from 'test/specs/helpers';
+
 import { FetchResponse } from '@grafana/runtime';
+import config from 'app/core/config';
+import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
 
 import InfluxDatasource from '../datasource';
-import { TemplateSrvStub } from 'test/specs/helpers';
-import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
-import config from 'app/core/config';
 
 //@ts-ignore
 const templateSrv = new TemplateSrvStub();

public/app/plugins/datasource/influxdb/specs/influx_series.test.ts

@@ -1,4 +1,5 @@
 import produce from 'immer';
+
 import InfluxSeries from '../influx_series';
 
 describe('when generating timeseries from influxdb response', () => {

public/app/plugins/datasource/influxdb/specs/response_parser.test.ts

@@ -1,13 +1,15 @@
 import { size } from 'lodash';
-import ResponseParser, { getSelectedParams } from '../response_parser';
-import InfluxQueryModel from '../influx_query_model';
-import { FieldType, MutableDataFrame } from '@grafana/data';
-import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
-import InfluxDatasource from '../datasource';
 import { of } from 'rxjs';
-import { FetchResponse } from '@grafana/runtime';
 import { TemplateSrvStub } from 'test/specs/helpers';
+
+import { FieldType, MutableDataFrame } from '@grafana/data';
+import { FetchResponse } from '@grafana/runtime';
 import config from 'app/core/config';
+import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
+
+import InfluxDatasource from '../datasource';
+import InfluxQueryModel from '../influx_query_model';
+import ResponseParser, { getSelectedParams } from '../response_parser';
 
 //@ts-ignore
 const templateSrv = new TemplateSrvStub();