chore: sort imports

.prettierrc.js

@@ -2,4 +2,5 @@ module.exports = {
     ...require('./node_modules/@grafana/toolkit/src/config/prettier.plugin.config.json'),
     // If this is not here, prettier takes default 'always', which doesnt seem to be the rule that grafana-toolkit is linting by
     arrowParens: 'avoid',
+    importOrder: ["^@grafana/(.*)$", "^[./]"],
 };

package.json

@@ -25,6 +25,7 @@
     "@grafana/ui": "^8.4.1",
     "@testing-library/jest-dom": "5.4.0",
     "@testing-library/react": "^10.0.2",
+    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/blueimp-md5": "^2.7.0",
     "@types/d3-selection": "^1.4.2",
     "@types/enzyme": "^3.10.5",

src/common/services/pmapi/PmApiService.ts

@@ -1,6 +1,6 @@
-import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { defaults, has } from 'lodash';
 import { firstValueFrom } from 'rxjs';
+import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { GenericError, NetworkError } from '../../types/errors';
 import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../utils';
 import {

src/common/services/pmsearch/PmSearchApiService.ts

@@ -1,6 +1,6 @@
-import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { defaults, has } from 'lodash';
 import { firstValueFrom } from 'rxjs';
+import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { SearchEntityUtil } from '../../../components/search/utils/SearchEntityUtil';
 import { NetworkError } from '../../types/errors';
 import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../utils';

src/common/services/pmseries/PmSeriesApiService.ts

@@ -1,6 +1,6 @@
-import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { defaults } from 'lodash';
 import { firstValueFrom } from 'rxjs';
+import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { NetworkError } from '../../types/errors';
 import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../utils';
 import {

src/common/utils.ts

@@ -1,9 +1,9 @@
-import { DataSourceInstanceSettings } from '@grafana/data';
-import { BackendSrvRequest } from '@grafana/runtime';
 import { isString } from 'lodash';
 import rootLogger, { LogLevelDesc } from 'loglevel';
 import logPrefixer from 'loglevel-plugin-prefix';
 import { Required } from 'utility-types';
+import { DataSourceInstanceSettings } from '@grafana/data';
+import { BackendSrvRequest } from '@grafana/runtime';
 import { GenericError } from './types/errors';
 
 rootLogger.setDefaultLevel('INFO');

src/components/appconfig/config.tsx

@@ -1,8 +1,8 @@
+import { css } from 'emotion';
+import React, { PureComponent } from 'react';
 import { AppPluginMeta, PluginConfigPageProps } from '@grafana/data';
 import { BackendSrv, getBackendSrv } from '@grafana/runtime';
 import { Button, Icon } from '@grafana/ui';
-import { css } from 'emotion';
-import React, { PureComponent } from 'react';
 import { AppSettings } from './types';
 
 interface Props extends PluginConfigPageProps<AppPluginMeta<AppSettings>> {}

src/components/monaco/MonacoEditorLazy.tsx

@@ -1,6 +1,6 @@
-import { ErrorWithStack, LoadingPlaceholder } from '@grafana/ui';
 import React from 'react';
 import { useAsync } from 'react-use';
+import { ErrorWithStack, LoadingPlaceholder } from '@grafana/ui';
 import { MonacoEditorWrapperProps } from './MonacoEditorWrapper';
 
 // COPY FROM https://github.com/grafana/grafana/blob/master/packages/grafana-ui/src/components/Monaco/CodeEditorLazy.tsx

src/components/monaco/MonacoEditorWrapper.tsx

@@ -1,7 +1,7 @@
-import { Themeable, withTheme } from '@grafana/ui';
 import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import React, { PureComponent } from 'react';
 import MonacoEditor, { MonacoEditorProps } from 'react-monaco-editor';
+import { Themeable, withTheme } from '@grafana/ui';
 
 export interface MonacoLanguageDefinition {
     /** unique language ID.

src/components/search/Search.tsx

@@ -1,9 +1,9 @@
-import { AppRootProps } from '@grafana/data';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { AnyAction, Store } from 'redux';
 import { Persistor } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
+import { AppRootProps } from '@grafana/data';
 import App from './App';
 import Loader from './components/Loader/Loader';
 import ServicesContext from './contexts/services';

src/components/search/components/BookmarkList/BookmarkList.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { EntityType } from '../../../../common/services/pmsearch/types';
 import { BookmarkItem } from '../../store/slices/search/slices/bookmarks/state';
 import { BookmarkList } from './BookmarkList';

src/components/search/components/BookmarkList/BookmarkList.tsx

@@ -1,6 +1,6 @@
-import { Button, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { cx } from 'emotion';
 import React from 'react';
+import { Button, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { EntityType } from '../../../../common/services/pmsearch/types';
 import { BookmarkItem } from '../../store/slices/search/slices/bookmarks/state';
 import { bookmarkListBtnWithNoSpacing, bookmarkListContainer, bookmarkListContainerMultiCol } from './styles';

src/components/search/components/Card/Card.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { Card } from './Card';
 
 describe('<Card/>', () => {

src/components/search/components/Card/Card.tsx

@@ -1,5 +1,5 @@
-import { Themeable, withTheme } from '@grafana/ui';
 import React from 'react';
+import { Themeable, withTheme } from '@grafana/ui';
 import { getCardStyles } from './styles';
 
 export interface CardBasicProps {

src/components/search/components/Card/styles.ts

@@ -1,6 +1,6 @@
+import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '@grafana/ui';
-import { css } from 'emotion';
 
 export const getCardStyles = stylesFactory((theme: GrafanaTheme, background: 'weak' | 'strong') => {
     return {

src/components/search/components/Loader/Loader.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { render, shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { Loader } from './Loader';
 
 describe('<Loader/>', () => {

src/components/search/components/Loader/Loader.tsx

@@ -1,6 +1,6 @@
-import { Spinner, Themeable, withTheme } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import React from 'react';
+import { Spinner, Themeable, withTheme } from '@grafana/ui';
 import { spinner, spinnerContainer, spinnerOuter } from './styles';
 
 export interface LoaderBasicProps {

src/components/search/components/SearchHistoryList/SearchHistoryList.tsx

@@ -1,6 +1,6 @@
-import { Button, VerticalGroup } from '@grafana/ui';
 import { cx } from 'emotion';
 import React from 'react';
+import { Button, VerticalGroup } from '@grafana/ui';
 import { SearchQuery } from '../../store/slices/search/shared/state';
 import { wrappedBtn } from '../../styles';
 import { SearchEntityUtil } from '../../utils/SearchEntityUtil';

src/components/search/components/SearchResult/SearchResult.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { render, shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { EntityType, TextItemResponse } from '../../../../common/services/pmsearch/types';
 import { SearchResult } from './SearchResult';
 

src/components/search/components/SearchResult/SearchResult.tsx

@@ -1,5 +1,5 @@
-import { Button, HorizontalGroup, Themeable, withTheme } from '@grafana/ui';
 import React from 'react';
+import { Button, HorizontalGroup, Themeable, withTheme } from '@grafana/ui';
 import { TextItemResponse } from '../../../../common/services/pmsearch/types';
 import Card from '../Card/Card';
 import {

src/components/search/components/SearchResult/styles.ts

@@ -1,5 +1,5 @@
-import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
 
 const searchResultItem = css`
     width: 100%;

src/components/search/components/withServices/withServices.test.tsx

@@ -1,6 +1,3 @@
-jest.mock('../../../../common/services/pmsearch/PmSearchApiService');
-jest.mock('../../../../common/services/pmseries/PmSeriesApiService');
-jest.mock('../../services/EntityDetailService');
 import { shallow } from 'enzyme';
 import React from 'react';
 import { PmSearchApiService } from '../../../../common/services/pmsearch/PmSearchApiService';
@@ -10,6 +7,10 @@ import EntityService from '../../services/EntityDetailService';
 import { Services } from '../../services/services';
 import withServices, { WithServicesProps } from './withServices';
 
+jest.mock('../../../../common/services/pmsearch/PmSearchApiService');
+jest.mock('../../../../common/services/pmseries/PmSeriesApiService');
+jest.mock('../../services/EntityDetailService');
+
 type TestComponentProps = WithServicesProps & { test: string };
 
 describe('withServices HOC', () => {

src/components/search/pages/Detail/DetailPage.tsx

@@ -1,7 +1,7 @@
-import { SelectableValue } from '@grafana/data';
-import { getLocationSrv, LocationSrv } from '@grafana/runtime';
 import React from 'react';
 import { connect } from 'react-redux';
+import { SelectableValue } from '@grafana/data';
+import { getLocationSrv, LocationSrv } from '@grafana/runtime';
 import { EntityType } from '../../../../common/services/pmsearch/types';
 import { RootState } from '../../store/reducer';
 import { addBookmark, removeBookmark } from '../../store/slices/search/slices/bookmarks/actionCreators';

src/components/search/pages/Detail/InstanceDomain/InstanceDomain.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { EntityType } from '../../../../../common/services/pmsearch/types';
 import { LoaderBasicProps } from '../../../components/Loader/Loader';
 import { IndomEntity } from '../../../models/entities/indom';

src/components/search/pages/Detail/InstanceDomain/InstanceDomain.tsx

@@ -1,6 +1,6 @@
-import { Button, HorizontalGroup, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import React from 'react';
 import { connect } from 'react-redux';
+import { Button, HorizontalGroup, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { EntityType } from '../../../../../common/services/pmsearch/types';
 import Card from '../../../components/Card/Card';
 import Loader from '../../../components/Loader/Loader';

src/components/search/pages/Detail/InstanceDomain/Instances/Instances.tsx

@@ -1,6 +1,6 @@
-import { VerticalGroup } from '@grafana/ui';
 import { cx } from 'emotion';
 import React from 'react';
+import { VerticalGroup } from '@grafana/ui';
 import { IndomEntitySparseItem } from '../../../../models/entities/indom';
 import { gridItem, gridList, gridListSingleCol, gridValue } from '../../styles';
 

src/components/search/pages/Detail/Metric/Meta/Meta.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@grafana/ui';
 import { css } from 'emotion';
 import React from 'react';
+import { Button } from '@grafana/ui';
 import { MetricEntityMeta } from '../../../../models/entities/metric';
 import { gridItem, gridList, gridTitle, gridValue } from '../../styles';
 

src/components/search/pages/Detail/Metric/Metric.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { EntityType } from '../../../../../common/services/pmsearch/types';
 import { LoaderBasicProps } from '../../../components/Loader/Loader';
 import { MetricEntity } from '../../../models/entities/metric';

src/components/search/pages/Detail/Metric/Metric.tsx

@@ -1,6 +1,6 @@
-import { Button, HorizontalGroup, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import React from 'react';
 import { connect } from 'react-redux';
+import { Button, HorizontalGroup, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { EntityType } from '../../../../../common/services/pmsearch/types';
 import Card from '../../../components/Card/Card';
 import Loader from '../../../components/Loader/Loader';

src/components/search/pages/Detail/Metric/Series/Series.tsx

@@ -1,9 +1,9 @@
-import { SelectableValue } from '@grafana/data';
-import { RadioButtonGroup, VerticalGroup } from '@grafana/ui';
 import React from 'react';
 import { connect } from 'react-redux';
 import { AnyAction, bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import { SelectableValue } from '@grafana/data';
+import { RadioButtonGroup, VerticalGroup } from '@grafana/ui';
 import { EntityType } from '../../../../../../common/services/pmsearch/types';
 import { MetricEntitySeries } from '../../../../models/entities/metric';
 import { RootState } from '../../../../store/reducer';

src/components/search/pages/Detail/styles.ts

@@ -1,5 +1,5 @@
-import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
 
 const detailPageContainer = css`
     grid-area: content;

src/components/search/pages/Index/IndexPage.tsx

@@ -1,8 +1,8 @@
-import { VerticalGroup } from '@grafana/ui';
 import React from 'react';
 import { connect } from 'react-redux';
 import { AnyAction, bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import { VerticalGroup } from '@grafana/ui';
 import BookmarkList from '../../components/BookmarkList/BookmarkList';
 import Card from '../../components/Card/Card';
 import SearchHistoryList from '../../components/SearchHistoryList/SearchHistoryList';

src/components/search/pages/Search/SearchPage.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { EntityType, TextResponse } from '../../../../common/services/pmsearch/types';
 import { LoaderBasicProps } from '../../components/Loader/Loader';
 import { SearchResultProps } from '../../components/SearchResult/SearchResult';

src/components/search/pages/Search/SearchPage.tsx

@@ -1,9 +1,9 @@
-import { HorizontalGroup, Pagination, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { getLogger } from 'loglevel';
 import React from 'react';
 import { connect } from 'react-redux';
 import { AnyAction, bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import { HorizontalGroup, Pagination, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { EntityType, TextItemResponse } from '../../../../common/services/pmsearch/types';
 import Loader from '../../components/Loader/Loader';
 import SearchResult from '../../components/SearchResult/SearchResult';
@@ -12,6 +12,7 @@ import { openDetail, querySearch } from '../../store/slices/search/shared/action
 import { FetchStatus } from '../../store/slices/search/shared/state';
 import { stripHtml } from '../../utils/utils';
 import { paginationContainer, searchPageElapsed, searchPageMatchesDesc } from './styles';
+
 const log = getLogger('search/SearchPage');
 
 const mapStateToProps = (state: RootState) => ({

src/components/search/pages/Search/styles.ts

@@ -1,5 +1,5 @@
-import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
 
 const searchPageContainer = css`
     grid-area: content;

src/components/search/partials/Actions/Actions.tsx

@@ -1,8 +1,8 @@
-import { Button, VerticalGroup } from '@grafana/ui';
 import React from 'react';
 import { connect } from 'react-redux';
 import { AnyAction, bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import { Button, VerticalGroup } from '@grafana/ui';
 import { RootState } from '../../store/reducer';
 import { querySearch } from '../../store/slices/search/shared/actionCreators';
 import { setView } from '../../store/slices/search/slices/view/actionCreators';

src/components/search/partials/Aside/Aside.test.tsx

@@ -1,7 +1,7 @@
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { EntityType, SearchEntity } from '../../../../common/services/pmsearch/types';
 import { OpenDetailActionCreator } from '../../store/slices/search/shared/actionCreators';
 import { FetchStatus } from '../../store/slices/search/shared/state';

src/components/search/partials/Aside/Aside.tsx

@@ -1,9 +1,9 @@
-import { Button, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { cx } from 'emotion';
 import React from 'react';
 import { connect } from 'react-redux';
 import { AnyAction, bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import { Button, Themeable, VerticalGroup, withTheme } from '@grafana/ui';
 import { EntityType } from '../../../../common/services/pmsearch/types';
 import BookmarkList from '../../components/BookmarkList/BookmarkList';
 import Loader from '../../components/Loader/Loader';

src/components/search/partials/Aside/styles.ts

@@ -1,5 +1,5 @@
-import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
 
 const asideContainer = css`
     grid-area: aside;

src/components/search/partials/SearchForm/SearchForm.test.tsx

@@ -1,11 +1,8 @@
-jest.mock('../../../../common/services/pmsearch/PmSearchApiService');
-jest.mock('../../../../common/services/pmseries/PmSeriesApiService');
-jest.mock('../../services/EntityDetailService');
-import { GrafanaThemeType } from '@grafana/data';
-import { getTheme } from '@grafana/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
 import { AutosuggestPropsSingleSection } from 'react-autosuggest';
+import { GrafanaThemeType } from '@grafana/data';
+import { getTheme } from '@grafana/ui';
 import { PmSearchApiService } from '../../../../common/services/pmsearch/PmSearchApiService';
 import { AutocompleteSuggestion, SearchEntity } from '../../../../common/services/pmsearch/types';
 import { PmSeriesApiService } from '../../../../common/services/pmseries/PmSeriesApiService';
@@ -14,6 +11,10 @@ import { Services } from '../../services/services';
 import { QuerySearchActionCreator } from '../../store/slices/search/shared/actionCreators';
 import { SearchForm, SearchFormProps, SearchFormReduxProps, SearchFormState } from './SearchForm';
 
+jest.mock('../../../../common/services/pmsearch/PmSearchApiService');
+jest.mock('../../../../common/services/pmseries/PmSeriesApiService');
+jest.mock('../../services/EntityDetailService');
+
 describe('<SearchForm/>', () => {
     let mockReduxProps: SearchFormReduxProps;
     let searchFormProps: SearchFormProps;