Chore: ESlint import order (grafana#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

Author: joshhunt

.betterer.results

@@ -20,3 +20,6 @@ vendor
 # Auto-generated localisation files
 public/locales/_build/
 public/locales/**/*.js
+
+# Auto-generated icon file
+packages/grafana-ui/src/components/Icon/iconBundle.ts

.eslintignore

@@ -1,12 +1,24 @@
 {
   "extends": ["@grafana/eslint-config"],
   "root": true,
-  "plugins": ["@emotion", "lodash", "jest"],
+  "plugins": ["@emotion", "lodash", "jest", "import"],
+  "settings": {
+    "import/internal-regex": "^(app/)|(@grafana)",
+    "import/external-module-folders": ["node_modules", ".yarn"]
+  },
   "rules": {
     "react/prop-types": "off",
     "@emotion/jsx-import": "error",
     "lodash/import-scope": [2, "member"],
-    "jest/no-focused-tests": "error"
+    "jest/no-focused-tests": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": [["builtin", "external"], "internal", "parent", "sibling", "index"],
+        "newlines-between": "always",
+        "alphabetize": { "order": "asc" }
+      }
+    ]
   },
   "overrides": [
     {

.eslintrc

@@ -1,4 +1,3 @@
-import { e2e } from '@grafana/e2e';
 import {
   addDays,
   addHours,
@@ -10,6 +9,8 @@ import {
   toDate,
 } from 'date-fns';
 
+import { e2e } from '@grafana/e2e';
+
 e2e.scenario({
   describeName: 'Dashboard time zone support',
   itName: 'Tests dashboard time zone scenarios',

e2e/dashboards-suite/dashboard-time-zone.spec.ts

@@ -1,4 +1,5 @@
 import { e2e } from '@grafana/e2e';
+
 import { expect } from '../../public/test/lib/common';
 
 const flakyTimeout = 10000;

e2e/panels-suite/panelEdit_queries.spec.ts

@@ -1,4 +1,5 @@
 import { e2e } from '@grafana/e2e';
+
 import { smokeTestScenario } from '../shared/smokeTestScenario';
 
 e2e.scenario(smokeTestScenario);

e2e/smoke-tests-suite/1-smoketests.spec.ts

@@ -1,4 +1,5 @@
 import { e2e } from '@grafana/e2e';
+
 import { smokeTestScenario } from '../../shared/smokeTestScenario';
 
 e2e.scenario(smokeTestScenario);

e2e/verify/specs/smoketests.spec.ts

@@ -22,7 +22,7 @@
     "lint:ts": "eslint . --ext .js,.tsx,.ts --cache",
     "lint:sass": "yarn stylelint '{public/sass,packages}/**/*.scss' --cache",
     "test:ci": "betterer ci && mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%}",
-    "lint:fix": "yarn lint --fix",
+    "lint:fix": "yarn lint:ts --fix",
     "packages:build": "lerna run clean && lerna run build --ignore @grafana-plugins/input-datasource",
     "packages:docsExtract": "rm -rf ./reports/docs && lerna run docsExtract",
     "packages:docsToMarkdown": "api-documenter markdown --input-folder ./reports/docs/ --output-folder ./docs/sources/packages_api/ --hugo",
@@ -182,6 +182,7 @@
     "enzyme-to-json": "3.6.2",
     "eslint": "8.11.0",
     "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "26.1.2",
     "eslint-plugin-jsdoc": "38.0.6",
     "eslint-plugin-lodash": "7.4.0",

package.json

@@ -1,9 +1,9 @@
-import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import sourceMaps from 'rollup-plugin-sourcemaps';
 import json from '@rollup/plugin-json';
-import { terser } from 'rollup-plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
 import path from 'path';
+import sourceMaps from 'rollup-plugin-sourcemaps';
+import { terser } from 'rollup-plugin-terser';
 
 const pkg = require('./package.json');
 

packages/grafana-data/rollup.config.ts

@@ -1,6 +1,7 @@
+import { FieldType, DataFrame } from '../types';
+
 import { ArrayDataFrame } from './ArrayDataFrame';
 import { toDataFrameDTO } from './processDataFrame';
-import { FieldType, DataFrame } from '../types';
 
 describe('Array DataFrame', () => {
   const input = [

packages/grafana-data/src/dataframe/ArrayDataFrame.test.ts

@@ -1,8 +1,9 @@
+import { Vector, QueryResultMeta } from '../types';
 import { Field, FieldType, DataFrame } from '../types/dataFrame';
+import { FunctionalVector } from '../vector/FunctionalVector';
 import { vectorToArray } from '../vector/vectorToArray';
-import { Vector, QueryResultMeta } from '../types';
+
 import { guessFieldTypeFromNameAndValue, toDataFrameDTO } from './processDataFrame';
-import { FunctionalVector } from '../vector/FunctionalVector';
 
 /** @public */
 export type ValueConverter<T = any> = (val: any) => T;

packages/grafana-data/src/dataframe/ArrayDataFrame.ts

@@ -1,6 +1,7 @@
-import { MutableDataFrame } from './MutableDataFrame';
 import { CircularVector } from '../vector/CircularVector';
 
+import { MutableDataFrame } from './MutableDataFrame';
+
 interface CircularOptions {
   append?: 'head' | 'tail';
   capacity?: number;

packages/grafana-data/src/dataframe/CircularDataFrame.ts

@@ -1,4 +1,5 @@
 import { FieldType } from '../types/dataFrame';
+
 import { DataFrameJSON, dataFrameFromJSON } from './DataFrameJSON';
 
 describe('DataFrame JSON', () => {

packages/grafana-data/src/dataframe/DataFrameJSON.test.ts

@@ -1,5 +1,6 @@
 import { DataFrame, FieldType, FieldConfig, Labels, QueryResultMeta } from '../types';
 import { ArrayVector } from '../vector';
+
 import { guessFieldTypeFromNameAndValue } from './processDataFrame';
 
 /**

packages/grafana-data/src/dataframe/DataFrameJSON.ts

@@ -1,7 +1,8 @@
-import { FieldType, DataFrameDTO } from '../types/dataFrame';
 import { DateTime } from '../datetime/moment_wrapper';
-import { MutableDataFrame } from './MutableDataFrame';
+import { FieldType, DataFrameDTO } from '../types/dataFrame';
+
 import { DataFrameView } from './DataFrameView';
+import { MutableDataFrame } from './MutableDataFrame';
 
 interface MySpecialObject {
   time: DateTime;

packages/grafana-data/src/dataframe/DataFrameView.test.ts

@@ -1,5 +1,5 @@
-import { DataFrame, Field } from '../types/dataFrame';
 import { DisplayProcessor } from '../types';
+import { DataFrame, Field } from '../types/dataFrame';
 import { FunctionalVector } from '../vector/FunctionalVector';
 
 /**

packages/grafana-data/src/dataframe/DataFrameView.ts

@@ -1,5 +1,6 @@
-import { FieldCache } from './FieldCache';
 import { FieldType } from '../types/dataFrame';
+
+import { FieldCache } from './FieldCache';
 import { toDataFrame } from './processDataFrame';
 
 describe('FieldCache', () => {

packages/grafana-data/src/dataframe/FieldCache.test.ts

@@ -1,4 +1,5 @@
 import { DataFrameDTO, FieldType } from '../types/dataFrame';
+
 import { MutableDataFrame } from './MutableDataFrame';
 
 describe('Reversing DataFrame', () => {

packages/grafana-data/src/dataframe/MutableDataFrame.test.ts

@@ -1,12 +1,14 @@
-import { Field, DataFrame, DataFrameDTO, FieldDTO, FieldType } from '../types/dataFrame';
-import { QueryResultMeta } from '../types/data';
-import { guessFieldTypeFromValue, guessFieldTypeForField, toDataFrameDTO } from './processDataFrame';
 import { isString } from 'lodash';
-import { makeFieldParser } from '../utils/fieldParser';
+
+import { QueryResultMeta } from '../types/data';
+import { Field, DataFrame, DataFrameDTO, FieldDTO, FieldType } from '../types/dataFrame';
 import { MutableVector, Vector } from '../types/vector';
+import { makeFieldParser } from '../utils/fieldParser';
 import { ArrayVector } from '../vector/ArrayVector';
 import { FunctionalVector } from '../vector/FunctionalVector';
 
+import { guessFieldTypeFromValue, guessFieldTypeForField, toDataFrameDTO } from './processDataFrame';
+
 export type MutableField<T = any> = Field<T, MutableVector<T>>;
 
 type MutableVectorCreator = (buffer?: any[]) => MutableVector;

packages/grafana-data/src/dataframe/MutableDataFrame.ts

@@ -1,5 +1,5 @@
-import { Field } from '../types/dataFrame';
 import { KeyValue } from '../types/data';
+import { Field } from '../types/dataFrame';
 
 export interface Dimension<T = any> {
   // Name of the dimension

packages/grafana-data/src/dataframe/dimensions.ts

@@ -1,4 +1,5 @@
 import { FieldType } from '../types/dataFrame';
+
 import { compareDataFrameStructures, compareArrayValues } from './frameComparisons';
 import { toDataFrame } from './processDataFrame';
 

packages/grafana-data/src/dataframe/frameComparisons.test.ts

@@ -1,3 +1,8 @@
+import { dateTime } from '../datetime/moment_wrapper';
+import { DataFrameDTO, FieldType, TableData, TimeSeries } from '../types/index';
+
+import { ArrayDataFrame } from './ArrayDataFrame';
+import { MutableDataFrame } from './MutableDataFrame';
 import {
   guessFieldTypeFromValue,
   guessFieldTypes,
@@ -7,10 +12,7 @@ import {
   toDataFrame,
   toLegacyResponseData,
 } from './processDataFrame';
-import { DataFrameDTO, FieldType, TableData, TimeSeries } from '../types/index';
-import { dateTime } from '../datetime/moment_wrapper';
-import { MutableDataFrame } from './MutableDataFrame';
-import { ArrayDataFrame } from './ArrayDataFrame';
+
 import { getFieldTypeFromValue } from '.';
 
 describe('toDataFrame', () => {

packages/grafana-data/src/dataframe/processDataFrame.test.ts

@@ -2,6 +2,9 @@
 import { isArray, isBoolean, isNumber, isString } from 'lodash';
 
 // Types
+import { isDateTime } from '../datetime/moment_wrapper';
+import { fieldIndexComparer } from '../field/fieldComparers';
+import { getFieldDisplayName } from '../field/fieldState';
 import {
   DataFrame,
   Field,
@@ -17,15 +20,13 @@ import {
   TIME_SERIES_VALUE_FIELD_NAME,
   TIME_SERIES_TIME_FIELD_NAME,
 } from '../types/index';
-import { isDateTime } from '../datetime/moment_wrapper';
 import { ArrayVector } from '../vector/ArrayVector';
-import { MutableDataFrame } from './MutableDataFrame';
 import { SortedVector } from '../vector/SortedVector';
-import { ArrayDataFrame } from './ArrayDataFrame';
-import { getFieldDisplayName } from '../field/fieldState';
-import { fieldIndexComparer } from '../field/fieldComparers';
 import { vectorToArray } from '../vector/vectorToArray';
+
+import { ArrayDataFrame } from './ArrayDataFrame';
 import { dataFrameFromJSON } from './DataFrameJSON';
+import { MutableDataFrame } from './MutableDataFrame';
 
 function convertTableToDataFrame(table: TableData): DataFrame {
   const fields = table.columns.map((c) => {

packages/grafana-data/src/dataframe/processDataFrame.ts

@@ -1,5 +1,6 @@
-import { toDataFrame } from './processDataFrame';
 import { FieldType } from '../types';
+
+import { toDataFrame } from './processDataFrame';
 import { anySeriesWithTimeField } from './utils';
 
 describe('anySeriesWithTimeField', () => {

packages/grafana-data/src/dataframe/utils.test.ts

@@ -1,4 +1,5 @@
 import { DataFrame, FieldType } from '../types/dataFrame';
+
 import { getTimeField } from './processDataFrame';
 
 export function isTimeSerie(frame: DataFrame) {

packages/grafana-data/src/dataframe/utils.ts

@@ -1,5 +1,5 @@
-import sinon, { SinonFakeTimers } from 'sinon';
 import { each } from 'lodash';
+import sinon, { SinonFakeTimers } from 'sinon';
 
 import * as dateMath from './datemath';
 import { dateTime, DurationUnit, DateTime } from './moment_wrapper';

packages/grafana-data/src/datetime/datemath.test.ts

@@ -1,7 +1,9 @@
 import { includes, isDate } from 'lodash';
-import { DateTime, dateTime, dateTimeForTimeZone, DurationUnit, isDateTime, ISO_8601 } from './moment_wrapper';
+
 import { TimeZone } from '../types/index';
 
+import { DateTime, dateTime, dateTimeForTimeZone, DurationUnit, isDateTime, ISO_8601 } from './moment_wrapper';
+
 const units: DurationUnit[] = ['y', 'M', 'w', 'd', 'h', 'm', 's', 'Q'];
 
 /**

packages/grafana-data/src/datetime/datemath.ts

@@ -1,6 +1,6 @@
 import { Duration, Interval } from 'date-fns';
-import intervalToDuration from 'date-fns/intervalToDuration';
 import add from 'date-fns/add';
+import intervalToDuration from 'date-fns/intervalToDuration';
 
 const durationMap: { [key in Required<keyof Duration>]: string[] } = {
   years: ['y', 'Y', 'years'],

packages/grafana-data/src/datetime/durationutil.ts

@@ -1,9 +1,11 @@
 /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */
 import moment, { MomentInput, Moment } from 'moment-timezone';
+
 import { TimeZone } from '../types';
-import { DateTimeInput } from './moment_wrapper';
-import { systemDateFormats } from './formats';
+
 import { DateTimeOptions, getTimeZone } from './common';
+import { systemDateFormats } from './formats';
+import { DateTimeInput } from './moment_wrapper';
 
 /**
  * The type describing the options that can be passed to the {@link dateTimeFormat}

packages/grafana-data/src/datetime/formatter.ts

@@ -1,6 +1,7 @@
+import moment, { Moment, MomentInput, DurationInputArg1, DurationInputArg2 } from 'moment';
+
 import { TimeZone } from '../types/time';
 /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */
-import moment, { Moment, MomentInput, DurationInputArg1, DurationInputArg2 } from 'moment';
 export interface DateTimeBuiltinFormat {
   __momentBuiltinFormatBrand: any;
 }

packages/grafana-data/src/datetime/moment_wrapper.ts

@@ -1,5 +1,5 @@
-import { dateTimeParse } from './parser';
 import { systemDateFormats } from './formats';
+import { dateTimeParse } from './parser';
 
 describe('dateTimeParse', () => {
   it('should be able to parse using default format', () => {

packages/grafana-data/src/datetime/parser.test.ts

@@ -1,10 +1,11 @@
 /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */
+import { lowerCase } from 'lodash';
 import moment, { MomentInput } from 'moment-timezone';
-import { DateTimeInput, DateTime, isDateTime } from './moment_wrapper';
+
 import { DateTimeOptions, getTimeZone } from './common';
 import { parse, isValid } from './datemath';
-import { lowerCase } from 'lodash';
 import { systemDateFormats } from './formats';
+import { DateTimeInput, DateTime, isDateTime } from './moment_wrapper';
 
 /**
  * The type that describes options that can be passed when parsing a date and time value.

packages/grafana-data/src/datetime/parser.ts

@@ -1,7 +1,9 @@
 import { TimeRange } from '../types/time';
-import { dateTime, rangeUtil } from './index';
+
 import { timeRangeToRelative } from './rangeutil';
 
+import { dateTime, rangeUtil } from './index';
+
 describe('Range Utils', () => {
   describe('relative time', () => {
     it('should identify absolute vs relative', () => {

packages/grafana-data/src/datetime/rangeutil.test.ts

@@ -3,8 +3,8 @@ import { each, has } from 'lodash';
 import { RawTimeRange, TimeRange, TimeZone, IntervalValues, RelativeTimeRange, TimeOption } from '../types/time';
 
 import * as dateMath from './datemath';
-import { isDateTime, DateTime, dateTime } from './moment_wrapper';
 import { timeZoneAbbrevation, dateTimeFormat, dateTimeFormatTimeAgo } from './formatter';
+import { isDateTime, DateTime, dateTime } from './moment_wrapper';
 import { dateTimeParse } from './parser';
 
 const spans: { [key: string]: { display: string; section?: number } } = {

packages/grafana-data/src/datetime/rangeutil.ts

@@ -1,5 +1,5 @@
-import { getTimeZoneInfo } from './timezones';
 import { setTimeZoneResolver } from './common';
+import { getTimeZoneInfo } from './timezones';
 
 describe('getTimeZoneInfo', () => {
   // global timezone is set to Pacific/Easter, see jest-config.js file

packages/grafana-data/src/datetime/timezones.test.ts

@@ -1,6 +1,8 @@
-import moment from 'moment-timezone';
 import { memoize } from 'lodash';
+import moment from 'moment-timezone';
+
 import { TimeZone } from '../types';
+
 import { getTimeZone } from './common';
 
 export enum InternalTimeZones {

packages/grafana-data/src/datetime/timezones.ts

@@ -1,7 +1,7 @@
 import { EventBusSrv } from './EventBus';
-import { BusEvent, BusEventWithPayload } from './types';
-import { eventFactory } from './eventFactory';
 import { DataHoverEvent } from './common';
+import { eventFactory } from './eventFactory';
+import { BusEvent, BusEventWithPayload } from './types';
 
 interface LoginEventPayload {
   logins: number;

packages/grafana-data/src/events/EventBus.test.ts

@@ -1,6 +1,7 @@
 import EventEmitter from 'eventemitter3';
 import { Unsubscribable, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
+
 import {
   EventBus,
   LegacyEmitter,

packages/grafana-data/src/events/EventBus.ts

@@ -1,4 +1,5 @@
 import { AnnotationEvent, DataFrame } from '../types';
+
 import { BusEventBase, BusEventWithPayload } from './types';
 
 /**