fix: regression - maps and charts are re-rendering [DHIS2-14979] [pat…

…ch/2.40.0] (#2267)

* fix: unwanted re-rendering of dashboard items (#2247)

* fix: solve most unwanted re-renders of dashboard items

This is basically reverting a change I added to solve a DV Highchart's
cutoff issue.
I think I found another approach for that issue which does not require
to pass style to the plugin, which is a problem because of course it
changes any time the dashboard item container changes size (window
resize, resize of other dashboard items, interpretation panel toggle,
etc...).

* chore: bump cli-app-scripts to solve no-service-worker issue

* fix: avoid sending props twice when using View as and plugin changes (#2248)

---------

Co-authored-by: Edoardo Sabadelli <edoardo@dhis2.org>
Co-authored-by: Jan Henrik Øverland <janhenrik.overland@gmail.com>

package.json

@@ -51,7 +51,7 @@
         "cy:capture": "cypress_dhis2_api_stub_mode=CAPTURE yarn d2-utils-cypress run --appStart 'yarn cypress:start'"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^10.2.3",
+        "@dhis2/cli-app-scripts": "^10.3.6",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/cli-utils-cypress": "^7.0.1",
         "@dhis2/cypress-commands": "^7.0.1",

src/components/Item/VisualizationItem/Visualization/IframePlugin.js

@@ -35,6 +35,7 @@ const IframePlugin = ({
 
     // When this mounts, check if the dashboard is recording
     const { isCached, recordingState } = useCacheableSection(dashboardId)
+    const [communicationReceived, setCommunicationReceived] = useState(false)
     const [recordOnNextLoad, setRecordOnNextLoad] = useState(
         recordingState === 'recording'
     )
@@ -47,7 +48,6 @@ const IframePlugin = ({
             forDashboard: true,
             displayProperty: userSettings.displayProperty,
             visualization,
-            style,
             onError,
 
             // For caching: ---
@@ -65,7 +65,6 @@ const IframePlugin = ({
             itemId,
             isCached,
             recordOnNextLoad,
-            style,
         ]
     )
 
@@ -88,34 +87,37 @@ const IframePlugin = ({
 
     useEffect(() => {
         if (iframeRef?.current) {
-            const listener = postRobot.on(
-                'getProps',
-                // listen for messages coming only from the iframe rendered by this component
-                { window: iframeRef.current.contentWindow },
-                () => {
-                    if (recordOnNextLoad) {
-                        // Avoid recording unnecessarily,
-                        // e.g. if plugin re-requests props for some reason
-                        setRecordOnNextLoad(false)
+            // if iframe has not sent initial request, set up a listener
+            if (!communicationReceived) {
+                const listener = postRobot.on(
+                    'getProps',
+                    // listen for messages coming only from the iframe rendered by this component
+                    { window: iframeRef.current.contentWindow },
+                    () => {
+                        setCommunicationReceived(true)
+
+                        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()
+            }
         }
-    }, [recordOnNextLoad, pluginProps])
 
-    useEffect(() => {
-        if (iframeRef.current?.contentWindow) {
+        if (communicationReceived && iframeRef.current?.contentWindow) {
             postRobot.send(
                 iframeRef.current.contentWindow,
                 'newProps',
                 pluginProps
             )
         }
-    }, [pluginProps])
+    }, [communicationReceived, recordOnNextLoad, pluginProps])
 
     useEffect(() => {
         setError(null)