From 2efe49dbf17cefc8aa9c3614e4477191d0b74696 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 22 Jan 2025 16:35:06 +0100
Subject: [PATCH] fix: correctly mount app item

---
 src/components/Item/AppItem/Item.js           | 24 ++++++++++---------
 .../Item/AppItem/styles/AppItem.module.css    |  7 ------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index a5a98eaa7..a41531c72 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -27,7 +27,6 @@ import { sGetSelectedId } from '../../../reducers/selected.js'
 import FatalErrorBoundary from '../FatalErrorBoundary.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'
@@ -87,24 +86,27 @@ const AppItem = ({
     )
 
     // https://docs.dhis2.org/en/develop/apps/application-manifest.html#apps_creating_apps
+    // https://dhis2.atlassian.net/browse/DHIS2-9605
     const hideTitle =
         appDetails?.settings?.dashboardWidget?.hideTitle &&
         dashboardMode !== EDIT
 
-    const onElementMount = useCallback((node) => {
+    const onHeaderMount = useCallback((node) => {
         if (node === null || (headerRef.current && contentRef.current)) {
             return
         }
 
-        if (node.classList.contains(itemHeaderClasses.itemHeaderWrap)) {
-            headerRef.current = node
-        } else if (node.classList.contains('content')) {
-            contentRef.current = node
-        }
+        headerRef.current = node
+        contentRef.current && setIsMounted(true)
+    }, [])
 
-        if (headerRef.current && contentRef.current) {
-            setIsMounted(true)
+    const onContentMount = useCallback((node) => {
+        if (node === null || (headerRef.current && contentRef.current)) {
+            return
         }
+
+        contentRef.current = node
+        headerRef.current && setIsMounted(true)
     }, [])
 
     const renderPlugin = (iframeSrc) => {
@@ -172,7 +174,7 @@ const AppItem = ({
         return (
             <>
                 <ItemHeader
-                    ref={onElementMount}
+                    ref={onHeaderMount}
                     title={hideTitle ? '' : itemTitle}
                     actionButtons={actionButtons}
                     itemId={item.id}
@@ -191,7 +193,7 @@ const AppItem = ({
                             [styles.hiddenTitle]: hideTitle,
                             [styles.fullscreen]: isFullscreen,
                         })}
-                        ref={onElementMount}
+                        ref={onContentMount}
                     >
                         {isMounted && renderPlugin(iframeSrc)}
                     </div>
diff --git a/src/components/Item/AppItem/styles/AppItem.module.css b/src/components/Item/AppItem/styles/AppItem.module.css
index 2a878175a..964ea6b27 100644
--- a/src/components/Item/AppItem/styles/AppItem.module.css
+++ b/src/components/Item/AppItem/styles/AppItem.module.css
@@ -12,10 +12,3 @@
 .fullscreen {
     composes: fullscreen from '../../styles/Item.module.css';
 }
-
-.centered {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    block-size: 90%;
-}