Minor bump

.config/.eslintrc

@@ -4,10 +4,22 @@
  * In order to extend the configuration follow the steps in
  * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config
  */
- {
+{
   "extends": ["@grafana/eslint-config"],
   "root": true,
   "rules": {
     "react/prop-types": "off"
-  }
-}
+  },
+  "overrides": [
+    {
+      "plugins": ["deprecation"],
+      "files": ["src/**/*.{ts,tsx}"],
+      "rules": {
+        "deprecation/deprecation": "warn"
+      },
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    }
+  ]
+}

.config/.prettierrc.js

@@ -5,12 +5,12 @@
  */
 
 module.exports = {
-  "endOfLine": "auto",
-  "printWidth": 120,
-  "trailingComma": "es5",
-  "semi": true,
-  "jsxSingleQuote": false,
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 2
-};
+  endOfLine: 'auto',
+  printWidth: 120,
+  trailingComma: 'es5',
+  semi: true,
+  jsxSingleQuote: false,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+};

.config/webpack/utils.ts

@@ -2,7 +2,6 @@ import fs from 'fs';
 import process from 'process';
 import os from 'os';
 import path from 'path';
-import util from 'util';
 import { glob } from 'glob';
 import { SOURCE_DIR } from './constants';
 

.config/webpack/webpack.config.ts

@@ -110,7 +110,7 @@ const config = async (env): Promise<Configuration> => {
             // Keep publicPath relative for host.com/grafana/ deployments
             publicPath: `public/plugins/${pluginJson.id}/img/`,
             outputPath: 'img/',
-            filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+            filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
           },
         },
         {
@@ -136,6 +136,7 @@ const config = async (env): Promise<Configuration> => {
       },
       path: path.resolve(process.cwd(), DIST_DIR),
       publicPath: `public/plugins/${pluginJson.id}/`,
+      uniqueName: pluginJson.id,
     },
 
     plugins: [

package.json

@@ -24,31 +24,31 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.21.4",
-    "@grafana/e2e": "10.0.0",
-    "@grafana/e2e-selectors": "10.0.0",
+    "@grafana/e2e": "10.2.0",
+    "@grafana/e2e-selectors": "10.2.0",
     "@grafana/eslint-config": "^6.0.0",
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.4",
-    "@types/glob": "^8.0.0",
+    "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
-    "@types/node": "^18.15.11",
-    "@types/plotly.js-dist-min": "^2.3.1",
-    "@types/react-plotly.js": "^2.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@types/node": "^20.8.7",
+    "@types/plotly.js-dist-min": "^2.3.3",
+    "@types/react-plotly.js": "^2.6.2",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
-    "eslint": "8.43.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsdoc": "^46.2.6",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jsdoc": "^46.8.2",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "glob": "^10.2.7",
@@ -66,25 +66,26 @@
     "typescript": "4.8.4",
     "webpack": "^5.86.0",
     "webpack-cli": "^5.1.4",
-    "webpack-livereload-plugin": "^3.0.2"
+    "webpack-livereload-plugin": "^3.0.2",
+    "eslint-plugin-deprecation": "^2.0.0"
   },
   "dependencies": {
-    "@emotion/css": "^11.1.3",
-    "@grafana/data": "^10.0.0",
-    "@grafana/runtime": "^10.0.0",
-    "@grafana/ui": "^10.0.0",
-    "@types/file-saver": "^2.0.5",
-    "@types/plotly.js": "^2.12.18",
+    "@emotion/css": "^11.11.2",
+    "@grafana/data": "^10.2.0",
+    "@grafana/runtime": "^10.2.0",
+    "@grafana/ui": "^10.2.0",
+    "@types/file-saver": "^2.0.6",
+    "@types/plotly.js": "^2.12.29",
     "dayjs": "^1.11.10",
-    "deepmerge": "^4.2.2",
+    "deepmerge": "^4.3.1",
     "file-saver": "^2.0.5",
     "js-yaml": "^4.1.0",
-    "plotly.js-dist-min": "^2.20.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "plotly.js-dist-min": "^2.27.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-plotly.js": "^2.6.0",
     "react-resizable": "^3.0.5",
-    "tslib": "2.5.3"
+    "tslib": "2.6.2"
   },
   "packageManager": "[email protected]"
-}
+}

src/SimplePanel.tsx

@@ -46,7 +46,7 @@ const emptyData = (data: any) => {
 
 const Plot = createPlotlyComponent(Plotly);
 
-interface Props extends PanelProps<SimpleOptions> {}
+interface Props extends PanelProps<SimpleOptions>, Record<string, any> {}
 
 export const SimplePanel = React.memo(
   (props: Props) => {
@@ -190,10 +190,10 @@ export const SimplePanel = React.memo(
       </div>
     );
   },
-  (prevProps, nextProps) => {
+  (prevProps: Props, nextProps: Props) => {
     // Only render on these conditions
-    const memoFields = ['options', 'width', 'height', 'data', 'timeRange', 'timeZone', 'title'];
-    return (memoFields as Array<keyof Props>).every((prop) => _.isEqual(prevProps[prop], nextProps[prop]));
+    const memoFields = ['options', 'width', 'height', 'data', 'timeRange', 'timeZone', 'title'] as any[];
+    return memoFields.every((prop) => _.isEqual(prevProps[prop], nextProps[prop]));
   }
 );