chore: upgrade dependencies, organize imports

.eslintrc.json

@@ -1,6 +1,6 @@
 {
     "extends": [
-        "./node_modules/@grafana/toolkit/node_modules/@grafana/eslint-config"
+        "@grafana/eslint-config"
     ],
     "parserOptions": {
         "project": "./tsconfig.json"

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.preferences.importModuleSpecifier": "relative"
+}

package.json

@@ -17,50 +17,51 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
-    "@grafana/data": "^7.2.1",
-    "@grafana/runtime": "^7.2.1",
-    "@grafana/toolkit": "^7.2.1",
-    "@grafana/ui": "^7.2.1",
+    "@grafana/data": "^7.3.3",
+    "@grafana/runtime": "^7.3.3",
+    "@grafana/toolkit": "^7.3.3",
+    "@grafana/ui": "^7.3.3",
     "@types/blueimp-md5": "^2.7.0",
     "@types/d3-selection": "^1.4.2",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/expect-puppeteer": "^4.4.3",
     "@types/jest": "^26.0.5",
     "@types/jest-environment-puppeteer": "^4.4.0",
-    "@types/lodash": "^4.14.157",
+    "@types/lodash": "latest",
+    "@types/memoize-one": "^5.1.2",
     "@types/react-autosuggest": "^9.3.14",
     "@types/react-redux": "^7.1.9",
     "@types/redux": "^3.6.0",
     "@types/redux-persist": "^4.3.1",
     "@types/redux-persist-transform-filter": "^0.0.4",
     "babel-plugin-remove-object-properties": "^1.0.2",
-    "benchmark": "^2.1.4",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint-plugin-prettier": "*",
     "jest-date-mock": "^1.0.8",
     "jest-puppeteer": "^4.4.0",
     "monaco-editor-webpack-plugin": "^2.0.0",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.2",
+    "prettier-plugin-organize-imports": "^1.1.1",
     "puppeteer": "^5.3.1"
   },
   "engines": {
     "node": ">=12 <13"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.4.0",
-    "@types/memoize-one": "^5.1.2",
     "blueimp-md5": "^2.17.0",
     "core-js": "^3.6.5",
     "d3-flame-graph": "^3.1.1",
+    "d3-selection": "^2.0.0",
     "emotion": "^10.0.27",
-    "lodash": "^4.17.19",
+    "lodash": "^4.17.20",
     "loglevel": "^1.6.8",
     "loglevel-plugin-prefix": "^0.8.4",
+    "memoize-one": "^5.1.1",
     "monaco-editor": "^0.21.2",
     "react-autosuggest": "^10.0.2",
-    "react-monaco-editor": "0.36.0",
+    "react-monaco-editor": "^0.40.0",
     "react-redux": "^7.2.0",
     "react-use": "^15.3.4",
     "redux": "^4.0.5",

src/common/services/pmapi/PmApiService.ts

@@ -1,28 +1,28 @@
 import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
-import { NetworkError } from 'common/types/errors/network';
-import { DefaultRequestOptions, getRequestOptions, timeout } from 'common/utils';
-import { has, defaults } from 'lodash';
+import { defaults, has } from 'lodash';
+import { NetworkError } from '../../../common/types/errors/network';
+import { DefaultRequestOptions, getRequestOptions, timeout } from '../../../common/utils';
 import {
+    MetricNotFoundError,
+    MetricSemanticError,
+    MetricSyntaxError,
+    NoIndomError,
+    PermissionError,
+    PmapiChildrenRequest,
+    PmapiChildrenResponse,
     PmApiConfig,
     PmapiContextRequest,
     PmapiContextResponse,
-    PmapiMetricRequest,
-    PmapiMetricResponse,
-    PmapiIndomRequest,
-    PmapiIndomResponse,
-    NoIndomError,
+    PmapiDeriveRequest,
+    PmapiDeriveResponse,
     PmapiFetchRequest,
     PmapiFetchResponse,
+    PmapiIndomRequest,
+    PmapiIndomResponse,
+    PmapiMetricRequest,
+    PmapiMetricResponse,
     PmapiStoreRequest,
     PmapiStoreResponse,
-    MetricNotFoundError,
-    PermissionError,
-    PmapiDeriveRequest,
-    PmapiDeriveResponse,
-    MetricSemanticError,
-    MetricSyntaxError,
-    PmapiChildrenRequest,
-    PmapiChildrenResponse,
 } from './types';
 
 export class PmApiService {

src/common/services/pmapi/types.ts

@@ -1,5 +1,5 @@
 import { DataSourceInstanceSettings } from '@grafana/data';
-import { InstanceName, Labels, MetricName, Semantics } from 'common/types/pcp';
+import { InstanceName, Labels, MetricName, Semantics } from '../../../common/types/pcp';
 
 export interface PmApiConfig {
     dsInstanceSettings: DataSourceInstanceSettings;

src/common/services/pmsearch/PmSearchApiService.ts

@@ -1,8 +1,8 @@
 import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
-import { NetworkError } from 'common/types/errors/network';
-import { DefaultRequestOptions, getRequestOptions, timeout } from 'common/utils';
-import { SearchEntityUtil } from 'components/search/utils/SearchEntityUtil';
 import { defaults, has } from 'lodash';
+import { NetworkError } from '../../../common/types/errors/network';
+import { DefaultRequestOptions, getRequestOptions, timeout } from '../../../common/utils';
+import { SearchEntityUtil } from '../../../components/search/utils/SearchEntityUtil';
 import {
     AutocompleteQueryParams,
     AutocompleteResponse,

src/common/services/pmseries/PmSeriesApiService.ts

@@ -1,23 +1,23 @@
 import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
+import { defaults } from 'lodash';
+import { NetworkError } from '../../../common/types/errors/network';
+import { DefaultRequestOptions, getRequestOptions, timeout } from '../../../common/utils';
 import {
+    PmSeriesApiConfig,
     SeriesDescQueryParams,
     SeriesDescResponse,
-    SeriesQueryQueryParams,
-    SeriesQueryResponse,
-    SeriesMetricsQueryParams,
-    SeriesMetricsResponse,
-    SeriesLabelsQueryParams,
-    SeriesLabelsResponse,
     SeriesInstancesQueryParams,
     SeriesInstancesResponse,
-    SeriesValuesQueryParams,
+    SeriesLabelsQueryParams,
+    SeriesLabelsResponse,
+    SeriesMetricsQueryParams,
+    SeriesMetricsResponse,
     SeriesPingResponse,
+    SeriesQueryQueryParams,
+    SeriesQueryResponse,
+    SeriesValuesQueryParams,
     SeriesValuesResponse,
-    PmSeriesApiConfig,
 } from './types';
-import { defaults } from 'lodash';
-import { DefaultRequestOptions, getRequestOptions, timeout } from 'common/utils';
-import { NetworkError } from 'common/types/errors/network';
 
 export class PmSeriesApiService {
     defaultRequestOptions: DefaultRequestOptions;

src/common/services/pmseries/types.ts

@@ -1,5 +1,5 @@
 import { DataSourceInstanceSettings } from '@grafana/data';
-import { InstanceName, Labels, Semantics } from 'common/types/pcp';
+import { InstanceName, Labels, Semantics } from '../../../common/types/pcp';
 
 export interface PmSeriesApiConfig {
     dsInstanceSettings: DataSourceInstanceSettings;

src/common/utils.ts

@@ -1,8 +1,8 @@
+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 { DataSourceInstanceSettings } from '@grafana/data';
-import { BackendSrvRequest } from '@grafana/runtime';
 import { TimeoutError } from './types/errors/timeout';
 import { RequiredField } from './types/utils';
 

src/components/appconfig/config.ts

@@ -1,7 +1,7 @@
 import { PluginMeta } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import './css/config.css';
 import appPluginConfig from '../../plugin.json';
+import './css/config.css';
 
 export class PCPAppConfigCtrl {
     static templateUrl = 'components/appconfig/config.html';

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 * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import { Themeable, withTheme } from '@grafana/ui';
 
 export interface MonacoLanguageDefinition {
     /** unique language ID.

src/components/search/App.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { RootState } from './store/reducer';
-import { ViewState } from './store/slices/search/slices/view/state';
+import { connect } from 'react-redux';
 import DetailPage from './pages/Detail/DetailPage';
-import SearchPage from './pages/Search/SearchPage';
 import IndexPage from './pages/Index/IndexPage';
-import { appLayout } from './styles';
-import SearchForm from './partials/SearchForm/SearchForm';
+import SearchPage from './pages/Search/SearchPage';
 import Actions from './partials/Actions/Actions';
 import Aside from './partials/Aside/Aside';
-import { connect } from 'react-redux';
+import SearchForm from './partials/SearchForm/SearchForm';
+import { RootState } from './store/reducer';
+import { ViewState } from './store/slices/search/slices/view/state';
+import { appLayout } from './styles';
 
 const mapStateToProps = (state: RootState) => ({
     view: state.search.view,

src/components/search/Search.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
 import { AppRootProps } from '@grafana/data';
+import React from 'react';
 import { Provider } from 'react-redux';
-import App from './App';
-import { PersistGate } from 'redux-persist/integration/react';
+import { AnyAction, Store } from 'redux';
 import { Persistor } from 'redux-persist';
+import { PersistGate } from 'redux-persist/integration/react';
+import App from './App';
 import Loader from './components/Loader/Loader';
-import { initStore } from './store/store';
-import { Store, AnyAction } from 'redux';
-import { initServices, Services } from './services/services';
 import ServicesContext from './contexts/services';
+import { initServices, Services } from './services/services';
+import { initStore } from './store/store';
 
 interface AppRootState {
     store: Store<any, AnyAction> | null;

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { BookmarkList } from './BookmarkList';
 import { GrafanaThemeType } from '@grafana/data';
 import { getTheme } from '@grafana/ui';
+import { shallow } from 'enzyme';
+import React from 'react';
+import { EntityType } from '../../../../common/services/pmsearch/types';
 import { BookmarkItem } from '../../store/slices/search/slices/bookmarks/state';
-import { EntityType } from 'common/services/pmsearch/types';
+import { BookmarkList } from './BookmarkList';
 
 describe('<BookmarkList/>', () => {
     const placeholderCallbacks = {

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
 
 const cardContainer = (theme: GrafanaTheme, background: 'weak' | 'strong') => css`
     width: 100%;

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

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

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

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

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import { shallow } from 'enzyme';
-import SearchHistoryList from './SearchHistoryList';
+import React from 'react';
+import { SearchEntity } from '../../../../common/services/pmsearch/types';
 import { SearchQuery } from '../../store/slices/search/shared/state';
-import { SearchEntity } from 'common/services/pmsearch/types';
+import SearchHistoryList from './SearchHistoryList';
 
 describe('<SearchHistoryList/>', () => {
     const placeholderCallbacks = {

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

@@ -1,14 +1,14 @@
-import React from 'react';
 import { Button, VerticalGroup } from '@grafana/ui';
+import { cx } from 'emotion';
+import React from 'react';
+import { SearchQuery } from '../../store/slices/search/shared/state';
+import { wrappedBtn } from '../../styles';
+import { SearchEntityUtil } from '../../utils/SearchEntityUtil';
 import {
     searchHistoryListBtnWithNoSpacing,
     searchHistoryListContainer,
     searchHistoryListContainerMultiCol,
 } from './styles';
-import { cx } from 'emotion';
-import { SearchQuery } from '../../store/slices/search/shared/state';
-import { SearchEntityUtil } from '../../utils/SearchEntityUtil';
-import { wrappedBtn } from '../../styles';
 
 export interface SearchHistoryListProps {
     showClearBtn?: boolean;

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

@@ -1,9 +1,9 @@
-import { shallow, render } from 'enzyme';
-import { SearchResult } from './SearchResult';
-import React from 'react';
 import { GrafanaThemeType } from '@grafana/data';
 import { getTheme } from '@grafana/ui';
-import { TextItemResponse, EntityType } from 'common/services/pmsearch/types';
+import { render, shallow } from 'enzyme';
+import React from 'react';
+import { EntityType, TextItemResponse } from '../../../../common/services/pmsearch/types';
+import { SearchResult } from './SearchResult';
 
 describe('<SearchResult/>', () => {
     const openDetailMock = jest.fn<void, TextItemResponse[]>(() => void 0);