Display an error message if not providing a URL (#2)

Author: nckswt

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailosinc/grafanaplugin-map-panel",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Visualize maps provided by an s3 datasource",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",

package.json

@@ -8,20 +8,33 @@ import useMapData from './GetMaps';
 
 interface Props extends PanelProps<SimpleOptions> { }
 
+const isValidUrl = (url: string) => /^(http|https):\/\/[^ "]+$/.test(url);
+
 export const ImageDisplayPanel: React.FC<Props> = ({
   options, data, width, height,
 }) => {
   const styles = getStyles();
 
   // TODO: we'll need get all values from the first data series into URLS to be displayed
-  // First query from the S3 Data Source plugin to get the image to be displayed
+  // First series will get the image to be displayed  
   const displayUrl = data.series[0].fields[0].values.get(0);
-  // Second query from the S3 Data Source plugin to get a distinct download URL (if it exists)
+
+  // Second series will get a distinct download URL (if it exists)
   const downloadUrl = data.series.length > 1 ? data.series[1].fields[0].values.get(0) : displayUrl;
 
   const { states } = useMapData(displayUrl, width, height, options);
   const [displayDownload, setDisplayDownload] = useState(false);
 
+  if (!isValidUrl(displayUrl) || !isValidUrl(downloadUrl)) {
+    return (
+      <div className={styles.panel}>
+        <div className={styles.wrapper}>
+          ERROR: Data source must return a valid image URL, like `https://grafana.com/media/images/logos/grafana-logo-footer.svg`
+        </div>
+      </div>
+    );
+  }
+
   const { imgWidth, imgHeight } = states;
   const displayWidth = imgWidth;
   const displayHeight = imgHeight;

src/components/ImageDisplayPanel.tsx

@@ -17,7 +17,7 @@
     },
     "links": [],
     "screenshots": [],
-    "version": "1.0.1",
+    "version": "1.0.4",
     "updated": "2023-07-25"
   },
   "dependencies": {