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/features/library-panels/LibraryPanelsPage.tsx

@@ -1,13 +1,14 @@
 import React, { FC, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
-import { GrafanaRouteComponentProps } from '../../core/navigation/types';
-import { StoreState } from '../../types';
-import { getNavModel } from '../../core/selectors/navModel';
 import Page from '../../core/components/Page/Page';
+import { GrafanaRouteComponentProps } from '../../core/navigation/types';
+import { getNavModel } from '../../core/selectors/navModel';
+import { StoreState } from '../../types';
+
 import { LibraryPanelsSearch } from './components/LibraryPanelsSearch/LibraryPanelsSearch';
-import { LibraryElementDTO } from './types';
 import { OpenLibraryPanelModal } from './components/OpenLibraryPanelModal/OpenLibraryPanelModal';
+import { LibraryElementDTO } from './types';
 
 const mapStateToProps = (state: StoreState) => ({
   navModel: getNavModel(state.navIndex, 'library-panels'),

public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { useAsync, useDebounce } from 'react-use';
+
 import { Button, Field, Input, Modal } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
+
 import { PanelModel } from '../../../dashboard/state';
-import { usePanelSave } from '../../utils/usePanelSave';
-import { useAsync, useDebounce } from 'react-use';
 import { getLibraryPanelByName } from '../../state/api';
+import { usePanelSave } from '../../utils/usePanelSave';
 
 interface AddLibraryPanelContentsProps {
   onDismiss: () => void;

public/app/features/library-panels/components/ChangeLibraryPanelModal/ChangeLibraryPanelModal.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { ConfirmModal } from '@grafana/ui';
 
 import { PanelModel } from '../../../dashboard/state';

public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx

@@ -1,12 +1,14 @@
 import React, { FC, useEffect, useMemo, useReducer } from 'react';
-import { Button, Modal, useStyles } from '@grafana/ui';
-import { LoadingState } from '@grafana/data';
 
+import { LoadingState } from '@grafana/data';
+import { Button, Modal, useStyles } from '@grafana/ui';
+
+import { getModalStyles } from '../../styles';
 import { LibraryElementDTO } from '../../types';
 import { asyncDispatcher } from '../LibraryPanelsView/actions';
-import { deleteLibraryPanelModalReducer, initialDeleteLibraryPanelModalState } from './reducer';
+
 import { getConnectedDashboards } from './actions';
-import { getModalStyles } from '../../styles';
+import { deleteLibraryPanelModalReducer, initialDeleteLibraryPanelModalState } from './reducer';
 
 interface Props {
   libraryPanel: LibraryElementDTO;

public/app/features/library-panels/components/DeleteLibraryPanelModal/actions.ts

@@ -1,5 +1,6 @@
-import { DispatchResult, LibraryElementDTO } from '../../types';
 import { getConnectedDashboards as apiGetConnectedDashboards } from '../../state/api';
+import { DispatchResult, LibraryElementDTO } from '../../types';
+
 import { searchCompleted } from './reducer';
 
 export function getConnectedDashboards(libraryPanel: LibraryElementDTO): DispatchResult {

public/app/features/library-panels/components/DeleteLibraryPanelModal/reducer.test.ts

@@ -1,11 +1,13 @@
+import { LoadingState } from '@grafana/data';
+
 import { reducerTester } from '../../../../../test/core/redux/reducerTester';
+
 import {
   deleteLibraryPanelModalReducer,
   DeleteLibraryPanelModalState,
   initialDeleteLibraryPanelModalState,
   searchCompleted,
 } from './reducer';
-import { LoadingState } from '@grafana/data';
 
 describe('deleteLibraryPanelModalReducer', () => {
   describe('when created', () => {

public/app/features/library-panels/components/DeleteLibraryPanelModal/reducer.ts

@@ -1,7 +1,8 @@
-import { DashboardSearchHit } from 'app/features/search/types';
-import { LoadingState } from '@grafana/data';
-import { AnyAction } from 'redux';
 import { createAction } from '@reduxjs/toolkit';
+import { AnyAction } from 'redux';
+
+import { LoadingState } from '@grafana/data';
+import { DashboardSearchHit } from 'app/features/search/types';
 
 export interface DeleteLibraryPanelModalState {
   loadingState: LoadingState;

public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx

@@ -1,12 +1,14 @@
-import React, { ReactElement, useState } from 'react';
 import { css } from '@emotion/css';
+import React, { ReactElement, useState } from 'react';
+
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, Link, useStyles2 } from '@grafana/ui';
-import { LibraryElementDTO } from '../../types';
-import { PanelTypeCard } from 'app/features/panel/components/VizTypePicker/PanelTypeCard';
-import { DeleteLibraryPanelModal } from '../DeleteLibraryPanelModal/DeleteLibraryPanelModal';
 import { config } from '@grafana/runtime';
+import { Icon, Link, useStyles2 } from '@grafana/ui';
 import { getPanelPluginNotFound } from 'app/features/panel/components/PanelPluginError';
+import { PanelTypeCard } from 'app/features/panel/components/VizTypePicker/PanelTypeCard';
+
+import { LibraryElementDTO } from '../../types';
+import { DeleteLibraryPanelModal } from '../DeleteLibraryPanelModal/DeleteLibraryPanelModal';
 
 export interface LibraryPanelCardProps {
   libraryPanel: LibraryElementDTO;

public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx

@@ -1,9 +1,11 @@
-import { DateTimeInput, GrafanaTheme } from '@grafana/data';
-import { useStyles } from '@grafana/ui';
 import { css } from '@emotion/css';
 import React from 'react';
-import { PanelModelWithLibraryPanel } from '../../types';
+
+import { DateTimeInput, GrafanaTheme } from '@grafana/data';
+import { useStyles } from '@grafana/ui';
+
 import { isPanelModelLibraryPanel } from '../../guard';
+import { PanelModelWithLibraryPanel } from '../../types';
 
 interface Props {
   panel: PanelModelWithLibraryPanel;

public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
 import { within } from '@testing-library/dom';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import React from 'react';
+
 import { PanelPluginMeta, PluginType } from '@grafana/data';
 
-import { LibraryPanelsSearch, LibraryPanelsSearchProps } from './LibraryPanelsSearch';
-import * as api from '../../state/api';
-import { LibraryElementKind, LibraryElementsSearchResult } from '../../types';
 import { backendSrv } from '../../../../core/services/backend_srv';
 import * as panelUtils from '../../../panel/state/util';
+import * as api from '../../state/api';
+import { LibraryElementKind, LibraryElementsSearchResult } from '../../types';
+
+import { LibraryPanelsSearch, LibraryPanelsSearchProps } from './LibraryPanelsSearch';
 
 jest.mock('@grafana/runtime', () => ({
   ...(jest.requireActual('@grafana/runtime') as unknown as object),

public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx

@@ -1,14 +1,17 @@
-import React, { useReducer } from 'react';
-import { HorizontalGroup, useStyles2, VerticalGroup, FilterInput } from '@grafana/ui';
-import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
 import { css } from '@emotion/css';
-import { SortPicker } from '../../../../core/components/Select/SortPicker';
-import { PanelTypeFilter } from '../../../../core/components/PanelTypeFilter/PanelTypeFilter';
-import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView';
-import { DEFAULT_PER_PAGE_PAGINATION } from '../../../../core/constants';
-import { LibraryElementDTO } from '../../types';
+import React, { useReducer } from 'react';
+
+import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
+import { HorizontalGroup, useStyles2, VerticalGroup, FilterInput } from '@grafana/ui';
+
 import { FolderFilter } from '../../../../core/components/FolderFilter/FolderFilter';
+import { PanelTypeFilter } from '../../../../core/components/PanelTypeFilter/PanelTypeFilter';
+import { SortPicker } from '../../../../core/components/Select/SortPicker';
+import { DEFAULT_PER_PAGE_PAGINATION } from '../../../../core/constants';
 import { FolderInfo } from '../../../../types';
+import { LibraryElementDTO } from '../../types';
+import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView';
+
 import {
   folderFilterChanged,
   initialLibraryPanelsSearchState,

public/app/features/library-panels/components/LibraryPanelsSearch/reducer.test.ts

@@ -1,4 +1,5 @@
 import { reducerTester } from '../../../../../test/core/redux/reducerTester';
+
 import {
   folderFilterChanged,
   initialLibraryPanelsSearchState,

public/app/features/library-panels/components/LibraryPanelsSearch/reducer.ts

@@ -1,5 +1,6 @@
-import { AnyAction } from 'redux';
 import { createAction } from '@reduxjs/toolkit';
+import { AnyAction } from 'redux';
+
 import { PanelPluginMeta, SelectableValue } from '@grafana/data';
 
 import { FolderInfo } from '../../../../types';

public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx

@@ -1,13 +1,15 @@
+import { css, cx } from '@emotion/css';
 import React, { useMemo, useReducer } from 'react';
 import { useDebounce } from 'react-use';
-import { css, cx } from '@emotion/css';
-import { Pagination, useStyles } from '@grafana/ui';
-import { GrafanaTheme, LoadingState } from '@grafana/data';
 
-import { LibraryPanelCard } from '../LibraryPanelCard/LibraryPanelCard';
+import { GrafanaTheme, LoadingState } from '@grafana/data';
+import { Pagination, useStyles } from '@grafana/ui';
+
 import { LibraryElementDTO } from '../../types';
-import { changePage, initialLibraryPanelsViewState, libraryPanelsViewReducer } from './reducer';
+import { LibraryPanelCard } from '../LibraryPanelCard/LibraryPanelCard';
+
 import { asyncDispatcher, deleteLibraryPanel, searchForLibraryPanels } from './actions';
+import { changePage, initialLibraryPanelsViewState, libraryPanelsViewReducer } from './reducer';
 
 interface LibraryPanelViewProps {
   className?: string;

public/app/features/library-panels/components/LibraryPanelsView/actions.ts

@@ -1,9 +1,10 @@
-import { Dispatch } from 'react';
 import { AnyAction } from '@reduxjs/toolkit';
+import { Dispatch } from 'react';
 import { from, merge, of, Subscription, timer } from 'rxjs';
 import { catchError, finalize, mapTo, mergeMap, share, takeUntil } from 'rxjs/operators';
 
 import { deleteLibraryPanel as apiDeleteLibraryPanel, getLibraryPanels } from '../../state/api';
+
 import { initialLibraryPanelsViewState, initSearch, searchCompleted } from './reducer';
 
 type DispatchResult = (dispatch: Dispatch<AnyAction>) => void;

public/app/features/library-panels/components/LibraryPanelsView/reducer.test.ts

@@ -1,6 +1,8 @@
 import { LoadingState } from '@grafana/data';
 
 import { reducerTester } from '../../../../../test/core/redux/reducerTester';
+import { LibraryElementDTO, LibraryElementKind } from '../../types';
+
 import {
   changePage,
   initialLibraryPanelsViewState,
@@ -9,7 +11,6 @@ import {
   LibraryPanelsViewState,
   searchCompleted,
 } from './reducer';
-import { LibraryElementDTO, LibraryElementKind } from '../../types';
 
 describe('libraryPanelsViewReducer', () => {
   describe('when initSearch is dispatched', () => {

public/app/features/library-panels/components/LibraryPanelsView/reducer.ts

@@ -1,8 +1,9 @@
 import { createAction } from '@reduxjs/toolkit';
+import { AnyAction } from 'redux';
+
 import { LoadingState } from '@grafana/data';
 
 import { LibraryElementDTO } from '../../types';
-import { AnyAction } from 'redux';
 
 export interface LibraryPanelsViewState {
   loadingState: LoadingState;

public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx

@@ -1,13 +1,14 @@
-import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { css } from '@emotion/css';
-import { AsyncSelect, Button, Modal, useStyles2 } from '@grafana/ui';
+import { debounce } from 'lodash';
+import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
 import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
+import { AsyncSelect, Button, Modal, useStyles2 } from '@grafana/ui';
 
-import { LibraryElementDTO } from '../../types';
 import { DashboardSearchHit } from '../../../search/types';
 import { getConnectedDashboards, getLibraryPanelConnectedDashboards } from '../../state/api';
-import { debounce } from 'lodash';
+import { LibraryElementDTO } from '../../types';
 
 export interface OpenLibraryPanelModalProps {
   onDismiss: () => void;

public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx

@@ -1,17 +1,18 @@
+import { css } from '@emotion/css';
 import React, { FC, useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { css } from '@emotion/css';
+
 import { GrafanaTheme2, PanelPluginMeta } from '@grafana/data';
 import { Button, useStyles2, VerticalGroup } from '@grafana/ui';
-
-import { PanelModel } from 'app/features/dashboard/state';
-import { AddLibraryPanelModal } from '../AddLibraryPanelModal/AddLibraryPanelModal';
-import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView';
-import { LibraryElementDTO } from '../../types';
-import { changeToLibraryPanel } from 'app/features/panel/state/actions';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
-import { ChangeLibraryPanelModal } from '../ChangeLibraryPanelModal/ChangeLibraryPanelModal';
+import { PanelModel } from 'app/features/dashboard/state';
+import { changeToLibraryPanel } from 'app/features/panel/state/actions';
+
 import { PanelTypeFilter } from '../../../../core/components/PanelTypeFilter/PanelTypeFilter';
+import { LibraryElementDTO } from '../../types';
+import { AddLibraryPanelModal } from '../AddLibraryPanelModal/AddLibraryPanelModal';
+import { ChangeLibraryPanelModal } from '../ChangeLibraryPanelModal/ChangeLibraryPanelModal';
+import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView';
 
 interface Props {
   panel: PanelModel;

public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useState } from 'react';
-import { Button, Icon, Input, Modal, useStyles } from '@grafana/ui';
 import { useAsync, useDebounce } from 'react-use';
-import { usePanelSave } from '../../utils/usePanelSave';
+
+import { Button, Icon, Input, Modal, useStyles } from '@grafana/ui';
+
 import { getConnectedDashboards } from '../../state/api';
-import { PanelModelWithLibraryPanel } from '../../types';
 import { getModalStyles } from '../../styles';
+import { PanelModelWithLibraryPanel } from '../../types';
+import { usePanelSave } from '../../utils/usePanelSave';
 
 interface Props {
   panel: PanelModelWithLibraryPanel;

public/app/features/library-panels/components/UnlinkModal/UnlinkModal.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { ConfirmModal } from '@grafana/ui';
 
 interface Props {

public/app/features/library-panels/guard.ts

@@ -1,4 +1,5 @@
 import { PanelModel } from '../dashboard/state';
+
 import { PanelModelWithLibraryPanel } from './types';
 
 export function isPanelModelLibraryPanel(panel: PanelModel): panel is PanelModelWithLibraryPanel {

public/app/features/library-panels/state/api.ts

@@ -1,3 +1,7 @@
+import { lastValueFrom } from 'rxjs';
+
+import { getBackendSrv } from '../../../core/services/backend_srv';
+import { DashboardSearchHit } from '../../search/types';
 import {
   LibraryElementConnectionDTO,
   LibraryElementDTO,
@@ -5,9 +9,6 @@ import {
   LibraryElementsSearchResult,
   PanelModelWithLibraryPanel,
 } from '../types';
-import { DashboardSearchHit } from '../../search/types';
-import { getBackendSrv } from '../../../core/services/backend_srv';
-import { lastValueFrom } from 'rxjs';
 
 export interface GetLibraryPanelsOptions {
   searchString?: string;

public/app/features/library-panels/styles.ts

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+
 import { GrafanaTheme } from '@grafana/data';
 
 export function getModalStyles(theme: GrafanaTheme) {

public/app/features/library-panels/types.ts

@@ -1,6 +1,7 @@
-import { PanelModel } from '../dashboard/state';
-import { Dispatch } from 'react';
 import { AnyAction } from '@reduxjs/toolkit';
+import { Dispatch } from 'react';
+
+import { PanelModel } from '../dashboard/state';
 
 export enum LibraryElementKind {
   Panel = 1,

public/app/features/library-panels/utils.ts

@@ -1,8 +1,9 @@
-import { LibraryElementDTO, PanelModelLibraryPanel } from './types';
-import { PanelModel } from '../dashboard/state';
-import { addLibraryPanel, updateLibraryPanel } from './state/api';
 import { createErrorNotification, createSuccessNotification } from '../../core/copy/appNotification';
 import { AppNotification } from '../../types';
+import { PanelModel } from '../dashboard/state';
+
+import { addLibraryPanel, updateLibraryPanel } from './state/api';
+import { LibraryElementDTO, PanelModelLibraryPanel } from './types';
 
 export function createPanelLibraryErrorNotification(message: string): AppNotification {
   return createErrorNotification(message);

public/app/features/library-panels/utils/usePanelSave.ts

@@ -2,13 +2,14 @@ import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 
+import { notifyApp } from 'app/core/actions';
 import { PanelModel } from 'app/features/dashboard/state';
+
 import {
   createPanelLibraryErrorNotification,
   createPanelLibrarySuccessNotification,
   saveAndRefreshLibraryPanel,
 } from '../utils';
-import { notifyApp } from 'app/core/actions';
 
 export const usePanelSave = () => {
   const dispatch = useDispatch();