Merge pull request #14 from grafana/ismail/more-type-fixes-4

More type fixes

Author: itsmylife

package.json

@@ -31,23 +31,23 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/d3": "7.4.0",
     "@types/debounce-promise": "3.1.7",
+    "@types/eslint": "8.44.0",
     "@types/jest": "29.5.5",
     "@types/lodash": "4.14.199",
-    "@types/d3": "7.4.0",
     "@types/node": "20.8.2",
     "@types/pluralize": "0.0.30",
     "@types/prismjs": "1.26.0",
-    "@types/eslint": "8.44.0",
     "@types/react": "18.2.15",
-    "@types/slate": "0.47.11",
-    "@types/slate-plain-serializer": "0.7.2",
-    "@types/slate-react": "0.22.9",
     "@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/semver": "7.5.0",
+    "@types/slate": "0.47.11",
+    "@types/slate-plain-serializer": "0.7.2",
+    "@types/slate-react": "0.22.9",
     "@types/testing-library__jest-dom": "5.14.8",
     "@types/uuid": "9.0.2",
     "@typescript-eslint/eslint-plugin": "5.42.0",
@@ -76,6 +76,7 @@
     "sass-loader": "13.3.2",
     "style-loader": "3.3.3",
     "swc-loader": "0.2.3",
+    "testing-library-selector": "0.3.1",
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.2.0",
     "typescript": "4.8.4",

src/gcopypaste/app/core/components/LocalStorageValueProvider/LocalStorageValueProvider.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+
+import store from '../../store';
+
+export interface Props<T> {
+  storageKey: string;
+  defaultValue: T;
+  children: (value: T, onSaveToStore: (value: T) => void, onDeleteFromStore: () => void) => React.ReactNode;
+}
+
+export const LocalStorageValueProvider = <T,>(props: Props<T>) => {
+  const { children, storageKey, defaultValue } = props;
+
+  const [state, setState] = useState({ value: store.getObject(props.storageKey, props.defaultValue) });
+
+  useEffect(() => {
+    const onStorageUpdate = (v: StorageEvent) => {
+      if (v.key === storageKey) {
+        setState({ value: store.getObject(props.storageKey, props.defaultValue) });
+      }
+    };
+
+    window.addEventListener('storage', onStorageUpdate);
+
+    return () => {
+      window.removeEventListener('storage', onStorageUpdate);
+    };
+  });
+
+  const onSaveToStore = (value: T) => {
+    try {
+      store.setObject(storageKey, value);
+    } catch (error) {
+      console.error(error);
+    }
+    setState({ value });
+  };
+
+  const onDeleteFromStore = () => {
+    try {
+      store.delete(storageKey);
+    } catch (error) {
+      console.log(error);
+    }
+    setState({ value: defaultValue });
+  };
+
+  return <>{children(state.value, onSaveToStore, onDeleteFromStore)}</>;
+};

src/gcopypaste/app/core/components/LocalStorageValueProvider/index.tsx

@@ -0,0 +1 @@
+export { LocalStorageValueProvider } from './LocalStorageValueProvider';

src/gcopypaste/app/core/store.ts

@@ -0,0 +1,65 @@
+type StoreValue = string | number | boolean | null;
+
+export class Store {
+  get(key: string) {
+    return window.localStorage[key];
+  }
+
+  set(key: string, value: StoreValue) {
+    window.localStorage[key] = value;
+  }
+
+  getBool(key: string, def: boolean): boolean {
+    if (def !== void 0 && !this.exists(key)) {
+      return def;
+    }
+    return window.localStorage[key] === 'true';
+  }
+
+  getObject<T = unknown>(key: string): T | undefined;
+  getObject<T = unknown>(key: string, def: T): T;
+  getObject<T = unknown>(key: string, def?: T) {
+    let ret = def;
+    if (this.exists(key)) {
+      const json = window.localStorage[key];
+      try {
+        ret = JSON.parse(json);
+      } catch (error) {
+        console.error(`Error parsing store object: ${key}. Returning default: ${def}. [${error}]`);
+      }
+    }
+    return ret;
+  }
+
+  /* Returns true when successfully stored, throws error if not successfully stored */
+  setObject(key: string, value: unknown) {
+    let json;
+    try {
+      json = JSON.stringify(value);
+    } catch (error) {
+      throw new Error(`Could not stringify object: ${key}. [${error}]`);
+    }
+    try {
+      this.set(key, json);
+    } catch (error) {
+      // Likely hitting storage quota
+      const errorToThrow = new Error(`Could not save item in localStorage: ${key}. [${error}]`);
+      if (error instanceof Error) {
+        errorToThrow.name = error.name;
+      }
+      throw errorToThrow;
+    }
+    return true;
+  }
+
+  exists(key: string) {
+    return window.localStorage[key] !== void 0;
+  }
+
+  delete(key: string) {
+    window.localStorage.removeItem(key);
+  }
+}
+
+const store = new Store();
+export default store;

src/gcopypaste/test/helpers/selectOptionInTest.ts

@@ -0,0 +1,23 @@
+import { Matcher, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { select } from 'react-select-event';
+import { byRole } from 'testing-library-selector';
+
+// Used to select an option or options from a Select in unit tests
+export const selectOptionInTest = async (
+  input: HTMLElement,
+  optionOrOptions: string | RegExp | Array<string | RegExp>
+) => await waitFor(() => select(input, optionOrOptions, { container: document.body }));
+
+// Finds the parent of the Select so you can assert if it has a value
+export const getSelectParent = (input: HTMLElement) =>
+  input.parentElement?.parentElement?.parentElement?.parentElement?.parentElement;
+
+export const clickSelectOption = async (selectElement: HTMLElement, optionText: string): Promise<void> => {
+  await userEvent.click(byRole('combobox').get(selectElement));
+  await selectOptionInTest(selectElement, optionText);
+};
+export const clickSelectOptionMatch = async (selectElement: HTMLElement, optionText: Matcher): Promise<void> => {
+  await userEvent.click(byRole('combobox').get(selectElement));
+  await selectOptionInTest(selectElement, optionText as string);
+};

src/querybuilder/components/LabelFilters.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { ComponentProps } from 'react';
-import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
+import { selectOptionInTest } from '../../gcopypaste/test/helpers/selectOptionInTest';
 import { getLabelSelects } from '../testUtils';
 
 import { LabelFilters, MISSING_LABEL_FILTER_ERROR_MESSAGE, Props } from './LabelFilters';

src/querybuilder/state.ts

@@ -1,6 +1,6 @@
 import { CoreApp } from '@grafana/data';
-import store from 'app/core/store';
 
+import store from '../gcopypaste/app/core/store';
 import { LegendFormatMode, PromQuery } from '../types';
 
 import { QueryEditorMode } from './shared/types';

src/querycache/QueryCache.ts

@@ -10,8 +10,8 @@ import {
 } from '@grafana/data';
 import { faro } from '@grafana/faro-web-sdk';
 import { config, reportInteraction } from '@grafana/runtime';
-import { amendTable, Table, trimTable } from 'app/features/live/data/amendTimeSeries';
 
+import { amendTable, Table, trimTable } from '../gcopypaste/app/features/live/data/amendTimeSeries';
 import { PromQuery } from '../types';
 
 // dashboardUID + panelId + refId

yarn.lock

@@ -10085,6 +10085,11 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+testing-library-selector@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/testing-library-selector/-/testing-library-selector-0.3.1.tgz#ef4c2dfef356d7e0e1de458250d8311dae08af77"
+  integrity sha512-DjXyUhY/omIQNXnjOBFpkRaLADlf9yWDAW0KYpuNuurlS4aJNd1cE7yGG1XAH/LaMOSJ8woCkKdcO2UzyDAYQw==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"