feat: implement shared dashboard plugin wrapper

package.json

@@ -30,11 +30,11 @@
         "validate-push": "yarn test"
     },
     "devDependencies": {
-        "@dhis2/app-runtime": "^3.9.0",
+        "@dhis2/app-runtime": "^3.10.6",
         "@dhis2/cli-app-scripts": "^11.7.4",
         "@dhis2/cli-style": "^10.7.4",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^9.4.4",
+        "@dhis2/ui": "^9.15.0",
         "@mihkeleidast/storybook-addon-source": "^1.0.1",
         "@storybook/preset-create-react-app": "^8.3.6",
         "@storybook/react": "^8.3.6",
@@ -52,7 +52,7 @@
     "peerDependencies": {
         "@dhis2/app-runtime": "^3",
         "@dhis2/d2-i18n": "^1.1",
-        "@dhis2/ui": "^9.2.0",
+        "@dhis2/ui": "^9",
         "prop-types": "^15",
         "react": "^16.3",
         "react-dom": "^16.3",
@@ -76,7 +76,6 @@
         "resize-observer-polyfill": "^1.5.1"
     },
     "resolutions": {
-        "@dhis2/ui": "^9.2.0",
         "eslint": "^7.32.0"
     },
     "files": [

src/components/DashboardPluginWrapper/DashboardPluginWrapper.js

@@ -0,0 +1,96 @@
+import {
+    useCacheableSection,
+    CacheableSection,
+    useConfig,
+} from '@dhis2/app-runtime'
+import { CenteredContent, CircularLoader, CssVariables, Layer } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import { getPWAInstallationStatus } from '../../modules/getPWAInstallationStatus.js'
+
+const LoadingMask = () => {
+    return (
+        <Layer>
+            <CenteredContent>
+                <CircularLoader />
+            </CenteredContent>
+        </Layer>
+    )
+}
+
+const CacheableSectionWrapper = ({ id, children, isParentCached }) => {
+    const { startRecording, isCached, remove } = useCacheableSection(id)
+
+    useEffect(() => {
+        if (isParentCached && !isCached) {
+            startRecording({ onError: console.error })
+        } else if (!isParentCached && isCached) {
+            // Synchronize cache state on load or prop update
+            // -- a back-up to imperative `removeCachedData`
+            remove()
+        }
+    }, [isCached, isParentCached, remove, startRecording])
+
+    return (
+        <CacheableSection id={id} loadingMask={<LoadingMask />}>
+            {children}
+        </CacheableSection>
+    )
+}
+
+CacheableSectionWrapper.propTypes = {
+    children: PropTypes.node,
+    id: PropTypes.string,
+    isParentCached: PropTypes.bool,
+}
+
+export const DashboardPluginWrapper = ({
+    onInstallationStatusChange,
+    children,
+    cacheId,
+    isParentCached,
+    ...props
+}) => {
+    const { pwaEnabled } = useConfig()
+
+    useEffect(() => {
+        // Get & send PWA installation status now
+        getPWAInstallationStatus({
+            onStateChange: onInstallationStatusChange,
+        }).then(onInstallationStatusChange)
+    }, [onInstallationStatusChange])
+
+    return props ? (
+        <div
+            style={{
+                display: 'flex',
+                height: '100%',
+                overflow: 'hidden',
+            }}
+        >
+            {pwaEnabled ? (
+                <CacheableSectionWrapper
+                    id={cacheId}
+                    isParentCached={isParentCached}
+                >
+                    {children(props)}
+                </CacheableSectionWrapper>
+            ) : (
+                children(props)
+            )}
+            <CssVariables colors spacers elevations />
+        </div>
+    ) : null
+}
+
+DashboardPluginWrapper.defaultProps = {
+    isParentCached: false,
+    onInstallationStatusChange: Function.prototype,
+}
+
+DashboardPluginWrapper.propTypes = {
+    cacheId: PropTypes.string,
+    children: PropTypes.func,
+    isParentCached: PropTypes.bool,
+    onInstallationStatusChange: PropTypes.func,
+}

src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js

@@ -1,5 +1,4 @@
-import { Popper } from '@dhis2-ui/popper'
-import { Portal } from '@dhis2-ui/portal'
+import { Popper, Portal } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'

src/components/Toolbar/HoverMenuBar/HoverMenuList.js

@@ -1,4 +1,4 @@
-import { colors, elevations, spacers } from '@dhis2/ui-constants'
+import { colors, elevations, spacers } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { createContext, useCallback, useContext, useState } from 'react'
 import { useHoverMenubarContext } from './HoverMenuBar.js'

src/components/Toolbar/HoverMenuBar/HoverMenuListItem.js

@@ -1,6 +1,4 @@
-import { IconChevronRight24 } from '@dhis2/ui-icons'
-import { Popper } from '@dhis2-ui/popper'
-import { Portal } from '@dhis2-ui/portal'
+import { IconChevronRight24, Popper, Portal } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'

src/components/Toolbar/HoverMenuBar/HoverMenuListItem.styles.js

@@ -1,4 +1,4 @@
-import { colors, spacers } from '@dhis2/ui-constants'
+import { colors, spacers } from '@dhis2/ui'
 import css from 'styled-jsx/css'
 
 export default css`

src/components/Toolbar/MenuButton.styles.js

@@ -1,4 +1,4 @@
-import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { colors, spacers, theme } from '@dhis2/ui'
 import css from 'styled-jsx/css'
 
 export default css`

src/components/Toolbar/Toolbar.js

@@ -1,4 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
+import { colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 

src/components/Toolbar/ToolbarSidebar.js

@@ -1,4 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
+import { colors } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'

src/components/Toolbar/UpdateButton.js

@@ -1,7 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { colors } from '@dhis2/ui-constants'
-import { IconSync16 } from '@dhis2/ui-icons'
-import { CircularLoader } from '@dhis2-ui/loader'
+import { CircularLoader, IconSync16, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import menuButtonStyles from './MenuButton.styles.js'

src/index.js

@@ -49,6 +49,8 @@ export {
 
 export * from './components/RichText/index.js'
 
+export { DashboardPluginWrapper } from './components/DashboardPluginWrapper/DashboardPluginWrapper.js'
+
 // Api
 
 export { default as Analytics } from './api/analytics/Analytics.js'

src/modules/getPWAInstallationStatus.js

@@ -0,0 +1,63 @@
+export const INSTALLATION_STATES = {
+    READY: 'READY',
+    INSTALLING: 'INSTALLING',
+}
+
+function handleInstallingWorker({ installingWorker, onStateChange }) {
+    installingWorker.onstatechange = () => {
+        if (installingWorker.state === 'activated') {
+            // ... and update state to 'ready'
+            onStateChange(INSTALLATION_STATES.READY)
+        }
+    }
+}
+
+/**
+ * Gets the current installation state of the PWA features, which is intended
+ * to be reported from this plugin to the parent app to indicate that the
+ * static assets are cached and ready to be accessed locally instead of over
+ * the network.
+ *
+ * Returns either READY, INSTALLING, or `null` for not installed/won't install
+ */
+export async function getPWAInstallationStatus({ onStateChange }) {
+    if (!navigator.serviceWorker) {
+        // Nothing to do here
+        return null
+    }
+
+    const registration = await navigator.serviceWorker.getRegistration()
+    if (!registration) {
+        // This shouldn't happen since this is a PWA app, but return null
+        return null
+    }
+
+    if (registration.active) {
+        return INSTALLATION_STATES.READY
+    }
+    // note that 'registration.waiting' is skipped - it implies there's an active one
+    if (registration.installing) {
+        handleInstallingWorker({
+            installingWorker: registration.installing,
+            onStateChange,
+        })
+        return INSTALLATION_STATES.INSTALLING
+    }
+
+    // It shouldn't normally be possible to get here, but just in case,
+    // listen for installations
+    registration.onupdatefound = () => {
+        // update state for this plugin to 'installing'
+        onStateChange(INSTALLATION_STATES.INSTALLING)
+
+        // also listen for the installing worker to become active
+        const installingWorker = registration.installing
+        if (!installingWorker) {
+            return
+        }
+        handleInstallingWorker({ installingWorker, onStateChange })
+    }
+
+    // and in the mean time, return null to show 'not installed'
+    return null
+}