feat: implement shared dashboard plugin wrapper

.eslintrc.js

@@ -2,4 +2,7 @@ const { config } = require('@dhis2/cli-style')
 
 module.exports = {
     extends: [config.eslintReact],
+    rules: {
+        'react/no-unknown-property': ['error', { ignore: ['jsx', 'global'] }],
+    },
 }

package.json

@@ -20,7 +20,6 @@
     },
     "scripts": {
         "build": "d2-app-scripts build",
-        "postbuild": "yarn build-storybook",
         "build-storybook": "build-storybook",
         "start-storybook": "start-storybook --port 5000",
         "start": "yarn start-storybook",
@@ -31,8 +30,8 @@
         "validate-push": "yarn test"
     },
     "devDependencies": {
-        "@dhis2/app-runtime": "^3.9.0",
-        "@dhis2/cli-app-scripts": "^9.0.1",
+        "@dhis2/app-runtime": "^3.10.6",
+        "@dhis2/cli-app-scripts": "^11.4.1",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/ui": "^9.4.4",

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/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 { Popper } from '@dhis2-ui/popper'
-import { Portal } from '@dhis2-ui/portal'
-import { IconChevronRight24 } from '@dhis2/ui-icons'
+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 { CircularLoader } from '@dhis2-ui/loader'
 import i18n from '@dhis2/d2-i18n'
-import { colors } from '@dhis2/ui-constants'
-import { IconSync16 } from '@dhis2/ui-icons'
+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
+}

src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js

@@ -36,7 +36,7 @@ function getDefault(layout, dashboard, filterTitle) {
     }
 }
 
-export default function (series, layout, metaData, dashboard) {
+export default function subtitle(series, layout, metaData, dashboard) {
     const fontStyle = mergeFontStyleWithDefault(
         layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE],
         FONT_STYLE_VISUALIZATION_SUBTITLE

src/visualizations/config/adapters/dhis_highcharts/title/yearOverYear.js

@@ -1,6 +1,6 @@
 import getFilterText from '../../../../util/getFilterText.js'
 
-export default function (layout, metaData, dashboard) {
+export default function yearOverYear(layout, metaData, dashboard) {
     const titleFragments = []
 
     if (layout.columns && layout.columns.length && !dashboard) {