feat: support new dashboard plugin architecture

d2.config.js

@@ -7,6 +7,8 @@ const config = {
 
     minDHIS2Version: '2.40',
 
+    pluginType: 'DASHBOARD',
+
     direction: 'auto',
 
     pwa: {
@@ -20,8 +22,6 @@ const config = {
         app: './src/AppWrapper.js',
         plugin: './src/PluginWrapper.js',
     },
-
-    skipPluginLogic: true,
 }
 
 module.exports = config

package.json

@@ -19,10 +19,10 @@
         "cy:run": "start-server-and-test 'yarn start:nobrowser' http://localhost:3000 'yarn cypress run --browser chrome headless --env networkMode=live'"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^11.3.0",
+        "@dhis2/cli-app-scripts": "^11.7.0",
         "@dhis2/cli-style": "^10.7.3",
-        "@dhis2/cypress-commands": "^10.0.3",
-        "@dhis2/cypress-plugins": "^10.0.2",
+        "@dhis2/cypress-commands": "^10.0.6",
+        "@dhis2/cypress-plugins": "^10.0.6",
         "@reportportal/agent-js-cypress": "git+https://github.com/dhis2/agent-js-cypress.git#develop",
         "@reportportal/agent-js-jest": "^5.0.6",
         "@semantic-release/changelog": "^6",
@@ -43,12 +43,11 @@
         "typescript": "^4.8.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.8.7",
-        "@dhis2/app-runtime": "^3.10.4",
+        "@dhis2/analytics": "git+https://github.com/d2-ci/analytics.git#13cd471cc31e0a113fb4323a104f7b4fa70b2353",
+        "@dhis2/app-runtime": "^3.10.6",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^9.4.4",
         "@krakenjs/post-robot": "^11.0.0",
         "d2": "^31.9.1",
         "decode-uri-component": "^0.2.2",
@@ -68,8 +67,5 @@
         "reselect": "^4.1.7",
         "styled-jsx": "^4",
         "whatwg-fetch": "^3.6.2"
-    },
-    "resolutions": {
-        "@dhis2/ui": "^9.4.4"
     }
 }

src/PluginWrapper.js

@@ -1,105 +1,14 @@
-import { useCacheableSection, CacheableSection } from '@dhis2/app-runtime'
-import { CssVariables, CenteredContent, CircularLoader, Layer } from '@dhis2/ui'
-import postRobot from '@krakenjs/post-robot'
+import { DashboardPluginWrapper } from '@dhis2/analytics'
 import debounce from 'lodash-es/debounce'
-import PropTypes from 'prop-types'
 import React, { useEffect, useLayoutEffect, useState } from 'react'
 import { VisualizationPluginWrapper } from './components/VisualizationPlugin/VisualizationPluginWrapper.js'
-import { getPWAInstallationStatus } from './modules/getPWAInstallationStatus.js'
+import './locales/index.js'
 
-const LoadingMask = () => {
-    return (
-        <Layer>
-            <CenteredContent>
-                <CircularLoader />
-            </CenteredContent>
-        </Layer>
-    )
-}
-
-const CacheableSectionWrapper = ({
-    id,
-    children,
-    cacheNow,
-    isParentCached,
-}) => {
-    const { startRecording, isCached, remove } = useCacheableSection(id)
-
-    useEffect(() => {
-        if (cacheNow) {
-            startRecording({ onError: console.error })
-        }
-
-        // NB: Adding `startRecording` to dependencies causes
-        // an infinite recording loop as-is (probably need to memoize it)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cacheNow])
-
-    useEffect(() => {
-        const listener = postRobot.on(
-            'removeCachedData',
-            // todo: check domain too; differs based on deployment env though
-            { window: window.parent },
-            () => remove()
-        )
-
-        return () => listener.cancel()
-    }, [remove])
-
-    useEffect(() => {
-        // Synchronize cache state on load or prop update
-        // -- a back-up to imperative `removeCachedData`
-        if (!isParentCached && isCached) {
-            remove()
-        }
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isParentCached])
-
-    return (
-        <CacheableSection id={id} loadingMask={LoadingMask}>
-            {children}
-        </CacheableSection>
-    )
-}
-CacheableSectionWrapper.propTypes = {
-    cacheNow: PropTypes.bool,
-    children: PropTypes.node,
-    id: PropTypes.string,
-    isParentCached: PropTypes.bool,
-}
-
-const sendInstallationStatus = (installationStatus) => {
-    postRobot.send(window.parent, 'installationStatus', { installationStatus })
-}
-
-const PluginWrapper = () => {
-    const [propsFromParent, setPropsFromParent] = useState()
+const PluginWrapper = (props) => {
+    const [propsFromParent, setPropsFromParent] = useState(props)
     const [renderId, setRenderId] = useState(null)
 
-    const receivePropsFromParent = (event) => setPropsFromParent(event.data)
-
-    useEffect(() => {
-        postRobot
-            .send(window.parent, 'getProps')
-            .then(receivePropsFromParent)
-            .catch((err) => console.error(err))
-
-        // Get & send PWA installation status now, and also prepare to send
-        // future updates (installing/ready)
-        getPWAInstallationStatus({
-            onStateChange: sendInstallationStatus,
-        }).then(sendInstallationStatus)
-
-        // Allow parent to update props
-        const listener = postRobot.on(
-            'newProps',
-            { window: window.parent /* Todo: check domain */ },
-            receivePropsFromParent
-        )
-
-        return () => listener.cancel()
-    }, [])
+    useEffect(() => setPropsFromParent(props), [props])
 
     useLayoutEffect(() => {
         const updateRenderId = debounce(
@@ -115,27 +24,13 @@ const PluginWrapper = () => {
         return () => window.removeEventListener('resize', updateRenderId)
     }, [])
 
-    return propsFromParent ? (
-        <div
-            style={{
-                display: 'flex',
-                height: '100%',
-                overflow: 'hidden',
+    return (
+        <DashboardPluginWrapper {...propsFromParent}>
+            {(props) => {
+                return <VisualizationPluginWrapper id={renderId} {...props} />
             }}
-        >
-            <CacheableSectionWrapper
-                id={propsFromParent.cacheId}
-                cacheNow={propsFromParent.recordOnNextLoad}
-                isParentCached={propsFromParent.isParentCached}
-            >
-                <VisualizationPluginWrapper
-                    id={renderId}
-                    {...propsFromParent}
-                />
-            </CacheableSectionWrapper>
-            <CssVariables colors spacers elevations />
-        </div>
-    ) : null
+        </DashboardPluginWrapper>
+    )
 }
 
 export default PluginWrapper