fix: update AppItem to support slideshow

dhis2 · Jan 16, 2025 · 69ce1fc · 69ce1fc
1 parent 3e6c10e
commit 69ce1fc
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()
-    }
-}