Merge pull request #48 from grafana/src/update-plugin-ui

Chore: Various changes to get plugin ui to compile with grafana 8 librarys

Author: srclosson

.circleci/config.yml

@@ -9,7 +9,7 @@ workflows:
 jobs:
   build:
     docker:
-      - image: circleci/node:12-browsers-legacy
+      - image: circleci/node:14-browsers-legacy
     steps:
       - checkout
       - run:

package.json

@@ -14,11 +14,11 @@
     "storybook:build": "build-storybook"
   },
   "dependencies": {
-    "@grafana/data": "^7.5.10",
-    "@grafana/runtime": "^7.5.10",
-    "@grafana/toolkit": "^7.5.10",
+    "@grafana/data": "^8.4.7",
+    "@grafana/runtime": "^8.4.7",
+    "@grafana/toolkit": "^8.4.7",
     "@grafana/tsconfig": "^1.0.0-rc1",
-    "@grafana/ui": "^7.5.10",
+    "@grafana/ui": "^8.4.7",
     "@types/chance": "^1.1.0",
     "@types/memoize-one": "^5.1.2",
     "@types/react-calendar": "^3.1.2",
@@ -28,7 +28,7 @@
     "memoize-one": "^5.1.1",
     "rc-cascader": "1.0.1",
     "semver": "^7.3.5",
-    "typescript": "4.0.2"
+    "typescript": "^4.7.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/components/AsyncButtonCascader/AsyncButtonCascader.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Icon } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 // @ts-ignore
 import RCCascader, { CascaderOption } from 'rc-cascader';
-import { stylesFactory, useTheme } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
+import { useTheme2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
 
 export interface AsyncButtonCascaderProps {
   options: CascaderOption[];
@@ -19,7 +19,7 @@ export interface AsyncButtonCascaderProps {
   className?: string;
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = ((theme: GrafanaTheme2) => {
   return {
     popup: css`
       label: popup;
@@ -33,7 +33,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 
 export const AsyncButtonCascader: React.FC<AsyncButtonCascaderProps> = props => {
   const { onChange, className, loadData, ...rest } = props;
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getStyles(theme);
 
   return (

src/components/DataLinks/DataLink.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { VariableSuggestion, DataSourceInstanceSettings, DataSourceJsonData } from '@grafana/data';
 import { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui';
 const { FormField, Switch } = LegacyForms;

src/components/DataLinks/DataLinks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, stylesFactory, useTheme } from '@grafana/ui';
 import {
   GrafanaTheme,

src/components/DatePicker/styles.ts

@@ -1,8 +1,7 @@
 import { GrafanaTheme } from '@grafana/data';
-import { stylesFactory } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
-export const getStyles = stylesFactory((theme: GrafanaTheme) => {
+export const getStyles = ((theme: GrafanaTheme) => {
   const containerBorder = theme.isDark
     ? theme.palette.dark9
     : theme.palette.gray5;
@@ -51,7 +50,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-export const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
+export const getBodyStyles = ((theme: GrafanaTheme) => {
   const containerBorder = theme.isDark
     ? theme.palette.dark9
     : theme.palette.gray5;

src/components/QueryEditorRow/QueryEditorRow.tsx

@@ -1,12 +1,13 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 
 export interface QueryEditorRowProps {
   label?: string;
   className?: string;
   noFillEnd?: boolean;
+  children?: React.ReactNode;
 };
 
-export const QueryEditorRow: FunctionComponent<QueryEditorRowProps> = props => {
+export const QueryEditorRow = (props: QueryEditorRowProps) => {
   const className: string = props.className ?? 'width-8';
   const noFillEnd: boolean = props.noFillEnd ?? false;
 

src/test/mocks/DataQuery.ts

@@ -1,4 +1,4 @@
-import { DataQuery, DataTopic } from '@grafana/data';
+import { DataQuery } from '@grafana/data';
 import { Chance } from 'chance';
 import { undefinedOr } from './utils';
 
@@ -7,6 +7,5 @@ export const mockDataQuery = (): DataQuery => ({
   hide: false,
   key: Chance().guid(),
   queryType: Chance().word(),
-  dataTopic: DataTopic.Annotations,
   datasource: undefinedOr(() => Chance().word()),
 });

src/test/mocks/Datasource.ts

@@ -38,7 +38,8 @@ export const mockDatasource = (): DataSourceWithBackend => ({
   interpolateVariablesInQueries: jest.fn(),
   annotations: {},
   annotationQuery: jest.fn(),
-  channelSupport: { getChannelConfig: jest.fn(), getSupportedPaths: jest.fn() },
+  streamOptionsProvider: jest.fn(),
+  getRef: jest.fn(),
 });
 
 const mockQueryHint = (): QueryHint => ({
@@ -67,4 +68,5 @@ export const mockDatasourceInstanceSettings = (): DataSourceInstanceSettings =>
   database: Chance().word(),
   basicAuth: Chance().word(),
   withCredentials: generateBoolean(),
+  access: Chance().pickone(["direct", "proxy"]),
 });

src/test/setupTests.ts

@@ -1 +1,15 @@
 import '@testing-library/jest-dom';
+
+Object.defineProperty(global, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });