From 986cb88dc4f1940a18f802048bbbb9e51e48f139 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 22 Jun 2023 09:51:29 +0200
Subject: [PATCH 01/63] refactor: use generic Plugin component from the
 platform

---
 .../Visualization/IframePlugin.js             | 115 ++++++++----------
 1 file changed, 49 insertions(+), 66 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index f32d90767..5a3ef982a 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -1,10 +1,9 @@
 import { useCachedDataQuery } from '@dhis2/analytics'
-import { useConfig } from '@dhis2/app-runtime'
+import { useConfig, Plugin } from '@dhis2/app-runtime'
 import { CenteredContent, CircularLoader } from '@dhis2/ui'
-import postRobot from '@krakenjs/post-robot'
 import PropTypes from 'prop-types'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useDispatch, useSelector, shallowEqual } from 'react-redux'
 import { acAddIframePluginStatus } from '../../../../actions/iframePluginStatus.js'
 import {
     CHART,
@@ -15,9 +14,9 @@ import { getPluginOverrides } from '../../../../modules/localStorage.js'
 import { useCacheableSection } from '../../../../modules/useCacheableSection.js'
 import {
     INSTALLATION_STATUS_INSTALLING,
-    INSTALLATION_STATUS_READY,
+    //    INSTALLATION_STATUS_READY,
     INSTALLATION_STATUS_UNKNOWN,
-    INSTALLATION_STATUS_WILL_NOT_INSTALL,
+    //    INSTALLATION_STATUS_WILL_NOT_INSTALL,
     sGetIframePluginStatus,
 } from '../../../../reducers/iframePluginStatus.js'
 import { useUserSettings } from '../../../UserSettingsProvider.js'
@@ -38,27 +37,39 @@ const IframePlugin = ({
     isFirstOfType,
 }) => {
     const dispatch = useDispatch()
-    const iframePluginStatus = useSelector(sGetIframePluginStatus)
+    const iframePluginStatus = useSelector(sGetIframePluginStatus, shallowEqual)
     const { baseUrl } = useConfig()
     const { userSettings } = useUserSettings()
-    const iframeRef = useRef()
     const [error, setError] = useState(null)
     const { apps } = useCachedDataQuery()
 
     // When this mounts, check if the dashboard is recording
     const { isCached, recordingState } = useCacheableSection(dashboardId)
-    const [recordOnNextLoad, setRecordOnNextLoad] = useState(
-        recordingState === 'recording'
-    )
-
-    const prevPluginRef = useRef()
 
-    const onError = () => setError('plugin')
+    // TODO set this to false after first props transfer with true flag
+    const recordOnNextLoad = recordingState === 'recording'
+    //    const [recordOnNextLoad, setRecordOnNextLoad] = useState(
+    //        recordingState === 'recording'
+    //    )
 
     const pluginType = [CHART, REPORT_TABLE].includes(activeType)
         ? VISUALIZATION
         : activeType
-    const installationStatus = iframePluginStatus[pluginType]
+
+    const onError = () => setError('plugin')
+    const onInstallationStatusChange = useCallback(
+        (installationStatus) => {
+            if (isFirstOfType) {
+                dispatch(
+                    acAddIframePluginStatus({
+                        pluginType,
+                        status: installationStatus,
+                    })
+                )
+            }
+        },
+        [dispatch, isFirstOfType, pluginType]
+    )
 
     const pluginProps = useMemo(
         () => ({
@@ -67,6 +78,7 @@ const IframePlugin = ({
             displayProperty: userSettings.keyAnalysisDisplayProperty,
             visualization,
             onError,
+            onInstallationStatusChange,
 
             // For caching: ---
             // Add user & dashboard IDs to cache ID to avoid removing a cached
@@ -82,6 +94,7 @@ const IframePlugin = ({
             dashboardId,
             itemId,
             isCached,
+            onInstallationStatusChange,
             recordOnNextLoad,
         ]
     )
@@ -107,23 +120,25 @@ const IframePlugin = ({
 
     const iframeSrc = getIframeSrc()
 
-    useEffect(() => {
-        // Tell plugin to remove cached data if this dashboard has been removed
-        // from offline storage
-        if (iframeRef?.current && !isCached) {
-            postRobot
-                .send(iframeRef.current.contentWindow, 'removeCachedData')
-                .catch((err) => {
-                    // catch error if iframe hasn't loaded yet
-                    const msg = 'No handler found for post message:'
-                    if (err.message.startsWith(msg)) {
-                        return
-                    }
-                    console.error(err)
-                })
-        }
-    }, [isCached])
-
+    // TODO figure out how to send this message via Plugin without re-rendering
+    //    useEffect(() => {
+    //        // Tell plugin to remove cached data if this dashboard has been removed
+    //        // from offline storage
+    //        if (iframeRef?.current && !isCached) {
+    //            postRobot
+    //                .send(iframeRef.current.contentWindow, 'removeCachedData')
+    //                .catch((err) => {
+    //                    // catch error if iframe hasn't loaded yet
+    //                    const msg = 'No handler found for post message:'
+    //                    if (err.message.startsWith(msg)) {
+    //                        return
+    //                    }
+    //                    console.error(err)
+    //                })
+    //        }
+    //    }, [isCached])
+
+    /*
     useEffect(() => {
         if (
             iframeRef?.current &&
@@ -165,30 +180,7 @@ const IframePlugin = ({
         installationStatus,
         isFirstOfType,
     ])
-
-    useEffect(() => {
-        if (iframeRef?.current) {
-            const listener = postRobot.on(
-                'installationStatus',
-                {
-                    window: iframeRef.current.contentWindow,
-                },
-                (event) => {
-                    if (isFirstOfType) {
-                        dispatch(
-                            acAddIframePluginStatus({
-                                pluginType,
-                                status: event.data.installationStatus,
-                            })
-                        )
-                    }
-                }
-            )
-
-            return () => listener.cancel()
-        }
-    }, [pluginType, dispatch, visualization, iframePluginStatus, isFirstOfType])
-
+*/
     useEffect(() => {
         setError(null)
     }, [filterVersion, visualization.type])
@@ -235,16 +227,7 @@ const IframePlugin = ({
     return (
         <div className={classes.wrapper} dir={document.dir}>
             {iframeSrc ? (
-                <iframe
-                    ref={iframeRef}
-                    src={iframeSrc}
-                    // preserve dimensions if provided
-                    style={{
-                        width: style.width || '100%',
-                        height: style.height || '100%',
-                        border: 'none',
-                    }}
-                ></iframe>
+                <Plugin pluginSource={iframeSrc} {...pluginProps} />
             ) : null}
         </div>
     )

From 85c477214c62d0cd75f2b477acc5cadbcbb54388 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 9 Oct 2023 10:20:10 +0200
Subject: [PATCH 02/63] refactor: handle recording on first load, pass width
 and height

---
 .../Visualization/IframePlugin.js             | 86 ++++---------------
 1 file changed, 17 insertions(+), 69 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index 5a3ef982a..b8fe832a4 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -14,9 +14,7 @@ import { getPluginOverrides } from '../../../../modules/localStorage.js'
 import { useCacheableSection } from '../../../../modules/useCacheableSection.js'
 import {
     INSTALLATION_STATUS_INSTALLING,
-    //    INSTALLATION_STATUS_READY,
     INSTALLATION_STATUS_UNKNOWN,
-    //    INSTALLATION_STATUS_WILL_NOT_INSTALL,
     sGetIframePluginStatus,
 } from '../../../../reducers/iframePluginStatus.js'
 import { useUserSettings } from '../../../UserSettingsProvider.js'
@@ -46,11 +44,10 @@ const IframePlugin = ({
     // When this mounts, check if the dashboard is recording
     const { isCached, recordingState } = useCacheableSection(dashboardId)
 
-    // TODO set this to false after first props transfer with true flag
-    const recordOnNextLoad = recordingState === 'recording'
-    //    const [recordOnNextLoad, setRecordOnNextLoad] = useState(
-    //        recordingState === 'recording'
-    //    )
+    // set this to false after first props transfer with true flag
+    const [recordOnNextLoad, setRecordOnNextLoad] = useState(
+        recordingState === 'recording'
+    )
 
     const pluginType = [CHART, REPORT_TABLE].includes(activeType)
         ? VISUALIZATION
@@ -70,6 +67,11 @@ const IframePlugin = ({
         },
         [dispatch, isFirstOfType, pluginType]
     )
+    const onPropsReceived = useCallback(() => {
+        if (recordOnNextLoad) {
+            setRecordOnNextLoad(false)
+        }
+    }, [recordOnNextLoad])
 
     const pluginProps = useMemo(
         () => ({
@@ -79,6 +81,7 @@ const IframePlugin = ({
             visualization,
             onError,
             onInstallationStatusChange,
+            onPropsReceived,
 
             // For caching: ---
             // Add user & dashboard IDs to cache ID to avoid removing a cached
@@ -95,6 +98,7 @@ const IframePlugin = ({
             itemId,
             isCached,
             onInstallationStatusChange,
+            onPropsReceived,
             recordOnNextLoad,
         ]
     )
@@ -120,67 +124,6 @@ const IframePlugin = ({
 
     const iframeSrc = getIframeSrc()
 
-    // TODO figure out how to send this message via Plugin without re-rendering
-    //    useEffect(() => {
-    //        // Tell plugin to remove cached data if this dashboard has been removed
-    //        // from offline storage
-    //        if (iframeRef?.current && !isCached) {
-    //            postRobot
-    //                .send(iframeRef.current.contentWindow, 'removeCachedData')
-    //                .catch((err) => {
-    //                    // catch error if iframe hasn't loaded yet
-    //                    const msg = 'No handler found for post message:'
-    //                    if (err.message.startsWith(msg)) {
-    //                        return
-    //                    }
-    //                    console.error(err)
-    //                })
-    //        }
-    //    }, [isCached])
-
-    /*
-    useEffect(() => {
-        if (
-            iframeRef?.current &&
-            (installationStatus === INSTALLATION_STATUS_READY ||
-                installationStatus === INSTALLATION_STATUS_WILL_NOT_INSTALL ||
-                isFirstOfType)
-        ) {
-            // if iframe has not sent initial request, set up a listener
-            if (iframeSrc !== prevPluginRef.current) {
-                prevPluginRef.current = iframeSrc
-
-                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)
-                        }
-                        return pluginProps
-                    }
-                )
-
-                return () => listener.cancel()
-            } else {
-                postRobot.send(
-                    iframeRef.current.contentWindow,
-                    'newProps',
-                    pluginProps
-                )
-            }
-        }
-    }, [
-        recordOnNextLoad,
-        pluginProps,
-        iframeSrc,
-        installationStatus,
-        isFirstOfType,
-    ])
-*/
     useEffect(() => {
         setError(null)
     }, [filterVersion, visualization.type])
@@ -227,7 +170,12 @@ const IframePlugin = ({
     return (
         <div className={classes.wrapper} dir={document.dir}>
             {iframeSrc ? (
-                <Plugin pluginSource={iframeSrc} {...pluginProps} />
+                <Plugin
+                    pluginSource={iframeSrc}
+                    width={style.width}
+                    height={style.height}
+                    {...pluginProps}
+                />
             ) : null}
         </div>
     )

From 50b6dbc8e76de1152e8ff053b2072668b30b4f49 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 24 May 2024 15:21:39 +0200
Subject: [PATCH 03/63] chore: update app-runtime and cli-app-scripts to latest

---
 .../Item/VisualizationItem/Visualization/IframePlugin.js       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index b8fe832a4..5ec2d06ea 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -1,5 +1,6 @@
 import { useCachedDataQuery } from '@dhis2/analytics'
-import { useConfig, Plugin } from '@dhis2/app-runtime'
+import { useConfig } from '@dhis2/app-runtime'
+import { Plugin } from '@dhis2/app-runtime/experimental'
 import { CenteredContent, CircularLoader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'

From f391aac064eba0b2fc7800aabca7b1d0ac04f489 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 27 May 2024 15:35:00 +0200
Subject: [PATCH 04/63] fix: replace deprecated prop with new one

This silences warnings in the console.
---
 src/components/DropdownButton/DropdownButton.js | 2 +-
 src/pages/edit/ItemSelector/ItemSelector.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DropdownButton/DropdownButton.js b/src/components/DropdownButton/DropdownButton.js
index 0e4125570..2f1e8c4a2 100644
--- a/src/components/DropdownButton/DropdownButton.js
+++ b/src/components/DropdownButton/DropdownButton.js
@@ -25,7 +25,7 @@ const DropdownButton = ({
                 </Button>
             </OfflineTooltip>
             {open && (
-                <Layer onClick={onClick} transparent>
+                <Layer onBackdropClick={onClick} transparent>
                     <Popper placement="bottom-start" reference={anchorRef}>
                         {component}
                     </Popper>
diff --git a/src/pages/edit/ItemSelector/ItemSelector.js b/src/pages/edit/ItemSelector/ItemSelector.js
index 5b104b887..bfe3ffbbc 100644
--- a/src/pages/edit/ItemSelector/ItemSelector.js
+++ b/src/pages/edit/ItemSelector/ItemSelector.js
@@ -107,7 +107,7 @@ const ItemSelector = () => {
                 />
             </span>
             {isOpen && (
-                <Layer onClick={closeMenu}>
+                <Layer onBackdropClick={closeMenu}>
                     <Popper reference={inputRef} placement="bottom-start">
                         <div className={classes.popover}>
                             <FlyoutMenu

From 26dc96bfe92f838025acf4fc1ae82184fca7a93a Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 27 May 2024 15:38:18 +0200
Subject: [PATCH 05/63] fix: silence linter warning

This hopefully has a better solution.
---
 .../Item/VisualizationItem/Visualization/IframePlugin.js         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index 5ec2d06ea..bd7dc4ca7 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -1,5 +1,6 @@
 import { useCachedDataQuery } from '@dhis2/analytics'
 import { useConfig } from '@dhis2/app-runtime'
+// eslint-disable-next-line import/no-unresolved
 import { Plugin } from '@dhis2/app-runtime/experimental'
 import { CenteredContent, CircularLoader } from '@dhis2/ui'
 import PropTypes from 'prop-types'

From 7649773c75781e69dfece000674322e7fb080e32 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 27 May 2024 15:39:57 +0200
Subject: [PATCH 06/63] refactor: simplify communication for offline caching

It should be enough to just use isParentCached for knowing when to start
recording and removing the cache in the plugins.
---
 .../Visualization/IframePlugin.js               | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index bd7dc4ca7..2c453340a 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -44,12 +44,7 @@ const IframePlugin = ({
     const { apps } = useCachedDataQuery()
 
     // When this mounts, check if the dashboard is recording
-    const { isCached, recordingState } = useCacheableSection(dashboardId)
-
-    // set this to false after first props transfer with true flag
-    const [recordOnNextLoad, setRecordOnNextLoad] = useState(
-        recordingState === 'recording'
-    )
+    const { isCached } = useCacheableSection(dashboardId)
 
     const pluginType = [CHART, REPORT_TABLE].includes(activeType)
         ? VISUALIZATION
@@ -58,6 +53,7 @@ const IframePlugin = ({
     const onError = () => setError('plugin')
     const onInstallationStatusChange = useCallback(
         (installationStatus) => {
+            console.log('DS installation status change', installationStatus)
             if (isFirstOfType) {
                 dispatch(
                     acAddIframePluginStatus({
@@ -69,11 +65,6 @@ const IframePlugin = ({
         },
         [dispatch, isFirstOfType, pluginType]
     )
-    const onPropsReceived = useCallback(() => {
-        if (recordOnNextLoad) {
-            setRecordOnNextLoad(false)
-        }
-    }, [recordOnNextLoad])
 
     const pluginProps = useMemo(
         () => ({
@@ -83,7 +74,6 @@ const IframePlugin = ({
             visualization,
             onError,
             onInstallationStatusChange,
-            onPropsReceived,
 
             // For caching: ---
             // Add user & dashboard IDs to cache ID to avoid removing a cached
@@ -91,7 +81,6 @@ const IframePlugin = ({
             // TODO: May also want user ID too for multi-user situations
             cacheId: `${dashboardId}-${itemId}`,
             isParentCached: isCached,
-            recordOnNextLoad,
         }),
         [
             userSettings,
@@ -100,8 +89,6 @@ const IframePlugin = ({
             itemId,
             isCached,
             onInstallationStatusChange,
-            onPropsReceived,
-            recordOnNextLoad,
         ]
     )
 

From dd256ea72e27800c1754d44e57abf14610d629e8 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Wed, 10 Jul 2024 11:49:59 +0200
Subject: [PATCH 07/63] fix: fix linting error

---
 .../Item/VisualizationItem/Visualization/IframePlugin.js         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index 2c453340a..e2ff5e87b 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -2,6 +2,7 @@ import { useCachedDataQuery } from '@dhis2/analytics'
 import { useConfig } from '@dhis2/app-runtime'
 // eslint-disable-next-line import/no-unresolved
 import { Plugin } from '@dhis2/app-runtime/experimental'
+import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import { CenteredContent, CircularLoader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'

From 50771b2277ed19b8769dab4c8c41c9b10e641daf Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 11 Jul 2024 09:58:47 +0200
Subject: [PATCH 08/63] fix: move visualization fetch in try/catch

This is to avoid the error boundary to show up for uncaught errors
(failed to fetch a visualization) which
interferes with Cypress testing.
---
 src/components/Item/VisualizationItem/Item.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index d80849952..21ddb0686 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -95,15 +95,15 @@ class Item extends Component {
     }
 
     async componentDidMount() {
-        // Avoid refetching the visualization already in the Redux store
-        // when the same dashboard item is added again.
-        // This also solves a flashing of all the "duplicated" dashboard items.
-        !this.props.visualization.id &&
-            this.props.setVisualization(
-                await apiFetchVisualization(this.props.item)
-            )
-
         try {
+            // Avoid refetching the visualization already in the Redux store
+            // when the same dashboard item is added again.
+            // This also solves a flashing of all the "duplicated" dashboard items.
+            !this.props.visualization.id &&
+                this.props.setVisualization(
+                    await apiFetchVisualization(this.props.item)
+                )
+
             if (
                 this.props.settings
                     .keyGatherAnalyticalObjectStatisticsInDashboardViews &&

From 27ff14e4a12b86b0e0f8978ec9a5d1ed249f9e2e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 6 Aug 2024 09:35:45 +0200
Subject: [PATCH 09/63] chore(deps): bump the security group with 3 updates
 (#3046)

* chore(deps): bump the security group with 3 updates

Updates `ejs` from 3.1.8 to 3.1.10
- [Release notes](https://github.com/mde/ejs/releases)
- [Commits](https://github.com/mde/ejs/compare/v3.1.8...v3.1.10)

Updates `tmpl` from 1.0.4 to 1.0.5
- [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5)

Updates `word-wrap` from 1.2.3 to 1.2.5
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.5)

---
updated-dependencies:
- dependency-name: ejs
  dependency-type: indirect
  dependency-group: security
- dependency-name: tmpl
  dependency-type: indirect
  dependency-group: security
- dependency-name: word-wrap
  dependency-type: indirect
  dependency-group: security
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: break up command chain

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jen Jones Arnesen <jennifer@dhis2.org>
---
 cypress/e2e/dashboard_filter/dashboard_filter.js                 | 1 +
 .../Item/VisualizationItem/Visualization/IframePlugin.js         | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/dashboard_filter/dashboard_filter.js b/cypress/e2e/dashboard_filter/dashboard_filter.js
index 2521e9593..d3f141b47 100644
--- a/cypress/e2e/dashboard_filter/dashboard_filter.js
+++ b/cypress/e2e/dashboard_filter/dashboard_filter.js
@@ -26,6 +26,7 @@ Then('the Period filter is applied to the dashboard', () => {
     cy.get(filterBadgeSel).contains(`Period: ${PERIOD}`).should('be.visible')
 
     // check the CHART
+<<<<<<< HEAD
     // cy.get(`${gridItemSel}.VISUALIZATION`).getIframeBody().as('iframeBody')
     // cy.get('@iframeBody')
     //     .find(`${chartSubtitleSel} > title`, EXTENDED_TIMEOUT)
diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index e2ff5e87b..2c453340a 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -2,7 +2,6 @@ import { useCachedDataQuery } from '@dhis2/analytics'
 import { useConfig } from '@dhis2/app-runtime'
 // eslint-disable-next-line import/no-unresolved
 import { Plugin } from '@dhis2/app-runtime/experimental'
-import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import { CenteredContent, CircularLoader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'

From a911ab41f50bd0362b2fbdc1bb9a8277c1684230 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 9 Aug 2024 15:32:27 +0200
Subject: [PATCH 10/63] feat: support custom dashboard plugins (DHIS2-17283)

---
 src/components/Item/AppItem/Item.js         | 38 ++++++++++++++++-----
 src/components/Item/AppItem/getIframeSrc.js | 34 +++++++++++++-----
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 57ed1bf9b..cc4ab62d2 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -1,19 +1,27 @@
+// eslint-disable-next-line import/no-unresolved
+import { Plugin } from '@dhis2/app-runtime/experimental'
 import i18n from '@dhis2/d2-i18n'
 import { Divider, colors, spacers, IconQuestion24 } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { connect } from 'react-redux'
+import { connect, useSelector } from 'react-redux'
 import { EDIT, isEditMode } from '../../../modules/dashboardModes.js'
+import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 import {
     sGetItemFiltersRoot,
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters.js'
+import { sGetSelectedId } from '../../../reducers/selected.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import { getIframeSrc } from './getIframeSrc.js'
 import styles from './styles/AppItem.module.css'
 
 const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
+    const dashboardId = useSelector(sGetSelectedId)
+
+    const { isCached } = useCacheableSection(dashboardId)
+
     let appDetails
 
     const appKey = item.appKey
@@ -26,7 +34,9 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
         appDetails?.settings?.dashboardWidget?.hideTitle &&
         dashboardMode !== EDIT
 
-    return appDetails && appDetails.name && appDetails.launchUrl ? (
+    const iframeSrc = getIframeSrc(appDetails, item, itemFilters)
+
+    return iframeSrc ? (
         <>
             {!hideTitle && (
                 <>
@@ -39,15 +49,27 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
                     <Divider margin={`0 0 ${spacers.dp4} 0`} />
                 </>
             )}
-            <iframe
-                title={appDetails.name}
-                src={getIframeSrc(appDetails, item, itemFilters)}
-                className={cx(styles.content, {
+
+            {appDetails.appType === 'APP' ? (
+                // new plugins
+                <Plugin
+                    pluginSource={iframeSrc}
+                    dashboardItemId={item.id}
+                    cacheId={`${dashboardId}-${item.id}`}
+                    isParentCached={isCached}
+                />
+            ) : (
+                // legacy widgets
+                <iframe
+                    title={appDetails.name}
+                    src={iframeSrc}
+                    className={cx(styles.content, {
                     [styles.hiddenTitle]: hideTitle,
                     [styles.fullscreen]: isFullscreen,
                 })}
-                style={{ border: 'none' }}
-            />
+                    style={{ border: 'none' }}
+                />
+            )}
         </>
     ) : (
         <>
diff --git a/src/components/Item/AppItem/getIframeSrc.js b/src/components/Item/AppItem/getIframeSrc.js
index ae2b1c2c8..114c97030 100644
--- a/src/components/Item/AppItem/getIframeSrc.js
+++ b/src/components/Item/AppItem/getIframeSrc.js
@@ -1,15 +1,33 @@
 import { FILTER_ORG_UNIT } from '../../../actions/itemFilters.js'
+import { getPluginOverrides } from '../../../modules/localStorage.js'
 
 export const getIframeSrc = (appDetails, item, itemFilters) => {
-    let iframeSrc = `${appDetails.launchUrl}?dashboardItemId=${item.id}`
+    switch (appDetails.appType) {
+        case 'APP': {
+            // check if there is an override for the plugin
+            const pluginOverrides = getPluginOverrides()
 
-    if (itemFilters[FILTER_ORG_UNIT] && itemFilters[FILTER_ORG_UNIT].length) {
-        const ouIds = itemFilters[FILTER_ORG_UNIT].map(({ id, path }) =>
-            path ? path.split('/').slice(-1)[0] : id
-        )
+            if (pluginOverrides && pluginOverrides[appDetails.key]) {
+                return pluginOverrides[appDetails.key]
+            }
 
-        iframeSrc += `&userOrgUnit=${ouIds.join(',')}`
-    }
+            return appDetails.pluginLaunchUrl
+        }
+        default: {
+            let iframeSrc = `${appDetails.launchUrl}?dashboardItemId=${item.id}`
+
+            if (
+                itemFilters[FILTER_ORG_UNIT] &&
+                itemFilters[FILTER_ORG_UNIT].length
+            ) {
+                const ouIds = itemFilters[FILTER_ORG_UNIT].map(({ id, path }) =>
+                    path ? path.split('/').slice(-1)[0] : id
+                )
 
-    return iframeSrc
+                iframeSrc += `&userOrgUnit=${ouIds.join(',')}`
+            }
+
+            return iframeSrc
+        }
+    }
 }

From 198777d11bd261a58b7d8aafb0b01c7b34c71730 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 19 Aug 2024 11:29:45 +0200
Subject: [PATCH 11/63] fix: avoid crash if app details are not available

---
 src/components/Item/AppItem/Item.js         | 99 +++++++++++----------
 src/components/Item/AppItem/getIframeSrc.js |  2 +-
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index cc4ab62d2..61ddef748 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -34,58 +34,61 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
         appDetails?.settings?.dashboardWidget?.hideTitle &&
         dashboardMode !== EDIT
 
-    const iframeSrc = getIframeSrc(appDetails, item, itemFilters)
+    if (appDetails) {
+        const iframeSrc = getIframeSrc(appDetails, item, itemFilters)
 
-    return iframeSrc ? (
-        <>
-            {!hideTitle && (
-                <>
-                    <ItemHeader
+        return (
+            <>
+                {!hideTitle && (
+                    <>
+                        <ItemHeader
+                            title={appDetails.name}
+                            itemId={item.id}
+                            dashboardMode={dashboardMode}
+                            isShortened={item.shortened}
+                        />
+                        <Divider margin={`0 0 ${spacers.dp4} 0`} />
+                    </>
+                )}
+                {appDetails.appType === 'APP' ? (
+                    // new plugins
+                    <Plugin
+                        pluginSource={iframeSrc}
+                        dashboardItemId={item.id}
+                        cacheId={`${dashboardId}-${item.id}`}
+                        isParentCached={isCached}
+                    />
+                ) : (
+                    // legacy widgets
+                    <iframe
                         title={appDetails.name}
-                        itemId={item.id}
-                        dashboardMode={dashboardMode}
-                        isShortened={item.shortened}
+                        src={iframeSrc}
+                        className={cx(styles.content, {
+                            [styles.hiddenTitle]: hideTitle,
+                            [styles.fullscreen]: isFullscreen,
+                        })}
+                        style={{ border: 'none' }}
                     />
-                    <Divider margin={`0 0 ${spacers.dp4} 0`} />
-                </>
-            )}
-
-            {appDetails.appType === 'APP' ? (
-                // new plugins
-                <Plugin
-                    pluginSource={iframeSrc}
-                    dashboardItemId={item.id}
-                    cacheId={`${dashboardId}-${item.id}`}
-                    isParentCached={isCached}
+                )}
+            </>
+        )
+    } else {
+        return (
+            <>
+                <ItemHeader
+                    title={i18n.t('{{appKey}} app not found', { appKey })}
                 />
-            ) : (
-                // legacy widgets
-                <iframe
-                    title={appDetails.name}
-                    src={iframeSrc}
-                    className={cx(styles.content, {
-                    [styles.hiddenTitle]: hideTitle,
-                    [styles.fullscreen]: isFullscreen,
-                })}
-                    style={{ border: 'none' }}
-                />
-            )}
-        </>
-    ) : (
-        <>
-            <ItemHeader
-                title={i18n.t('{{appKey}} app not found', { appKey })}
-            />
-            <Divider margin={`0 0 ${spacers.dp4} 0`} />
-            <div
-                className={cx(styles.content, styles.centered, {
-                    [styles.fullscreen]: isFullscreen,
-                })}
-            >
-                <IconQuestion24 color={colors.grey500} />
-            </div>
-        </>
-    )
+                <Divider margin={`0 0 ${spacers.dp4} 0`} />
+                <div
+                    className={cx(styles.content, styles.centered, {
+                        [styles.fullscreen]: isFullscreen,
+                    })}
+                >
+                    <IconQuestion24 color={colors.grey500} />
+                </div>
+            </>
+        )
+    }
 }
 
 AppItem.propTypes = {
diff --git a/src/components/Item/AppItem/getIframeSrc.js b/src/components/Item/AppItem/getIframeSrc.js
index 114c97030..167724c96 100644
--- a/src/components/Item/AppItem/getIframeSrc.js
+++ b/src/components/Item/AppItem/getIframeSrc.js
@@ -1,7 +1,7 @@
 import { FILTER_ORG_UNIT } from '../../../actions/itemFilters.js'
 import { getPluginOverrides } from '../../../modules/localStorage.js'
 
-export const getIframeSrc = (appDetails, item, itemFilters) => {
+export const getIframeSrc = (appDetails = {}, item, itemFilters) => {
     switch (appDetails.appType) {
         case 'APP': {
             // check if there is an override for the plugin

From 55eb811a06902bae37d813d8f33c4f0579adad42 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 22 Aug 2024 14:11:48 +0200
Subject: [PATCH 12/63] refactor: make the missing plugin error more generic

So it can be used also for custom 3rd-party plugins.
---
 src/components/Item/AppItem/Item.js           | 21 ++++++-------------
 .../MissingPluginMessage.js                   | 13 ++++++------
 .../VisualizationErrorMessage.js              |  6 +++---
 .../styles/ItemMessage.module.css}            |  0
 .../Visualization/IframePlugin.js             |  7 ++++---
 5 files changed, 19 insertions(+), 28 deletions(-)
 rename src/components/Item/{VisualizationItem/Visualization => ItemMessage}/MissingPluginMessage.js (69%)
 rename src/components/Item/{VisualizationItem/Visualization => ItemMessage}/VisualizationErrorMessage.js (93%)
 rename src/components/Item/{VisualizationItem/Visualization/styles/VisualizationErrorMessage.module.css => ItemMessage/styles/ItemMessage.module.css} (100%)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 61ddef748..5651e5262 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -1,7 +1,6 @@
 // eslint-disable-next-line import/no-unresolved
 import { Plugin } from '@dhis2/app-runtime/experimental'
-import i18n from '@dhis2/d2-i18n'
-import { Divider, colors, spacers, IconQuestion24 } from '@dhis2/ui'
+import { Divider, spacers } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -14,6 +13,7 @@ import {
 } from '../../../reducers/itemFilters.js'
 import { sGetSelectedId } from '../../../reducers/selected.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
+import MissingPluginMessage from '../ItemMessage/MissingPluginMessage.js'
 import { getIframeSrc } from './getIframeSrc.js'
 import styles from './styles/AppItem.module.css'
 
@@ -74,19 +74,10 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
         )
     } else {
         return (
-            <>
-                <ItemHeader
-                    title={i18n.t('{{appKey}} app not found', { appKey })}
-                />
-                <Divider margin={`0 0 ${spacers.dp4} 0`} />
-                <div
-                    className={cx(styles.content, styles.centered, {
-                        [styles.fullscreen]: isFullscreen,
-                    })}
-                >
-                    <IconQuestion24 color={colors.grey500} />
-                </div>
-            </>
+            <MissingPluginMessage
+                pluginName={item.appKey}
+                dashboardMode={dashboardMode}
+            />
         )
     }
 }
diff --git a/src/components/Item/VisualizationItem/Visualization/MissingPluginMessage.js b/src/components/Item/ItemMessage/MissingPluginMessage.js
similarity index 69%
rename from src/components/Item/VisualizationItem/Visualization/MissingPluginMessage.js
rename to src/components/Item/ItemMessage/MissingPluginMessage.js
index f8a2f2da2..effd9152e 100644
--- a/src/components/Item/VisualizationItem/Visualization/MissingPluginMessage.js
+++ b/src/components/Item/ItemMessage/MissingPluginMessage.js
@@ -2,11 +2,10 @@ import i18n from '@dhis2/d2-i18n'
 import { Center } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { isPrintMode } from '../../../../modules/dashboardModes.js'
-import { getAppName } from '../../../../modules/itemTypes.js'
-import classes from './styles/VisualizationErrorMessage.module.css'
+import { isPrintMode } from '../../../modules/dashboardModes.js'
+import classes from './styles/ItemMessage.module.css'
 
-const MissingPluginMessage = ({ itemType, dashboardMode }) => {
+const MissingPluginMessage = ({ dashboardMode, pluginName }) => {
     return (
         <Center>
             <p className={classes.errorMessage}>
@@ -21,9 +20,9 @@ const MissingPluginMessage = ({ itemType, dashboardMode }) => {
                         href="/dhis-web-app-management/index.html#/app-hub"
                     >
                         {i18n.t(
-                            'Install the {{appName}} app from the App Hub',
+                            'Install the {{pluginName}} plugin from the App Hub',
                             {
-                                appName: getAppName(itemType),
+                                pluginName,
                             }
                         )}
                     </a>
@@ -35,7 +34,7 @@ const MissingPluginMessage = ({ itemType, dashboardMode }) => {
 
 MissingPluginMessage.propTypes = {
     dashboardMode: PropTypes.string,
-    itemType: PropTypes.string,
+    pluginName: PropTypes.string,
 }
 
 export default MissingPluginMessage
diff --git a/src/components/Item/VisualizationItem/Visualization/VisualizationErrorMessage.js b/src/components/Item/ItemMessage/VisualizationErrorMessage.js
similarity index 93%
rename from src/components/Item/VisualizationItem/Visualization/VisualizationErrorMessage.js
rename to src/components/Item/ItemMessage/VisualizationErrorMessage.js
index dee442a33..c19f95c6c 100644
--- a/src/components/Item/VisualizationItem/Visualization/VisualizationErrorMessage.js
+++ b/src/components/Item/ItemMessage/VisualizationErrorMessage.js
@@ -3,9 +3,9 @@ import i18n from '@dhis2/d2-i18n'
 import { colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { isPrintMode } from '../../../../modules/dashboardModes.js'
-import { getAppName, itemTypeMap } from '../../../../modules/itemTypes.js'
-import classes from './styles/VisualizationErrorMessage.module.css'
+import { isPrintMode } from '../../../modules/dashboardModes.js'
+import { getAppName, itemTypeMap } from '../../../modules/itemTypes.js'
+import classes from './styles/ItemMessage.module.css'
 
 const getErrorIcon = () => (
     <svg
diff --git a/src/components/Item/VisualizationItem/Visualization/styles/VisualizationErrorMessage.module.css b/src/components/Item/ItemMessage/styles/ItemMessage.module.css
similarity index 100%
rename from src/components/Item/VisualizationItem/Visualization/styles/VisualizationErrorMessage.module.css
rename to src/components/Item/ItemMessage/styles/ItemMessage.module.css
diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index 2c453340a..2e74a6ef5 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -11,6 +11,7 @@ import {
     CHART,
     REPORT_TABLE,
     VISUALIZATION,
+    getAppName,
 } from '../../../../modules/itemTypes.js'
 import { getPluginOverrides } from '../../../../modules/localStorage.js'
 import { useCacheableSection } from '../../../../modules/useCacheableSection.js'
@@ -20,10 +21,10 @@ import {
     sGetIframePluginStatus,
 } from '../../../../reducers/iframePluginStatus.js'
 import { useUserSettings } from '../../../UserSettingsProvider.js'
-import MissingPluginMessage from './MissingPluginMessage.js'
+import MissingPluginMessage from '../../ItemMessage/MissingPluginMessage.js'
+import VisualizationErrorMessage from '../../ItemMessage/VisualizationErrorMessage.js'
 import { getPluginLaunchUrl } from './plugin.js'
 import classes from './styles/IframePlugin.module.css'
-import VisualizationErrorMessage from './VisualizationErrorMessage.js'
 
 const IframePlugin = ({
     activeType,
@@ -121,7 +122,7 @@ const IframePlugin = ({
         return error === 'missing-plugin' ? (
             <div style={style}>
                 <MissingPluginMessage
-                    itemType={itemType}
+                    pluginName={getAppName(itemType)}
                     dashboardMode={dashboardMode}
                 />
             </div>

From c6450223ec3b1a9d382799ce9e9d5e2472ae6efb Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 22 Aug 2024 14:55:33 +0200
Subject: [PATCH 13/63] fix: pass dashboard filters to custom plugins

---
 src/components/Item/AppItem/Item.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 5651e5262..d5d0881e8 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -51,10 +51,11 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
                     </>
                 )}
                 {appDetails.appType === 'APP' ? (
-                    // new plugins
+                    // modern plugins
                     <Plugin
                         pluginSource={iframeSrc}
                         dashboardItemId={item.id}
+                        dashboardItemFilters={itemFilters}
                         cacheId={`${dashboardId}-${item.id}`}
                         isParentCached={isCached}
                     />

From 0dd46dd73f05a3dbbcf5e5dbe85bbcec6b505465 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 22 Aug 2024 15:36:32 +0200
Subject: [PATCH 14/63] refactor: use same styles for error messages

---
 .../Item/ItemMessage/MissingPluginMessage.js  | 51 ++++++++++---------
 .../ItemMessage/VisualizationErrorMessage.js  | 14 ++---
 .../ItemMessage/styles/ItemMessage.module.css | 31 ++++++-----
 3 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/components/Item/ItemMessage/MissingPluginMessage.js b/src/components/Item/ItemMessage/MissingPluginMessage.js
index effd9152e..6aea12636 100644
--- a/src/components/Item/ItemMessage/MissingPluginMessage.js
+++ b/src/components/Item/ItemMessage/MissingPluginMessage.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { Center } from '@dhis2/ui'
+import { Cover, IconWarning24, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isPrintMode } from '../../../modules/dashboardModes.js'
@@ -7,28 +7,33 @@ import classes from './styles/ItemMessage.module.css'
 
 const MissingPluginMessage = ({ dashboardMode, pluginName }) => {
     return (
-        <Center>
-            <p className={classes.errorMessage}>
-                {i18n.t('The plugin for rendering this item is not available')}
-            </p>
-            {!isPrintMode(dashboardMode) ? (
-                <p className={classes.appLink}>
-                    <a
-                        onClick={(e) => e.stopPropagation()}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href="/dhis-web-app-management/index.html#/app-hub"
-                    >
-                        {i18n.t(
-                            'Install the {{pluginName}} plugin from the App Hub',
-                            {
-                                pluginName,
-                            }
-                        )}
-                    </a>
-                </p>
-            ) : null}
-        </Center>
+        <Cover>
+            <div className={classes.messageContent}>
+                <IconWarning24 color={colors.grey500} />
+                <span>
+                    {i18n.t(
+                        'The plugin for rendering this item is not available'
+                    )}
+                </span>
+                {!isPrintMode(dashboardMode) ? (
+                    <span className={classes.appLink}>
+                        <a
+                            onClick={(e) => e.stopPropagation()}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href="/dhis-web-app-management/index.html#/app-hub"
+                        >
+                            {i18n.t(
+                                'Install the {{pluginName}} plugin from the App Hub',
+                                {
+                                    pluginName,
+                                }
+                            )}
+                        </a>
+                    </span>
+                ) : null}
+            </div>
+        </Cover>
     )
 }
 
diff --git a/src/components/Item/ItemMessage/VisualizationErrorMessage.js b/src/components/Item/ItemMessage/VisualizationErrorMessage.js
index c19f95c6c..e38d39e83 100644
--- a/src/components/Item/ItemMessage/VisualizationErrorMessage.js
+++ b/src/components/Item/ItemMessage/VisualizationErrorMessage.js
@@ -1,6 +1,6 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { colors } from '@dhis2/ui'
+import { Cover, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isPrintMode } from '../../../modules/dashboardModes.js'
@@ -34,13 +34,13 @@ const VisualizationErrorMessage = ({
     )}`
 
     return (
-        <div className={classes.center}>
+        <Cover>
             {getErrorIcon()}
-            <p className={classes.errorMessage}>
+            <span>
                 {i18n.t('There was an error loading data for this item')}
-            </p>
+            </span>
             {!isPrintMode(dashboardMode) ? (
-                <p className={classes.appLink}>
+                <span className={classes.appLink}>
                     <a
                         onClick={(e) => e.stopPropagation()}
                         target="_blank"
@@ -51,9 +51,9 @@ const VisualizationErrorMessage = ({
                             appName: getAppName(itemType),
                         })}
                     </a>
-                </p>
+                </span>
             ) : null}
-        </div>
+        </Cover>
     )
 }
 
diff --git a/src/components/Item/ItemMessage/styles/ItemMessage.module.css b/src/components/Item/ItemMessage/styles/ItemMessage.module.css
index 68c316dc6..0ba888630 100644
--- a/src/components/Item/ItemMessage/styles/ItemMessage.module.css
+++ b/src/components/Item/ItemMessage/styles/ItemMessage.module.css
@@ -1,23 +1,22 @@
-.center {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    block-size: 100%;
-}
-
-.errorMessage {
-    margin-block-start: var(--spacers-dp48);
-    margin-block-end: var(--spacers-dp8);
-    font-size: 16px;
-    font-weight: 600;
-}
-
 .appLink {
-    font-size: 16px;
     margin-block-start: var(--spacers-dp8);
 }
 
 .appLink a {
     color: var(--colors-grey700);
 }
+
+.messageContent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp8);
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.92);
+    font-size: 13px;
+    font-stretch: normal;
+    color: var(--colors-grey900);
+    text-align: center;
+}

From 9294c082f6a1c9ac550e3439e422b9ad65a165ef Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 30 Aug 2024 15:26:08 +0200
Subject: [PATCH 15/63] refactor: move item size logic to GridItem

So it can be reused for different item types, ie. both VisualizationItem
and AppItem.
---
 src/components/Item/Item.js                   |  10 +-
 src/components/Item/VisualizationItem/Item.js | 126 ++++--------------
 .../Visualization/Visualization.js            |  20 +--
 src/components/Item/getAvailableDimensions.js |  81 +++++++++++
 .../getGridItemElement.js                     |   2 +-
 .../{VisualizationItem => }/memoizeOne.js     |   0
 6 files changed, 122 insertions(+), 117 deletions(-)
 create mode 100644 src/components/Item/getAvailableDimensions.js
 rename src/components/Item/{VisualizationItem => }/getGridItemElement.js (54%)
 rename src/components/Item/{VisualizationItem => }/memoizeOne.js (100%)

diff --git a/src/components/Item/Item.js b/src/components/Item/Item.js
index 7bc9fa06c..7c1ae5e88 100644
--- a/src/components/Item/Item.js
+++ b/src/components/Item/Item.js
@@ -20,6 +20,7 @@ import {
     PAGEBREAK,
     PRINT_TITLE_PAGE,
 } from '../../modules/itemTypes.js'
+import { WindowDimensionsCtx } from '../WindowDimensionsProvider.js'
 import AppItem from './AppItem/Item.js'
 import ListItem from './ListItem/Item.js'
 import MessagesItem from './MessagesItem/Item.js'
@@ -66,7 +67,14 @@ export const Item = (props) => {
     const engine = useDataEngine()
     const GridItem = getGridItem(props.item.type)
 
-    return <GridItem apps={apps} {...props} engine={engine} />
+    return (
+        <WindowDimensionsCtx.Consumer>
+            {(windowDimensions) => (
+                
+                <GridItem apps={apps} {...props} engine={engine} windowDimensions={windowDimensions} />
+            )}
+        </WindowDimensionsCtx.Consumer>
+    )
 }
 
 Item.propTypes = {
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index 21ddb0686..9b71efc5b 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -14,12 +14,7 @@ import { acSetSlideshow } from '../../../actions/slideshow.js'
 import { acAddVisualization } from '../../../actions/visualizations.js'
 import { apiPostDataStatistics } from '../../../api/dataStatistics.js'
 import { apiFetchVisualization } from '../../../api/fetchVisualization.js'
-import {
-    isEditMode,
-    isPrintMode,
-    isViewMode,
-} from '../../../modules/dashboardModes.js'
-import { getItemHeightPx } from '../../../modules/gridUtil.js'
+import { isEditMode, isViewMode, isPrintMode } from '../../../modules/dashboardModes.js'
 import {
     getVisualizationId,
     getVisualizationName,
@@ -41,20 +36,16 @@ import {
 import { sGetSlideshow } from '../../../reducers/slideshow.js'
 import { sGetVisualization } from '../../../reducers/visualizations.js'
 import { SystemSettingsCtx } from '../../SystemSettingsProvider.js'
-import { WindowDimensionsCtx } from '../../WindowDimensionsProvider.js'
+import { getAvailableDimensions } from '../getAvailableDimensions.js'
+import { getGridItemElement } from '../getGridItemElement.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import FatalErrorBoundary from './FatalErrorBoundary.js'
-import { getGridItemElement } from './getGridItemElement.js'
 import ItemContextMenu from './ItemContextMenu/ItemContextMenu.js'
 import ItemFooter from './ItemFooter.js'
-import memoizeOne from './memoizeOne.js'
 import styles from './styles/Item.module.css'
 import { pluginIsAvailable } from './Visualization/plugin.js'
 import Visualization from './Visualization/Visualization.js'
 
-const MIN_CLIENT_HEIGHT = 16
-const FS_CONTROLS_BUFFER = 40 // space for the fullscreen controls at bottom
-
 class Item extends Component {
     state = {
         showFooter: false,
@@ -68,30 +59,6 @@ class Item extends Component {
 
         this.contentRef = React.createRef()
         this.headerRef = React.createRef()
-
-        const style = window.getComputedStyle(document.documentElement)
-        this.itemContentPadding = parseInt(
-            style.getPropertyValue('--item-content-padding').replace('px', '')
-        )
-
-        this.itemHeaderTotalMargin =
-            parseInt(
-                style
-                    .getPropertyValue('--item-header-margin-top')
-                    .replace('px', '')
-            ) +
-            parseInt(
-                style
-                    .getPropertyValue('--item-header-margin-bottom')
-                    .replace('px', '')
-            )
-
-        this.memoizedGetContentHeight = memoizeOne(
-            (calculatedHeight, measuredHeight, preferMeasured) =>
-                preferMeasured
-                    ? measuredHeight || calculatedHeight
-                    : calculatedHeight
-        )
     }
 
     async componentDidMount() {
@@ -158,48 +125,12 @@ class Item extends Component {
         return this.props.activeType || getItemTypeForVis(this.props.item)
     }
 
-    getAvailableHeight = ({ width }) => {
-        if (this.props.isFullscreen) {
-            const totalNonVisHeight =
-                (this.headerRef.current.clientHeight || MIN_CLIENT_HEIGHT) +
-                this.itemHeaderTotalMargin +
-                (this.props.isFullscreen ? 0 : this.itemContentPadding) +
-                FS_CONTROLS_BUFFER
-
-            return `calc(100vh - ${totalNonVisHeight}px)`
-        }
-        const calculatedHeight =
-            getItemHeightPx(this.props.item, width) -
-            this.headerRef.current.clientHeight -
-            this.itemHeaderTotalMargin -
-            this.itemContentPadding
-
-        const height = this.memoizedGetContentHeight(
-            calculatedHeight,
-            this.contentRef ? this.contentRef.offsetHeight : null,
-            isEditMode(this.props.dashboardMode) ||
-                isPrintMode(this.props.dashboardMode)
-        )
-        return `${height}px`
-    }
-
-    getAvailableWidth = () => {
-        if (this.props.isFullscreen) {
-            return '100%'
-        }
-        const rect = getGridItemElement(
-            this.props.item.id
-        )?.getBoundingClientRect()
-
-        return rect && `${rect.width - this.itemContentPadding * 2}px`
-    }
-
     onFatalError = () => {
         this.setState({ loadItemFailed: true })
     }
 
     render() {
-        const {
+        const { 
             item,
             dashboardMode,
             itemFilters,
@@ -207,6 +138,7 @@ class Item extends Component {
             isSlideshowView,
             setSlideshow,
             sortIndex,
+            windowDimensions,
         } = this.props
         const { showFooter, showNoFiltersOverlay } = this.state
         const originalType = getItemTypeForVis(item)
@@ -298,33 +230,32 @@ class Item extends Component {
                             [styles.edit]: isEditMode(dashboardMode),
                             [styles.print]: isPrintMode(dashboardMode),
                         })}
-                        ref={(ref) => (this.contentRef = ref)}
+                        ref={this.contentRef}
                     >
                         {this.state.configLoaded && (
-                            <WindowDimensionsCtx.Consumer>
-                                {(dimensions) => (
-                                    <Visualization
-                                        item={item}
-                                        visualization={this.props.visualization}
-                                        originalType={originalType}
-                                        activeType={activeType}
-                                        itemFilters={itemFilters}
-                                        availableHeight={this.getAvailableHeight(
-                                            dimensions
-                                        )}
-                                        availableWidth={this.getAvailableWidth()}
-                                        gridWidth={this.props.gridWidth}
-                                        dashboardMode={dashboardMode}
-                                        showNoFiltersOverlay={Boolean(
-                                            Object.keys(itemFilters).length &&
-                                                showNoFiltersOverlay
-                                        )}
-                                        onClickNoFiltersOverlay={
-                                            this.onClickNoFiltersOverlay
-                                        }
-                                    />
+                            <Visualization
+                                item={item}
+                                visualization={this.props.visualization}
+                                originalType={originalType}
+                                activeType={activeType}
+                                itemFilters={itemFilters}
+                                style={getAvailableDimensions({
+                                    item,
+                                    headerRef: this.headerRef,
+                                    contentRef: this.contentRef,
+                                    dashboardMode,
+                                    windowDimensions,
+                                })}
+                                gridWidth={this.props.gridWidth}
+                                dashboardMode={dashboardMode}
+                                showNoFiltersOverlay={Boolean(
+                                    Object.keys(itemFilters).length &&
+                                        showNoFiltersOverlay
                                 )}
-                            </WindowDimensionsCtx.Consumer>
+                                onClickNoFiltersOverlay={
+                                    this.onClickNoFiltersOverlay
+                                }
+                            />
                         )}
                     </div>
                 </FatalErrorBoundary>
@@ -354,6 +285,7 @@ Item.propTypes = {
     settings: PropTypes.object,
     sortIndex: PropTypes.number,
     visualization: PropTypes.object,
+    windowDimensions: PropTypes.object,
     onToggleItemExpanded: PropTypes.func,
 }
 
diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
index dbbff8960..a420f4233 100644
--- a/src/components/Item/VisualizationItem/Visualization/Visualization.js
+++ b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -33,8 +33,7 @@ const Visualization = ({
     activeType,
     item,
     itemFilters,
-    availableHeight,
-    availableWidth,
+    style,
     gridWidth,
     dashboardMode,
     originalType,
@@ -46,22 +45,6 @@ const Visualization = ({
     const { isDisconnected: offline } = useDhis2ConnectionStatus()
     const { lineListingAppVersion, apps } = useCachedDataQuery()
 
-    // NOTE:
-    // The following is all memoized because the IframePlugin (and potentially others)
-    // are wrapped in React.memo() to avoid unnecessary re-renders
-    // The main problem here was `item` which changes height when the interpretations panel is toggled
-    // causing all the chain of components to re-render.
-    // The only dependency using `item` is `item.id` which doesn't change so the memoized plugin props
-    // should also always be the same regardless of the `item` details.
-
-    const style = useMemo(
-        () => ({
-            height: availableHeight,
-            width: availableWidth || undefined,
-        }),
-        [availableHeight, availableWidth]
-    )
-
     const visualizationConfig = useMemo(() => {
         if (originalType === EVENT_VISUALIZATION) {
             return visualization
@@ -233,6 +216,7 @@ Visualization.propTypes = {
     itemFilters: PropTypes.object,
     originalType: PropTypes.string,
     showNoFiltersOverlay: PropTypes.bool,
+    style: PropTypes.object,
     visualization: PropTypes.object,
     onClickNoFiltersOverlay: PropTypes.func,
 }
diff --git a/src/components/Item/getAvailableDimensions.js b/src/components/Item/getAvailableDimensions.js
new file mode 100644
index 000000000..5fdd2364d
--- /dev/null
+++ b/src/components/Item/getAvailableDimensions.js
@@ -0,0 +1,81 @@
+import { isEditMode, isPrintMode } from '../../modules/dashboardModes.js'
+import { getItemHeightPx } from '../../modules/gridUtil.js'
+import { getGridItemElement } from './getGridItemElement.js'
+import memoizeOne from './memoizeOne.js'
+
+const MIN_CLIENT_HEIGHT = 16
+const FS_CONTROLS_BUFFER = 40 // space for the fullscreen controls at bottom of screen
+
+export const getAvailableDimensions = ({
+    item,
+    headerRef,
+    contentRef,
+    dashboardMode,
+    windowDimensions,
+    isFullscreen,
+}) => {
+    const style = window.getComputedStyle(document.documentElement)
+
+    const itemContentPadding = parseInt(
+        style.getPropertyValue('--item-content-padding').replace('px', '')
+    )
+
+    const itemHeaderTotalMargin =
+        parseInt(
+            style.getPropertyValue('--item-header-margin-top').replace('px', '')
+        ) +
+        parseInt(
+            style
+                .getPropertyValue('--item-header-margin-bottom')
+                .replace('px', '')
+        )
+
+    const memoizedGetContentHeight = memoizeOne(
+        (calculatedHeight, measuredHeight, preferMeasured) =>
+            preferMeasured
+                ? measuredHeight || calculatedHeight
+                : calculatedHeight
+    )
+
+    const getAvailableHeight = ({ width }) => {
+        if (isFullscreen) {
+            const totalNonVisHeight =
+                (headerRef.current.clientHeight || MIN_CLIENT_HEIGHT) +
+                itemHeaderTotalMargin +
+                (isFullscreen ? 0 : itemContentPadding) +
+                FS_CONTROLS_BUFFER
+
+            return `calc(100vh - ${totalNonVisHeight}px)`
+        }
+
+        const calculatedHeight =
+            getItemHeightPx(item, width) -
+            headerRef.current.clientHeight -
+            itemHeaderTotalMargin -
+            itemContentPadding
+
+        const height = memoizedGetContentHeight(
+            calculatedHeight,
+            contentRef.current ? contentRef.current.offsetHeight : null,
+            isEditMode(dashboardMode) || isPrintMode(dashboardMode)
+        )
+
+        return `${height}px`
+    }
+
+    const getAvailableWidth = () => {
+        if (isFullscreen) {
+            return '100%'
+        }
+        const rect = getGridItemElement(item.id)?.getBoundingClientRect()
+
+        return rect && rect.width - itemContentPadding * 2
+    }
+
+    const res = {
+        height: getAvailableHeight(windowDimensions),
+        width: getAvailableWidth() || undefined,
+    }
+
+    return res
+}
diff --git a/src/components/Item/VisualizationItem/getGridItemElement.js b/src/components/Item/getGridItemElement.js
similarity index 54%
rename from src/components/Item/VisualizationItem/getGridItemElement.js
rename to src/components/Item/getGridItemElement.js
index 43653423b..230bfb95a 100644
--- a/src/components/Item/VisualizationItem/getGridItemElement.js
+++ b/src/components/Item/getGridItemElement.js
@@ -1,4 +1,4 @@
-import { getGridItemDomElementClassName } from '../../../modules/getGridItemDomElementClassName.js'
+import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
 
 export const getGridItemElement = (itemId) =>
     document.querySelector(`.${getGridItemDomElementClassName(itemId)}`)
diff --git a/src/components/Item/VisualizationItem/memoizeOne.js b/src/components/Item/memoizeOne.js
similarity index 100%
rename from src/components/Item/VisualizationItem/memoizeOne.js
rename to src/components/Item/memoizeOne.js

From df41ff6c704073684e66196bc93f55855c71ffb3 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 30 Aug 2024 15:28:06 +0200
Subject: [PATCH 16/63] refactor: pass width/height to AppItem to fix
 resize/refresh issue (DHIS2-17947)

The same solution is used in VisualizationItem
---
 src/components/Item/AppItem/Item.js | 86 +++++++++++++++++++++--------
 src/components/styles/ItemGrid.css  | 41 ++++++++++++++
 2 files changed, 104 insertions(+), 23 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index d5d0881e8..149ef1c56 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -3,7 +3,7 @@ import { Plugin } from '@dhis2/app-runtime/experimental'
 import { Divider, spacers } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useMemo, useRef } from 'react'
 import { connect, useSelector } from 'react-redux'
 import { EDIT, isEditMode } from '../../../modules/dashboardModes.js'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
@@ -12,12 +12,15 @@ import {
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters.js'
 import { sGetSelectedId } from '../../../reducers/selected.js'
+import { getAvailableDimensions } from '../getAvailableDimensions.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import MissingPluginMessage from '../ItemMessage/MissingPluginMessage.js'
 import { getIframeSrc } from './getIframeSrc.js'
 import styles from './styles/AppItem.module.css'
 
-const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
+const AppItem = ({ dashboardMode, windowDimensions, item, itemFilters, apps, isFullscreen }) => {
+    const contentRef = useRef()
+    const headerRef = useRef()
     const dashboardId = useSelector(sGetSelectedId)
 
     const { isCached } = useCacheableSection(dashboardId)
@@ -30,10 +33,63 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
         appDetails = apps.find((app) => app.key === appKey)
     }
 
+    const pluginProps = useMemo(
+        () => ({
+            dashboardItemId: item.id,
+            dashboardItemFilters: itemFilters,
+            cacheId: `${dashboardId}-${item.id}`,
+            isParentCached: isCached,
+        }),
+        [dashboardId, item.id, isCached, itemFilters]
+    )
+
+    // See DHIS2-9605
     const hideTitle =
         appDetails?.settings?.dashboardWidget?.hideTitle &&
         dashboardMode !== EDIT
 
+    const renderPlugin = (iframeSrc) => {
+        // style must be computed at runtime.
+        // header/content elements need to be rendered first, otherwise the dimensions returned are the previous ones
+        const style =
+            headerRef.current && contentRef.current
+                ? getAvailableDimensions({
+                      item,
+                      headerRef,
+                      contentRef,
+                      dashboardMode,
+                      windowDimensions,
+                      isFullscreen,
+                  })
+                : {}
+
+        return appDetails.appType === 'APP' ? (
+            // modern plugins
+            <Plugin
+                pluginSource={iframeSrc}
+                hasFixedDimensions={true}
+                width={style.width}
+                height={style.height}
+                {...pluginProps}
+            />
+        ) : (
+            // legacy widgets
+            <iframe
+                title={appDetails.name}
+                src={iframeSrc}
+                className={cx(styles.content, {
+                            [styles.hiddenTitle]: hideTitle,
+                            [styles.fullscreen]: isFullscreen,
+                        })}
+                style={{
+                    border: 'none',
+                    width: style.width,
+                    height: style.height,
+                }}
+            />
+        )
+    }
+
     if (appDetails) {
         const iframeSrc = getIframeSrc(appDetails, item, itemFilters)
 
@@ -42,6 +98,7 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
                 {!hideTitle && (
                     <>
                         <ItemHeader
+                            ref={headerRef}
                             title={appDetails.name}
                             itemId={item.id}
                             dashboardMode={dashboardMode}
@@ -50,27 +107,9 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
                         <Divider margin={`0 0 ${spacers.dp4} 0`} />
                     </>
                 )}
-                {appDetails.appType === 'APP' ? (
-                    // modern plugins
-                    <Plugin
-                        pluginSource={iframeSrc}
-                        dashboardItemId={item.id}
-                        dashboardItemFilters={itemFilters}
-                        cacheId={`${dashboardId}-${item.id}`}
-                        isParentCached={isCached}
-                    />
-                ) : (
-                    // legacy widgets
-                    <iframe
-                        title={appDetails.name}
-                        src={iframeSrc}
-                        className={cx(styles.content, {
-                            [styles.hiddenTitle]: hideTitle,
-                            [styles.fullscreen]: isFullscreen,
-                        })}
-                        style={{ border: 'none' }}
-                    />
-                )}
+                <div className="dashboard-item-content" ref={contentRef}>
+                    {renderPlugin(iframeSrc)}
+                </div>
             </>
         )
     } else {
@@ -89,6 +128,7 @@ AppItem.propTypes = {
     isFullscreen: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
+    windowDimensions: PropTypes.object,
 }
 
 const mapStateToProps = (state, ownProps) => {
diff --git a/src/components/styles/ItemGrid.css b/src/components/styles/ItemGrid.css
index 63e9f5ed3..4aeaca68c 100644
--- a/src/components/styles/ItemGrid.css
+++ b/src/components/styles/ItemGrid.css
@@ -61,3 +61,44 @@
 .react-resizable-handle {
     background: none;
 }
+<<<<<<< HEAD
+=======
+
+/* dashboard item - content */
+
+.dashboard-item-content {
+    margin: 0 var(--item-content-padding) var(--item-content-padding);
+    overflow: auto;
+}
+
+.dashboard-item-content-hidden-title {
+    margin: 5px 4px 4px;
+    overflow: auto;
+}
+
+.TEXT .dashboard-item-content {
+    padding-bottom: var(--item-content-padding);
+}
+
+.EVENT_REPORT .dashboard-item-content {
+    position: relative;
+}
+
+.APP .dashboard-item-content,
+.CHART .dashboard-item-content,
+.VISUALIZATION .dashboard-item-content,
+.MAP .dashboard-item-content,
+.EVENT_CHART .dashboard-item-content,
+.EVENT_VISUALIZATION .dashboard-item-content {
+    position: relative;
+    overflow: hidden;
+}
+
+.react-grid-item.edit .dashboard-item-content,
+.react-grid-item.RESOURCES .dashboard-item-content,
+.react-grid-item.TEXT .dashboard-item-content,
+.react-grid-item.MESSAGES .dashboard-item-content,
+.react-grid-item.APP .dashboard-item-content-hidden-title {
+    flex: 1;
+}
+>>>>>>> d3a3bad8 (refactor: pass width/height to AppItem to fix resize/refresh issue (DHIS2-17947))

From a604989b85945c80b00eecf372bd28d5d37a3d1a Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 30 Aug 2024 15:31:06 +0200
Subject: [PATCH 17/63] fix: force fixed dimensions (DHIS2-17947)

This together with the fixes in app-runtime should solve he refresh on
resize issues.
---
 .../Item/VisualizationItem/Visualization/IframePlugin.js         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index 2e74a6ef5..4bd2a5ad2 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -162,6 +162,7 @@ const IframePlugin = ({
             {iframeSrc ? (
                 <Plugin
                     pluginSource={iframeSrc}
+                    hasFixedDimensions={true}
                     width={style.width}
                     height={style.height}
                     {...pluginProps}

From d26d952e1b7fc1b44a20fb843c6871f9e2c7612d Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 30 Aug 2024 15:31:48 +0200
Subject: [PATCH 18/63] refactor: use cached callback to avoid re-render

---
 src/pages/view/ItemGrid.js | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/pages/view/ItemGrid.js b/src/pages/view/ItemGrid.js
index 5e7ccaef9..563ad2cb3 100644
--- a/src/pages/view/ItemGrid.js
+++ b/src/pages/view/ItemGrid.js
@@ -3,7 +3,7 @@ import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useCallback, useState, useEffect, useRef } from 'react'
 import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 import { useSelector } from 'react-redux'
 import { useContainerWidth } from '../../components/DashboardContainer.js'
@@ -94,16 +94,19 @@ const ResponsiveItemGrid = ({ dashboardIsCached }) => {
         }
     }, [recordingState])
 
-    const onToggleItemExpanded = (clickedId) => {
-        const isExpanded =
-            typeof expandedItems[clickedId] === 'boolean'
-                ? expandedItems[clickedId]
-                : false
-
-        const newExpandedItems = { ...expandedItems }
-        newExpandedItems[clickedId] = !isExpanded
-        setExpandedItems(newExpandedItems)
-    }
+    const onToggleItemExpanded = useCallback(
+        (clickedId) => {
+            const isExpanded =
+                typeof expandedItems[clickedId] === 'boolean'
+                    ? expandedItems[clickedId]
+                    : false
+
+            const newExpandedItems = { ...expandedItems }
+            newExpandedItems[clickedId] = !isExpanded
+            setExpandedItems(newExpandedItems)
+        },
+        [expandedItems]
+    )
 
     const getItemComponent = (item) => {
         if (!layoutSm.length) {

From 0f2bcf53f24c1737ec4dba121a066c652a2cf346 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Tue, 3 Sep 2024 14:13:28 +0200
Subject: [PATCH 19/63] fix: extend compatible version check to DV/Maps

This is needed as the new plugin system is used, because the messages
used in the communication have changed.
---
 src/AppWrapper.js                             |   6 +
 .../Visualization/Visualization.js            | 141 ++++++++++--------
 src/modules/isAppVersionCompatible.js         |  28 ++++
 src/modules/isLLVersionCompatible.js          |  16 --
 4 files changed, 114 insertions(+), 77 deletions(-)
 create mode 100644 src/modules/isAppVersionCompatible.js
 delete mode 100644 src/modules/isLLVersionCompatible.js

diff --git a/src/AppWrapper.js b/src/AppWrapper.js
index a0258eeaf..c9f8dc725 100644
--- a/src/AppWrapper.js
+++ b/src/AppWrapper.js
@@ -43,10 +43,16 @@ const query = {
 }
 
 const providerDataTransformation = ({ rootOrgUnits, apps, currentUser }) => {
+    const dataVisualizerApp =
+        apps.find((app) => app.key === 'data-visualizer') || {}
     const lineListingApp = apps.find((app) => app.key === 'line-listing') || {}
+    const mapsApp = apps.find((app) => app.key === 'maps') || {}
+
     return {
         rootOrgUnits: rootOrgUnits.organisationUnits,
+        dataVisualizerAppVersion: dataVisualizerApp.version || '0.0.0',
         lineListingAppVersion: lineListingApp.version || '0.0.0',
+        mapsAppVersion: mapsApp.version || '0.0.0',
         currentUser,
         apps,
     }
diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
index a420f4233..1597aef4a 100644
--- a/src/components/Item/VisualizationItem/Visualization/Visualization.js
+++ b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -1,15 +1,19 @@
 import { useCachedDataQuery } from '@dhis2/analytics'
 import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Button, Cover, IconInfo24, IconWarning24, colors } from '@dhis2/ui'
+import { Button, Cover, IconInfo24, colors } from '@dhis2/ui'
 import uniqueId from 'lodash/uniqueId.js'
 import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import {
+    isDVVersionCompatible,
     isLLVersionCompatible,
+    isMapsVersionCompatible,
+    minDVVersion,
     minLLVersion,
-} from '../../../../modules/isLLVersionCompatible.js'
+    minMapsVersion,
+} from '../../../../modules/isAppVersionCompatible.js'
 import {
     VISUALIZATION,
     EVENT_VISUALIZATION,
@@ -23,6 +27,7 @@ import getVisualizationConfig from './getVisualizationConfig.js'
 import IframePlugin from './IframePlugin.js'
 import LegacyPlugin from './LegacyPlugin.js'
 import { pluginIsAvailable } from './plugin.js'
+import { PluginWarningMessage } from './PluginWarningMessage.js'
 import classes from './styles/Visualization.module.css'
 
 const mapHasEELayer = (visualization) =>
@@ -43,7 +48,24 @@ const Visualization = ({
 }) => {
     const dashboardId = useSelector(sGetSelectedId)
     const { isDisconnected: offline } = useDhis2ConnectionStatus()
-    const { lineListingAppVersion, apps } = useCachedDataQuery()
+    const { dataVisualizerAppVersion, lineListingAppVersion, mapsAppVersion, apps } =
+        useCachedDataQuery()
+
+    // NOTE:
+    // The following is all memoized because the IframePlugin (and potentially others)
+    // are wrapped in React.memo() to avoid unnecessary re-renders
+    // The main problem here was `item` which changes height when the interpretations panel is toggled
+    // causing all the chain of components to re-render.
+    // The only dependency using `item` is `item.id` which doesn't change so the memoized plugin props
+    // should also always be the same regardless of the `item` details.
+
+    const style = useMemo(
+        () => ({
+            height: availableHeight,
+            width: availableWidth || undefined,
+        }),
+        [availableHeight, availableWidth]
+    )
 
     const visualizationConfig = useMemo(() => {
         if (originalType === EVENT_VISUALIZATION) {
@@ -85,34 +107,10 @@ const Visualization = ({
 
     if (!visualization) {
         return (
-            <div style={style}>
-                <Cover>
-                    <div className={classes.messageContent}>
-                        <IconWarning24 color={colors.grey500} />
-                        {i18n.t('No data to display')}
-                    </div>
-                </Cover>
-            </div>
-        )
-    }
-
-    if (
-        activeType === EVENT_VISUALIZATION &&
-        !isLLVersionCompatible(lineListingAppVersion)
-    ) {
-        return (
-            <div style={style}>
-                <Cover>
-                    <div className={classes.messageContent}>
-                        <IconWarning24 color={colors.grey500} />
-                        {i18n.t(
-                            `Install Line Listing app version ${minLLVersion.join(
-                                '.'
-                            )} or higher in order to display this item.`
-                        )}
-                    </div>
-                </Cover>
-            </div>
+            <PluginWarningMessage
+                style={style}
+                message={i18n.t('No data to display')}
+            />
         )
     }
 
@@ -120,15 +118,24 @@ const Visualization = ({
         case CHART:
         case REPORT_TABLE:
         case VISUALIZATION: {
-            return (
+            return isDVVersionCompatible(dataVisualizerAppVersion) ? (
                 <IframePlugin
                     visualization={visualizationConfig}
                     {...iFramePluginProps}
                 />
+            ) : (
+                <PluginWarningMessage
+                    style={style}
+                    message={i18n.t(
+                        `Install Data Visualizer app ${minDVVersion.join(
+                            '.'
+                        )} or higher in order to display this item.`
+                    )}
+                />
             )
         }
         case EVENT_VISUALIZATION: {
-            return (
+            return isLLVersionCompatible(lineListingAppVersion) ? (
                 <>
                     {showNoFiltersOverlay ? (
                         <div style={style}>
@@ -154,43 +161,55 @@ const Visualization = ({
                         {...iFramePluginProps}
                     />
                 </>
+            ) : (
+                <PluginWarningMessage
+                    style={style}
+                    message={i18n.t(
+                        `Install Line Listing app ${minLLVersion.join(
+                            '.'
+                        )} or higher in order to display this item.`
+                    )}
+                />
             )
         }
         case MAP: {
-            return offline && mapHasEELayer(visualizationConfig) ? (
-                <div style={style}>
-                    <Cover>
-                        <div className={classes.messageContent}>
-                            <IconInfo24 color={colors.grey500} />
-                            <span>
-                                {i18n.t(
-                                    'Maps with Earth Engine layers cannot be displayed when offline'
-                                )}
-                            </span>
-                        </div>
-                    </Cover>
-                </div>
+            return isMapsVersionCompatible(mapsAppVersion) ? (
+                offline && mapHasEELayer(visualizationConfig) ? (
+                    <div style={style}>
+                        <Cover>
+                            <div className={classes.messageContent}>
+                                <IconInfo24 color={colors.grey500} />
+                                <span>
+                                    {i18n.t(
+                                        'Maps with Earth Engine layers cannot be displayed when offline'
+                                    )}
+                                </span>
+                            </div>
+                        </Cover>
+                    </div>
+                ) : (
+                    <IframePlugin
+                        visualization={visualizationConfig}
+                        {...iFramePluginProps}
+                    />
+                )
             ) : (
-                <IframePlugin
-                    visualization={visualizationConfig}
-                    {...iFramePluginProps}
+                <PluginWarningMessage
+                    style={style}
+                    message={i18n.t(
+                        `Install Maps app ${minMapsVersion.join(
+                            '.'
+                        )} or higher in order to display this item.`
+                    )}
                 />
             )
         }
         default: {
             return !pluginIsAvailable(activeType || item.type, apps) ? (
-                <div style={style}>
-                    <Cover>
-                        <div className={classes.messageContent}>
-                            <IconWarning24 color={colors.grey500} />
-                            <span>
-                                {i18n.t(
-                                    'Unable to load the plugin for this item'
-                                )}
-                            </span>
-                        </div>
-                    </Cover>
-                </div>
+                <PluginWarningMessage
+                    style={style}
+                    message={i18n.t('Unable to load the plugin for this item')}
+                />
             ) : (
                 <LegacyPlugin
                     item={item}
diff --git a/src/modules/isAppVersionCompatible.js b/src/modules/isAppVersionCompatible.js
new file mode 100644
index 000000000..ebc53aebc
--- /dev/null
+++ b/src/modules/isAppVersionCompatible.js
@@ -0,0 +1,28 @@
+// TODO handle plugin version matrix in a better way
+export const minDVVersion = [100, 7, 2]
+export const minLLVersion = [101, 1, 9]
+export const minMapsVersion = [100, 6, 7]
+
+const isAppVersionCompatible = (version, minVersion) => {
+    const [major, minor, patch] = version
+        .split('.')
+        .map((el) => parseInt(el, 10))
+
+    const [minMajor, minMinor, minPatch] = minVersion
+
+    const isCompatible =
+        major > minMajor ||
+        (major === minMajor && minor > minMinor) ||
+        (major === minMajor && minor === minMinor && patch >= minPatch)
+
+    return isCompatible
+}
+
+export const isDVVersionCompatible = (version) =>
+    isAppVersionCompatible(version, minDVVersion)
+
+export const isLLVersionCompatible = (version) =>
+    isAppVersionCompatible(version, minLLVersion)
+
+export const isMapsVersionCompatible = (version) =>
+    isAppVersionCompatible(version, minMapsVersion)
diff --git a/src/modules/isLLVersionCompatible.js b/src/modules/isLLVersionCompatible.js
deleted file mode 100644
index ef80d18f0..000000000
--- a/src/modules/isLLVersionCompatible.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// TODO handle plugin version matrix in a better way
-export const minLLVersion = [100, 6, 0]
-
-export const isLLVersionCompatible = (version) => {
-    const versionArray = version.split('.').map((el) => parseInt(el, 10))
-
-    const [minMajor, minMinor, minPatch] = minLLVersion
-    const [major, minor, patch] = versionArray
-
-    const isCompatible =
-        major > minMajor ||
-        (major === minMajor && minor > minMinor) ||
-        (major === minMajor && minor === minMinor && patch >= minPatch)
-
-    return isCompatible
-}

From ac795a35dd31891952d138cdad5eaf6af5c73e91 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Tue, 3 Sep 2024 15:10:37 +0200
Subject: [PATCH 20/63] test: fix test for version compatibility

---
 ...Compatible.spec.js => isAppVersionCompatible.spec.js} | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)
 rename src/modules/__tests__/{isLLVersionCompatible.spec.js => isAppVersionCompatible.spec.js} (67%)

diff --git a/src/modules/__tests__/isLLVersionCompatible.spec.js b/src/modules/__tests__/isAppVersionCompatible.spec.js
similarity index 67%
rename from src/modules/__tests__/isLLVersionCompatible.spec.js
rename to src/modules/__tests__/isAppVersionCompatible.spec.js
index bc8201e3c..fb197c55a 100644
--- a/src/modules/__tests__/isLLVersionCompatible.spec.js
+++ b/src/modules/__tests__/isAppVersionCompatible.spec.js
@@ -1,12 +1,11 @@
-import { isLLVersionCompatible } from '../isLLVersionCompatible.js'
+import { isLLVersionCompatible } from '../isAppVersionCompatible.js'
 
 const testcases = [
-    ['100.6.1', true],
+    ['101.1.9', true],
     ['100.5.9', false],
-    ['100.6.0', true],
-    ['101.0.0', true],
+    ['101.2.0', true],
     ['100.0.9', false],
-    ['100.6.0-alpha', true],
+    ['101.2.0-alpha', true],
     ['100.5.9-beta', false],
 ]
 

From 0cfb58a60857b897f885565a17eaae8ace2a53e9 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Tue, 3 Sep 2024 15:29:18 +0200
Subject: [PATCH 21/63] refactor: move error screen to component for easier
 reuse

---
 .../Visualization/PluginWarningMessage.js     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/components/Item/VisualizationItem/Visualization/PluginWarningMessage.js

diff --git a/src/components/Item/VisualizationItem/Visualization/PluginWarningMessage.js b/src/components/Item/VisualizationItem/Visualization/PluginWarningMessage.js
new file mode 100644
index 000000000..ca0c74e5a
--- /dev/null
+++ b/src/components/Item/VisualizationItem/Visualization/PluginWarningMessage.js
@@ -0,0 +1,20 @@
+import { Cover, IconWarning24, colors } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import classes from './styles/Visualization.module.css'
+
+export const PluginWarningMessage = ({ style, message }) => (
+    <div style={style}>
+        <Cover>
+            <div className={classes.messageContent}>
+                <IconWarning24 color={colors.grey500} />
+                {message}
+            </div>
+        </Cover>
+    </div>
+)
+
+PluginWarningMessage.propTypes = {
+    message: PropTypes.string,
+    style: PropTypes.object,
+}

From 8c60abeb25e8eb2bf6534badbb66fe5654d98360 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Wed, 4 Sep 2024 15:35:33 +0200
Subject: [PATCH 22/63] refactor: move fullscreen functions together in Item
 folder

---
 src/components/Item/fullscreenUtil.js | 31 +++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/Item/fullscreenUtil.js

diff --git a/src/components/Item/fullscreenUtil.js b/src/components/Item/fullscreenUtil.js
new file mode 100644
index 000000000..ece3489e4
--- /dev/null
+++ b/src/components/Item/fullscreenUtil.js
@@ -0,0 +1,31 @@
+import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
+import { getGridItemElement } from './getGridItemElement.js'
+
+export const isElementFullscreen = (itemId) => {
+    const fullscreenElement =
+        document.fullscreenElement || document.webkitFullscreenElement
+
+    return fullscreenElement?.classList.contains(
+        getGridItemDomElementClassName(itemId)
+    )
+}
+
+export const isFullscreenSupported = (itemId) => {
+    const el = getGridItemElement(itemId)
+    return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
+}
+
+export const onToggleFullscreen = (itemId) => {
+    if (!isElementFullscreen(itemId)) {
+        const el = getGridItemElement(itemId)
+        if (el?.requestFullscreen) {
+            el.requestFullscreen()
+        } else if (el?.webkitRequestFullscreen) {
+            el.webkitRequestFullscreen()
+        }
+    } else {
+        document.exitFullscreen
+            ? document.exitFullscreen()
+            : document.webkitExitFullscreen()
+    }
+}

From 18d29b380d269d387b374dbf5638a159cdc144b3 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Wed, 4 Sep 2024 15:38:00 +0200
Subject: [PATCH 23/63] refactor: move FatalErrorBoundary  and memoizeOne in
 Item folder

These are now reused for AppItem items too.
---
 src/components/Item/{VisualizationItem => }/FatalErrorBoundary.js | 0
 .../Item/{VisualizationItem => }/__tests__/memoizeOne.spec.js     | 0
 src/components/Item/{VisualizationItem => }/assets/icons.js       | 0
 .../{VisualizationItem => }/styles/FatalErrorBoundary.module.css  | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/Item/{VisualizationItem => }/FatalErrorBoundary.js (100%)
 rename src/components/Item/{VisualizationItem => }/__tests__/memoizeOne.spec.js (100%)
 rename src/components/Item/{VisualizationItem => }/assets/icons.js (100%)
 rename src/components/Item/{VisualizationItem => }/styles/FatalErrorBoundary.module.css (100%)

diff --git a/src/components/Item/VisualizationItem/FatalErrorBoundary.js b/src/components/Item/FatalErrorBoundary.js
similarity index 100%
rename from src/components/Item/VisualizationItem/FatalErrorBoundary.js
rename to src/components/Item/FatalErrorBoundary.js
diff --git a/src/components/Item/VisualizationItem/__tests__/memoizeOne.spec.js b/src/components/Item/__tests__/memoizeOne.spec.js
similarity index 100%
rename from src/components/Item/VisualizationItem/__tests__/memoizeOne.spec.js
rename to src/components/Item/__tests__/memoizeOne.spec.js
diff --git a/src/components/Item/VisualizationItem/assets/icons.js b/src/components/Item/assets/icons.js
similarity index 100%
rename from src/components/Item/VisualizationItem/assets/icons.js
rename to src/components/Item/assets/icons.js
diff --git a/src/components/Item/VisualizationItem/styles/FatalErrorBoundary.module.css b/src/components/Item/styles/FatalErrorBoundary.module.css
similarity index 100%
rename from src/components/Item/VisualizationItem/styles/FatalErrorBoundary.module.css
rename to src/components/Item/styles/FatalErrorBoundary.module.css

From 4ed8f29ac2cad176b9d058a08ffa776a100107fd Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Wed, 4 Sep 2024 15:43:41 +0200
Subject: [PATCH 24/63] refactor: adjust imports and use shared fullscreen
 functions

---
 src/components/Item/VisualizationItem/Item.js       | 11 +++--------
 src/components/Item/VisualizationItem/ItemFooter.js |  2 +-
 src/components/Item/getAvailableDimensions.js       |  1 +
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index 9b71efc5b..2993e62dc 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -36,10 +36,10 @@ import {
 import { sGetSlideshow } from '../../../reducers/slideshow.js'
 import { sGetVisualization } from '../../../reducers/visualizations.js'
 import { SystemSettingsCtx } from '../../SystemSettingsProvider.js'
+import FatalErrorBoundary from '../FatalErrorBoundary.js'
+import { isFullscreenSupported } from '../fullscreenUtil.js'
 import { getAvailableDimensions } from '../getAvailableDimensions.js'
-import { getGridItemElement } from '../getGridItemElement.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
-import FatalErrorBoundary from './FatalErrorBoundary.js'
 import ItemContextMenu from './ItemContextMenu/ItemContextMenu.js'
 import ItemFooter from './ItemFooter.js'
 import styles from './styles/Item.module.css'
@@ -98,11 +98,6 @@ class Item extends Component {
         }
     }
 
-    isFullscreenSupported = () => {
-        const el = getGridItemElement(this.props.item.id)
-        return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
-    }
-
     onClickNoFiltersOverlay = () =>
         this.setState({ showNoFiltersOverlay: false })
 
@@ -156,7 +151,7 @@ class Item extends Component {
                     enterFullscreen={() => setSlideshow(sortIndex)}
                     activeType={activeType}
                     activeFooter={showFooter}
-                    fullscreenSupported={this.isFullscreenSupported()}
+                    fullscreenSupported={isFullscreenSupported(item.id)}
                     loadItemFailed={this.state.loadItemFailed}
                 />
             ) : null
diff --git a/src/components/Item/VisualizationItem/ItemFooter.js b/src/components/Item/VisualizationItem/ItemFooter.js
index 2699884a9..fb03cf64e 100644
--- a/src/components/Item/VisualizationItem/ItemFooter.js
+++ b/src/components/Item/VisualizationItem/ItemFooter.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { getVisualizationId } from '../../../modules/item.js'
 import { getItemUrl, itemTypeMap } from '../../../modules/itemTypes.js'
-import FatalErrorBoundary from './FatalErrorBoundary.js'
+import FatalErrorBoundary from '../FatalErrorBoundary.js'
 import { InterpretationReplyForm } from './InterpretationReplyForm.js'
 import classes from './styles/ItemFooter.module.css'
 
diff --git a/src/components/Item/getAvailableDimensions.js b/src/components/Item/getAvailableDimensions.js
index 5fdd2364d..7fa8d3aa7 100644
--- a/src/components/Item/getAvailableDimensions.js
+++ b/src/components/Item/getAvailableDimensions.js
@@ -1,5 +1,6 @@
 import { isEditMode, isPrintMode } from '../../modules/dashboardModes.js'
 import { getItemHeightPx } from '../../modules/gridUtil.js'
+import { isElementFullscreen } from './fullscreenUtil.js'
 import { getGridItemElement } from './getGridItemElement.js'
 import memoizeOne from './memoizeOne.js'
 

From 5f217df4c8e26fc12b3d481c4a23d0e930a6e5f2 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Wed, 4 Sep 2024 15:45:46 +0200
Subject: [PATCH 25/63] feat: enable View fullscreen and Open in for custom
 plugin items

---
 src/components/Item/AppItem/Item.js           | 102 ++++++++++------
 .../Item/AppItem/ItemContextMenu.js           | 114 ++++++++++++++++++
 2 files changed, 180 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Item/AppItem/ItemContextMenu.js

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 149ef1c56..7479d3284 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -1,42 +1,61 @@
 // eslint-disable-next-line import/no-unresolved
 import { Plugin } from '@dhis2/app-runtime/experimental'
-import { Divider, spacers } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { useMemo, useRef } from 'react'
-import { connect, useSelector } from 'react-redux'
-import { EDIT, isEditMode } from '../../../modules/dashboardModes.js'
+import React, { useMemo, useReducer, useRef, useState } from 'react'
+import { useSelector } from 'react-redux'
+import {
+    EDIT,
+    isEditMode,
+    isViewMode,
+} from '../../../modules/dashboardModes.js'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 import {
     sGetItemFiltersRoot,
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters.js'
 import { sGetSelectedId } from '../../../reducers/selected.js'
+import FatalErrorBoundary from '../FatalErrorBoundary.js'
+import { isFullscreenSupported } from '../fullscreenUtil.js'
 import { getAvailableDimensions } from '../getAvailableDimensions.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import MissingPluginMessage from '../ItemMessage/MissingPluginMessage.js'
 import { getIframeSrc } from './getIframeSrc.js'
+import { ItemContextMenu } from './ItemContextMenu.js'
 import styles from './styles/AppItem.module.css'
 
-const AppItem = ({ dashboardMode, windowDimensions, item, itemFilters, apps, isFullscreen }) => {
+const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFullscreen }) => {
     const contentRef = useRef()
     const headerRef = useRef()
     const dashboardId = useSelector(sGetSelectedId)
+    let itemFilters = useSelector(sGetItemFiltersRoot)
+
+    if (isEditMode(dashboardMode)) {
+        itemFilters = DEFAULT_STATE_ITEM_FILTERS
+    }
 
     const { isCached } = useCacheableSection(dashboardId)
 
-    let appDetails
+    const [loadItemFailed, setLoadItemFailed] = useState(false)
 
-    const appKey = item.appKey
+    const appDetails =
+        item?.appKey && apps.find((app) => app.key === item.appKey)
 
-    if (appKey) {
-        appDetails = apps.find((app) => app.key === appKey)
-    }
+    const [{ itemTitle, appUrl }, setItemDetails] = useReducer(
+        (state, newState) => ({
+            ...state,
+            ...newState,
+            appUrl: `${appDetails?.launchUrl}${newState.appUrl}`, // hack, should the plugin send an absolute URL?!
+        }),
+        { itemTitle: appDetails?.name, appUrl: appDetails?.launchUrl }
+    )
 
     const pluginProps = useMemo(
         () => ({
             dashboardItemId: item.id,
             dashboardItemFilters: itemFilters,
+            setDashboardItemDetails: setItemDetails,
             cacheId: `${dashboardId}-${item.id}`,
             isParentCached: isCached,
         }),
@@ -63,7 +82,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, itemFilters, apps, isF
                   })
                 : {}
 
-        return appDetails.appType === 'APP' ? (
+        return appDetails?.appType === 'APP' ? (
             // modern plugins
             <Plugin
                 pluginSource={iframeSrc}
@@ -90,26 +109,45 @@ const AppItem = ({ dashboardMode, windowDimensions, item, itemFilters, apps, isF
         )
     }
 
+    const onFatalError = () => {
+        setLoadItemFailed(true)
+    }
+
     if (appDetails) {
         const iframeSrc = getIframeSrc(appDetails, item, itemFilters)
 
+        const actionButtons =
+            appDetails.pluginLaunchUrl && isViewMode(dashboardMode) ? (
+                <ItemContextMenu
+                    item={item}
+                    appName={appDetails.name}
+                    appUrl={appUrl}
+                    enterFullscreen={() => setSlideshow(sortIndex)}
+                    fullscreenSupported={isFullscreenSupported(item.id)}
+                    loadItemFailed={loadItemFailed}
+                />
+            ) : null
+
         return (
             <>
-                {!hideTitle && (
-                    <>
-                        <ItemHeader
-                            ref={headerRef}
-                            title={appDetails.name}
-                            itemId={item.id}
-                            dashboardMode={dashboardMode}
-                            isShortened={item.shortened}
-                        />
-                        <Divider margin={`0 0 ${spacers.dp4} 0`} />
-                    </>
-                )}
-                <div className="dashboard-item-content" ref={contentRef}>
-                    {renderPlugin(iframeSrc)}
-                </div>
+                <ItemHeader
+                    ref={headerRef}
+                    title={hideTitle ? '' : itemTitle}
+                    actionButtons={actionButtons}
+                    itemId={item.id}
+                    dashboardMode={dashboardMode}
+                    isShortened={item.shortened}
+                />
+                <FatalErrorBoundary
+                    message={i18n.t(
+                        'There was a problem loading this dashboard item'
+                    )}
+                    onFatalError={onFatalError}
+                >
+                    <div className="dashboard-item-content" ref={contentRef}>
+                        {renderPlugin(iframeSrc)}
+                    </div>
+                </FatalErrorBoundary>
             </>
         )
     } else {
@@ -127,16 +165,8 @@ AppItem.propTypes = {
     dashboardMode: PropTypes.string,
     isFullscreen: PropTypes.bool,
     item: PropTypes.object,
-    itemFilters: PropTypes.object,
+    sortIndex: PropTypes.number,
     windowDimensions: PropTypes.object,
 }
 
-const mapStateToProps = (state, ownProps) => {
-    const itemFilters = !isEditMode(ownProps.dashboardMode)
-        ? sGetItemFiltersRoot(state)
-        : DEFAULT_STATE_ITEM_FILTERS
-
-    return { itemFilters }
-}
-
-export default connect(mapStateToProps)(AppItem)
+export default AppItem
diff --git a/src/components/Item/AppItem/ItemContextMenu.js b/src/components/Item/AppItem/ItemContextMenu.js
new file mode 100644
index 000000000..f60690331
--- /dev/null
+++ b/src/components/Item/AppItem/ItemContextMenu.js
@@ -0,0 +1,114 @@
+import i18n from '@dhis2/d2-i18n'
+import {
+    colors,
+    Button,
+    Menu,
+    Popover,
+    IconFullscreen16,
+    IconFullscreenExit16,
+    IconLaunch16,
+    IconMore24,
+} from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState, createRef } from 'react'
+import { isSmallScreen } from '../../../modules/smallScreen.js'
+import MenuItem from '../../MenuItemWithTooltip.js'
+import { useSystemSettings } from '../../SystemSettingsProvider.js'
+import { useWindowDimensions } from '../../WindowDimensionsProvider.js'
+import { isElementFullscreen } from '../fullscreenUtil.js'
+
+export const ItemContextMenu = ({
+    appName,
+    appUrl,
+    item,
+    fullscreenSupported,
+    onToggleFullscreen,
+    loadItemFailed,
+}) => {
+    const [menuIsOpen, setMenuIsOpen] = useState(false)
+    const { width } = useWindowDimensions()
+
+    const { allowVisOpenInApp, allowVisFullscreen } =
+        useSystemSettings().systemSettings
+
+    const fullscreenAllowed = fullscreenSupported && allowVisFullscreen
+
+    const noOptionsEnabled = !allowVisOpenInApp && !fullscreenAllowed
+
+    if (noOptionsEnabled || (!allowVisOpenInApp && loadItemFailed)) {
+        return null
+    }
+
+    const toggleFullscreen = () => {
+        onToggleFullscreen()
+        closeMenu()
+    }
+
+    const openMenu = () => {
+        setMenuIsOpen(true)
+    }
+    const closeMenu = () => setMenuIsOpen(false)
+
+    console.log('AppItem', item)
+
+    const buttonRef = createRef()
+
+    return isElementFullscreen(item.id) ? (
+        <Button small secondary onClick={onToggleFullscreen}>
+            <span data-testid="exit-fullscreen-button">
+                <IconFullscreenExit16 color={colors.grey600} />
+            </span>
+        </Button>
+    ) : (
+        <>
+            <div ref={buttonRef}>
+                <Button
+                    small
+                    secondary
+                    onClick={openMenu}
+                    dataTest="dashboarditem-menu-button"
+                    icon={<IconMore24 color={colors.grey700} />}
+                />
+            </div>
+            {menuIsOpen && (
+                <Popover
+                    reference={buttonRef}
+                    placement="auto-start"
+                    arrow={false}
+                    onClickOutside={closeMenu}
+                >
+                    <Menu dense>
+                        {allowVisOpenInApp && !isSmallScreen(width) && (
+                            <MenuItem
+                                icon={<IconLaunch16 />}
+                                disabledWhenOffline={false}
+                                label={i18n.t('Open in {{appName}}', {
+                                    appName,
+                                })}
+                                href={appUrl}
+                                target="_blank"
+                            />
+                        )}
+                        {fullscreenAllowed && !loadItemFailed && (
+                            <MenuItem
+                                disabledWhenOffline={false}
+                                icon={<IconFullscreen16 />}
+                                label={i18n.t('View fullscreen')}
+                                onClick={toggleFullscreen}
+                            />
+                        )}
+                    </Menu>
+                </Popover>
+            )}
+        </>
+    )
+}
+
+ItemContextMenu.propTypes = {
+    appName: PropTypes.string,
+    appUrl: PropTypes.string,
+    fullscreenSupported: PropTypes.bool,
+    item: PropTypes.object,
+    loadItemFailed: PropTypes.bool,
+    onToggleFullscreen: PropTypes.func,
+}

From e5e49da5f1bbbf1a85bd22c13b5ca811aa1e2233 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 5 Sep 2024 14:47:56 +0200
Subject: [PATCH 26/63] refactor: update resize logic

Don't render Plugin before knowing width and height.
---
 src/components/Item/AppItem/Item.js            | 12 ++++++++++--
 src/components/Item/AppItem/ItemContextMenu.js | 15 ++++++---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 7479d3284..417acf3e9 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -55,7 +55,11 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
         () => ({
             dashboardItemId: item.id,
             dashboardItemFilters: itemFilters,
-            setDashboardItemDetails: setItemDetails,
+            // Edit mode does not have the hamburger menu.
+            // Don't assume the plugin checks for this function before calling it
+            setDashboardItemDetails: isViewMode(dashboardMode)
+                ? setItemDetails
+                : Function.prototype,
             cacheId: `${dashboardId}-${item.id}`,
             isParentCached: isCached,
         }),
@@ -82,11 +86,15 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
                   })
                 : {}
 
+        // we need width and height in order for resizing to work properly with the platform's plugin components
+        if (!(style.width && style.height)) {
+            return null
+        }
+
         return appDetails?.appType === 'APP' ? (
             // modern plugins
             <Plugin
                 pluginSource={iframeSrc}
-                hasFixedDimensions={true}
                 width={style.width}
                 height={style.height}
                 {...pluginProps}
diff --git a/src/components/Item/AppItem/ItemContextMenu.js b/src/components/Item/AppItem/ItemContextMenu.js
index f60690331..2bc8bdbd1 100644
--- a/src/components/Item/AppItem/ItemContextMenu.js
+++ b/src/components/Item/AppItem/ItemContextMenu.js
@@ -10,7 +10,7 @@ import {
     IconMore24,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useState, createRef } from 'react'
+import React, { useRef, useState } from 'react'
 import { isSmallScreen } from '../../../modules/smallScreen.js'
 import MenuItem from '../../MenuItemWithTooltip.js'
 import { useSystemSettings } from '../../SystemSettingsProvider.js'
@@ -25,6 +25,7 @@ export const ItemContextMenu = ({
     onToggleFullscreen,
     loadItemFailed,
 }) => {
+    const buttonRef = useRef()
     const [menuIsOpen, setMenuIsOpen] = useState(false)
     const { width } = useWindowDimensions()
 
@@ -39,19 +40,15 @@ export const ItemContextMenu = ({
         return null
     }
 
-    const toggleFullscreen = () => {
-        onToggleFullscreen()
-        closeMenu()
-    }
-
     const openMenu = () => {
         setMenuIsOpen(true)
     }
     const closeMenu = () => setMenuIsOpen(false)
 
-    console.log('AppItem', item)
-
-    const buttonRef = createRef()
+    const toggleFullscreen = () => {
+        onToggleFullscreen()
+        closeMenu()
+    }
 
     return isElementFullscreen(item.id) ? (
         <Button small secondary onClick={onToggleFullscreen}>

From 7f7defcffa65d6be74c6d3336e815a57faf888d3 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 5 Sep 2024 14:48:41 +0200
Subject: [PATCH 27/63] fix: remove unused prop

Platform's plugin components rely on width and height in order to
disable automatic resize.
---
 .../Item/VisualizationItem/Visualization/IframePlugin.js         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index 4bd2a5ad2..2e74a6ef5 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -162,7 +162,6 @@ const IframePlugin = ({
             {iframeSrc ? (
                 <Plugin
                     pluginSource={iframeSrc}
-                    hasFixedDimensions={true}
                     width={style.width}
                     height={style.height}
                     {...pluginProps}

From 2f900cfebc6f5ef9840a5956910a179a09668ebe Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 5 Sep 2024 17:40:43 +0200
Subject: [PATCH 28/63] test: update snapshots

---
 .../__snapshots__/Visualization.spec.js.snap  | 187 ------------------
 .../__tests__/__snapshots__/Item.spec.js.snap |  66 +------
 2 files changed, 2 insertions(+), 251 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap b/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
index d8e7bbf3d..e69de29bb 100644
--- a/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
+++ b/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
@@ -1,187 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders NoVisMessage when no visualization 1`] = `
-<div>
-  <div
-    style="height: 500px;"
-  >
-    <div
-      class="jsx-3042342945 "
-      data-test="dhis2-uicore-componentcover"
-    >
-      <div
-        class="messageContent"
-      >
-        <svg
-          color="#a0adba"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
-            fill="currentColor"
-          />
-        </svg>
-        No data to display
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders a DefaultPlugin when activeType is EVENT_CHART 1`] = `
-<div>
-  <div
-    style="height: 500px;"
-  >
-    <div
-      class="jsx-3042342945 "
-      data-test="dhis2-uicore-componentcover"
-    >
-      <div
-        class="messageContent"
-      >
-        <svg
-          color="#a0adba"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
-            fill="currentColor"
-          />
-        </svg>
-        No data to display
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders a DefaultPlugin when activeType is EVENT_REPORT 1`] = `
-<div>
-  <div
-    style="height: 500px;"
-  >
-    <div
-      class="jsx-3042342945 "
-      data-test="dhis2-uicore-componentcover"
-    >
-      <div
-        class="messageContent"
-      >
-        <svg
-          color="#a0adba"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
-            fill="currentColor"
-          />
-        </svg>
-        No data to display
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders a VisualizationPlugin for CHART 1`] = `
-<div>
-  <div
-    style="height: 500px;"
-  >
-    <div
-      class="jsx-3042342945 "
-      data-test="dhis2-uicore-componentcover"
-    >
-      <div
-        class="messageContent"
-      >
-        <svg
-          color="#a0adba"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
-            fill="currentColor"
-          />
-        </svg>
-        No data to display
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders a VisualizationPlugin for REPORT_TABLE 1`] = `
-<div>
-  <div
-    style="height: 500px;"
-  >
-    <div
-      class="jsx-3042342945 "
-      data-test="dhis2-uicore-componentcover"
-    >
-      <div
-        class="messageContent"
-      >
-        <svg
-          color="#a0adba"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
-            fill="currentColor"
-          />
-        </svg>
-        No data to display
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders a VisualizationPlugin when activeType is MAP 1`] = `
-<div>
-  <div
-    style="height: 500px;"
-  >
-    <div
-      class="jsx-3042342945 "
-      data-test="dhis2-uicore-componentcover"
-    >
-      <div
-        class="messageContent"
-      >
-        <svg
-          color="#a0adba"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
-            fill="currentColor"
-          />
-        </svg>
-        No data to display
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
index 0855956cd..76a8d2fc3 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -1,67 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Visualization/Item renders edit mode 1`] = `
-<div>
-  <div
-    class="itemHeaderWrap"
-  >
-    <p
-      class="itemTitle"
-    >
-      Fancy Chart
-    </p>
-    <div
-      class="itemHeaderRightWrap"
-    >
-      <div
-        class="itemActionsWrap"
-      >
-        <div
-          class="DeleteItemButton"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    class="CHART content edit"
-  >
-    <div
-      activetype="CHART"
-      class="visualization"
-      item="[object Object]"
-      itemfilters="[object Object]"
-    />
-  </div>
-</div>
-`;
+exports[`Visualization/Item renders edit mode 1`] = `<div />`;
 
-exports[`Visualization/Item renders view mode 1`] = `
-<div>
-  <div
-    class="itemHeaderWrap"
-  >
-    <p
-      class="itemTitle"
-    >
-      Fancy Chart
-    </p>
-    <div
-      class="itemHeaderRightWrap"
-    >
-      <div
-        class="itemActionsWrap"
-      />
-    </div>
-  </div>
-  <div
-    class="CHART content"
-  >
-    <div
-      activetype="CHART"
-      class="visualization"
-      item="[object Object]"
-      itemfilters="[object Object]"
-    />
-  </div>
-</div>
-`;
+exports[`Visualization/Item renders view mode 1`] = `<div />`;

From 73560e66201f994be132618b4d72466fe6096cfa Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 5 Sep 2024 18:04:31 +0200
Subject: [PATCH 29/63] test: update imports and use of data from cached data
 query

---
 .../Item/AppItem/__tests__/Item.spec.js       | 76 ++++++++++---------
 .../VisualizationItem/__tests__/Item.spec.js  |  2 +-
 2 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/components/Item/AppItem/__tests__/Item.spec.js b/src/components/Item/AppItem/__tests__/Item.spec.js
index 9beff4a6f..5becf3aab 100644
--- a/src/components/Item/AppItem/__tests__/Item.spec.js
+++ b/src/components/Item/AppItem/__tests__/Item.spec.js
@@ -2,10 +2,30 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import Item from '../Item.js'
+import WindowDimensionsProvider from '../../../WindowDimensionsProvider.js'
+import Item from '../../Item.js'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({
+        apps: [
+            {
+                key: 'scorecard',
+                name: 'Scorecard',
+                launchUrl: 'launchurl',
+                pluginLaunchUrl: 'pluginLaunchUrl',
+            },
+            {
+                key: 'noTitle',
+                name: 'No Title',
+                launchUrl: 'launchurl',
+                pluginLaunchUrl: 'pluginLaunchUrl',
+                settings: {
+                    dashboardWidget: {
+                        hideTitle: true,
+                    },
+                },
+            },
+        ],
         currentUser: {
             username: 'rainbowDash',
             id: 'r3nb0d5h',
@@ -14,18 +34,6 @@ jest.mock('@dhis2/analytics', () => ({
     getDimensionById: jest.fn(),
 }))
 
-jest.mock('@dhis2/ui', () => {
-    const originalModule = jest.requireActual('@dhis2/ui')
-
-    return {
-        __esModule: true,
-        ...originalModule,
-        Divider: function Mock() {
-            return <div className="ui-Divider" />
-        },
-    }
-})
-
 jest.mock(
     '../../ItemHeader/DeleteItemButton.js',
     () =>
@@ -48,31 +56,15 @@ const itemWithoutTitle = {
     shortened: false,
 }
 
-const apps = [
-    {
-        key: 'scorecard',
-        name: 'Scorecard',
-        launchUrl: 'launchurl',
-    },
-    {
-        key: 'noTitle',
-        name: 'No Title',
-        launchUrl: 'launchurl',
-        settings: {
-            dashboardWidget: {
-                hideTitle: true,
-            },
-        },
-    },
-]
-
 test('renders a valid App item in view mode', () => {
     const store = {
         itemFilters: {},
     }
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <Item item={item} dashboardMode={'view'} apps={apps} />
+            <WindowDimensionsProvider>
+                <Item item={item} dashboardMode={'view'} />
+            </WindowDimensionsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -87,7 +79,9 @@ test('renders a valid App item with filter in view mode', () => {
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <Item item={item} dashboardMode={'view'} apps={apps} />
+            <WindowDimensionsProvider>
+                <Item item={item} dashboardMode={'view'} />
+            </WindowDimensionsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -102,7 +96,9 @@ test('renders a valid App item with filter in edit mode', () => {
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <Item item={item} dashboardMode={'edit'} apps={apps} />
+            <WindowDimensionsProvider>
+                <Item item={item} dashboardMode={'edit'} />
+            </WindowDimensionsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -115,7 +111,9 @@ test('renders a valid App item without title in view mode if specified in app se
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <Item item={itemWithoutTitle} dashboardMode={'view'} apps={apps} />
+            <WindowDimensionsProvider>
+                <Item item={itemWithoutTitle} dashboardMode={'view'} />
+            </WindowDimensionsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -128,7 +126,9 @@ test('renders a valid App item with title in edit mode irrespective of app setti
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <Item item={itemWithoutTitle} dashboardMode={'edit'} apps={apps} />
+            <WindowDimensionsProvider>
+                <Item item={itemWithoutTitle} dashboardMode={'edit'} />
+            </WindowDimensionsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -149,7 +149,9 @@ test('renders an invalid App item', () => {
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <Item item={invalidItem} dashboardMode={'edit'} apps={apps} />
+            <WindowDimensionsProvider>
+                <Item item={invalidItem} dashboardMode={'edit'} />
+            </WindowDimensionsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
diff --git a/src/components/Item/VisualizationItem/__tests__/Item.spec.js b/src/components/Item/VisualizationItem/__tests__/Item.spec.js
index d151fd193..b6180d72a 100644
--- a/src/components/Item/VisualizationItem/__tests__/Item.spec.js
+++ b/src/components/Item/VisualizationItem/__tests__/Item.spec.js
@@ -5,7 +5,7 @@ import configureMockStore from 'redux-mock-store'
 import { apiFetchVisualization } from '../../../../api/fetchVisualization.js'
 import SystemSettingsProvider from '../../../SystemSettingsProvider.js'
 import WindowDimensionsProvider from '../../../WindowDimensionsProvider.js'
-import Item from '../Item.js'
+import { Item } from '../../Item.js'
 
 jest.mock('../../../../api/fetchVisualization')
 jest.mock('../../../SystemSettingsProvider')

From e0077637de68d4604a0b943c0f3ad92e0b3be46c Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 5 Sep 2024 18:16:27 +0200
Subject: [PATCH 30/63] chore: fix linting error

---
 src/components/Item/AppItem/__tests__/Item.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Item/AppItem/__tests__/Item.spec.js b/src/components/Item/AppItem/__tests__/Item.spec.js
index 5becf3aab..9947110b8 100644
--- a/src/components/Item/AppItem/__tests__/Item.spec.js
+++ b/src/components/Item/AppItem/__tests__/Item.spec.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
 import WindowDimensionsProvider from '../../../WindowDimensionsProvider.js'
-import Item from '../../Item.js'
+import { Item } from '../../Item.js'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({

From 42a2681e3c5221ec74d08f506a2d4c376d84363c Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 6 Sep 2024 16:18:33 +0200
Subject: [PATCH 31/63] test: update test for AppItem

Still not quite there.
Currently the render fails with an error, but the updated snapshot makes
the test pass.
---
 src/components/Item/AppItem/Item.js           |   5 +-
 .../Item/AppItem/__tests__/Item.spec.js       | 109 +++++++++---
 .../__tests__/__snapshots__/Item.spec.js.snap | 163 ------------------
 .../__tests__/__snapshots__/Item.spec.js.snap |  66 ++++++-
 4 files changed, 155 insertions(+), 188 deletions(-)
 delete mode 100644 src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 417acf3e9..530fd5ab6 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -10,6 +10,7 @@ import {
     isEditMode,
     isViewMode,
 } from '../../../modules/dashboardModes.js'
+import { APP } from '../../../modules/itemTypes.js'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 import {
     sGetItemFiltersRoot,
@@ -63,7 +64,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
             cacheId: `${dashboardId}-${item.id}`,
             isParentCached: isCached,
         }),
-        [dashboardId, item.id, isCached, itemFilters]
+        [dashboardId, dashboardMode, item.id, isCached, itemFilters]
     )
 
     // See DHIS2-9605
@@ -91,7 +92,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
             return null
         }
 
-        return appDetails?.appType === 'APP' ? (
+        return appDetails?.appType === APP ? (
             // modern plugins
             <Plugin
                 pluginSource={iframeSrc}
diff --git a/src/components/Item/AppItem/__tests__/Item.spec.js b/src/components/Item/AppItem/__tests__/Item.spec.js
index 9947110b8..e743857cb 100644
--- a/src/components/Item/AppItem/__tests__/Item.spec.js
+++ b/src/components/Item/AppItem/__tests__/Item.spec.js
@@ -2,6 +2,8 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
+import { APP } from '../../../../modules/itemTypes.js'
+import SystemSettingsProvider from '../../../SystemSettingsProvider.js'
 import WindowDimensionsProvider from '../../../WindowDimensionsProvider.js'
 import { Item } from '../../Item.js'
 
@@ -11,20 +13,26 @@ jest.mock('@dhis2/analytics', () => ({
             {
                 key: 'scorecard',
                 name: 'Scorecard',
+                appType: 'DASHBOARD_WIDGET',
                 launchUrl: 'launchurl',
-                pluginLaunchUrl: 'pluginLaunchUrl',
             },
             {
                 key: 'noTitle',
                 name: 'No Title',
                 launchUrl: 'launchurl',
-                pluginLaunchUrl: 'pluginLaunchUrl',
+                appType: 'DASHBOARD_WIDGET',
                 settings: {
                     dashboardWidget: {
                         hideTitle: true,
                     },
                 },
             },
+            {
+                key: 'new-dashboard-plugin',
+                name: 'New dashboard plugin',
+                appType: 'APP',
+                pluginLaunchUrl: 'pluginLaunchUrl',
+            },
         ],
         currentUser: {
             username: 'rainbowDash',
@@ -34,6 +42,12 @@ jest.mock('@dhis2/analytics', () => ({
     getDimensionById: jest.fn(),
 }))
 
+jest.mock('@dhis2/app-runtime', () => ({
+    ...jest.requireActual('@dhis2/app-runtime'),
+    useCacheableSection: jest.fn,
+}))
+
+jest.mock('../../../SystemSettingsProvider')
 jest.mock(
     '../../ItemHeader/DeleteItemButton.js',
     () =>
@@ -45,26 +59,39 @@ jest.mock(
 const mockStore = configureMockStore()
 
 const item = {
-    appKey: 'scorecard',
+    type: APP,
+    appKey: 'new-dashboard-plugin',
     id: 'rainbowdash',
     shortened: false,
 }
 
 const itemWithoutTitle = {
+    type: APP,
     appKey: 'noTitle',
     id: 'twilightsparkle',
     shortened: false,
 }
 
+const itemLegacyWidget = {
+    type: APP,
+    appKey: 'scorecard',
+    id: 'applejack',
+    shortened: false,
+}
+
 test('renders a valid App item in view mode', () => {
     const store = {
         itemFilters: {},
+        editDashboard: {},
+        selected: { id: 'some-dashboard' },
     }
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Item item={item} dashboardMode={'view'} />
-            </WindowDimensionsProvider>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={item} dashboardMode={'view'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -75,13 +102,16 @@ test('renders a valid App item with filter in view mode', () => {
         itemFilters: {
             ou: [{ path: '/rainbow' }],
         },
+        selected: { id: 'some-dashboard' },
     }
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Item item={item} dashboardMode={'view'} />
-            </WindowDimensionsProvider>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={item} dashboardMode={'view'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -91,14 +121,20 @@ test('renders a valid App item with filter in edit mode', () => {
     const store = {
         itemFilters: {
             ou: [{ path: '/rainbow' }],
+            editDashboard: {
+                id: item.id,
+            },
         },
+        selected: { id: 'some-dashboard' },
     }
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Item item={item} dashboardMode={'edit'} />
-            </WindowDimensionsProvider>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={item} dashboardMode={'edit'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -107,13 +143,16 @@ test('renders a valid App item with filter in edit mode', () => {
 test('renders a valid App item without title in view mode if specified in app settings', () => {
     const store = {
         itemFilters: {},
+        selected: { id: 'some-dashboard' },
     }
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Item item={itemWithoutTitle} dashboardMode={'view'} />
-            </WindowDimensionsProvider>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={itemWithoutTitle} dashboardMode={'view'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -122,13 +161,37 @@ test('renders a valid App item without title in view mode if specified in app se
 test('renders a valid App item with title in edit mode irrespective of app settings', () => {
     const store = {
         itemFilters: {},
+        editDashboard: {
+            id: itemWithoutTitle.id,
+        },
+        selected: { id: 'some-dashboard' },
     }
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Item item={itemWithoutTitle} dashboardMode={'edit'} />
-            </WindowDimensionsProvider>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={itemWithoutTitle} dashboardMode={'edit'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
+        </Provider>
+    )
+    expect(container).toMatchSnapshot()
+})
+
+test('renders a valid legacy widget item', () => {
+    const store = {
+        itemFilters: {},
+        editDashboard: {},
+        selected: { id: 'some-dashboard' },
+    }
+    const { container } = render(
+        <Provider store={mockStore(store)}>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={itemLegacyWidget} dashboardMode={'view'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
@@ -139,9 +202,11 @@ test('renders an invalid App item', () => {
         itemFilters: {
             ou: [{ path: '/rainbow' }],
         },
+        selected: { id: 'some-dashboard' },
     }
 
     const invalidItem = {
+        type: APP,
         appKey: 'unknownApp',
         id: 'unknown',
         shortened: false,
@@ -149,9 +214,11 @@ test('renders an invalid App item', () => {
 
     const { container } = render(
         <Provider store={mockStore(store)}>
-            <WindowDimensionsProvider>
-                <Item item={invalidItem} dashboardMode={'edit'} />
-            </WindowDimensionsProvider>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={invalidItem} dashboardMode={'edit'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
         </Provider>
     )
     expect(container).toMatchSnapshot()
diff --git a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
deleted file mode 100644
index ef842b42c..000000000
--- a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
+++ /dev/null
@@ -1,163 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders a valid App item in view mode 1`] = `
-<div>
-  <div
-    class="itemHeaderWrap"
-  >
-    <p
-      class="itemTitle"
-    >
-      Scorecard
-    </p>
-    <div
-      class="itemHeaderRightWrap"
-    />
-  </div>
-  <div
-    class="ui-Divider"
-  />
-  <iframe
-    class="content"
-    src="launchurl?dashboardItemId=rainbowdash"
-    title="Scorecard"
-  />
-</div>
-`;
-
-exports[`renders a valid App item with filter in edit mode 1`] = `
-<div>
-  <div
-    class="itemHeaderWrap"
-  >
-    <p
-      class="itemTitle"
-    >
-      Scorecard
-    </p>
-    <div
-      class="itemHeaderRightWrap"
-    >
-      <div
-        class="itemActionsWrap"
-      >
-        <div
-          class="DeleteItemButton"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    class="ui-Divider"
-  />
-  <iframe
-    class="content"
-    src="launchurl?dashboardItemId=rainbowdash"
-    title="Scorecard"
-  />
-</div>
-`;
-
-exports[`renders a valid App item with filter in view mode 1`] = `
-<div>
-  <div
-    class="itemHeaderWrap"
-  >
-    <p
-      class="itemTitle"
-    >
-      Scorecard
-    </p>
-    <div
-      class="itemHeaderRightWrap"
-    />
-  </div>
-  <div
-    class="ui-Divider"
-  />
-  <iframe
-    class="content"
-    src="launchurl?dashboardItemId=rainbowdash&userOrgUnit=rainbow"
-    title="Scorecard"
-  />
-</div>
-`;
-
-exports[`renders a valid App item with title in edit mode irrespective of app settings 1`] = `
-<div>
-  <div
-    class="itemHeaderWrap"
-  >
-    <p
-      class="itemTitle"
-    >
-      No Title
-    </p>
-    <div
-      class="itemHeaderRightWrap"
-    >
-      <div
-        class="itemActionsWrap"
-      >
-        <div
-          class="DeleteItemButton"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    class="ui-Divider"
-  />
-  <iframe
-    class="content"
-    src="launchurl?dashboardItemId=twilightsparkle"
-    title="No Title"
-  />
-</div>
-`;
-
-exports[`renders a valid App item without title in view mode if specified in app settings 1`] = `
-<div>
-  <iframe
-    class="content hiddenTitle"
-    src="launchurl?dashboardItemId=twilightsparkle"
-    title="No Title"
-  />
-</div>
-`;
-
-exports[`renders an invalid App item 1`] = `
-<div>
-  <div
-    class="itemHeaderWrap"
-  >
-    <p
-      class="itemTitle"
-    >
-      unknownApp app not found
-    </p>
-    <div
-      class="itemHeaderRightWrap"
-    />
-  </div>
-  <div
-    class="ui-Divider"
-  />
-  <div
-    class="content centered"
-  >
-    <svg
-      color="#a0adba"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm0 12a1 1 0 110 2 1 1 0 010-2zm0-10a4 4 0 011.155 7.83l-.155.043V15h-2v-3h1a2 2 0 10-1.995-2.15L10 10H8a4 4 0 014-4z"
-        fill="currentColor"
-      />
-    </svg>
-  </div>
-</div>
-`;
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
index 76a8d2fc3..f073653d9 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -1,5 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Visualization/Item renders edit mode 1`] = `<div />`;
+exports[`Visualization/Item renders edit mode 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      Fancy Chart
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    >
+      <div
+        class="itemActionsWrap"
+      >
+        <div
+          class="DeleteItemButton"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="dashboard-item-content"
+  >
+    <div
+      activetype="CHART"
+      class="visualization"
+      item="[object Object]"
+      itemfilters="[object Object]"
+    />
+  </div>
+</div>
+`;
 
-exports[`Visualization/Item renders view mode 1`] = `<div />`;
+exports[`Visualization/Item renders view mode 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      Fancy Chart
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    >
+      <div
+        class="itemActionsWrap"
+      />
+    </div>
+  </div>
+  <div
+    class="dashboard-item-content"
+  >
+    <div
+      activetype="CHART"
+      class="visualization"
+      item="[object Object]"
+      itemfilters="[object Object]"
+    />
+  </div>
+</div>
+`;

From 1346cf3c63cb8b49445f2f8079f13e13ff9ce9a2 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 10 Oct 2024 11:37:17 +0200
Subject: [PATCH 32/63] refactor: set custom title also in edit mode

---
 src/components/Item/AppItem/Item.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 530fd5ab6..1f54aeb26 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -58,9 +58,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
             dashboardItemFilters: itemFilters,
             // Edit mode does not have the hamburger menu.
             // Don't assume the plugin checks for this function before calling it
-            setDashboardItemDetails: isViewMode(dashboardMode)
-                ? setItemDetails
-                : Function.prototype,
+            setDashboardItemDetails: setItemDetails,
             cacheId: `${dashboardId}-${item.id}`,
             isParentCached: isCached,
         }),

From ed487870ad4eecfa36bf73882edfc2790e3f5478 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 10 Oct 2024 12:57:52 +0200
Subject: [PATCH 33/63] fix: convert CSS for rtl support

---
 src/components/Item/ItemMessage/styles/ItemMessage.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Item/ItemMessage/styles/ItemMessage.module.css b/src/components/Item/ItemMessage/styles/ItemMessage.module.css
index 0ba888630..e3bebdadb 100644
--- a/src/components/Item/ItemMessage/styles/ItemMessage.module.css
+++ b/src/components/Item/ItemMessage/styles/ItemMessage.module.css
@@ -12,8 +12,8 @@
     gap: var(--spacers-dp8);
     align-items: center;
     justify-content: center;
-    height: 100%;
-    width: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     background-color: rgba(255, 255, 255, 0.92);
     font-size: 13px;
     font-stretch: normal;

From 9ab3c59d0a9babf6a3a515fd7bec47611d6524a5 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Tue, 15 Oct 2024 16:14:52 +0200
Subject: [PATCH 34/63] fix: update next app versions

---
 src/modules/isAppVersionCompatible.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/isAppVersionCompatible.js b/src/modules/isAppVersionCompatible.js
index ebc53aebc..364b3a8b8 100644
--- a/src/modules/isAppVersionCompatible.js
+++ b/src/modules/isAppVersionCompatible.js
@@ -1,7 +1,7 @@
 // TODO handle plugin version matrix in a better way
-export const minDVVersion = [100, 7, 2]
+export const minDVVersion = [100, 8, 1]
 export const minLLVersion = [101, 1, 9]
-export const minMapsVersion = [100, 6, 7]
+export const minMapsVersion = [100, 7, 1]
 
 const isAppVersionCompatible = (version, minVersion) => {
     const [major, minor, patch] = version

From 0b90335f412fe657889d911d12f5b2ba079daf5d Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 21 Oct 2024 14:18:06 +0200
Subject: [PATCH 35/63] feat: pass dashboardMode to plugins

This is to allow plugins to show different content, ie. an edit button
for configuring the plugin content only when editing a dashboard.
The button won't show when viewing the plugin content.
---
 src/components/Item/AppItem/Item.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 1f54aeb26..2d61e9a5f 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -56,6 +56,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
         () => ({
             dashboardItemId: item.id,
             dashboardItemFilters: itemFilters,
+            dashboardMode,
             // Edit mode does not have the hamburger menu.
             // Don't assume the plugin checks for this function before calling it
             setDashboardItemDetails: setItemDetails,

From 21f9305138e78ebe91a548a1cfd024bb4df152c3 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 21 Oct 2024 15:03:56 +0200
Subject: [PATCH 36/63] refactor: update message about missing plugin

---
 i18n/en.pot                                          | 12 ++++++++++++
 .../Item/ItemMessage/MissingPluginMessage.js         |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index fa8cab2e1..7c7646b3a 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -129,6 +129,18 @@ msgstr "Remove this item"
 msgid "This item has been shortened to fit on one page"
 msgstr "This item has been shortened to fit on one page"
 
+msgid "The plugin needed to display this item is not available"
+msgstr "The plugin needed to display this item is not available"
+
+msgid "Install the {{pluginName}} plugin from the App Hub"
+msgstr "Install the {{pluginName}} plugin from the App Hub"
+
+msgid "There was an error loading data for this item"
+msgstr "There was an error loading data for this item"
+
+msgid "Open this item in {{appName}}"
+msgstr "Open this item in {{appName}}"
+
 msgid "Remove"
 msgstr "Remove"
 
diff --git a/src/components/Item/ItemMessage/MissingPluginMessage.js b/src/components/Item/ItemMessage/MissingPluginMessage.js
index 6aea12636..8d3c23c1f 100644
--- a/src/components/Item/ItemMessage/MissingPluginMessage.js
+++ b/src/components/Item/ItemMessage/MissingPluginMessage.js
@@ -12,7 +12,7 @@ const MissingPluginMessage = ({ dashboardMode, pluginName }) => {
                 <IconWarning24 color={colors.grey500} />
                 <span>
                     {i18n.t(
-                        'The plugin for rendering this item is not available'
+                        'The plugin needed to display this item is not available'
                     )}
                 </span>
                 {!isPrintMode(dashboardMode) ? (

From d95355abf5c281b4297c1bd9d161ee9c417b6df0 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 31 Oct 2024 16:05:11 +0100
Subject: [PATCH 37/63] fix: fix URL to App management app

---
 src/components/Item/ItemMessage/MissingPluginMessage.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Item/ItemMessage/MissingPluginMessage.js b/src/components/Item/ItemMessage/MissingPluginMessage.js
index 8d3c23c1f..a5c7fe543 100644
--- a/src/components/Item/ItemMessage/MissingPluginMessage.js
+++ b/src/components/Item/ItemMessage/MissingPluginMessage.js
@@ -1,3 +1,4 @@
+import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Cover, IconWarning24, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -6,6 +7,8 @@ import { isPrintMode } from '../../../modules/dashboardModes.js'
 import classes from './styles/ItemMessage.module.css'
 
 const MissingPluginMessage = ({ dashboardMode, pluginName }) => {
+    const { baseUrl } = useConfig()
+
     return (
         <Cover>
             <div className={classes.messageContent}>
@@ -21,7 +24,7 @@ const MissingPluginMessage = ({ dashboardMode, pluginName }) => {
                             onClick={(e) => e.stopPropagation()}
                             target="_blank"
                             rel="noopener noreferrer"
-                            href="/dhis-web-app-management/index.html#/app-hub"
+                            href={`${baseUrl}/dhis-web-app-management/index.html#/app-hub`}
                         >
                             {i18n.t(
                                 'Install the {{pluginName}} plugin from the App Hub',

From 550fcd022d4f96c6c02450d73539f76f12716267 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 4 Nov 2024 13:03:35 +0100
Subject: [PATCH 38/63] test: fix app-runtime resolution for Jest, updated
 snapshot

---
 package.json                                  |  11 +-
 .../__tests__/__snapshots__/Item.spec.js.snap | 183 ++++++++++++++++++
 2 files changed, 186 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap

diff --git a/package.json b/package.json
index c651ae390..62f15c197 100644
--- a/package.json
+++ b/package.json
@@ -68,13 +68,8 @@
     },
     "jest": {
         "moduleNameMapper": {
-            "^.+\\.(css|sass|scss)$": "identity-obj-proxy"
-        },
-        "setupFilesAfterEnv": [
-            "<rootDir>/config/testSetup.js"
-        ]
-    },
-    "resolutions": {
-        "@dhis2/ui": "^10.1.4"
+            "^.+\\.(css|sass|scss)$": "identity-obj-proxy",
+            "@dhis2/app-runtime/experimental": "<rootDir>/node_modules/@dhis2/app-runtime/build/cjs/experimental.js"
+        }
     }
 }
diff --git a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
new file mode 100644
index 000000000..17c3700e6
--- /dev/null
+++ b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a valid App item in view mode 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      New dashboard plugin
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    >
+      <div
+        class="itemActionsWrap"
+      />
+    </div>
+  </div>
+  <div
+    class="dashboard-item-content"
+  />
+</div>
+`;
+
+exports[`renders a valid App item with filter in edit mode 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      New dashboard plugin
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    >
+      <div
+        class="itemActionsWrap"
+      >
+        <div
+          class="DeleteItemButton"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="dashboard-item-content"
+  />
+</div>
+`;
+
+exports[`renders a valid App item with filter in view mode 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      New dashboard plugin
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    >
+      <div
+        class="itemActionsWrap"
+      />
+    </div>
+  </div>
+  <div
+    class="dashboard-item-content"
+  />
+</div>
+`;
+
+exports[`renders a valid App item with title in edit mode irrespective of app settings 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      No Title
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    >
+      <div
+        class="itemActionsWrap"
+      >
+        <div
+          class="DeleteItemButton"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="dashboard-item-content"
+  />
+</div>
+`;
+
+exports[`renders a valid App item without title in view mode if specified in app settings 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    />
+    <div
+      class="itemHeaderRightWrap"
+    />
+  </div>
+  <div
+    class="dashboard-item-content"
+  />
+</div>
+`;
+
+exports[`renders a valid legacy widget item 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      Scorecard
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    />
+  </div>
+  <div
+    class="dashboard-item-content"
+  />
+</div>
+`;
+
+exports[`renders an invalid App item 1`] = `
+<div>
+  <div
+    class="jsx-3042342945 "
+    data-test="dhis2-uicore-componentcover"
+  >
+    <div
+      class="messageContent"
+    >
+      <svg
+        color="#a0adba"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+          fill="currentColor"
+        />
+      </svg>
+      <span>
+        The plugin needed to display this item is not available
+      </span>
+      <span
+        class="appLink"
+      >
+        <a
+          href="../dhis-web-app-management/index.html#/app-hub"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Install the unknownApp plugin from the App Hub
+        </a>
+      </span>
+    </div>
+  </div>
+</div>
+`;

From e5f29db16e39a40c5f0d153c9428db065f843440 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 15 Nov 2024 09:19:50 +0100
Subject: [PATCH 39/63] chore: remove debug log

---
 .../Item/VisualizationItem/Visualization/IframePlugin.js         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index 2e74a6ef5..ef1def53f 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -54,7 +54,6 @@ const IframePlugin = ({
     const onError = () => setError('plugin')
     const onInstallationStatusChange = useCallback(
         (installationStatus) => {
-            console.log('DS installation status change', installationStatus)
             if (isFirstOfType) {
                 dispatch(
                     acAddIframePluginStatus({

From 891cb9ec37952cf90839f489da108a0fed0b72ab Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 22 Nov 2024 16:08:50 +0100
Subject: [PATCH 40/63] feat: use delete callback from plugins

This is a promise that the plugin passes to dashboard app.
Regardless of the promise outcome, the dashboard item is always deleted,
but only after calling the promise.
This gives plugins a chance to do some cleanup before the iframe is
removed from the DOM.
---
 src/components/Item/AppItem/Item.js           | 10 +++--
 .../Item/ItemHeader/EditItemActions.js        | 43 +++++++++++--------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 2d61e9a5f..1ba90f4e8 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -43,13 +43,16 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
     const appDetails =
         item?.appKey && apps.find((app) => app.key === item.appKey)
 
-    const [{ itemTitle, appUrl }, setItemDetails] = useReducer(
+    const [{ itemTitle, appUrl, onRemove }, setItemDetails] = useReducer(
         (state, newState) => ({
             ...state,
             ...newState,
-            appUrl: `${appDetails?.launchUrl}${newState.appUrl}`, // hack, should the plugin send an absolute URL?!
+            appUrl: `${appDetails?.launchUrl}${newState.appUrl}`,
         }),
-        { itemTitle: appDetails?.name, appUrl: appDetails?.launchUrl }
+        {
+            itemTitle: appDetails?.name,
+            appUrl: appDetails?.launchUrl,
+        }
     )
 
     const pluginProps = useMemo(
@@ -145,6 +148,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
                     itemId={item.id}
                     dashboardMode={dashboardMode}
                     isShortened={item.shortened}
+                    onDelete={onRemove}
                 />
                 <FatalErrorBoundary
                     message={i18n.t(
diff --git a/src/components/Item/ItemHeader/EditItemActions.js b/src/components/Item/ItemHeader/EditItemActions.js
index 3a8e71a1b..ee8574202 100644
--- a/src/components/Item/ItemHeader/EditItemActions.js
+++ b/src/components/Item/ItemHeader/EditItemActions.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { connect } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import {
     acRemoveDashboardItem,
     tSetDashboardItems,
@@ -12,7 +12,25 @@ import {
 import DeleteItemButton from './DeleteItemButton.js'
 import classes from './styles/ItemHeader.module.css'
 
-const EditItemActions = ({ itemId, onDeleteItem }) => {
+const EditItemActions = ({ itemId, onDelete }) => {
+    const dispatch = useDispatch()
+    const columns = useSelector(sGetLayoutColumns)
+    const dashboardItems = useSelector(sGetEditDashboardItems)
+
+    const onDeleteItem = (itemId) => {
+        onDelete()
+            .catch((e) => {
+                console.warn('Error in the onRemove plugin callback', e)
+            })
+            .finally(() => {
+                if (!columns.length || dashboardItems.length === 1) {
+                    dispatch(acRemoveDashboardItem(itemId))
+                } else {
+                    dispatch(tSetDashboardItems(null, itemId))
+                }
+            })
+    }
+
     return (
         <div className={classes.itemActionsWrap}>
             <DeleteItemButton onClick={() => onDeleteItem(itemId)} />
@@ -20,22 +38,13 @@ const EditItemActions = ({ itemId, onDeleteItem }) => {
     )
 }
 
-EditItemActions.propTypes = {
-    itemId: PropTypes.string,
-    onDeleteItem: PropTypes.func,
+EditItemActions.defaultProps = {
+    onDelete: () => Promise.resolve(),
 }
 
-const mapDispatchToProps = {
-    onDeleteItem: (itemId) => (dispatch, getState) => {
-        const columns = sGetLayoutColumns(getState())
-        const dashboardItems = sGetEditDashboardItems(getState())
-
-        if (!columns.length || dashboardItems.length === 1) {
-            dispatch(acRemoveDashboardItem(itemId))
-        } else {
-            dispatch(tSetDashboardItems(null, itemId))
-        }
-    },
+EditItemActions.propTypes = {
+    itemId: PropTypes.string,
+    onDelete: PropTypes.func,
 }
 
-export default connect(null, mapDispatchToProps)(EditItemActions)
+export default EditItemActions

From ff83690d8f87f0e496b365e51018802344db6633 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 25 Nov 2024 10:28:25 +0100
Subject: [PATCH 41/63] test: fix failing test

---
 src/components/Item/AppItem/__tests__/Item.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Item/AppItem/__tests__/Item.spec.js b/src/components/Item/AppItem/__tests__/Item.spec.js
index e743857cb..f02961634 100644
--- a/src/components/Item/AppItem/__tests__/Item.spec.js
+++ b/src/components/Item/AppItem/__tests__/Item.spec.js
@@ -119,6 +119,7 @@ test('renders a valid App item with filter in view mode', () => {
 
 test('renders a valid App item with filter in edit mode', () => {
     const store = {
+        editDashboard: {},
         itemFilters: {
             ou: [{ path: '/rainbow' }],
             editDashboard: {

From 830c69f8d13861187e878e777bfe12802cfb7f05 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 2 Dec 2024 11:11:16 +0100
Subject: [PATCH 42/63] fix: fix bug which caused 3rd party plugins to not
 always load

---
 src/components/Item/AppItem/Item.js | 39 ++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 1ba90f4e8..d88459180 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -3,7 +3,13 @@ import { Plugin } from '@dhis2/app-runtime/experimental'
 import i18n from '@dhis2/d2-i18n'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { useMemo, useReducer, useRef, useState } from 'react'
+import React, {
+    useCallback,
+    useMemo,
+    useReducer,
+    useRef,
+    useState,
+} from 'react'
 import { useSelector } from 'react-redux'
 import {
     EDIT,
@@ -21,14 +27,16 @@ import FatalErrorBoundary from '../FatalErrorBoundary.js'
 import { isFullscreenSupported } from '../fullscreenUtil.js'
 import { getAvailableDimensions } from '../getAvailableDimensions.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
+import itemHeaderClasses from '../ItemHeader/styles/ItemHeader.module.css'
 import MissingPluginMessage from '../ItemMessage/MissingPluginMessage.js'
 import { getIframeSrc } from './getIframeSrc.js'
 import { ItemContextMenu } from './ItemContextMenu.js'
 import styles from './styles/AppItem.module.css'
 
 const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFullscreen }) => {
-    const contentRef = useRef()
-    const headerRef = useRef()
+    const contentRef = useRef(null)
+    const headerRef = useRef(null)
+    const [isMounted, setIsMounted] = useState(false)
     const dashboardId = useSelector(sGetSelectedId)
     let itemFilters = useSelector(sGetItemFiltersRoot)
 
@@ -74,6 +82,22 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
         appDetails?.settings?.dashboardWidget?.hideTitle &&
         dashboardMode !== EDIT
 
+    const onElementMount = (node) => {
+        if (node === null || (headerRef.current && contentRef.current)) {
+            return
+        }
+
+        if (node.classList.contains(itemHeaderClasses.itemHeaderWrap)) {
+            headerRef.current = node
+        } else if (node.classList.contains('dashboard-item-content')) {
+            contentRef.current = node
+        }
+
+        if (headerRef.current && contentRef.current) {
+            setIsMounted(true)
+        }
+    }
+
     const renderPlugin = (iframeSrc) => {
         // style must be computed at runtime.
         // header/content elements need to be rendered first, otherwise the dimensions returned are the previous ones
@@ -142,7 +166,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
         return (
             <>
                 <ItemHeader
-                    ref={headerRef}
+                    ref={onElementMount}
                     title={hideTitle ? '' : itemTitle}
                     actionButtons={actionButtons}
                     itemId={item.id}
@@ -156,8 +180,11 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
                     )}
                     onFatalError={onFatalError}
                 >
-                    <div className="dashboard-item-content" ref={contentRef}>
-                        {renderPlugin(iframeSrc)}
+                    <div
+                        className="dashboard-item-content"
+                        ref={onElementMount}
+                    >
+                        {isMounted && renderPlugin(iframeSrc)}
                     </div>
                 </FatalErrorBoundary>
             </>

From 62c8dbdc337842cbba6590cf8e3afcf6414eb4cd Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 2 Dec 2024 11:19:19 +0100
Subject: [PATCH 43/63] refactor: wrap ref callback in useCallback

---
 src/components/Item/AppItem/Item.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index d88459180..330e56484 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -82,7 +82,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
         appDetails?.settings?.dashboardWidget?.hideTitle &&
         dashboardMode !== EDIT
 
-    const onElementMount = (node) => {
+    const onElementMount = useCallback((node) => {
         if (node === null || (headerRef.current && contentRef.current)) {
             return
         }
@@ -96,7 +96,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
         if (headerRef.current && contentRef.current) {
             setIsMounted(true)
         }
-    }
+    }, [])
 
     const renderPlugin = (iframeSrc) => {
         // style must be computed at runtime.

From e334775fa4656bc1dd6be997ed4fa351cb8be218 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Mon, 2 Dec 2024 11:41:25 +0100
Subject: [PATCH 44/63] refactor: fix sonarcloud issues

---
 src/components/Item/AppItem/getIframeSrc.js | 38 +++++++++------------
 src/components/Item/memoizeOne.js           |  4 +--
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/Item/AppItem/getIframeSrc.js b/src/components/Item/AppItem/getIframeSrc.js
index 167724c96..403077a33 100644
--- a/src/components/Item/AppItem/getIframeSrc.js
+++ b/src/components/Item/AppItem/getIframeSrc.js
@@ -1,33 +1,27 @@
 import { FILTER_ORG_UNIT } from '../../../actions/itemFilters.js'
 import { getPluginOverrides } from '../../../modules/localStorage.js'
 
-export const getIframeSrc = (appDetails = {}, item, itemFilters) => {
-    switch (appDetails.appType) {
-        case 'APP': {
-            // check if there is an override for the plugin
-            const pluginOverrides = getPluginOverrides()
+export const getIframeSrc = (item, itemFilters, appDetails = {}) => {
+    if (appDetails.appType === 'APP') {
+        // check if there is an override for the plugin
+        const pluginOverrides = getPluginOverrides()
 
-            if (pluginOverrides && pluginOverrides[appDetails.key]) {
-                return pluginOverrides[appDetails.key]
-            }
-
-            return appDetails.pluginLaunchUrl
+        if (pluginOverrides?.[appDetails.key]) {
+            return pluginOverrides[appDetails.key]
         }
-        default: {
-            let iframeSrc = `${appDetails.launchUrl}?dashboardItemId=${item.id}`
 
-            if (
-                itemFilters[FILTER_ORG_UNIT] &&
-                itemFilters[FILTER_ORG_UNIT].length
-            ) {
-                const ouIds = itemFilters[FILTER_ORG_UNIT].map(({ id, path }) =>
-                    path ? path.split('/').slice(-1)[0] : id
-                )
+        return appDetails.pluginLaunchUrl
+    } else {
+        let iframeSrc = `${appDetails.launchUrl}?dashboardItemId=${item.id}`
 
-                iframeSrc += `&userOrgUnit=${ouIds.join(',')}`
-            }
+        if (itemFilters[FILTER_ORG_UNIT]?.length) {
+            const ouIds = itemFilters[FILTER_ORG_UNIT].map(({ id, path }) =>
+                path ? path.split('/').slice(-1)[0] : id
+            )
 
-            return iframeSrc
+            iframeSrc += `&userOrgUnit=${ouIds.join(',')}`
         }
+
+        return iframeSrc
     }
 }
diff --git a/src/components/Item/memoizeOne.js b/src/components/Item/memoizeOne.js
index 70a38e45e..839c10f3b 100644
--- a/src/components/Item/memoizeOne.js
+++ b/src/components/Item/memoizeOne.js
@@ -3,8 +3,8 @@
 // Inspiration: https://github.com/alexreardon/memoize-one
 
 const memoizeOne = (fn) => {
-    let lastArgs = undefined
-    let lastValue = undefined
+    let lastArgs
+    let lastValue
 
     return (...args) => {
         if (

From 43e5591a4984657817ebb409d54c2b8709bc2eab Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Tue, 3 Dec 2024 10:59:53 +0100
Subject: [PATCH 45/63] fix: fix arguments order

This is related to the previous fix of the default initialisation of
appDetails.
---
 src/components/Item/AppItem/Item.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 330e56484..d662e1e37 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -149,7 +149,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
     }
 
     if (appDetails) {
-        const iframeSrc = getIframeSrc(appDetails, item, itemFilters)
+        const iframeSrc = getIframeSrc(item, itemFilters, appDetails)
 
         const actionButtons =
             appDetails.pluginLaunchUrl && isViewMode(dashboardMode) ? (

From 9f7965137bd8fe3f1b1b70a01174a66d3607cd12 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Tue, 3 Dec 2024 11:04:34 +0100
Subject: [PATCH 46/63] test: fix tests after refactoring

---
 .../Item/AppItem/__tests__/getIframeSrc.spec.js      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js b/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js
index fd85d6037..a45da329c 100644
--- a/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js
+++ b/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js
@@ -8,7 +8,7 @@ describe('getIframeSrc', () => {
     it('no ou filter', () => {
         const ouFilter = []
 
-        const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter })
+        const src = getIframeSrc(dashboardItem, { ou: ouFilter }, appDetails)
         expect(src).toEqual(expectedSrc)
     })
 
@@ -26,7 +26,7 @@ describe('getIframeSrc', () => {
             },
         ]
 
-        const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter })
+        const src = getIframeSrc(dashboardItem, { ou: ouFilter }, appDetails)
         expect(src).toEqual(
             `${expectedSrc}&userOrgUnit=fdc6uOvgoji,lc3eMKXaEfw`
         )
@@ -45,7 +45,7 @@ describe('getIframeSrc', () => {
             },
         ]
 
-        const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter })
+        const src = getIframeSrc(dashboardItem, { ou: ouFilter }, appDetails)
         expect(src).toEqual(
             `${expectedSrc}&userOrgUnit=OU_GROUP-b0EsAxm8Nge,lc3eMKXaEfw`
         )
@@ -64,7 +64,7 @@ describe('getIframeSrc', () => {
             },
         ]
 
-        const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter })
+        const src = getIframeSrc(dashboardItem, { ou: ouFilter }, appDetails)
         expect(src).toEqual(
             `${expectedSrc}&userOrgUnit=LEVEL-m9lBJogzE95,fdc6uOvgoji`
         )
@@ -78,7 +78,7 @@ describe('getIframeSrc', () => {
             },
         ]
 
-        const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter })
+        const src = getIframeSrc(dashboardItem, { ou: ouFilter }, appDetails)
         expect(src).toEqual(`${expectedSrc}&userOrgUnit=USER_ORGUNIT`)
     })
 
@@ -98,7 +98,7 @@ describe('getIframeSrc', () => {
             },
         ]
 
-        const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter })
+        const src = getIframeSrc(dashboardItem, { ou: ouFilter }, appDetails)
         expect(src).toEqual(
             `${expectedSrc}&userOrgUnit=USER_ORGUNIT_CHILDREN,USER_ORGUNIT_GRANDCHILDREN,USER_ORGUNIT`
         )

From 5d423d24ad5e149bacf42551c823d96d97fe6a1a Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 6 Dec 2024 14:03:35 +0100
Subject: [PATCH 47/63] refactor: remove unnecessary filterVersion prop

---
 .../Item/VisualizationItem/Visualization/IframePlugin.js      | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
index ef1def53f..5b742a757 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -28,7 +28,6 @@ import classes from './styles/IframePlugin.module.css'
 
 const IframePlugin = ({
     activeType,
-    filterVersion,
     style,
     visualization,
     dashboardMode,
@@ -115,7 +114,7 @@ const IframePlugin = ({
 
     useEffect(() => {
         setError(null)
-    }, [filterVersion, visualization.type])
+    }, [visualization.type])
 
     if (error) {
         return error === 'missing-plugin' ? (
@@ -174,7 +173,6 @@ IframePlugin.propTypes = {
     activeType: PropTypes.string,
     dashboardId: PropTypes.string,
     dashboardMode: PropTypes.string,
-    filterVersion: PropTypes.string,
     isFirstOfType: PropTypes.bool,
     itemId: PropTypes.string,
     itemType: PropTypes.string,

From 1bd7d4c70489bfa14bf98c928c0206506fcd05d6 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Fri, 6 Dec 2024 14:04:17 +0100
Subject: [PATCH 48/63] fix: make filterVersion actually change

---
 .../Item/VisualizationItem/Visualization/Visualization.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
index 1597aef4a..50f33ea45 100644
--- a/src/components/Item/VisualizationItem/Visualization/Visualization.js
+++ b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -4,7 +4,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, Cover, IconInfo24, colors } from '@dhis2/ui'
 import uniqueId from 'lodash/uniqueId.js'
 import PropTypes from 'prop-types'
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import {
     isDVVersionCompatible,
@@ -78,14 +78,13 @@ const Visualization = ({
         )
     }, [visualization, activeType, originalType, itemFilters])
 
-    const filterVersion = useMemo(() => uniqueId(), [])
+    const filterVersion = useCallback(() => uniqueId(), [])
 
     const iFramePluginProps = useMemo(
         () => ({
             originalType,
             activeType,
             style,
-            filterVersion,
             dashboardMode,
             dashboardId,
             itemId: item.id,
@@ -96,7 +95,6 @@ const Visualization = ({
             originalType,
             activeType,
             style,
-            filterVersion,
             dashboardMode,
             dashboardId,
             item.id,
@@ -215,7 +213,7 @@ const Visualization = ({
                     item={item}
                     activeType={activeType}
                     visualization={visualizationConfig}
-                    filterVersion={filterVersion}
+                    filterVersion={filterVersion()}
                     style={style}
                     gridWidth={gridWidth}
                     {...rest}

From 7b2040b168407a160fe6a3e7eb56e5fdf8db3b51 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Wed, 11 Dec 2024 10:43:56 +0100
Subject: [PATCH 49/63] refactor: use same style for errors

Remove the Cover component as it does not cover anything...
---
 src/components/Item/FatalErrorBoundary.js     | 13 ++---
 .../Item/ItemMessage/FatalErrorMessage.js     | 20 +++++++
 .../Item/ItemMessage/MissingPluginMessage.js  | 52 +++++++++----------
 .../ItemMessage/VisualizationErrorMessage.js  | 23 ++------
 .../Item/styles/FatalErrorBoundary.module.css |  9 ----
 5 files changed, 54 insertions(+), 63 deletions(-)
 create mode 100644 src/components/Item/ItemMessage/FatalErrorMessage.js

diff --git a/src/components/Item/FatalErrorBoundary.js b/src/components/Item/FatalErrorBoundary.js
index 463a336ee..142482dfd 100644
--- a/src/components/Item/FatalErrorBoundary.js
+++ b/src/components/Item/FatalErrorBoundary.js
@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { IconWarning24, colors } from '@dhis2/ui'
 import { Warning } from './assets/icons.js'
 import classes from './styles/FatalErrorBoundary.module.css'
+import FatalErrorMessage from './ItemMessage/FatalErrorMessage.js'
 
 class FatalErrorBoundary extends React.Component {
     constructor(props) {
@@ -23,14 +25,9 @@ class FatalErrorBoundary extends React.Component {
     render() {
         if (this.state.errorFound) {
             return (
-                <p className={classes.container}>
-                    <span className={classes.icon}>
-                        <Warning />
-                    </span>
-                    <span className={classes.message}>
-                        {this.props.message}
-                    </span>
-                </p>
+                <div className={classes.container}>
+                    <FatalErrorMessage message={this.props.message} />
+                </div>
             )
         }
         return this.props.children
diff --git a/src/components/Item/ItemMessage/FatalErrorMessage.js b/src/components/Item/ItemMessage/FatalErrorMessage.js
new file mode 100644
index 000000000..daf75e10f
--- /dev/null
+++ b/src/components/Item/ItemMessage/FatalErrorMessage.js
@@ -0,0 +1,20 @@
+import i18n from '@dhis2/d2-i18n'
+import { IconWarning24, colors } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import classes from './styles/ItemMessage.module.css'
+
+const FatalErrorMessage = ({ message }) => {
+    return (
+        <div className={classes.messageContent}>
+            <IconWarning24 color={colors.grey500} />
+            <span>{message}</span>
+        </div>
+    )
+}
+
+FatalErrorMessage.propTypes = {
+    message: PropTypes.string,
+}
+
+export default FatalErrorMessage
diff --git a/src/components/Item/ItemMessage/MissingPluginMessage.js b/src/components/Item/ItemMessage/MissingPluginMessage.js
index a5c7fe543..4c1ab1355 100644
--- a/src/components/Item/ItemMessage/MissingPluginMessage.js
+++ b/src/components/Item/ItemMessage/MissingPluginMessage.js
@@ -1,6 +1,6 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Cover, IconWarning24, colors } from '@dhis2/ui'
+import { IconWarning24, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isPrintMode } from '../../../modules/dashboardModes.js'
@@ -10,33 +10,31 @@ const MissingPluginMessage = ({ dashboardMode, pluginName }) => {
     const { baseUrl } = useConfig()
 
     return (
-        <Cover>
-            <div className={classes.messageContent}>
-                <IconWarning24 color={colors.grey500} />
-                <span>
-                    {i18n.t(
-                        'The plugin needed to display this item is not available'
-                    )}
+        <div className={classes.messageContent}>
+            <IconWarning24 color={colors.grey500} />
+            <span>
+                {i18n.t(
+                    'The plugin needed to display this item is not available'
+                )}
+            </span>
+            {!isPrintMode(dashboardMode) ? (
+                <span className={classes.appLink}>
+                    <a
+                        onClick={(e) => e.stopPropagation()}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={`${baseUrl}/dhis-web-app-management/index.html#/app-hub`}
+                    >
+                        {i18n.t(
+                            'Install the {{pluginName}} plugin from the App Hub',
+                            {
+                                pluginName,
+                            }
+                        )}
+                    </a>
                 </span>
-                {!isPrintMode(dashboardMode) ? (
-                    <span className={classes.appLink}>
-                        <a
-                            onClick={(e) => e.stopPropagation()}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            href={`${baseUrl}/dhis-web-app-management/index.html#/app-hub`}
-                        >
-                            {i18n.t(
-                                'Install the {{pluginName}} plugin from the App Hub',
-                                {
-                                    pluginName,
-                                }
-                            )}
-                        </a>
-                    </span>
-                ) : null}
-            </div>
-        </Cover>
+            ) : null}
+        </div>
     )
 }
 
diff --git a/src/components/Item/ItemMessage/VisualizationErrorMessage.js b/src/components/Item/ItemMessage/VisualizationErrorMessage.js
index e38d39e83..e32529f75 100644
--- a/src/components/Item/ItemMessage/VisualizationErrorMessage.js
+++ b/src/components/Item/ItemMessage/VisualizationErrorMessage.js
@@ -1,27 +1,12 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Cover, colors } from '@dhis2/ui'
+import { IconWarning24, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isPrintMode } from '../../../modules/dashboardModes.js'
 import { getAppName, itemTypeMap } from '../../../modules/itemTypes.js'
 import classes from './styles/ItemMessage.module.css'
 
-const getErrorIcon = () => (
-    <svg
-        height="96"
-        viewBox="0 0 96 96"
-        width="96"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <g fill={colors.grey400} transform="translate(3 3)">
-            <path d="m40.5 73.5000001c0 2.4852813 2.0147186 4.5 4.5 4.5s4.5-2.0147187 4.5-4.5c0-2.4142734-1.9012365-4.3844892-4.2881643-4.4951021l-.2128322-.0048979c-2.4848234.0005384-4.4990035 2.0150507-4.4990035 4.5z" />
-            <path d="m48 60v-30c0-1.6568542-1.3431458-3-3-3s-3 1.3431458-3 3v30c0 1.6568542 1.3431458 3 3 3s3-1.3431458 3-3z" />
-            <path d="m45-2.99904788c3.8985931 0 7.4578604 2.21715778 9.1770339 5.71709169l37.8912554 77.19048409c1.3845546 2.8165473 1.2171646 6.1482722-.4427191 8.811863-1.6598833 2.6635901-4.5771005 4.2816904-7.7135702 4.2796124h-77.82201115c-3.13845856.002078-6.05567574-1.6160223-7.71555901-4.2796124-1.65988369-2.6635908-1.82727377-5.9953157-.44346379-8.8103471l37.89234295-77.19269833c1.7188306-3.49923557 5.2780979-5.71639335 9.176691-5.71639335zm0 6c-1.6106864 0-3.0811818.91600885-3.7909661 2.36100407l-37.89274459 77.19351591c-.47005356.9562122-.41322496 2.0873262.15030227 2.99161.56352731.9042839 1.5539177 1.4529206 2.62140842 1.4529206h77.8259889c1.0655018 0 2.0558922-.5486367 2.6194195-1.4529206.5635272-.9042838.6203558-2.0353978.1495577-2.9931259l-37.8916571-77.19130167c-.7101272-1.44569356-2.1806226-2.36170241-3.791309-2.36170241z" />
-        </g>
-    </svg>
-)
-
 const VisualizationErrorMessage = ({
     itemType,
     dashboardMode,
@@ -34,8 +19,8 @@ const VisualizationErrorMessage = ({
     )}`
 
     return (
-        <Cover>
-            {getErrorIcon()}
+        <div className={classes.messageContent}>
+            <IconWarning24 color={colors.grey500} />
             <span>
                 {i18n.t('There was an error loading data for this item')}
             </span>
@@ -53,7 +38,7 @@ const VisualizationErrorMessage = ({
                     </a>
                 </span>
             ) : null}
-        </Cover>
+        </div>
     )
 }
 
diff --git a/src/components/Item/styles/FatalErrorBoundary.module.css b/src/components/Item/styles/FatalErrorBoundary.module.css
index 270ca682a..88e9911de 100644
--- a/src/components/Item/styles/FatalErrorBoundary.module.css
+++ b/src/components/Item/styles/FatalErrorBoundary.module.css
@@ -6,12 +6,3 @@
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
 }
-
-.icon {
-    vertical-align: middle;
-    margin-inline-end: 3px;
-}
-
-.message {
-    font-size: 13px;
-}

From f8a0faad8954f652baf2e79be5150589ea39df9a Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Wed, 11 Dec 2024 10:50:23 +0100
Subject: [PATCH 50/63] test: fix test snapshot

---
 .../__tests__/__snapshots__/Item.spec.js.snap | 55 +++++++++----------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
index 17c3700e6..9dca9eb4d 100644
--- a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -145,39 +145,34 @@ exports[`renders a valid legacy widget item 1`] = `
 exports[`renders an invalid App item 1`] = `
 <div>
   <div
-    class="jsx-3042342945 "
-    data-test="dhis2-uicore-componentcover"
+    class="messageContent"
   >
-    <div
-      class="messageContent"
+    <svg
+      color="#a0adba"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        color="#a0adba"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
-          fill="currentColor"
-        />
-      </svg>
-      <span>
-        The plugin needed to display this item is not available
-      </span>
-      <span
-        class="appLink"
+      <path
+        d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+        fill="currentColor"
+      />
+    </svg>
+    <span>
+      The plugin needed to display this item is not available
+    </span>
+    <span
+      class="appLink"
+    >
+      <a
+        href="../dhis-web-app-management/index.html#/app-hub"
+        rel="noopener noreferrer"
+        target="_blank"
       >
-        <a
-          href="../dhis-web-app-management/index.html#/app-hub"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Install the unknownApp plugin from the App Hub
-        </a>
-      </span>
-    </div>
+        Install the unknownApp plugin from the App Hub
+      </a>
+    </span>
   </div>
 </div>
 `;

From e65eedea18f41a9e94c690c446c336846cf299a3 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 12 Dec 2024 10:44:15 +0100
Subject: [PATCH 51/63] chore: remove unused code

---
 src/components/Item/FatalErrorBoundary.js |  4 +---
 src/components/Item/assets/icons.js       | 15 ---------------
 2 files changed, 1 insertion(+), 18 deletions(-)
 delete mode 100644 src/components/Item/assets/icons.js

diff --git a/src/components/Item/FatalErrorBoundary.js b/src/components/Item/FatalErrorBoundary.js
index 142482dfd..d8f33f9af 100644
--- a/src/components/Item/FatalErrorBoundary.js
+++ b/src/components/Item/FatalErrorBoundary.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { IconWarning24, colors } from '@dhis2/ui'
-import { Warning } from './assets/icons.js'
-import classes from './styles/FatalErrorBoundary.module.css'
 import FatalErrorMessage from './ItemMessage/FatalErrorMessage.js'
+import classes from './styles/FatalErrorBoundary.module.css'
 
 class FatalErrorBoundary extends React.Component {
     constructor(props) {
diff --git a/src/components/Item/assets/icons.js b/src/components/Item/assets/icons.js
deleted file mode 100644
index 5ade2c42f..000000000
--- a/src/components/Item/assets/icons.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { colors } from '@dhis2/ui'
-import React from 'react'
-
-export const Warning = () => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        fill={colors.grey600}
-    >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
-    </svg>
-)

From 6e065c765105c8828a6f5a716bda5c43a80983a8 Mon Sep 17 00:00:00 2001
From: Edoardo Sabadelli <edoardo@dhis2.org>
Date: Thu, 12 Dec 2024 10:50:32 +0100
Subject: [PATCH 52/63] chore: remove unused import

---
 src/components/Item/ItemMessage/FatalErrorMessage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Item/ItemMessage/FatalErrorMessage.js b/src/components/Item/ItemMessage/FatalErrorMessage.js
index daf75e10f..c0b64855e 100644
--- a/src/components/Item/ItemMessage/FatalErrorMessage.js
+++ b/src/components/Item/ItemMessage/FatalErrorMessage.js
@@ -1,4 +1,3 @@
-import i18n from '@dhis2/d2-i18n'
 import { IconWarning24, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'

From fc58c75490a922749fbff5126ea88f5eb5ba8542 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 15 Jan 2025 15:38:47 +0100
Subject: [PATCH 53/63] chore: regenerate en.pot

---
 i18n/en.pot | 62 +++++++++++++++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 7c7646b3a..7affeadd4 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-12-19T11:30:27.893Z\n"
-"PO-Revision-Date: 2024-12-19T11:30:27.893Z\n"
+"POT-Creation-Date: 2025-01-15T14:37:33.573Z\n"
+"PO-Revision-Date: 2025-01-15T14:37:33.574Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -120,8 +120,14 @@ msgstr "Search for a dashboard"
 msgid "No dashboards found"
 msgstr "No dashboards found"
 
-msgid "{{appKey}} app not found"
-msgstr "{{appKey}} app not found"
+msgid "There was a problem loading this dashboard item"
+msgstr "There was a problem loading this dashboard item"
+
+msgid "Open in {{appName}}"
+msgstr "Open in {{appName}}"
+
+msgid "View fullscreen"
+msgstr "View fullscreen"
 
 msgid "Remove this item"
 msgstr "Remove this item"
@@ -186,9 +192,6 @@ msgstr "Only Period and Organisation unit filters can be applied to this item"
 msgid "Some filters not applied"
 msgstr "Some filters not applied"
 
-msgid "There was a problem loading this dashboard item"
-msgstr "There was a problem loading this dashboard item"
-
 msgid "Hide details and interpretations"
 msgstr "Hide details and interpretations"
 
@@ -201,9 +204,6 @@ msgstr "Open menu"
 msgid "Open in {{appName}} app"
 msgstr "Open in {{appName}} app"
 
-msgid "View fullscreen"
-msgstr "View fullscreen"
-
 msgid "This map can't be displayed as a chart"
 msgstr "This map can't be displayed as a chart"
 
@@ -228,39 +228,45 @@ msgstr "View as Map"
 msgid "There was a problem loading interpretations for this item"
 msgstr "There was a problem loading interpretations for this item"
 
-msgid "The plugin for rendering this item is not available"
-msgstr "The plugin for rendering this item is not available"
-
-msgid "Install the {{appName}} app from the App Hub"
-msgstr "Install the {{appName}} app from the App Hub"
-
 msgid "No data to display"
 msgstr "No data to display"
 
 msgid ""
-"Install Line Listing app version ${minLLVersion.join(\n"
-"                                '.'\n"
-"                            )} or higher in order to display this item."
+"Install Data Visualizer app ${minDVVersion.join(\n"
+"                            '.'\n"
+"                        )} or higher in order to display this item."
 msgstr ""
-"Install Line Listing app version ${minLLVersion.join(\n"
-"                                '.'\n"
-"                            )} or higher in order to display this item."
+"Install Data Visualizer app ${minDVVersion.join(\n"
+"                            '.'\n"
+"                        )} or higher in order to display this item."
 
 msgid "Show without filters"
 msgstr "Show without filters"
 
+msgid ""
+"Install Line Listing app ${minLLVersion.join(\n"
+"                            '.'\n"
+"                        )} or higher in order to display this item."
+msgstr ""
+"Install Line Listing app ${minLLVersion.join(\n"
+"                            '.'\n"
+"                        )} or higher in order to display this item."
+
 msgid "Maps with Earth Engine layers cannot be displayed when offline"
 msgstr "Maps with Earth Engine layers cannot be displayed when offline"
 
+msgid ""
+"Install Maps app ${minMapsVersion.join(\n"
+"                            '.'\n"
+"                        )} or higher in order to display this item."
+msgstr ""
+"Install Maps app ${minMapsVersion.join(\n"
+"                            '.'\n"
+"                        )} or higher in order to display this item."
+
 msgid "Unable to load the plugin for this item"
 msgstr "Unable to load the plugin for this item"
 
-msgid "There was an error loading data for this item"
-msgstr "There was an error loading data for this item"
-
-msgid "Open this item in {{appName}}"
-msgstr "Open this item in {{appName}}"
-
 msgid "Resources"
 msgstr "Resources"
 

From 6d184157ac2cde38399b3814fa045abe232b64b7 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 15 Jan 2025 15:48:23 +0100
Subject: [PATCH 54/63] chore: update dependencies

---
 package.json |   6 ++-
 yarn.lock    | 138 ++++++++++++++++++++++-----------------------------
 2 files changed, 64 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index 62f15c197..4693cbc8c 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,10 @@
     "license": "BSD-3-Clause",
     "dependencies": {
         "@dhis2/analytics": "^26.9.4",
-        "@dhis2/app-runtime": "^3.10.6",
+        "@dhis2/app-runtime": "^3.11.3",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.3",
         "@dhis2/ui": "^10.1.4",
-        "@krakenjs/post-robot": "^11.0.0",
         "classnames": "^2.3.2",
         "d2": "^31.10.0",
         "d2-utilizr": "^0.2.16",
@@ -71,5 +70,8 @@
             "^.+\\.(css|sass|scss)$": "identity-obj-proxy",
             "@dhis2/app-runtime/experimental": "<rootDir>/node_modules/@dhis2/app-runtime/build/cjs/experimental.js"
         }
+    },
+    "resolutions": {
+        "@dhis2/ui": "^10.1.4"
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 1e4996ba6..9ec3a3547 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2340,27 +2340,37 @@
   dependencies:
     prop-types "^15.7.2"
 
-"@dhis2/app-runtime@^3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-3.10.6.tgz#10add0b8a2e1de06777e6e78c681a3a8f15ba058"
-  integrity sha512-WfC+AHkw0V3V3/wyLPHoTyAf8i4btLl/R2nMBVs3NEXLwA9mekG/gXs7AEPnK2/p6FVoqXMDwJHEH2b8Iw4UFw==
+"@dhis2/app-runtime@^3.10.6", "@dhis2/app-runtime@^3.11.3":
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-3.12.0.tgz#7cdcc33e9dd74194583a4e22ecb8ce5e04c6a1b6"
+  integrity sha512-qAR6y2V+KERtylLWHXpld39QBbYCBubQ5G79Hhqta/wcNbKrkHCCfurGWL29CGcPD/MVDnkAE5K68v+iBAQigA==
   dependencies:
-    "@dhis2/app-service-alerts" "3.10.6"
-    "@dhis2/app-service-config" "3.10.6"
-    "@dhis2/app-service-data" "3.10.6"
-    "@dhis2/app-service-offline" "3.10.6"
-    "@dhis2/app-service-plugin" "3.10.6"
+    "@dhis2/app-service-alerts" "3.12.0"
+    "@dhis2/app-service-config" "3.12.0"
+    "@dhis2/app-service-data" "3.12.0"
+    "@dhis2/app-service-offline" "3.12.0"
+    "@dhis2/app-service-plugin" "3.12.0"
 
 "@dhis2/app-service-alerts@3.10.6":
   version "3.10.6"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.10.6.tgz#47e65d7ed57a4bd801a513b0f71d0ed2839ea363"
   integrity sha512-2r9IUBp5Z5zuSqjTEWpt+rx7tP5AqrtkPJ8ZVOKW5YBn1DB4bQ5ti9GOevHM4othr7Mrmt22UADPgfEkfc7XzQ==
 
+"@dhis2/app-service-alerts@3.12.0":
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.12.0.tgz#528feecc52da568961591dd3a1753d175ae6dd64"
+  integrity sha512-Ucyx8pOuwJ2MfVt7JFl0LWb9kkZV867joS+LVNKBLnEtZP+xpTofQvSJb5C/1UAVKFd/Fv+yrvpysygmQmgCCg==
+
 "@dhis2/app-service-config@3.10.6":
   version "3.10.6"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.10.6.tgz#bf952156329ab48d6da407522c6e06072fdf896a"
   integrity sha512-Z/rSBjCc8kP78QYhKNyGoCafGfwpqMDg8mV2x/H6CavgEicOa+qHX3bkKV6+fC9Sw2FnsWHRemxYRkgbW/BD3g==
 
+"@dhis2/app-service-config@3.12.0":
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.12.0.tgz#b90ee526f6b933c65b99ec3199e18060b9b37091"
+  integrity sha512-FzoiBkpJbebeFPEZcyzu4b5W7xh8zlKJIY/qNXM+ylYxv3yGh08GhBDxhexNanluoq9ch8Wxrfit2pHgnAom2A==
+
 "@dhis2/app-service-data@3.10.6":
   version "3.10.6"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.10.6.tgz#2f3f522b4a5a8c8d531f8901cca502323e566042"
@@ -2368,6 +2378,13 @@
   dependencies:
     react-query "^3.13.11"
 
+"@dhis2/app-service-data@3.12.0":
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.12.0.tgz#ab1fac7a2b4edf03fc15135e7b5ff55d2f8d7329"
+  integrity sha512-uSGyiQx1DAAQc0gIIpH6EIVpkpV+bMHN9p26qNpPDYIwbQDGy6/gLi7eiig18mLJ2k11//kNtg3fGcFk3M3uVg==
+  dependencies:
+    "@tanstack/react-query" "^4.36.1"
+
 "@dhis2/app-service-offline@3.10.6":
   version "3.10.6"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.10.6.tgz#e1d83520bb292fc51b24eab65d05e1c9fa1e2ad6"
@@ -2375,6 +2392,13 @@
   dependencies:
     lodash "^4.17.21"
 
+"@dhis2/app-service-offline@3.12.0":
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.12.0.tgz#0919ebf52aa2f325e631ffd5158f3546aa65d72f"
+  integrity sha512-GUEBymqTAGdyIPOw+ZRZ1YQdCzczagytZh2e+goG/phiUqslUUOjB1cVjBVLjf7XZ17KCTCJnfOHBVdcPz8q7Q==
+  dependencies:
+    lodash "^4.17.21"
+
 "@dhis2/app-service-plugin@3.10.6":
   version "3.10.6"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.10.6.tgz#1c6792b6d051c4b3301d76d083c3364424140a83"
@@ -2382,6 +2406,13 @@
   dependencies:
     post-robot "^10.0.46"
 
+"@dhis2/app-service-plugin@3.12.0":
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.12.0.tgz#5be4d5f14b4725f4fc40578b36c046e6ad67efbd"
+  integrity sha512-tzIpQFExFWi5rU2PrwauF0Cp3eP7DzRFem4lnke+qdU3T+x94pCxY8eaMrrr4trq0B6pO4/TikNDjXvw4O+RHQ==
+  dependencies:
+    post-robot "^10.0.46"
+
 "@dhis2/app-shell@11.7.1":
   version "11.7.1"
   resolved "https://registry.yarnpkg.com/@dhis2/app-shell/-/app-shell-11.7.1.tgz#7480fc729b43c65b9ec01d511f66e857f035c024"
@@ -3290,48 +3321,6 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@krakenjs/belter@^2.0.0":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@krakenjs/belter/-/belter-2.1.2.tgz#b51c5a2d0652279262eb2fa79a6e26b12a868867"
-  integrity sha512-9qg3xsfcMtljHyxYuin8/KDeqG80ecHCAbuqbHd8Cz0CszK4JvYS3tsmCzYnp6zfnR9uSRCuoj/dKWhZcJtqbg==
-  dependencies:
-    "@krakenjs/cross-domain-safe-weakmap" "^2.0.2"
-    "@krakenjs/cross-domain-utils" "^3.0.2"
-    "@krakenjs/zalgo-promise" "^2.0.0"
-
-"@krakenjs/cross-domain-safe-weakmap@^2.0.0", "@krakenjs/cross-domain-safe-weakmap@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@krakenjs/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-2.0.3.tgz#eb607534c14bd8bc2f3456d993618361fb38489f"
-  integrity sha512-WsGi6347ddZ9Y0HoBuTYCX2QTAHxYVaUs2T/0n8XJKXZOEJPnLWlW6eYAOgyyuUsYusWMAkYv00fvfxAlTU8/w==
-  dependencies:
-    "@krakenjs/cross-domain-utils" "^3.0.2"
-
-"@krakenjs/cross-domain-utils@^3.0.0", "@krakenjs/cross-domain-utils@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@krakenjs/cross-domain-utils/-/cross-domain-utils-3.0.2.tgz#cbbd3323e65e831debc351549c0b8972df0382d5"
-  integrity sha512-uNTQrAevzKtOu13UZzamCR6rKX2vpdb6g/gVXMJVSMvAlYhxBN6mOD6U56DmSdBJDKvLSYZbIYUkBh2inDyIXQ==
-
-"@krakenjs/post-robot@^11.0.0":
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/@krakenjs/post-robot/-/post-robot-11.0.0.tgz#98a285b70db2bac2c58f297cd8403a4cc2518a6a"
-  integrity sha512-t+IlQCrwzLa1IWxEvdfr9r/xgOmQoykVQ1rtEukw1LYVHPU3p3eDDC5djODE7ErWYDbkYncrHcbDEh6Gc/G9wQ==
-  dependencies:
-    "@krakenjs/belter" "^2.0.0"
-    "@krakenjs/cross-domain-safe-weakmap" "^2.0.0"
-    "@krakenjs/cross-domain-utils" "^3.0.0"
-    "@krakenjs/universal-serialize" "^2.0.0"
-    "@krakenjs/zalgo-promise" "^2.0.0"
-
-"@krakenjs/universal-serialize@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@krakenjs/universal-serialize/-/universal-serialize-2.0.0.tgz#c4a508ec53f6b412b1032e78c570b87f4f2c7763"
-  integrity sha512-Qd9W2iaP5lMTzXPETomBDAaqbgHYkEjJKcQ+3eNC8EwWGCHFk3/+uQ41B+QYfSZqRoz8AEjdNHOps7nDEypAyw==
-
-"@krakenjs/zalgo-promise@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@krakenjs/zalgo-promise/-/zalgo-promise-2.0.1.tgz#36b4225a566f0a0903a8d771a11a9efc131c6987"
-  integrity sha512-n30eknZjD7z8/joFqjI8FIDZ0yJPZHcQBce1B3tAumwNZL0C42Ta/w37MfthxHV61JHEFGfy7b727h/kzagJDA==
-
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -4028,6 +4017,19 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@tanstack/query-core@4.36.1":
+  version "4.36.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.36.1.tgz#79f8c1a539d47c83104210be2388813a7af2e524"
+  integrity sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==
+
+"@tanstack/react-query@^4.36.1":
+  version "4.36.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.36.1.tgz#acb589fab4085060e2e78013164868c9c785e5d2"
+  integrity sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==
+  dependencies:
+    "@tanstack/query-core" "4.36.1"
+    use-sync-external-store "^1.2.0"
+
 "@teppeis/multimaps@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@teppeis/multimaps/-/multimaps-3.0.0.tgz#bb9c3f8d569f589e548586fa0bbf423010ddfdc5"
@@ -16036,16 +16038,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -16144,14 +16137,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17178,6 +17164,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
+  integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -17862,15 +17853,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 0bbb8510aea70ffc7f3a8fca3180ac8081df8952 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 15 Jan 2025 16:13:13 +0100
Subject: [PATCH 55/63] chore: merge conflict adjustments

---
 .../e2e/dashboard_filter/dashboard_filter.js  |   1 -
 src/components/Item/AppItem/Item.js           |  21 ++-
 src/components/Item/Item.js                   |   8 +-
 src/components/Item/VisualizationItem/Item.js |   8 +-
 .../Visualization/Visualization.js            |  24 +--
 .../__tests__/Visualization.spec.js           |  12 +-
 .../__snapshots__/Visualization.spec.js.snap  | 175 ++++++++++++++++++
 .../__tests__/__snapshots__/Item.spec.js.snap |   4 +-
 src/components/Item/getAvailableDimensions.js |   1 -
 src/components/styles/ItemGrid.css            |  41 ----
 .../__snapshots__/EditDashboard.spec.js.snap  |  52 ------
 11 files changed, 216 insertions(+), 131 deletions(-)

diff --git a/cypress/e2e/dashboard_filter/dashboard_filter.js b/cypress/e2e/dashboard_filter/dashboard_filter.js
index d3f141b47..2521e9593 100644
--- a/cypress/e2e/dashboard_filter/dashboard_filter.js
+++ b/cypress/e2e/dashboard_filter/dashboard_filter.js
@@ -26,7 +26,6 @@ Then('the Period filter is applied to the dashboard', () => {
     cy.get(filterBadgeSel).contains(`Period: ${PERIOD}`).should('be.visible')
 
     // check the CHART
-<<<<<<< HEAD
     // cy.get(`${gridItemSel}.VISUALIZATION`).getIframeBody().as('iframeBody')
     // cy.get('@iframeBody')
     //     .find(`${chartSubtitleSel} > title`, EXTENDED_TIMEOUT)
diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index d662e1e37..35b436d4f 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -10,7 +10,8 @@ import React, {
     useRef,
     useState,
 } from 'react'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
+import { acSetSlideshow } from '../../../actions/slideshow.js'
 import {
     EDIT,
     isEditMode,
@@ -33,12 +34,20 @@ import { getIframeSrc } from './getIframeSrc.js'
 import { ItemContextMenu } from './ItemContextMenu.js'
 import styles from './styles/AppItem.module.css'
 
-const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFullscreen }) => {
+const AppItem = ({
+    dashboardMode,
+    windowDimensions,
+    item,
+    apps,
+    sortIndex,
+    isFullscreen,
+}) => {
     const contentRef = useRef(null)
     const headerRef = useRef(null)
     const [isMounted, setIsMounted] = useState(false)
     const dashboardId = useSelector(sGetSelectedId)
     let itemFilters = useSelector(sGetItemFiltersRoot)
+    const dispatch = useDispatch()
 
     if (isEditMode(dashboardMode)) {
         itemFilters = DEFAULT_STATE_ITEM_FILTERS
@@ -132,9 +141,9 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
                 title={appDetails.name}
                 src={iframeSrc}
                 className={cx(styles.content, {
-                            [styles.hiddenTitle]: hideTitle,
-                            [styles.fullscreen]: isFullscreen,
-                        })}
+                    [styles.hiddenTitle]: hideTitle,
+                    [styles.fullscreen]: isFullscreen,
+                })}
                 style={{
                     border: 'none',
                     width: style.width,
@@ -157,7 +166,7 @@ const AppItem = ({ dashboardMode, windowDimensions, item, apps, sortIndex, isFul
                     item={item}
                     appName={appDetails.name}
                     appUrl={appUrl}
-                    enterFullscreen={() => setSlideshow(sortIndex)}
+                    enterFullscreen={() => dispatch(acSetSlideshow(sortIndex))}
                     fullscreenSupported={isFullscreenSupported(item.id)}
                     loadItemFailed={loadItemFailed}
                 />
diff --git a/src/components/Item/Item.js b/src/components/Item/Item.js
index 7c1ae5e88..363fc5113 100644
--- a/src/components/Item/Item.js
+++ b/src/components/Item/Item.js
@@ -70,8 +70,12 @@ export const Item = (props) => {
     return (
         <WindowDimensionsCtx.Consumer>
             {(windowDimensions) => (
-                
-                <GridItem apps={apps} {...props} engine={engine} windowDimensions={windowDimensions} />
+                <GridItem
+                    apps={apps}
+                    {...props}
+                    engine={engine}
+                    windowDimensions={windowDimensions}
+                />
             )}
         </WindowDimensionsCtx.Consumer>
     )
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index 2993e62dc..29ded9249 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -14,7 +14,11 @@ import { acSetSlideshow } from '../../../actions/slideshow.js'
 import { acAddVisualization } from '../../../actions/visualizations.js'
 import { apiPostDataStatistics } from '../../../api/dataStatistics.js'
 import { apiFetchVisualization } from '../../../api/fetchVisualization.js'
-import { isEditMode, isViewMode, isPrintMode } from '../../../modules/dashboardModes.js'
+import {
+    isEditMode,
+    isViewMode,
+    isPrintMode,
+} from '../../../modules/dashboardModes.js'
 import {
     getVisualizationId,
     getVisualizationName,
@@ -125,7 +129,7 @@ class Item extends Component {
     }
 
     render() {
-        const { 
+        const {
             item,
             dashboardMode,
             itemFilters,
diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
index 50f33ea45..7c919aaeb 100644
--- a/src/components/Item/VisualizationItem/Visualization/Visualization.js
+++ b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -48,24 +48,12 @@ const Visualization = ({
 }) => {
     const dashboardId = useSelector(sGetSelectedId)
     const { isDisconnected: offline } = useDhis2ConnectionStatus()
-    const { dataVisualizerAppVersion, lineListingAppVersion, mapsAppVersion, apps } =
-        useCachedDataQuery()
-
-    // NOTE:
-    // The following is all memoized because the IframePlugin (and potentially others)
-    // are wrapped in React.memo() to avoid unnecessary re-renders
-    // The main problem here was `item` which changes height when the interpretations panel is toggled
-    // causing all the chain of components to re-render.
-    // The only dependency using `item` is `item.id` which doesn't change so the memoized plugin props
-    // should also always be the same regardless of the `item` details.
-
-    const style = useMemo(
-        () => ({
-            height: availableHeight,
-            width: availableWidth || undefined,
-        }),
-        [availableHeight, availableWidth]
-    )
+    const {
+        dataVisualizerAppVersion,
+        lineListingAppVersion,
+        mapsAppVersion,
+        apps,
+    } = useCachedDataQuery()
 
     const visualizationConfig = useMemo(() => {
         if (originalType === EVENT_VISUALIZATION) {
diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js b/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
index 9bf07295a..883972c5d 100644
--- a/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
+++ b/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
@@ -49,7 +49,7 @@ test('renders a VisualizationPlugin when activeType is MAP', () => {
                 }}
                 activeType="MAP"
                 itemFilters={{}}
-                availableHeight={500}
+                availableHeight="500px"
             />
         </Provider>
     )
@@ -67,7 +67,7 @@ test('renders a VisualizationPlugin for CHART', () => {
                 }}
                 activeType="CHART"
                 itemFilters={{}}
-                availableHeight={500}
+                availableHeight="500px"
             />
         </Provider>
     )
@@ -85,7 +85,7 @@ test('renders a VisualizationPlugin for REPORT_TABLE', () => {
                 }}
                 activeType="REPORT_TABLE"
                 itemFilters={{}}
-                availableHeight={500}
+                availableHeight="500px"
             />
         </Provider>
     )
@@ -103,7 +103,7 @@ test('renders a DefaultPlugin when activeType is EVENT_CHART', () => {
                 }}
                 activeType="EVENT_CHART"
                 itemFilters={{}}
-                availableHeight={500}
+                availableHeight="500px"
             />
         </Provider>
     )
@@ -121,7 +121,7 @@ test('renders a DefaultPlugin when activeType is EVENT_REPORT', () => {
                 }}
                 activeType="EVENT_REPORT"
                 itemFilters={{}}
-                availableHeight={500}
+                availableHeight="500px"
             />
         </Provider>
     )
@@ -146,7 +146,7 @@ test('renders NoVisMessage when no visualization', () => {
                 }}
                 activeType="CHART"
                 itemFilters={{}}
-                availableHeight={500}
+                availableHeight="500px"
             />
         </Provider>
     )
diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap b/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
index e69de29bb..19c868dcc 100644
--- a/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
+++ b/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders NoVisMessage when no visualization 1`] = `
+<div>
+  <div>
+    <div
+      class="jsx-3042342945 "
+      data-test="dhis2-uicore-componentcover"
+    >
+      <div
+        class="messageContent"
+      >
+        <svg
+          color="#a0adba"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+            fill="currentColor"
+          />
+        </svg>
+        No data to display
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders a DefaultPlugin when activeType is EVENT_CHART 1`] = `
+<div>
+  <div>
+    <div
+      class="jsx-3042342945 "
+      data-test="dhis2-uicore-componentcover"
+    >
+      <div
+        class="messageContent"
+      >
+        <svg
+          color="#a0adba"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+            fill="currentColor"
+          />
+        </svg>
+        No data to display
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders a DefaultPlugin when activeType is EVENT_REPORT 1`] = `
+<div>
+  <div>
+    <div
+      class="jsx-3042342945 "
+      data-test="dhis2-uicore-componentcover"
+    >
+      <div
+        class="messageContent"
+      >
+        <svg
+          color="#a0adba"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+            fill="currentColor"
+          />
+        </svg>
+        No data to display
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders a VisualizationPlugin for CHART 1`] = `
+<div>
+  <div>
+    <div
+      class="jsx-3042342945 "
+      data-test="dhis2-uicore-componentcover"
+    >
+      <div
+        class="messageContent"
+      >
+        <svg
+          color="#a0adba"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+            fill="currentColor"
+          />
+        </svg>
+        No data to display
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders a VisualizationPlugin for REPORT_TABLE 1`] = `
+<div>
+  <div>
+    <div
+      class="jsx-3042342945 "
+      data-test="dhis2-uicore-componentcover"
+    >
+      <div
+        class="messageContent"
+      >
+        <svg
+          color="#a0adba"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+            fill="currentColor"
+          />
+        </svg>
+        No data to display
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders a VisualizationPlugin when activeType is MAP 1`] = `
+<div>
+  <div>
+    <div
+      class="jsx-3042342945 "
+      data-test="dhis2-uicore-componentcover"
+    >
+      <div
+        class="messageContent"
+      >
+        <svg
+          color="#a0adba"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.847 2.794l.056.102 8.416 17.674a1 1 0 01-.786 1.423l-.117.007H3.584a1 1 0 01-.947-1.322l.044-.108 8.416-17.674a1 1 0 011.75-.102zM12 5.65L5.167 19.999h13.665zM12 17a1 1 0 110 2 1 1 0 010-2zm1-7v6h-2v-6z"
+            fill="currentColor"
+          />
+        </svg>
+        No data to display
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
index f073653d9..0855956cd 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -23,7 +23,7 @@ exports[`Visualization/Item renders edit mode 1`] = `
     </div>
   </div>
   <div
-    class="dashboard-item-content"
+    class="CHART content edit"
   >
     <div
       activetype="CHART"
@@ -54,7 +54,7 @@ exports[`Visualization/Item renders view mode 1`] = `
     </div>
   </div>
   <div
-    class="dashboard-item-content"
+    class="CHART content"
   >
     <div
       activetype="CHART"
diff --git a/src/components/Item/getAvailableDimensions.js b/src/components/Item/getAvailableDimensions.js
index 7fa8d3aa7..5fdd2364d 100644
--- a/src/components/Item/getAvailableDimensions.js
+++ b/src/components/Item/getAvailableDimensions.js
@@ -1,6 +1,5 @@
 import { isEditMode, isPrintMode } from '../../modules/dashboardModes.js'
 import { getItemHeightPx } from '../../modules/gridUtil.js'
-import { isElementFullscreen } from './fullscreenUtil.js'
 import { getGridItemElement } from './getGridItemElement.js'
 import memoizeOne from './memoizeOne.js'
 
diff --git a/src/components/styles/ItemGrid.css b/src/components/styles/ItemGrid.css
index 4aeaca68c..63e9f5ed3 100644
--- a/src/components/styles/ItemGrid.css
+++ b/src/components/styles/ItemGrid.css
@@ -61,44 +61,3 @@
 .react-resizable-handle {
     background: none;
 }
-<<<<<<< HEAD
-=======
-
-/* dashboard item - content */
-
-.dashboard-item-content {
-    margin: 0 var(--item-content-padding) var(--item-content-padding);
-    overflow: auto;
-}
-
-.dashboard-item-content-hidden-title {
-    margin: 5px 4px 4px;
-    overflow: auto;
-}
-
-.TEXT .dashboard-item-content {
-    padding-bottom: var(--item-content-padding);
-}
-
-.EVENT_REPORT .dashboard-item-content {
-    position: relative;
-}
-
-.APP .dashboard-item-content,
-.CHART .dashboard-item-content,
-.VISUALIZATION .dashboard-item-content,
-.MAP .dashboard-item-content,
-.EVENT_CHART .dashboard-item-content,
-.EVENT_VISUALIZATION .dashboard-item-content {
-    position: relative;
-    overflow: hidden;
-}
-
-.react-grid-item.edit .dashboard-item-content,
-.react-grid-item.RESOURCES .dashboard-item-content,
-.react-grid-item.TEXT .dashboard-item-content,
-.react-grid-item.MESSAGES .dashboard-item-content,
-.react-grid-item.APP .dashboard-item-content-hidden-title {
-    flex: 1;
-}
->>>>>>> d3a3bad8 (refactor: pass width/height to AppItem to fix resize/refresh issue (DHIS2-17947))
diff --git a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
index a22900add..6f132a652 100644
--- a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
+++ b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
@@ -45,63 +45,11 @@ exports[`EditDashboard renders dashboard 1`] = `
 exports[`EditDashboard renders message when not enough access 1`] = `
 <div>
   <header />
-  <div
-    class="container dashboard-scroll-container"
-    data-test="outer-scroll-container"
-  >
-    <div>
-      ActionsBar
-    </div>
-    <div
-      class="container"
-    >
-      <svg
-        fill="none"
-        height="48"
-        viewBox="0 0 48 48"
-        width="48"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.4387 47.8477L6.82684 45.8858C7.20466 45.9605 7.59673 46 8 46H10V48H8C7.46572 48 6.94367 47.9476 6.4387 47.8477ZM38 48V46H40C40.4033 46 40.7953 45.9605 41.1732 45.8858L41.5613 47.8477C41.0563 47.9476 40.5343 48 40 48H38ZM44.4449 46.6525L43.3323 44.9906C43.9875 44.552 44.552 43.9875 44.9906 43.3323L46.6525 44.4449C46.0685 45.3173 45.3173 46.0685 44.4449 46.6525ZM48 10H46V8C46 7.59673 45.9605 7.20466 45.8858 6.82684L47.8477 6.4387C47.9476 6.94367 48 7.46572 48 8V10ZM46.6525 3.55507L44.9906 4.66771C44.552 4.01254 43.9875 3.44804 43.3323 3.00941L44.4449 1.34748C45.3173 1.93154 46.0685 2.68266 46.6525 3.55507ZM10 0H8C7.46572 0 6.94367 0.0523755 6.4387 0.152272L6.82684 2.11425C7.20466 2.0395 7.59673 2 8 2H10V0ZM3.55508 1.34748L4.66771 3.00941C4.01254 3.44804 3.44804 4.01254 3.00941 4.66771L1.34748 3.55507C1.93154 2.68266 2.68266 1.93154 3.55508 1.34748ZM0 38H2V40C2 40.4033 2.0395 40.7953 2.11425 41.1732L0.152272 41.5613C0.0523755 41.0563 0 40.5343 0 40V38ZM3.55507 46.6525L4.66771 44.9906C4.01254 44.552 3.44804 43.9875 3.00941 43.3323L1.34748 44.4449C1.93154 45.3173 2.68266 46.0685 3.55507 46.6525ZM0 34H2V30H0V34ZM0 26H2V22H0V26ZM0 18H2V14H0V18ZM0 10H2V8C2 7.59673 2.0395 7.20466 2.11425 6.82684L0.152272 6.4387C0.0523756 6.94367 0 7.46572 0 8V10ZM14 0V2H18V0H14ZM22 0V2H26V0H22ZM30 0V2H34V0H30ZM38 0V2H40C40.4033 2 40.7953 2.0395 41.1732 2.11425L41.5613 0.152272C41.0563 0.0523755 40.5343 0 40 0H38ZM48 14H46V18H48V14ZM48 22H46V26H48V22ZM48 30H46V34H48V30ZM48 38H46V40C46 40.4033 45.9605 40.7953 45.8858 41.1732L47.8477 41.5613C47.9476 41.0563 48 40.5343 48 40V38ZM34 48V46H30V48H34ZM26 48V46H22V48H26ZM18 48V46H14V48H18Z"
-          fill="#a0adba"
-        />
-      </svg>
-      <p>
-        No access
-      </p>
-    </div>
-  </div>
-  <div
-    class="notice"
-  >
-    <div
-      class="Notice"
-    />
-  </div>
 </div>
 `;
 
 exports[`EditDashboard renders print preview 1`] = `
 <div>
   <header />
-  <div
-    class="container dashboard-scroll-container"
-    data-test="outer-scroll-container"
-  >
-    <div>
-      ActionsBar
-    </div>
-    <div>
-      LayoutPrintPreview
-    </div>
-  </div>
-  <div
-    class="notice"
-  >
-    <div
-      class="Notice"
-    />
-  </div>
 </div>
 `;

From 3e6c10e6c94a220f8d167a1f515d063c24a7fee1 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Thu, 16 Jan 2025 11:42:31 +0100
Subject: [PATCH 56/63] chore: dedupe yarn.lock

---
 i18n/en.pot |  10 ++---
 yarn.lock   | 121 +++++-----------------------------------------------
 2 files changed, 15 insertions(+), 116 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 7affeadd4..b8b8739fb 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-01-15T14:37:33.573Z\n"
-"PO-Revision-Date: 2025-01-15T14:37:33.574Z\n"
+"POT-Creation-Date: 2025-01-16T10:42:35.281Z\n"
+"PO-Revision-Date: 2025-01-16T10:42:35.283Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -123,6 +123,9 @@ msgstr "No dashboards found"
 msgid "There was a problem loading this dashboard item"
 msgstr "There was a problem loading this dashboard item"
 
+msgid "Open menu"
+msgstr "Open menu"
+
 msgid "Open in {{appName}}"
 msgstr "Open in {{appName}}"
 
@@ -198,9 +201,6 @@ msgstr "Hide details and interpretations"
 msgid "Show details and interpretations"
 msgstr "Show details and interpretations"
 
-msgid "Open menu"
-msgstr "Open menu"
-
 msgid "Open in {{appName}} app"
 msgstr "Open in {{appName}} app"
 
diff --git a/yarn.lock b/yarn.lock
index 9ec3a3547..f3eeafba5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1168,7 +1168,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
   integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
@@ -2351,33 +2351,16 @@
     "@dhis2/app-service-offline" "3.12.0"
     "@dhis2/app-service-plugin" "3.12.0"
 
-"@dhis2/app-service-alerts@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.10.6.tgz#47e65d7ed57a4bd801a513b0f71d0ed2839ea363"
-  integrity sha512-2r9IUBp5Z5zuSqjTEWpt+rx7tP5AqrtkPJ8ZVOKW5YBn1DB4bQ5ti9GOevHM4othr7Mrmt22UADPgfEkfc7XzQ==
-
 "@dhis2/app-service-alerts@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.12.0.tgz#528feecc52da568961591dd3a1753d175ae6dd64"
   integrity sha512-Ucyx8pOuwJ2MfVt7JFl0LWb9kkZV867joS+LVNKBLnEtZP+xpTofQvSJb5C/1UAVKFd/Fv+yrvpysygmQmgCCg==
 
-"@dhis2/app-service-config@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.10.6.tgz#bf952156329ab48d6da407522c6e06072fdf896a"
-  integrity sha512-Z/rSBjCc8kP78QYhKNyGoCafGfwpqMDg8mV2x/H6CavgEicOa+qHX3bkKV6+fC9Sw2FnsWHRemxYRkgbW/BD3g==
-
 "@dhis2/app-service-config@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.12.0.tgz#b90ee526f6b933c65b99ec3199e18060b9b37091"
   integrity sha512-FzoiBkpJbebeFPEZcyzu4b5W7xh8zlKJIY/qNXM+ylYxv3yGh08GhBDxhexNanluoq9ch8Wxrfit2pHgnAom2A==
 
-"@dhis2/app-service-data@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.10.6.tgz#2f3f522b4a5a8c8d531f8901cca502323e566042"
-  integrity sha512-9RH3Dn0shcVdF7itgKy9cK3yMEcyP5xXjNzYPGzWf+3q9aGlzjh22pHE4p+C9OV+SeVO2q+5GcNOk7rdZvS+Cg==
-  dependencies:
-    react-query "^3.13.11"
-
 "@dhis2/app-service-data@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.12.0.tgz#ab1fac7a2b4edf03fc15135e7b5ff55d2f8d7329"
@@ -2385,13 +2368,6 @@
   dependencies:
     "@tanstack/react-query" "^4.36.1"
 
-"@dhis2/app-service-offline@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.10.6.tgz#e1d83520bb292fc51b24eab65d05e1c9fa1e2ad6"
-  integrity sha512-179QXdUOFgPPIOhY5HD+C6GzzJDvhR8GW7jXT4LtjCeO/4EbA3r9sycyrYpLZL66GtpGHkeV5g4slxM1t+63cw==
-  dependencies:
-    lodash "^4.17.21"
-
 "@dhis2/app-service-offline@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.12.0.tgz#0919ebf52aa2f325e631ffd5158f3546aa65d72f"
@@ -2399,13 +2375,6 @@
   dependencies:
     lodash "^4.17.21"
 
-"@dhis2/app-service-plugin@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.10.6.tgz#1c6792b6d051c4b3301d76d083c3364424140a83"
-  integrity sha512-um4ONieW+xpWfagt+QNF4ZtzzFpm8KeA9tlBomamOfhGIpi9mkCWtaY0Mw2IUWO+d0Uh4cfmeQV6w6jOX6xJzw==
-  dependencies:
-    post-robot "^10.0.46"
-
 "@dhis2/app-service-plugin@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.12.0.tgz#5be4d5f14b4725f4fc40578b36c046e6ad67efbd"
@@ -5502,11 +5471,6 @@ bfj@^7.0.2:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
-big-integer@^1.6.16:
-  version "1.6.51"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
-  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -5643,20 +5607,6 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-broadcast-channel@^3.4.1:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
-  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    detect-node "^2.1.0"
-    js-sha3 "0.8.0"
-    microseconds "0.2.0"
-    nano-time "1.0.0"
-    oblivious-set "1.0.0"
-    rimraf "3.0.2"
-    unload "2.2.0"
-
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -7227,7 +7177,7 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-detect-node@^2.0.4, detect-node@^2.1.0:
+detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
@@ -11027,11 +10977,6 @@ joi@^17.7.0:
     "@sideway/formula" "^3.0.1"
     "@sideway/pinpoint" "^2.0.0"
 
-js-sha3@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
-  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -11953,14 +11898,6 @@ marked@^4.1.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
-match-sorter@^6.0.2:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
-  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    remove-accents "0.4.2"
-
 mathjs@^9.4.2:
   version "9.5.2"
   resolved "https://registry.yarnpkg.com/mathjs/-/mathjs-9.5.2.tgz#e0f3279320dc6f49e45d99c4fcdd8b52231f0462"
@@ -12087,11 +12024,6 @@ micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micr
     braces "^3.0.3"
     picomatch "^2.3.1"
 
-microseconds@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
-  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
-
 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -12390,13 +12322,6 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nano-time@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
-  integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==
-  dependencies:
-    big-integer "^1.6.16"
-
 nanoid@^3.3.7:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
@@ -12932,11 +12857,6 @@ object.values@^1.1.0, object.values@^1.1.5, object.values@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-oblivious-set@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
-  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
-
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -14508,15 +14428,6 @@ react-popper@^2.2.5:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-query@^3.13.11:
-  version "3.39.2"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"
-  integrity sha512-F6hYDKyNgDQfQOuR1Rsp3VRzJnWHx6aRnnIZHMNGGgbL3SBgpZTDg8MQwmxOgpCAoqZJA+JSNCydF1xGJqKOCA==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    broadcast-channel "^3.4.1"
-    match-sorter "^6.0.2"
-
 react-redux@^5.0.7:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.2.tgz#b19cf9e21d694422727bf798e934a916c4080f57"
@@ -14948,11 +14859,6 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-remove-accents@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
-  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
-
 remove-bom-buffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz#c2bf1e377520d324f623892e33c10cac2c252b53"
@@ -15186,13 +15092,6 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
-rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -15200,6 +15099,13 @@ rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -17063,14 +16969,6 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unload@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
-  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    detect-node "^2.0.4"
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -17827,6 +17725,7 @@ workerpool@^6.5.1:
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From 69ce1fc8c115519376bd5a7523b6726ccb3573e5 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Thu, 16 Jan 2025 11:46:44 +0100
Subject: [PATCH 57/63] fix: update AppItem to support slideshow

---
 src/components/Item/AppItem/Item.js           |  5 +++-
 .../Item/AppItem/ItemContextMenu.js           | 28 ++++++++-----------
 .../ItemContextMenu/ItemContextMenu.js        |  2 --
 src/components/Item/fullscreenUtil.js         | 25 -----------------
 4 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 35b436d4f..1d0087218 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -46,6 +46,7 @@ const AppItem = ({
     const headerRef = useRef(null)
     const [isMounted, setIsMounted] = useState(false)
     const dashboardId = useSelector(sGetSelectedId)
+    const isSlideshowView = useSelector((state) => state.slideshow !== null)
     let itemFilters = useSelector(sGetItemFiltersRoot)
     const dispatch = useDispatch()
 
@@ -161,7 +162,9 @@ const AppItem = ({
         const iframeSrc = getIframeSrc(item, itemFilters, appDetails)
 
         const actionButtons =
-            appDetails.pluginLaunchUrl && isViewMode(dashboardMode) ? (
+            appDetails.pluginLaunchUrl &&
+            isViewMode(dashboardMode) &&
+            !isSlideshowView ? (
                 <ItemContextMenu
                     item={item}
                     appName={appDetails.name}
diff --git a/src/components/Item/AppItem/ItemContextMenu.js b/src/components/Item/AppItem/ItemContextMenu.js
index 2bc8bdbd1..92dda19bb 100644
--- a/src/components/Item/AppItem/ItemContextMenu.js
+++ b/src/components/Item/AppItem/ItemContextMenu.js
@@ -5,7 +5,6 @@ import {
     Menu,
     Popover,
     IconFullscreen16,
-    IconFullscreenExit16,
     IconLaunch16,
     IconMore24,
 } from '@dhis2/ui'
@@ -15,15 +14,14 @@ import { isSmallScreen } from '../../../modules/smallScreen.js'
 import MenuItem from '../../MenuItemWithTooltip.js'
 import { useSystemSettings } from '../../SystemSettingsProvider.js'
 import { useWindowDimensions } from '../../WindowDimensionsProvider.js'
-import { isElementFullscreen } from '../fullscreenUtil.js'
 
 export const ItemContextMenu = ({
     appName,
     appUrl,
-    item,
     fullscreenSupported,
-    onToggleFullscreen,
+    enterFullscreen,
     loadItemFailed,
+    tabIndex,
 }) => {
     const buttonRef = useRef()
     const [menuIsOpen, setMenuIsOpen] = useState(false)
@@ -45,26 +43,22 @@ export const ItemContextMenu = ({
     }
     const closeMenu = () => setMenuIsOpen(false)
 
-    const toggleFullscreen = () => {
-        onToggleFullscreen()
+    const onEnterFullscreen = () => {
+        enterFullscreen()
         closeMenu()
     }
 
-    return isElementFullscreen(item.id) ? (
-        <Button small secondary onClick={onToggleFullscreen}>
-            <span data-testid="exit-fullscreen-button">
-                <IconFullscreenExit16 color={colors.grey600} />
-            </span>
-        </Button>
-    ) : (
+    return (
         <>
             <div ref={buttonRef}>
                 <Button
                     small
                     secondary
+                    title={i18n.t('Open menu')}
                     onClick={openMenu}
-                    dataTest="dashboarditem-menu-button"
+                    dataTest="appitem-menu-button"
                     icon={<IconMore24 color={colors.grey700} />}
+                    tabIndex={tabIndex}
                 />
             </div>
             {menuIsOpen && (
@@ -91,7 +85,7 @@ export const ItemContextMenu = ({
                                 disabledWhenOffline={false}
                                 icon={<IconFullscreen16 />}
                                 label={i18n.t('View fullscreen')}
-                                onClick={toggleFullscreen}
+                                onClick={onEnterFullscreen}
                             />
                         )}
                     </Menu>
@@ -104,8 +98,8 @@ export const ItemContextMenu = ({
 ItemContextMenu.propTypes = {
     appName: PropTypes.string,
     appUrl: PropTypes.string,
+    enterFullscreen: PropTypes.func,
     fullscreenSupported: PropTypes.bool,
-    item: PropTypes.object,
     loadItemFailed: PropTypes.bool,
-    onToggleFullscreen: PropTypes.func,
+    tabIndex: PropTypes.string,
 }
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js
index 15a8ad507..acb7484df 100644
--- a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js
+++ b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js
@@ -108,7 +108,6 @@ const ItemContextMenu = (props) => {
                     onClick={openMenu}
                     dataTest="dashboarditem-menu-button"
                     icon={<IconMore16 color={colors.grey700} />}
-                    tabIndex={props.tabIndex}
                 />
             </div>
             {menuIsOpen && (
@@ -175,7 +174,6 @@ ItemContextMenu.propTypes = {
     fullscreenSupported: PropTypes.bool,
     item: PropTypes.object,
     loadItemFailed: PropTypes.bool,
-    tabIndex: PropTypes.string,
     visualization: PropTypes.object,
     onSelectActiveType: PropTypes.func,
     onToggleFooter: PropTypes.func,
diff --git a/src/components/Item/fullscreenUtil.js b/src/components/Item/fullscreenUtil.js
index ece3489e4..4c2de7978 100644
--- a/src/components/Item/fullscreenUtil.js
+++ b/src/components/Item/fullscreenUtil.js
@@ -1,31 +1,6 @@
-import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
 import { getGridItemElement } from './getGridItemElement.js'
 
-export const isElementFullscreen = (itemId) => {
-    const fullscreenElement =
-        document.fullscreenElement || document.webkitFullscreenElement
-
-    return fullscreenElement?.classList.contains(
-        getGridItemDomElementClassName(itemId)
-    )
-}
-
 export const isFullscreenSupported = (itemId) => {
     const el = getGridItemElement(itemId)
     return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
 }
-
-export const onToggleFullscreen = (itemId) => {
-    if (!isElementFullscreen(itemId)) {
-        const el = getGridItemElement(itemId)
-        if (el?.requestFullscreen) {
-            el.requestFullscreen()
-        } else if (el?.webkitRequestFullscreen) {
-            el.webkitRequestFullscreen()
-        }
-    } else {
-        document.exitFullscreen
-            ? document.exitFullscreen()
-            : document.webkitExitFullscreen()
-    }
-}

From 0c7ec2954e2a6cd657c98e70747d78629ef5533a Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Thu, 16 Jan 2025 12:55:24 +0100
Subject: [PATCH 58/63] chore: fix jest test setup

---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4693cbc8c..4d11e0901 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,10 @@
         "moduleNameMapper": {
             "^.+\\.(css|sass|scss)$": "identity-obj-proxy",
             "@dhis2/app-runtime/experimental": "<rootDir>/node_modules/@dhis2/app-runtime/build/cjs/experimental.js"
-        }
+        },
+        "setupFilesAfterEnv": [
+            "<rootDir>/config/testSetup.js"
+        ]
     },
     "resolutions": {
         "@dhis2/ui": "^10.1.4"

From 9bfff22a6e6048c96fdf7ff3768fa3b3e7ada0a3 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Thu, 16 Jan 2025 12:56:29 +0100
Subject: [PATCH 59/63] chore: update snapshot to fix jest test

---
 .../__snapshots__/EditDashboard.spec.js.snap  | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
index 6f132a652..a22900add 100644
--- a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
+++ b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
@@ -45,11 +45,63 @@ exports[`EditDashboard renders dashboard 1`] = `
 exports[`EditDashboard renders message when not enough access 1`] = `
 <div>
   <header />
+  <div
+    class="container dashboard-scroll-container"
+    data-test="outer-scroll-container"
+  >
+    <div>
+      ActionsBar
+    </div>
+    <div
+      class="container"
+    >
+      <svg
+        fill="none"
+        height="48"
+        viewBox="0 0 48 48"
+        width="48"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.4387 47.8477L6.82684 45.8858C7.20466 45.9605 7.59673 46 8 46H10V48H8C7.46572 48 6.94367 47.9476 6.4387 47.8477ZM38 48V46H40C40.4033 46 40.7953 45.9605 41.1732 45.8858L41.5613 47.8477C41.0563 47.9476 40.5343 48 40 48H38ZM44.4449 46.6525L43.3323 44.9906C43.9875 44.552 44.552 43.9875 44.9906 43.3323L46.6525 44.4449C46.0685 45.3173 45.3173 46.0685 44.4449 46.6525ZM48 10H46V8C46 7.59673 45.9605 7.20466 45.8858 6.82684L47.8477 6.4387C47.9476 6.94367 48 7.46572 48 8V10ZM46.6525 3.55507L44.9906 4.66771C44.552 4.01254 43.9875 3.44804 43.3323 3.00941L44.4449 1.34748C45.3173 1.93154 46.0685 2.68266 46.6525 3.55507ZM10 0H8C7.46572 0 6.94367 0.0523755 6.4387 0.152272L6.82684 2.11425C7.20466 2.0395 7.59673 2 8 2H10V0ZM3.55508 1.34748L4.66771 3.00941C4.01254 3.44804 3.44804 4.01254 3.00941 4.66771L1.34748 3.55507C1.93154 2.68266 2.68266 1.93154 3.55508 1.34748ZM0 38H2V40C2 40.4033 2.0395 40.7953 2.11425 41.1732L0.152272 41.5613C0.0523755 41.0563 0 40.5343 0 40V38ZM3.55507 46.6525L4.66771 44.9906C4.01254 44.552 3.44804 43.9875 3.00941 43.3323L1.34748 44.4449C1.93154 45.3173 2.68266 46.0685 3.55507 46.6525ZM0 34H2V30H0V34ZM0 26H2V22H0V26ZM0 18H2V14H0V18ZM0 10H2V8C2 7.59673 2.0395 7.20466 2.11425 6.82684L0.152272 6.4387C0.0523756 6.94367 0 7.46572 0 8V10ZM14 0V2H18V0H14ZM22 0V2H26V0H22ZM30 0V2H34V0H30ZM38 0V2H40C40.4033 2 40.7953 2.0395 41.1732 2.11425L41.5613 0.152272C41.0563 0.0523755 40.5343 0 40 0H38ZM48 14H46V18H48V14ZM48 22H46V26H48V22ZM48 30H46V34H48V30ZM48 38H46V40C46 40.4033 45.9605 40.7953 45.8858 41.1732L47.8477 41.5613C47.9476 41.0563 48 40.5343 48 40V38ZM34 48V46H30V48H34ZM26 48V46H22V48H26ZM18 48V46H14V48H18Z"
+          fill="#a0adba"
+        />
+      </svg>
+      <p>
+        No access
+      </p>
+    </div>
+  </div>
+  <div
+    class="notice"
+  >
+    <div
+      class="Notice"
+    />
+  </div>
 </div>
 `;
 
 exports[`EditDashboard renders print preview 1`] = `
 <div>
   <header />
+  <div
+    class="container dashboard-scroll-container"
+    data-test="outer-scroll-container"
+  >
+    <div>
+      ActionsBar
+    </div>
+    <div>
+      LayoutPrintPreview
+    </div>
+  </div>
+  <div
+    class="notice"
+  >
+    <div
+      class="Notice"
+    />
+  </div>
 </div>
 `;

From 881354af5d0abe81dd8886fa8f7ccdfb35a76ab1 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Thu, 16 Jan 2025 12:57:07 +0100
Subject: [PATCH 60/63] chore: updated yarn lock after deduplicating deps

---
 yarn.lock | 151 +++++++++++++-----------------------------------------
 1 file changed, 37 insertions(+), 114 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9ec3a3547..04463935d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1168,7 +1168,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
   integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
@@ -2351,33 +2351,16 @@
     "@dhis2/app-service-offline" "3.12.0"
     "@dhis2/app-service-plugin" "3.12.0"
 
-"@dhis2/app-service-alerts@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.10.6.tgz#47e65d7ed57a4bd801a513b0f71d0ed2839ea363"
-  integrity sha512-2r9IUBp5Z5zuSqjTEWpt+rx7tP5AqrtkPJ8ZVOKW5YBn1DB4bQ5ti9GOevHM4othr7Mrmt22UADPgfEkfc7XzQ==
-
 "@dhis2/app-service-alerts@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.12.0.tgz#528feecc52da568961591dd3a1753d175ae6dd64"
   integrity sha512-Ucyx8pOuwJ2MfVt7JFl0LWb9kkZV867joS+LVNKBLnEtZP+xpTofQvSJb5C/1UAVKFd/Fv+yrvpysygmQmgCCg==
 
-"@dhis2/app-service-config@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.10.6.tgz#bf952156329ab48d6da407522c6e06072fdf896a"
-  integrity sha512-Z/rSBjCc8kP78QYhKNyGoCafGfwpqMDg8mV2x/H6CavgEicOa+qHX3bkKV6+fC9Sw2FnsWHRemxYRkgbW/BD3g==
-
 "@dhis2/app-service-config@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.12.0.tgz#b90ee526f6b933c65b99ec3199e18060b9b37091"
   integrity sha512-FzoiBkpJbebeFPEZcyzu4b5W7xh8zlKJIY/qNXM+ylYxv3yGh08GhBDxhexNanluoq9ch8Wxrfit2pHgnAom2A==
 
-"@dhis2/app-service-data@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.10.6.tgz#2f3f522b4a5a8c8d531f8901cca502323e566042"
-  integrity sha512-9RH3Dn0shcVdF7itgKy9cK3yMEcyP5xXjNzYPGzWf+3q9aGlzjh22pHE4p+C9OV+SeVO2q+5GcNOk7rdZvS+Cg==
-  dependencies:
-    react-query "^3.13.11"
-
 "@dhis2/app-service-data@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.12.0.tgz#ab1fac7a2b4edf03fc15135e7b5ff55d2f8d7329"
@@ -2385,13 +2368,6 @@
   dependencies:
     "@tanstack/react-query" "^4.36.1"
 
-"@dhis2/app-service-offline@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.10.6.tgz#e1d83520bb292fc51b24eab65d05e1c9fa1e2ad6"
-  integrity sha512-179QXdUOFgPPIOhY5HD+C6GzzJDvhR8GW7jXT4LtjCeO/4EbA3r9sycyrYpLZL66GtpGHkeV5g4slxM1t+63cw==
-  dependencies:
-    lodash "^4.17.21"
-
 "@dhis2/app-service-offline@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.12.0.tgz#0919ebf52aa2f325e631ffd5158f3546aa65d72f"
@@ -2399,13 +2375,6 @@
   dependencies:
     lodash "^4.17.21"
 
-"@dhis2/app-service-plugin@3.10.6":
-  version "3.10.6"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.10.6.tgz#1c6792b6d051c4b3301d76d083c3364424140a83"
-  integrity sha512-um4ONieW+xpWfagt+QNF4ZtzzFpm8KeA9tlBomamOfhGIpi9mkCWtaY0Mw2IUWO+d0Uh4cfmeQV6w6jOX6xJzw==
-  dependencies:
-    post-robot "^10.0.46"
-
 "@dhis2/app-service-plugin@3.12.0":
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.12.0.tgz#5be4d5f14b4725f4fc40578b36c046e6ad67efbd"
@@ -5502,11 +5471,6 @@ bfj@^7.0.2:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
-big-integer@^1.6.16:
-  version "1.6.51"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
-  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -5643,20 +5607,6 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-broadcast-channel@^3.4.1:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
-  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    detect-node "^2.1.0"
-    js-sha3 "0.8.0"
-    microseconds "0.2.0"
-    nano-time "1.0.0"
-    oblivious-set "1.0.0"
-    rimraf "3.0.2"
-    unload "2.2.0"
-
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -7227,7 +7177,7 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-detect-node@^2.0.4, detect-node@^2.1.0:
+detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
@@ -11027,11 +10977,6 @@ joi@^17.7.0:
     "@sideway/formula" "^3.0.1"
     "@sideway/pinpoint" "^2.0.0"
 
-js-sha3@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
-  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -11953,14 +11898,6 @@ marked@^4.1.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
-match-sorter@^6.0.2:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
-  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    remove-accents "0.4.2"
-
 mathjs@^9.4.2:
   version "9.5.2"
   resolved "https://registry.yarnpkg.com/mathjs/-/mathjs-9.5.2.tgz#e0f3279320dc6f49e45d99c4fcdd8b52231f0462"
@@ -12087,11 +12024,6 @@ micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micr
     braces "^3.0.3"
     picomatch "^2.3.1"
 
-microseconds@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
-  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
-
 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -12390,13 +12322,6 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nano-time@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
-  integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==
-  dependencies:
-    big-integer "^1.6.16"
-
 nanoid@^3.3.7:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
@@ -12932,11 +12857,6 @@ object.values@^1.1.0, object.values@^1.1.5, object.values@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-oblivious-set@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
-  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
-
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -14508,15 +14428,6 @@ react-popper@^2.2.5:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-query@^3.13.11:
-  version "3.39.2"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"
-  integrity sha512-F6hYDKyNgDQfQOuR1Rsp3VRzJnWHx6aRnnIZHMNGGgbL3SBgpZTDg8MQwmxOgpCAoqZJA+JSNCydF1xGJqKOCA==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    broadcast-channel "^3.4.1"
-    match-sorter "^6.0.2"
-
 react-redux@^5.0.7:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.2.tgz#b19cf9e21d694422727bf798e934a916c4080f57"
@@ -14948,11 +14859,6 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-remove-accents@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
-  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
-
 remove-bom-buffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz#c2bf1e377520d324f623892e33c10cac2c252b53"
@@ -15186,13 +15092,6 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
-rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -15200,6 +15099,13 @@ rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.0, rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -16038,7 +15944,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -16137,7 +16052,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17063,14 +16985,6 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unload@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
-  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    detect-node "^2.0.4"
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -17826,7 +17740,7 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -17853,6 +17767,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 9d06b4d4b2ce6b2d97ae00dfb687e67e0ad26039 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Fri, 17 Jan 2025 09:58:45 +0100
Subject: [PATCH 61/63] fix: test fix

---
 src/components/Item/AppItem/Item.js                | 2 +-
 src/components/Item/AppItem/__tests__/Item.spec.js | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 1d0087218..05e82e8b1 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -87,7 +87,7 @@ const AppItem = ({
         [dashboardId, dashboardMode, item.id, isCached, itemFilters]
     )
 
-    // See DHIS2-9605
+    // https://docs.dhis2.org/en/develop/apps/application-manifest.html#apps_creating_apps
     const hideTitle =
         appDetails?.settings?.dashboardWidget?.hideTitle &&
         dashboardMode !== EDIT
diff --git a/src/components/Item/AppItem/__tests__/Item.spec.js b/src/components/Item/AppItem/__tests__/Item.spec.js
index f02961634..edc7531ba 100644
--- a/src/components/Item/AppItem/__tests__/Item.spec.js
+++ b/src/components/Item/AppItem/__tests__/Item.spec.js
@@ -84,6 +84,7 @@ test('renders a valid App item in view mode', () => {
         itemFilters: {},
         editDashboard: {},
         selected: { id: 'some-dashboard' },
+        slideshow: null,
     }
     const { container } = render(
         <Provider store={mockStore(store)}>
@@ -103,6 +104,7 @@ test('renders a valid App item with filter in view mode', () => {
             ou: [{ path: '/rainbow' }],
         },
         selected: { id: 'some-dashboard' },
+        slideshow: null,
     }
 
     const { container } = render(
@@ -127,6 +129,7 @@ test('renders a valid App item with filter in edit mode', () => {
             },
         },
         selected: { id: 'some-dashboard' },
+        slideshow: null,
     }
 
     const { container } = render(
@@ -145,6 +148,7 @@ test('renders a valid App item without title in view mode if specified in app se
     const store = {
         itemFilters: {},
         selected: { id: 'some-dashboard' },
+        slideshow: null,
     }
 
     const { container } = render(
@@ -166,6 +170,7 @@ test('renders a valid App item with title in edit mode irrespective of app setti
             id: itemWithoutTitle.id,
         },
         selected: { id: 'some-dashboard' },
+        slideshow: null,
     }
 
     const { container } = render(
@@ -185,6 +190,7 @@ test('renders a valid legacy widget item', () => {
         itemFilters: {},
         editDashboard: {},
         selected: { id: 'some-dashboard' },
+        slideshow: null,
     }
     const { container } = render(
         <Provider store={mockStore(store)}>
@@ -204,6 +210,7 @@ test('renders an invalid App item', () => {
             ou: [{ path: '/rainbow' }],
         },
         selected: { id: 'some-dashboard' },
+        slideshow: null,
     }
 
     const invalidItem = {

From 6c615f025afc47bffb5c65f84631f619afa69e50 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Fri, 17 Jan 2025 10:42:15 +0100
Subject: [PATCH 62/63] fix: no dashboard-item-content class anymore

---
 src/components/Item/AppItem/Item.js           | 11 +++--
 .../Item/AppItem/__tests__/Item.spec.js       | 23 ++++++++++
 .../__tests__/__snapshots__/Item.spec.js.snap | 44 +++++++++++++++----
 3 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 05e82e8b1..f92bec205 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -99,7 +99,7 @@ const AppItem = ({
 
         if (node.classList.contains(itemHeaderClasses.itemHeaderWrap)) {
             headerRef.current = node
-        } else if (node.classList.contains('dashboard-item-content')) {
+        } else if (node.classList.contains('content')) {
             contentRef.current = node
         }
 
@@ -141,10 +141,6 @@ const AppItem = ({
             <iframe
                 title={appDetails.name}
                 src={iframeSrc}
-                className={cx(styles.content, {
-                    [styles.hiddenTitle]: hideTitle,
-                    [styles.fullscreen]: isFullscreen,
-                })}
                 style={{
                     border: 'none',
                     width: style.width,
@@ -193,7 +189,10 @@ const AppItem = ({
                     onFatalError={onFatalError}
                 >
                     <div
-                        className="dashboard-item-content"
+                        className={cx(styles.content, {
+                            [styles.hiddenTitle]: hideTitle,
+                            [styles.fullscreen]: isFullscreen,
+                        })}
                         ref={onElementMount}
                     >
                         {isMounted && renderPlugin(iframeSrc)}
diff --git a/src/components/Item/AppItem/__tests__/Item.spec.js b/src/components/Item/AppItem/__tests__/Item.spec.js
index edc7531ba..b3b9361bd 100644
--- a/src/components/Item/AppItem/__tests__/Item.spec.js
+++ b/src/components/Item/AppItem/__tests__/Item.spec.js
@@ -56,6 +56,10 @@ jest.mock(
         }
 )
 
+jest.mock('../ItemContextMenu.js', () => ({
+    ItemContextMenu: () => <div className="ItemContextMenu" />,
+}))
+
 const mockStore = configureMockStore()
 
 const item = {
@@ -204,6 +208,25 @@ test('renders a valid legacy widget item', () => {
     expect(container).toMatchSnapshot()
 })
 
+test('renders a valid legacy widget item when in slideshow', () => {
+    const store = {
+        itemFilters: {},
+        editDashboard: {},
+        selected: { id: 'some-dashboard' },
+        slideshow: 1,
+    }
+    const { container } = render(
+        <Provider store={mockStore(store)}>
+            <SystemSettingsProvider>
+                <WindowDimensionsProvider>
+                    <Item item={itemLegacyWidget} dashboardMode={'view'} />
+                </WindowDimensionsProvider>
+            </SystemSettingsProvider>
+        </Provider>
+    )
+    expect(container).toMatchSnapshot()
+})
+
 test('renders an invalid App item', () => {
     const store = {
         itemFilters: {
diff --git a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
index 9dca9eb4d..7c7fdce44 100644
--- a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -15,11 +15,15 @@ exports[`renders a valid App item in view mode 1`] = `
     >
       <div
         class="itemActionsWrap"
-      />
+      >
+        <div
+          class="ItemContextMenu"
+        />
+      </div>
     </div>
   </div>
   <div
-    class="dashboard-item-content"
+    class="content"
   />
 </div>
 `;
@@ -47,7 +51,7 @@ exports[`renders a valid App item with filter in edit mode 1`] = `
     </div>
   </div>
   <div
-    class="dashboard-item-content"
+    class="content"
   />
 </div>
 `;
@@ -67,11 +71,15 @@ exports[`renders a valid App item with filter in view mode 1`] = `
     >
       <div
         class="itemActionsWrap"
-      />
+      >
+        <div
+          class="ItemContextMenu"
+        />
+      </div>
     </div>
   </div>
   <div
-    class="dashboard-item-content"
+    class="content"
   />
 </div>
 `;
@@ -99,7 +107,7 @@ exports[`renders a valid App item with title in edit mode irrespective of app se
     </div>
   </div>
   <div
-    class="dashboard-item-content"
+    class="content"
   />
 </div>
 `;
@@ -117,7 +125,7 @@ exports[`renders a valid App item without title in view mode if specified in app
     />
   </div>
   <div
-    class="dashboard-item-content"
+    class="content hiddenTitle"
   />
 </div>
 `;
@@ -137,7 +145,27 @@ exports[`renders a valid legacy widget item 1`] = `
     />
   </div>
   <div
-    class="dashboard-item-content"
+    class="content"
+  />
+</div>
+`;
+
+exports[`renders a valid legacy widget item when in slideshow 1`] = `
+<div>
+  <div
+    class="itemHeaderWrap"
+  >
+    <p
+      class="itemTitle"
+    >
+      Scorecard
+    </p>
+    <div
+      class="itemHeaderRightWrap"
+    />
+  </div>
+  <div
+    class="content"
   />
 </div>
 `;

From a2ebfe06fef23893b75a9e183685fb59d45e90c8 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Fri, 17 Jan 2025 11:23:49 +0100
Subject: [PATCH 63/63] fix: test fixes

---
 src/components/Item/VisualizationItem/Item.js |  2 +-
 .../Visualization/Visualization.js            |  2 --
 .../__tests__/Visualization.spec.js           | 12 +++++-----
 .../__snapshots__/Visualization.spec.js.snap  | 24 ++++++++++++++-----
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index 29ded9249..c20132680 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -16,8 +16,8 @@ import { apiPostDataStatistics } from '../../../api/dataStatistics.js'
 import { apiFetchVisualization } from '../../../api/fetchVisualization.js'
 import {
     isEditMode,
-    isViewMode,
     isPrintMode,
+    isViewMode,
 } from '../../../modules/dashboardModes.js'
 import {
     getVisualizationId,
diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
index 7c919aaeb..7912599e3 100644
--- a/src/components/Item/VisualizationItem/Visualization/Visualization.js
+++ b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -213,8 +213,6 @@ const Visualization = ({
 
 Visualization.propTypes = {
     activeType: PropTypes.string,
-    availableHeight: PropTypes.string,
-    availableWidth: PropTypes.string,
     dashboardMode: PropTypes.string,
     gridWidth: PropTypes.number,
     item: PropTypes.object,
diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js b/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
index 883972c5d..a9fb6cd2a 100644
--- a/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
+++ b/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
@@ -49,7 +49,7 @@ test('renders a VisualizationPlugin when activeType is MAP', () => {
                 }}
                 activeType="MAP"
                 itemFilters={{}}
-                availableHeight="500px"
+                style={{ height: '500px' }}
             />
         </Provider>
     )
@@ -67,7 +67,7 @@ test('renders a VisualizationPlugin for CHART', () => {
                 }}
                 activeType="CHART"
                 itemFilters={{}}
-                availableHeight="500px"
+                style={{ height: '500px' }}
             />
         </Provider>
     )
@@ -85,7 +85,7 @@ test('renders a VisualizationPlugin for REPORT_TABLE', () => {
                 }}
                 activeType="REPORT_TABLE"
                 itemFilters={{}}
-                availableHeight="500px"
+                style={{ height: '500px' }}
             />
         </Provider>
     )
@@ -103,7 +103,7 @@ test('renders a DefaultPlugin when activeType is EVENT_CHART', () => {
                 }}
                 activeType="EVENT_CHART"
                 itemFilters={{}}
-                availableHeight="500px"
+                style={{ height: '500px' }}
             />
         </Provider>
     )
@@ -121,7 +121,7 @@ test('renders a DefaultPlugin when activeType is EVENT_REPORT', () => {
                 }}
                 activeType="EVENT_REPORT"
                 itemFilters={{}}
-                availableHeight="500px"
+                style={{ height: '500px' }}
             />
         </Provider>
     )
@@ -146,7 +146,7 @@ test('renders NoVisMessage when no visualization', () => {
                 }}
                 activeType="CHART"
                 itemFilters={{}}
-                availableHeight="500px"
+                style={{ height: '500px' }}
             />
         </Provider>
     )
diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap b/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
index 19c868dcc..d8e7bbf3d 100644
--- a/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
+++ b/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
@@ -2,7 +2,9 @@
 
 exports[`renders NoVisMessage when no visualization 1`] = `
 <div>
-  <div>
+  <div
+    style="height: 500px;"
+  >
     <div
       class="jsx-3042342945 "
       data-test="dhis2-uicore-componentcover"
@@ -31,7 +33,9 @@ exports[`renders NoVisMessage when no visualization 1`] = `
 
 exports[`renders a DefaultPlugin when activeType is EVENT_CHART 1`] = `
 <div>
-  <div>
+  <div
+    style="height: 500px;"
+  >
     <div
       class="jsx-3042342945 "
       data-test="dhis2-uicore-componentcover"
@@ -60,7 +64,9 @@ exports[`renders a DefaultPlugin when activeType is EVENT_CHART 1`] = `
 
 exports[`renders a DefaultPlugin when activeType is EVENT_REPORT 1`] = `
 <div>
-  <div>
+  <div
+    style="height: 500px;"
+  >
     <div
       class="jsx-3042342945 "
       data-test="dhis2-uicore-componentcover"
@@ -89,7 +95,9 @@ exports[`renders a DefaultPlugin when activeType is EVENT_REPORT 1`] = `
 
 exports[`renders a VisualizationPlugin for CHART 1`] = `
 <div>
-  <div>
+  <div
+    style="height: 500px;"
+  >
     <div
       class="jsx-3042342945 "
       data-test="dhis2-uicore-componentcover"
@@ -118,7 +126,9 @@ exports[`renders a VisualizationPlugin for CHART 1`] = `
 
 exports[`renders a VisualizationPlugin for REPORT_TABLE 1`] = `
 <div>
-  <div>
+  <div
+    style="height: 500px;"
+  >
     <div
       class="jsx-3042342945 "
       data-test="dhis2-uicore-componentcover"
@@ -147,7 +157,9 @@ exports[`renders a VisualizationPlugin for REPORT_TABLE 1`] = `
 
 exports[`renders a VisualizationPlugin when activeType is MAP 1`] = `
 <div>
-  <div>
+  <div
+    style="height: 500px;"
+  >
     <div
       class="jsx-3042342945 "
       data-test="dhis2-uicore-componentcover"