Updated to Grafana 10.4.1

CHANGELOG.md

@@ -1,10 +1,15 @@
 # Changelog
 
-## 4.3.0 (IN PROGRESS)
+## 5.0.0 (2024-03-22)
+
+### Breaking changes
+
+- Requires Grafana 10 and Grafana 11
 
 ### Features / Enhancements
 
 - Added the ability to customize the alert message (#96)
+- Updated to Grafana 10.4.1 (#97)
 
 ## 4.2.0 (2024-02-22)
 

README.md

@@ -2,7 +2,7 @@
 
 ![Image Panel](https://raw.githubusercontent.com/volkovlabs/volkovlabs-image-panel/main/src/img/image-panel.png)
 
-![Grafana](https://img.shields.io/badge/Grafana-10.3-orange)
+![Grafana](https://img.shields.io/badge/Grafana-10.4-orange)
 ![CI](https://github.com/volkovlabs/volkovlabs-image-panel/workflows/CI/badge.svg)
 ![E2E](https://github.com/volkovlabs/volkovlabs-image-panel/workflows/E2E/badge.svg)
 [![codecov](https://codecov.io/gh/VolkovLabs/volkovlabs-image-panel/branch/main/graph/badge.svg?token=0m6f0ktUar)](https://codecov.io/gh/VolkovLabs/volkovlabs-image-panel)

package.json

@@ -2,55 +2,55 @@
   "author": "Volkov Labs",
   "dependencies": {
     "@emotion/css": "^11.11.2",
-    "@grafana/data": "^10.3.3",
-    "@grafana/runtime": "^10.3.3",
-    "@grafana/ui": "^10.3.3",
+    "@grafana/data": "^10.4.1",
+    "@grafana/runtime": "^10.4.1",
+    "@grafana/ui": "^10.4.1",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-medium-image-zoom": "^5.1.10",
-    "react-zoom-pan-pinch": "^3.4.2",
+    "react-zoom-pan-pinch": "^3.4.3",
     "tslib": "^2.6.2"
   },
   "description": "Base64 Image/PDF panel",
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@grafana/e2e": "^10.3.3",
-    "@grafana/e2e-selectors": "^10.3.3",
+    "@babel/core": "^7.24.3",
+    "@grafana/e2e": "^10.4.1",
+    "@grafana/e2e-selectors": "^10.4.1",
     "@grafana/eslint-config": "^7.0.0",
     "@grafana/tsconfig": "^1.3.0-rc1",
-    "@swc/core": "^1.4.2",
-    "@swc/helpers": "^0.5.6",
+    "@swc/core": "^1.4.8",
+    "@swc/helpers": "^0.5.7",
     "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.2.2",
     "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.11.30",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@volkovlabs/eslint-config": "^1.3.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.10.0",
     "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-webpack-plugin": "^4.0.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-webpack-plugin": "^4.1.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "glob": "^10.3.10",
     "identity-obj-proxy": "3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.2.5",
     "replace-in-file-webpack-plugin": "^1.0.6",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "sass-loader": "^14.1.1",
     "style-loader": "^3.3.4",
     "swc-loader": "^0.2.6",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.3.3",
-    "webpack": "^5.90.3",
+    "typescript": "5.4.3",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-livereload-plugin": "^3.0.2"
   },
@@ -74,5 +74,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "4.3.0"
+  "version": "5.0.0"
 }

src/components/ImagePanel/ImagePanel.test.tsx

@@ -1,6 +1,6 @@
 import { FieldType, toDataFrame } from '@grafana/data';
 import { fireEvent, render, screen } from '@testing-library/react';
-import saveAs from 'file-saver';
+import { saveAs } from 'file-saver';
 import React from 'react';
 
 import { TEST_IDS } from '../../constants';
@@ -25,7 +25,9 @@ jest.mock('@grafana/ui', () => ({
 /**
  * Mock file-saver
  */
-jest.mock('file-saver', () => jest.fn());
+jest.mock('file-saver', () => ({
+  saveAs: jest.fn(),
+}));
 
 /**
  * Mock react-medium-image-zoom

src/components/ImagePanel/ImagePanel.tsx

@@ -3,7 +3,7 @@
 import { css, cx } from '@emotion/css';
 import { FieldType, PanelProps } from '@grafana/data';
 import { Alert, PageToolbar, ToolbarButton, useStyles2 } from '@grafana/ui';
-import saveAs from 'file-saver';
+import { saveAs } from 'file-saver';
 import { Base64 } from 'js-base64';
 import React, { JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Controlled as ControlledZoom } from 'react-medium-image-zoom';
@@ -51,7 +51,7 @@
         )
         .map((field) => field?.values)
         .filter((item) => !!item)[0]
         ?.toArray() || []
     );
   }, [data.series, options.name]);
 
@@ -68,7 +68,7 @@
         .map((series) => series.fields.find((field) => field.name === options.description))
         .map((field) => field?.values)
         .filter((item) => !!item)[0]
         ?.toArray() || []
     );
   }, [data.series, options.description]);
 
@@ -179,7 +179,7 @@
         .map((series) =>
           series.fields.find((field) => field.type === FieldType.number && field.name === options.heightName)
         )
         .map((field) => field?.values.get(field.values.length - 1))
         .toString();
       imageHeight = Number(heightField) ? Number(heightField) : imageHeight;
     }
@@ -199,7 +199,7 @@
         .map((series) =>
           series.fields.find((field) => field.type === FieldType.number && field.name === options.widthName)
         )
         .map((field) => field?.values.get(field.values.length - 1))
         .toString();
       imageWidth = Number(widthField) ? Number(widthField) : imageWidth;
     }

src/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
   "dependencies": {
-    "grafanaDependency": ">=9.0.0",
+    "grafanaDependency": ">=10.0.0",
     "plugins": []
   },
   "id": "volkovlabs-image-panel",
@@ -28,7 +28,7 @@
     },
     "screenshots": [
       {
-        "name": "Static Image Panel",
+        "name": "Image Panel",
         "path": "img/image-panel.png"
       }
     ],