Merge pull request #16 from grafana/ismail/fix-slate-issues

Fix slate package related issues

Author: itsmylife

package.json

@@ -37,13 +37,15 @@
     "@types/jest": "29.5.5",
     "@types/lodash": "4.14.199",
     "@types/node": "20.8.2",
+    "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.0",
     "@types/pluralize": "0.0.30",
     "@types/prismjs": "1.26.0",
     "@types/react": "18.2.15",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-dom": "18.2.7",
     "@types/react-highlight-words": "0.16.5",
     "@types/react-redux": "7.1.25",
+    "@types/react-window": "1.8.7",
     "@types/semver": "7.5.0",
     "@types/slate": "0.47.11",
     "@types/slate-plain-serializer": "0.7.2",
@@ -90,12 +92,12 @@
   "dependencies": {
     "@emotion/css": "11.11.2",
     "@grafana/aws-sdk": "0.1.3",
-    "@grafana/data": "10.2.0-nightly.6184bf21",
+    "@grafana/data": "10.2.0-nightly.e365200c",
     "@grafana/experimental": "1.7.3",
     "@grafana/faro-web-sdk": "1.2.1",
-    "@grafana/runtime": "10.2.0-nightly.6184bf21",
-    "@grafana/schema": "10.2.0-nightly.6184bf21",
-    "@grafana/ui": "10.2.0-nightly.6184bf21",
+    "@grafana/runtime": "10.2.0-nightly.e365200c",
+    "@grafana/schema": "10.2.0-nightly.e365200c",
+    "@grafana/ui": "10.2.0-nightly.e365200c",
     "@leeoniya/ufuzzy": "1.0.8",
     "@lezer/common": "1.1.0",
     "@lezer/highlight": "1.1.3",
@@ -119,9 +121,9 @@
     "react-window": "1.8.9",
     "rxjs": "7.8.1",
     "semver": "7.5.4",
-    "slate": "0.94.1",
+    "slate": "0.47.9",
     "slate-plain-serializer": "0.7.13",
-    "slate-react": "0.99.0",
+    "slate-react": "0.22.10",
     "uuid": "^9.0.1",
     "whatwg-fetch": "3.6.2"
   },
@@ -130,5 +132,9 @@
     "prettier@3.0.0": {
       "unplugged": true
     }
+  },
+  "resolutions": {
+    "@types/slate": "0.47.11",
+    "slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch"
   }
 }

src/components/PromQueryField.tsx

@@ -1,37 +1,22 @@
 import { cx } from '@emotion/css';
 import { isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import {
-  BracesPlugin,
-  clearButtonStyles,
-  DOMUtil,
-  Icon,
-  SlatePrism,
-  SuggestionsState,
-  Themeable2,
-  TypeaheadInput,
-  TypeaheadOutput,
-  withTheme2,
-} from '@grafana/ui';
-import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
+import { clearButtonStyles, Icon, Themeable2, withTheme2 } from '@grafana/ui';
+import React, { ReactNode } from 'react';
+
+import { PrometheusDatasource } from '../datasource';
+import { LocalStorageValueProvider } from '../gcopypaste/app/core/components/LocalStorageValueProvider';
 import {
   CancelablePromise,
   isCancelablePromiseRejection,
   makePromiseCancelable,
-} from 'app/core/utils/CancelablePromise';
-import { LanguageMap, languages as prismLanguages } from 'prismjs';
-import React, { ReactNode } from 'react';
-import { Plugin } from 'slate';
-import { Editor } from 'slate-react';
-
-import { PrometheusDatasource } from '../datasource';
+} from '../gcopypaste/app/core/utils/CancelablePromise';
 import { roundMsToMin } from '../language_utils';
 import { PromOptions, PromQuery } from '../types';
 
 import { PrometheusMetricsBrowser } from './PrometheusMetricsBrowser';
 import { MonacoQueryFieldWrapper } from './monaco-query-field/MonacoQueryFieldWrapper';
 
-export const RECORDING_RULES_GROUP = '__recording_rules__';
 const LAST_USED_LABELS_KEY = 'grafana.datasources.prometheus.browser.labels';
 
 function getChooserText(metricsLookupDisabled: boolean, hasSyntax: boolean, hasMetrics: boolean) {
@@ -50,33 +35,6 @@ function getChooserText(metricsLookupDisabled: boolean, hasSyntax: boolean, hasM
   return 'Metrics browser';
 }
 
-export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: SuggestionsState): string {
-  // Modify suggestion based on context
-  switch (typeaheadContext) {
-    case 'context-labels': {
-      const nextChar = DOMUtil.getNextCharacter();
-      if (!nextChar || nextChar === '}' || nextChar === ',') {
-        suggestion += '=';
-      }
-      break;
-    }
-
-    case 'context-label-values': {
-      // Always add quotes and remove existing ones instead
-      if (!typeaheadText.match(/^(!?=~?"|")/)) {
-        suggestion = `"${suggestion}`;
-      }
-      if (DOMUtil.getNextCharacter() !== '"') {
-        suggestion = `${suggestion}"`;
-      }
-      break;
-    }
-
-    default:
-  }
-  return suggestion;
-}
-
 interface PromQueryFieldProps extends QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>, Themeable2 {
   ExtraFieldElement?: ReactNode;
   'data-testid'?: string;
@@ -89,23 +47,11 @@ interface PromQueryFieldState {
 }
 
 class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
-  plugins: Array<Plugin<Editor>>;
   declare languageProviderInitializationPromise: CancelablePromise<any>;
 
   constructor(props: PromQueryFieldProps, context: React.Context<any>) {
     super(props, context);
 
-    this.plugins = [
-      BracesPlugin(),
-      SlatePrism(
-        {
-          onlyIn: (node: any) => node.type === 'code_block',
-          getSyntax: (node: any) => 'promql',
-        },
-        { ...(prismLanguages as LanguageMap), promql: this.props.datasource.languageProvider.syntax }
-      ),
-    ];
-
     this.state = {
       labelBrowserVisible: false,
       syntaxLoaded: false,
@@ -254,26 +200,6 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
     this.setState({ syntaxLoaded: true });
   };
 
-  onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
-    const {
-      datasource: { languageProvider },
-    } = this.props;
-
-    if (!languageProvider) {
-      return { suggestions: [] };
-    }
-
-    const { history } = this.props;
-    const { prefix, text, value, wrapperClasses, labelKey } = typeahead;
-
-    const result = await languageProvider.provideCompletionItems(
-      { text, value, prefix, wrapperClasses, labelKey },
-      { history }
-    );
-
-    return result;
-  };
-
   render() {
     const {
       datasource,

src/datasource.ts

@@ -31,10 +31,11 @@ import {
   FetchError,
   FetchResponse,
   getBackendSrv,
+  getTemplateSrv,
   isFetchError,
+  TemplateSrv,
   toDataQueryResponse,
 } from '@grafana/runtime';
-import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 import { cloneDeep, defaults } from 'lodash';
 import { forkJoin, lastValueFrom, merge, Observable, of, OperatorFunction, pipe, throwError } from 'rxjs';
 import { catchError, filter, map, tap } from 'rxjs/operators';

src/gcopypaste/app/core/utils/CancelablePromise.ts

@@ -0,0 +1,31 @@
+// https://github.com/facebook/react/issues/5465
+
+export interface CancelablePromise<T> {
+  promise: Promise<T>;
+  cancel: () => void;
+}
+
+export interface CancelablePromiseRejection {
+  isCanceled: boolean;
+}
+
+export function isCancelablePromiseRejection(promise: unknown): promise is CancelablePromiseRejection {
+  return typeof promise === 'object' && promise !== null && 'isCanceled' in promise;
+}
+
+export const makePromiseCancelable = <T>(promise: Promise<T>): CancelablePromise<T> => {
+  let hasCanceled_ = false;
+
+  const wrappedPromise = new Promise<T>((resolve, reject) => {
+    const canceledPromiseRejection: CancelablePromiseRejection = { isCanceled: true };
+    promise.then((val) => (hasCanceled_ ? reject(canceledPromiseRejection) : resolve(val)));
+    promise.catch((error) => (hasCanceled_ ? reject(canceledPromiseRejection) : reject(error)));
+  });
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled_ = true;
+    },
+  };
+};