[v7.5.x] Chore: Update slate and related packages (#54566) (#55688)

.gitignore

@@ -98,6 +98,7 @@ debug.test
 
 /scripts/build/release_publisher/release_publisher
 *.patch
+!patches/slate-dev-environment*.patch
 
 # Ignoring frontend packages specifics
 /packages/**/dist

package.json

@@ -29,6 +29,7 @@
     "packages:publishDev": "lerna publish from-package --contents dist --dist-tag dev --yes --registry http://grafana-npm.local:4873 --force-publish=*",
     "packages:typecheck": "lerna run typecheck",
     "packages:clean": "lerna run clean",
+    "postinstall": "patch-package",
     "precommit": "yarn run lint-staged",
     "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\"",
     "prettier:write": "prettier --list-different \"**/*.{ts,tsx,scss,js}\" --write",
@@ -114,9 +115,9 @@
     "@types/redux-logger": "3.0.7",
     "@types/redux-mock-store": "1.0.2",
     "@types/reselect": "2.2.0",
-    "@types/slate": "0.47.1",
-    "@types/slate-plain-serializer": "0.6.1",
-    "@types/slate-react": "0.22.5",
+    "@types/slate": "0.47.9",
+    "@types/slate-plain-serializer": "0.7.2",
+    "@types/slate-react": "0.22.9",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/testing-library__react-hooks": "^3.2.0",
     "@types/tinycolor2": "1.4.2",
@@ -169,6 +170,8 @@
     "mutationobserver-shim": "0.3.3",
     "ngtemplate-loader": "2.0.1",
     "optimize-css-assets-webpack-plugin": "5.0.4",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "postcss-browser-reporter": "0.6.0",
     "postcss-loader": "3.0.0",
     "postcss-reporter": "6.0.1",
@@ -201,7 +204,6 @@
   "dependencies": {
     "@emotion/core": "10.0.27",
     "@grafana/aws-sdk": "0.0.3",
-    "@grafana/slate-react": "0.22.9-grafana",
     "@popperjs/core": "2.5.4",
     "@reduxjs/toolkit": "1.5.0",
     "@sentry/browser": "5.25.0",
@@ -283,8 +285,10 @@
     "rst2html": "github:thoward/rst2html#990cb89",
     "rxjs": "6.6.3",
     "search-query-parser": "1.5.4",
-    "slate": "0.47.8",
-    "slate-plain-serializer": "0.7.10",
+    "slate": "0.47.9",
+    "slate-dev-environment": "0.2.5",
+    "slate-plain-serializer": "0.7.11",
+    "slate-react": "0.22.10",
     "tether": "1.4.7",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
     "tinycolor2": "1.4.1",
@@ -294,6 +298,8 @@
     "whatwg-fetch": "3.1.0"
   },
   "resolutions": {
+    "@types/slate": "0.47.9",
+    "slate-dev-environment": "0.2.5",
     "caniuse-db": "1.0.30000772",
     "react-use-measure": "https://github.com/mckn/react-use-measure.git#remove-cjs-export"
   },

packages/grafana-runtime/tsconfig.json

@@ -4,9 +4,6 @@
     "declarationDir": "dist",
     "outDir": "compiled",
     "rootDirs": ["."],
-    "paths": {
-      "@grafana/slate-react": ["../grafana-ui/node_modules/@types/slate-react"]
-    },
     "typeRoots": ["node_modules/@types"]
   },
   "exclude": ["dist", "node_modules"],

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -177,7 +177,7 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
       'emotion',
       'prismjs',
       'slate-plain-serializer',
-      '@grafana/slate-react',
+      'slate-react',
       'react',
       'react-dom',
       'react-redux',

packages/grafana-ui/package.json

@@ -30,7 +30,6 @@
     "@grafana/aws-sdk": "0.0.3",
     "@grafana/data": "7.5.16",
     "@grafana/e2e-selectors": "7.5.16",
-    "@grafana/slate-react": "0.22.9-grafana",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@iconscout/react-unicons": "1.1.4",
     "@popperjs/core": "2.5.4",
@@ -42,8 +41,9 @@
     "@types/react-color": "3.0.1",
     "@types/react-select": "3.0.8",
     "@types/react-table": "7.0.12",
-    "@types/slate": "0.47.1",
-    "@types/slate-react": "0.22.5",
+    "@types/slate": "0.47.9",
+    "@types/slate-plain-serializer": "0.7.2",
+    "@types/slate-react": "0.22.9",
     "@visx/event": "1.3.0",
     "@visx/gradient": "1.0.0",
     "@visx/scale": "1.4.0",
@@ -76,7 +76,9 @@
     "react-storybook-addon-props-combinations": "1.1.0",
     "react-table": "7.0.0",
     "react-transition-group": "4.4.1",
-    "slate": "0.47.8",
+    "slate": "0.47.9",
+    "slate-plain-serializer": "0.7.11",
+    "slate-react": "0.22.10",
     "tinycolor2": "1.4.1",
     "uplot": "1.6.9"
   },

packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

@@ -7,7 +7,7 @@ import { getFormStyles, Portal } from '../index';
 
 // @ts-ignore
 import Prism, { Grammar, LanguageMap } from 'prismjs';
-import { Editor } from '@grafana/slate-react';
+import { Editor } from 'slate-react';
 import { Value } from 'slate';
 import Plain from 'slate-plain-serializer';
 import { Popper as ReactPopper } from 'react-popper';
@@ -84,7 +84,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
     // SelectionReference is used to position the variables suggestion relatively to current DOM selection
     const selectionRef = useMemo(() => new SelectionReference(), []);
 
-    const onKeyDown = React.useCallback((event: KeyboardEvent, next: () => any) => {
+    const onKeyDown = React.useCallback((event: React.KeyboardEvent, next: () => any) => {
       if (!stateRef.current.showingSuggestions) {
         if (event.key === '=' || event.key === '$' || (event.keyCode === 32 && event.ctrlKey)) {
           return setShowingSuggestions(true);
@@ -190,7 +190,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
               placeholder={placeholder}
               value={stateRef.current.linkUrl}
               onChange={onUrlChange}
-              onKeyDown={(event, _editor, next) => onKeyDown(event as KeyboardEvent, next)}
+              onKeyDown={(event, _editor, next) => onKeyDown(event, next)}
               plugins={plugins}
               className={cx(
                 styles.editor,

packages/grafana-ui/src/components/QueryField/QueryField.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { QueryField } from './QueryField';
-import { Editor } from 'slate';
+import { shallow, mount } from 'enzyme';
+import { Editor } from 'slate-react';
 
 describe('<QueryField />', () => {
   it('should render with null initial value', () => {
@@ -21,19 +21,20 @@ describe('<QueryField />', () => {
 
   it('should execute query on blur', () => {
     const onRun = jest.fn();
-    const wrapper = shallow(
+    const wrapper = mount(
       <QueryField query="my query" onTypeahead={jest.fn()} onRunQuery={onRun} portalOrigin="mock-origin" />
     );
     const field = wrapper.instance() as QueryField;
+    const ed = wrapper.find(Editor).instance() as Editor;
     expect(onRun.mock.calls.length).toBe(0);
-    field.handleBlur(new Event('bogus'), new Editor({}), () => {});
+    field.handleBlur(undefined, ed, () => {});
     expect(onRun.mock.calls.length).toBe(1);
   });
 
   it('should run custom on blur, but not necessarily execute query', () => {
     const onBlur = jest.fn();
     const onRun = jest.fn();
-    const wrapper = shallow(
+    const wrapper = mount(
       <QueryField
         query="my query"
         onTypeahead={jest.fn()}
@@ -43,9 +44,10 @@ describe('<QueryField />', () => {
       />
     );
     const field = wrapper.instance() as QueryField;
+    const ed = wrapper.find(Editor).instance() as Editor;
     expect(onBlur.mock.calls.length).toBe(0);
     expect(onRun.mock.calls.length).toBe(0);
-    field.handleBlur(new Event('bogus'), new Editor({}), () => {});
+    field.handleBlur(undefined, ed, () => {});
     expect(onBlur.mock.calls.length).toBe(1);
     expect(onRun.mock.calls.length).toBe(0);
   });

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import React, { Context } from 'react';
 
-import { Value, Editor as CoreEditor } from 'slate';
-import { Editor, Plugin } from '@grafana/slate-react';
+import { Value } from 'slate';
 import Plain from 'slate-plain-serializer';
 import classnames from 'classnames';
+import { Editor, Plugin } from 'slate-react';
+
+import { selectors } from '@grafana/e2e-selectors';
 
 import {
   ClearPlugin,
@@ -17,7 +19,6 @@ import {
 } from '../../slate-plugins';
 
 import { makeValue, SCHEMA, CompletionItemGroup, TypeaheadOutput, TypeaheadInput, SuggestionsState } from '../..';
-import { selectors } from '@grafana/e2e-selectors';
 
 export interface QueryFieldProps {
   additionalPlugins?: Plugin[];
@@ -31,7 +32,7 @@ export interface QueryFieldProps {
   onBlur?: () => void;
   onChange?: (value: string) => void;
   onRichValueChange?: (value: Value) => void;
-  onClick?: (event: Event, editor: CoreEditor, next: () => any) => any;
+  onClick?: (event: Event | React.MouseEvent, editor: Editor, next: () => any) => any;
   onTypeahead?: (typeahead: TypeaheadInput) => Promise<TypeaheadOutput>;
   onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;
   placeholder?: string;
@@ -55,7 +56,7 @@ export interface QueryFieldState {
  * Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.
  */
 export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldState> {
-  plugins: Plugin[];
+  plugins: Array<Plugin<Editor>>;
   runOnChangeDebounced: Function;
   lastExecutedValue: Value | null = null;
   mounted = false;
@@ -173,7 +174,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
   /**
    * We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.
    */
-  handleBlur = (event: Event, editor: CoreEditor, next: Function) => {
+  handleBlur = (_: React.FocusEvent | undefined, editor: Editor, next: Function) => {
     const { onBlur } = this.props;
 
     if (onBlur) {
@@ -220,5 +221,3 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     );
   }
 }
-
-export default QueryField;

packages/grafana-ui/src/slate-plugins/braces.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Plain from 'slate-plain-serializer';
-import { Editor } from '@grafana/slate-react';
 import { shallow } from 'enzyme';
+import { Editor } from 'slate-react';
+
 import { BracesPlugin } from './braces';
 
 declare global {
@@ -18,43 +19,46 @@ describe('braces', () => {
     const value = Plain.deserialize('');
     const editor = shallow<Editor>(<Editor value={value} />);
     const event = new window.KeyboardEvent('keydown', { key: '(' });
-    expect(handler(event as Event, editor.instance() as any, nextMock)).toBeTruthy();
+    expect(handler(event as any, editor.instance(), nextMock)).toBeTruthy();
     expect(Plain.serialize(editor.instance().value)).toEqual('()');
   });
 
   it('removes closing brace when opening brace is removed', () => {
     const value = Plain.deserialize('time()');
     const editor = shallow<Editor>(<Editor value={value} />);
     const event = new window.KeyboardEvent('keydown', { key: 'Backspace' });
-    handler(event as Event, editor.instance().moveForward(5) as any, nextMock);
+    editor.instance().moveForward(5);
+    handler(event as any, editor.instance(), nextMock);
     expect(Plain.serialize(editor.instance().value)).toEqual('time');
   });
 
   it('keeps closing brace when opening brace is removed and inner values exist', () => {
     const value = Plain.deserialize('time(value)');
     const editor = shallow<Editor>(<Editor value={value} />);
     const event = new window.KeyboardEvent('keydown', { key: 'Backspace' });
-    const handled = handler(event as Event, editor.instance().moveForward(5) as any, nextMock);
+    editor.instance().moveForward(5);
+    const handled = handler(event as any, editor.instance(), nextMock);
     expect(handled).toBeFalsy();
   });
 
   it('overrides an automatically inserted brace', () => {
     const value = Plain.deserialize('');
     const editor = shallow<Editor>(<Editor value={value} />);
     const opening = new window.KeyboardEvent('keydown', { key: '(' });
-    expect(handler(opening as Event, editor.instance() as any, nextMock)).toBeTruthy();
+    expect(handler(opening as any, editor.instance(), nextMock)).toBeTruthy();
     const closing = new window.KeyboardEvent('keydown', { key: ')' });
-    expect(handler(closing as Event, editor.instance() as any, nextMock)).toBeTruthy();
+    expect(handler(closing as any, editor.instance(), nextMock)).toBeTruthy();
     expect(Plain.serialize(editor.instance().value)).toEqual('()');
   });
 
   it.skip('does not override manually inserted braces', () => {
     const value = Plain.deserialize('');
     const editor = shallow<Editor>(<Editor value={value} />);
     const event1 = new window.KeyboardEvent('keydown', { key: ')' });
-    expect(handler(event1 as Event, editor.instance() as any, nextMock)).toBeFalsy();
+    expect(handler(event1 as any, editor.instance(), nextMock)).toBeFalsy();
     const event2 = new window.KeyboardEvent('keydown', { key: ')' });
-    expect(handler(event2 as Event, editor.instance().moveBackward(1) as any, nextMock)).toBeFalsy();
+    editor.instance().moveBackward(1);
+    expect(handler(event2 as any, editor.instance(), nextMock)).toBeFalsy();
     expect(Plain.serialize(editor.instance().value)).toEqual('))');
   });
 });

packages/grafana-ui/src/slate-plugins/braces.ts

@@ -1,5 +1,5 @@
-import { Plugin } from '@grafana/slate-react';
-import { Editor as CoreEditor, Annotation } from 'slate';
+import { Annotation } from 'slate';
+import { Plugin } from 'slate-react';
 import { v4 as uuidv4 } from 'uuid';
 
 const BRACES: any = {
@@ -12,11 +12,10 @@ const MATCH_MARK = 'brace_match';
 
 export function BracesPlugin(): Plugin {
   return {
-    onKeyDown(event: Event, editor: CoreEditor, next: Function) {
-      const keyEvent = event as KeyboardEvent;
+    onKeyDown(event, editor, next) {
       const { value } = editor;
 
-      switch (keyEvent.key) {
+      switch (event.key) {
         case '(':
         case '{':
         case '[': {
@@ -29,10 +28,10 @@ export function BracesPlugin(): Plugin {
 
           // If text is selected, wrap selected text in parens
           if (value.selection.isExpanded) {
-            keyEvent.preventDefault();
+            event.preventDefault();
             editor
-              .insertTextByKey(startKey, startOffset, keyEvent.key)
-              .insertTextByKey(endKey, endOffset + 1, BRACES[keyEvent.key])
+              .insertTextByKey(startKey, startOffset, event.key)
+              .insertTextByKey(endKey, endOffset + 1, BRACES[event.key])
               .moveEndBackward(1);
             return true;
           } else if (
@@ -41,8 +40,8 @@ export function BracesPlugin(): Plugin {
             text[focusOffset] === ' ' ||
             Object.values(BRACES).includes(text[focusOffset])
           ) {
-            keyEvent.preventDefault();
-            const complement = BRACES[keyEvent.key];
+            event.preventDefault();
+            const complement = BRACES[event.key];
             const matchAnnotation = {
               key: `${MATCH_MARK}-${uuidv4()}`,
               type: `${MATCH_MARK}-${complement}`,
@@ -58,7 +57,7 @@ export function BracesPlugin(): Plugin {
               },
               object: 'annotation',
             } as Annotation;
-            editor.insertText(keyEvent.key).insertText(complement).addAnnotation(matchAnnotation).moveBackward(1);
+            editor.insertText(event.key).insertText(complement).addAnnotation(matchAnnotation).moveBackward(1);
 
             return true;
           }
@@ -72,13 +71,13 @@ export function BracesPlugin(): Plugin {
           const offset = value.selection.anchor.offset;
           const nextChar = text[offset];
           // Handle closing brace when it's already the next character
-          const complement = keyEvent.key;
+          const complement = event.key;
           const annotationType = `${MATCH_MARK}-${complement}`;
           const annotation = value.annotations.find(
             (a) => a?.type === annotationType && a.anchor.key === value.anchorText.key
           );
           if (annotation && nextChar === complement && !value.selection.isExpanded) {
-            keyEvent.preventDefault();
+            event.preventDefault();
             editor.moveFocusForward(1).removeAnnotation(annotation).moveAnchorForward(1);
             return true;
           }
@@ -91,7 +90,7 @@ export function BracesPlugin(): Plugin {
           const previousChar = text[offset - 1];
           const nextChar = text[offset];
           if (BRACES[previousChar] && BRACES[previousChar] === nextChar) {
-            keyEvent.preventDefault();
+            event.preventDefault();
             // Remove closing brace if directly following
             editor.deleteBackward(1).deleteForward(1).focus();
             return true;