Chore: update dependencies (#96)

* Chore: update dependencies * update changelog to prepare for 0.5.0 release * final update before releasing
grafana · Oct 3, 2024 · 0772197 · 0772197
1 parent 93883c5
commit 0772197
Show file tree

Hide file tree

Showing 19 changed files with 3,658 additions and 4,032 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## v0.5.0
+
+- Chore: update dependencies in [#96](https://github.com/grafana/grafana-aws-sdk-react/pull/96)
+
 ## v0.4.2
 
 - Bump fast-loops from 1.1.3 to 1.1.4 in [#94](https://github.com/grafana/grafana-aws-sdk-react/pull/94)

diff --git a/jest.config.js b/jest.config.js
@@ -3,6 +3,9 @@
 // do not edit this file
 module.exports = {
   modulePaths: ['<rootDir>/src'],
+  moduleNameMapper: {
+    '\\.(css|scss|sass)$': 'identity-obj-proxy',
+  },
   setupFilesAfterEnv: ['<rootDir>/src/tests/setupTests.ts'],
   testEnvironment: 'jest-environment-jsdom',
   testMatch: [
@@ -28,4 +31,3 @@ module.exports = {
   },
   transformIgnorePatterns: [],
 };
-
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@grafana/aws-sdk",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Common AWS features for grafana",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -11,9 +11,9 @@
   "scripts": {
     "dev": "yarn bundle --watch --watch.onStart=\"yarn typecheck\"",
     "build": "yarn clean && yarn typecheck && yarn bundle",
-    "bundle": "rollup -c rollup.config.ts",
+    "bundle": "rollup -c rollup.config.ts --configPlugin esbuild",
     "clean": "rimraf ./dist ./compiled",
-    "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx ./src && spellcheck",
+    "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src && yarn spellcheck",
     "spellcheck": "cspell -c cspell.config.json \"**/*.{ts,tsx,js,go,md,mdx,yml,yaml,json,scss,css}\"",
     "typecheck": "tsc -p ./tsconfig.build.json",
     "test": "jest --notify --watch",
@@ -28,40 +28,40 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@grafana/async-query-data": "0.2.0",
-    "@grafana/experimental": "1.7.12"
+    "@grafana/experimental": "2.1.1"
   },
   "devDependencies": {
-    "@grafana/data": "10.3.6",
-    "@grafana/eslint-config": "^6.0.1",
-    "@grafana/runtime": "10.3.6",
-    "@grafana/ui": "10.3.6",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@swc/core": "^1.3.93",
-    "@swc/jest": "^0.2.29",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@grafana/data": "11.2.2",
+    "@grafana/eslint-config": "^7.0.0",
+    "@grafana/runtime": "11.2.2",
+    "@grafana/tsconfig": "^2.0.0",
+    "@grafana/ui": "11.2.2",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@swc/core": "^1.7.28",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "27.4.1",
-    "@types/lodash": "4.14.191",
-    "@types/node": "16.18.6",
-    "@types/react": "18.3.3",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "29.5.13",
+    "@types/lodash": "4.17.10",
+    "@types/node": "22.7.4",
+    "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "cspell": "6.13.3",
-    "esbuild": "^0.16.2",
-    "eslint": "^8.49.0",
-    "eslint-plugin-jsdoc": "^46.7.0",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "27.5.1",
+    "cspell": "8.14.4",
+    "esbuild": "^0.24.0",
+    "eslint-plugin-deprecation": "^3.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "node-notifier": "^10.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-select-event": "^5.5.1",
-    "rimraf": "^3.0.2",
-    "rollup": "2.79.1",
-    "rollup-plugin-dts": "^5.0.0",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-node-externals": "^5.0.2"
+    "rimraf": "^6.0.1",
+    "rollup": "4.24.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-node-externals": "^7.1.3"
   }
 }
diff --git a/rollup.config.ts b/rollup.config.ts
@@ -1,36 +1,47 @@
 import resolve from '@rollup/plugin-node-resolve';
+import { createRequire } from 'node:module';
 import path from 'path';
 import dts from 'rollup-plugin-dts';
 import esbuild from 'rollup-plugin-esbuild';
-import { externals } from 'rollup-plugin-node-externals';
+import { nodeExternals } from 'rollup-plugin-node-externals';
 
-const packagePath = './package.json';
-const pkg = require(packagePath);
+const rq = createRequire(import.meta.url);
+const pkg = rq('./package.json');
+
+const legacyOutputDefaults = {
+  esModule: true,
+  interop: 'compat',
+};
 
 export default [
   {
     input: 'src/index.ts',
     plugins: [
-      externals({
+      nodeExternals({
         deps: true,
         include: ['react', '@emotion/css', '@grafana/data', '@grafana/ui', '@grafana/runtime', 'lodash'],
-        packagePath,
+        packagePath: './package.json',
       }),
       resolve(),
-      esbuild(),
+      esbuild({
+        target: 'es2018',
+        tsconfig: 'tsconfig.build.json',
+      }),
     ],
     output: [
       {
         format: 'cjs',
         sourcemap: true,
         dir: path.dirname(pkg.main),
+        ...legacyOutputDefaults,
       },
       {
         format: 'esm',
         sourcemap: true,
         dir: path.dirname(pkg.module),
         preserveModules: true,
         preserveModulesRoot: './src',
+        ...legacyOutputDefaults,
       },
     ],
   },

diff --git a/src/components/ConnectionConfig.test.tsx b/src/components/ConnectionConfig.test.tsx
@@ -1,7 +1,11 @@
-import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthType, ConnectionConfigProps } from '../types';
+import {
+  AwsAuthDataSourceJsonData,
+  AwsAuthDataSourceSecureJsonData,
+  AwsAuthType,
+  ConnectionConfigProps,
+} from '../types';
 import { ConnectionConfig } from './ConnectionConfig';
 import selectEvent from 'react-select-event';
 import { config } from '@grafana/runtime';

diff --git a/src/sql/QueryEditor/FillValueSelect.test.tsx b/src/sql/QueryEditor/FillValueSelect.test.tsx
@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { mockQuery } from './__mocks__/query';
@@ -13,28 +13,28 @@ const props: FillValueSelectProps<SQLQuery> = {
 };
 
 describe('FillValueSelect', () => {
-      it('should change the fill value mode', async () => {
-        render(<FillValueSelect {...props} />);
-        expect(screen.getByText('Previous Value')).toBeInTheDocument();
+  it('should change the fill value mode', async () => {
+    render(<FillValueSelect {...props} />);
+    expect(screen.getByText('Previous Value')).toBeInTheDocument();
 
-        const selectEl = screen.getByLabelText('Fill with');
-        expect(selectEl).toBeInTheDocument();
-        await select(selectEl, 'NULL', { container: document.body });
+    const selectEl = screen.getByLabelText('Fill with');
+    expect(selectEl).toBeInTheDocument();
+    await select(selectEl, 'NULL', { container: document.body });
 
-        expect(props.onChange).toHaveBeenCalledWith({ ...props.query, fillMode: { mode: FillValueOptions.Null } });
-        expect(props.onRunQuery).toHaveBeenCalled();
-      });
+    expect(props.onChange).toHaveBeenCalledWith({ ...props.query, fillMode: { mode: FillValueOptions.Null } });
+    expect(props.onRunQuery).toHaveBeenCalled();
+  });
 
-      it('should change the fill value for a custom value', async () => {
-        render(<FillValueSelect {...props} query={{ ...mockQuery, fillMode: { mode: FillValueOptions.Value } }} />);
+  it('should change the fill value for a custom value', async () => {
+    render(<FillValueSelect {...props} query={{ ...mockQuery, fillMode: { mode: FillValueOptions.Value } }} />);
 
-        const input = screen.getByLabelText('Value');
-        fireEvent.change(input, { target: { value: '2', valueAsNumber: 2 } });
+    const input = screen.getByLabelText('Value');
+    fireEvent.change(input, { target: { value: '2', valueAsNumber: 2 } });
 
-        expect(props.onChange).toHaveBeenCalledWith({
-          ...props.query,
-          fillMode: { mode: FillValueOptions.Value, value: 2 },
-        });
-        expect(props.onRunQuery).toHaveBeenCalled();
-      });
+    expect(props.onChange).toHaveBeenCalledWith({
+      ...props.query,
+      fillMode: { mode: FillValueOptions.Value, value: 2 },
+    });
+    expect(props.onRunQuery).toHaveBeenCalled();
+  });
 });
diff --git a/src/sql/QueryEditor/FillValueSelect.tsx b/src/sql/QueryEditor/FillValueSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { DataQuery, SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
 import { Input, Select } from '@grafana/ui';
 import { EditorField } from '@grafana/experimental';
 
@@ -32,45 +33,45 @@ export type FillValueSelectProps<TQuery extends DataQuery> = {
 
 export function FillValueSelect<TQuery extends DataQuery & Record<string, any>>(props: FillValueSelectProps<TQuery>) {
   return (
-        <>
-          <EditorField label="Fill with" tooltip="value to fill missing points" htmlFor="fillWith">
-            <Select
-              id="fillWith"
-              aria-label="Fill with"
-              data-testid="table-fill-with-select"
-              options={SelectableFillValueOptions}
-              value={props.query.fillMode?.mode ?? FillValueOptions.Previous}
-              onChange={({ value }) => {
-                props.onChange({
-                  ...props.query,
-                  // Keep the fillMode.value in case FillValueOptions.Value mode is selected back
-                  fillMode: { ...props.query.fillMode, mode: value },
-                });
-                props.onRunQuery?.();
-              }}
-              menuShouldPortal={true}
-            />
-          </EditorField>
-          {props.query.fillMode?.mode === FillValueOptions.Value && (
-            <EditorField label="Value" htmlFor="valueToFill" width={6}>
-              <Input
-                id="valueToFill"
-                aria-label="Value"
-                type="number"
-                value={props.query.fillMode.value}
-                onChange={({ currentTarget }: React.FormEvent<HTMLInputElement>) =>
-                  props.onChange({
-                    ...props.query,
-                    fillMode: {
-                      mode: FillValueOptions.Value,
-                      value: currentTarget.valueAsNumber,
-                    },
-                  })
-                }
-                onBlur={() => props.onRunQuery?.()}
-              />
-            </EditorField>
-          )}
-        </>
+    <>
+      <EditorField label="Fill with" tooltip="value to fill missing points" htmlFor="fillWith">
+        <Select
+          id="fillWith"
+          aria-label="Fill with"
+          data-testid="table-fill-with-select"
+          options={SelectableFillValueOptions}
+          value={props.query.fillMode?.mode ?? FillValueOptions.Previous}
+          onChange={({ value }) => {
+            props.onChange({
+              ...props.query,
+              // Keep the fillMode.value in case FillValueOptions.Value mode is selected back
+              fillMode: { ...props.query.fillMode, mode: value },
+            });
+            props.onRunQuery?.();
+          }}
+          menuShouldPortal={true}
+        />
+      </EditorField>
+      {props.query.fillMode?.mode === FillValueOptions.Value && (
+        <EditorField label="Value" htmlFor="valueToFill" width={6}>
+          <Input
+            id="valueToFill"
+            aria-label="Value"
+            type="number"
+            value={props.query.fillMode.value}
+            onChange={({ currentTarget }: React.FormEvent<HTMLInputElement>) =>
+              props.onChange({
+                ...props.query,
+                fillMode: {
+                  mode: FillValueOptions.Value,
+                  value: currentTarget.valueAsNumber,
+                },
+              })
+            }
+            onBlur={() => props.onRunQuery?.()}
+          />
+        </EditorField>
+      )}
+    </>
   );
 }
diff --git a/src/sql/QueryEditor/FormatSelect.test.tsx b/src/sql/QueryEditor/FormatSelect.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { mockQuery, SQLOptions } from './__mocks__/query';

diff --git a/src/sql/QueryEditor/FormatSelect.tsx b/src/sql/QueryEditor/FormatSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { DataQuery, SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
 import { Select } from '@grafana/ui';
 
 export type FormatSelectProps<TQuery extends DataQuery, FormatOptions> = {
@@ -20,12 +21,14 @@ export function FormatSelect<TQuery extends DataQuery & Record<string, any>, For
     });
     props.onRunQuery?.();
   };
-  return <Select
-          aria-label="Format data frames as"
-          id={props.id ?? 'formatAs'}
-          options={props.options}
-          value={props.query.format}
-          onChange={onChangeFormat}
-          menuShouldPortal={true}
-        />
+  return (
+    <Select
+      aria-label="Format data frames as"
+      id={props.id ?? 'formatAs'}
+      options={props.options}
+      value={props.query.format}
+      onChange={onChangeFormat}
+      menuShouldPortal={true}
+    />
+  );
 }
diff --git a/src/sql/QueryEditor/QueryCodeEditor.test.tsx b/src/sql/QueryEditor/QueryCodeEditor.test.tsx
@@ -1,6 +1,5 @@
-import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { mockQuery } from './__mocks__/query';
 import { QueryCodeEditor } from './QueryCodeEditor';
 
@@ -18,8 +17,6 @@ describe('QueryCodeEditor', () => {
   // so we cannot test a lot here
   it('should render', async () => {
     render(<QueryCodeEditor {...props} />);
-    await waitFor(() => {
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
+    expect(await screen.findByTestId('Spinner')).toBeDefined();
   });
 });
diff --git a/src/sql/QueryEditor/QueryCodeEditor.tsx b/src/sql/QueryEditor/QueryCodeEditor.tsx
@@ -2,7 +2,7 @@ import { defaults } from 'lodash';
 
 import React, { useRef, useEffect } from 'react';
 import { CodeEditor, CodeEditorSuggestionItem, CodeEditorMonacoOptions } from '@grafana/ui';
-import { DataQuery } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
 
 type EditorProps = {
   width?: number | string;