fix: show error when iframe src is not available

Also avoid adding postRobot handlers when the iframeRef is not available, this removes some extra errors.
dhis2 · Mar 2, 2023 · 517fc06 · 517fc06
1 parent d1fc48a
commit 517fc06
Showing 1 changed file with 49 additions and 41 deletions.
diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -35,7 +35,7 @@ const IframePlugin = ({
     useEffect(() => {
         // Tell plugin to remove cached data if this dashboard has been removed
         // from offline storage
-        if (!isCached) {
+        if (iframeRef?.current && !isCached) {
             postRobot
                 .send(iframeRef.current.contentWindow, 'removeCachedData')
                 .catch((err) => {
@@ -50,38 +50,40 @@ const IframePlugin = ({
     }, [isCached])
 
     useEffect(() => {
-        const listener = postRobot.on(
-            'getProps',
-            // listen for messages coming only from the iframe rendered by this component
-            { window: iframeRef.current.contentWindow },
-            () => {
-                const pluginProps = {
-                    isVisualizationLoaded: true,
-                    forDashboard: true,
-                    displayProperty: userSettings.displayProperty,
-                    visualization,
-                    onError,
-
-                    // For caching: ---
-                    // Add user & dashboard IDs to cache ID to avoid removing a cached
-                    // plugin that might be used in another dashboard also
-                    // TODO: May also want user ID too for multi-user situations
-                    cacheId: `${dashboardId}-${item.id}`,
-                    isParentCached: isCached,
-                    recordOnNextLoad: recordOnNextLoad,
-                }
+        if (iframeRef?.current) {
+            const listener = postRobot.on(
+                'getProps',
+                // listen for messages coming only from the iframe rendered by this component
+                { window: iframeRef.current.contentWindow },
+                () => {
+                    const pluginProps = {
+                        isVisualizationLoaded: true,
+                        forDashboard: true,
+                        displayProperty: userSettings.displayProperty,
+                        visualization,
+                        onError,
+
+                        // For caching: ---
+                        // Add user & dashboard IDs to cache ID to avoid removing a cached
+                        // plugin that might be used in another dashboard also
+                        // TODO: May also want user ID too for multi-user situations
+                        cacheId: `${dashboardId}-${item.id}`,
+                        isParentCached: isCached,
+                        recordOnNextLoad: recordOnNextLoad,
+                    }
 
-                if (recordOnNextLoad) {
-                    // Avoid recording unnecessarily,
-                    // e.g. if plugin re-requests props for some reason
-                    setRecordOnNextLoad(false)
-                }
+                    if (recordOnNextLoad) {
+                        // Avoid recording unnecessarily,
+                        // e.g. if plugin re-requests props for some reason
+                        setRecordOnNextLoad(false)
+                    }
 
-                return pluginProps
-            }
-        )
+                    return pluginProps
+                }
+            )
 
-        return () => listener.cancel()
+            return () => listener.cancel()
+        }
     }, [
         visualization,
         userSettings,
@@ -113,7 +115,9 @@ const IframePlugin = ({
             return appDetails?.pluginLaunchUrl
         }
 
-        return // XXX
+        setError(true)
+
+        return
     }, [item.type, apps])
 
     if (error) {
@@ -127,18 +131,22 @@ const IframePlugin = ({
         )
     }
 
+    const iframeSrc = getIframeSrc()
+
     return (
         <div className={classes.wrapper}>
-            <iframe
-                ref={iframeRef}
-                src={getIframeSrc()}
-                // preserve dimensions if provided
-                style={{
-                    width: style.width || '100%',
-                    height: style.height || '100%',
-                    border: 'none',
-                }}
-            ></iframe>
+            {iframeSrc ? (
+                <iframe
+                    ref={iframeRef}
+                    src={iframeSrc}
+                    // preserve dimensions if provided
+                    style={{
+                        width: style.width || '100%',
+                        height: style.height || '100%',
+                        border: 'none',
+                    }}
+                ></iframe>
+            ) : null}
         </div>
     )
 }