feat: support new dashboard plugin architecture

d2.config.js

@@ -6,6 +6,8 @@ const config = {
 
     minDHIS2Version: '2.40',
 
+    pluginType: 'DASHBOARD',
+
     pwa: {
         enabled: true,
         caching: {
@@ -21,8 +23,6 @@ const config = {
 
     coreApp: true,
     dataStoreNamespace: 'DHIS2_MAPS_APP_CORE',
-
-    skipPluginLogic: true,
 }
 
 module.exports = config

package.json

@@ -41,12 +41,12 @@
         "start-server-and-test": "^2.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.8.4",
+        "@dhis2/analytics": "git+https://github.com/d2-ci/analytics.git#7978713b4489a26ec83e99ebeb17572a3560c4e0",
         "@dhis2/app-runtime": "^3.11.2",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/maps-gl": "^4.0.1",
-        "@dhis2/ui": "^9.13.0",
+        "@dhis2/ui": "^9.15.0",
         "@krakenjs/post-robot": "^11.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "abortcontroller-polyfill": "^1.7.5",

patches/webpack+5.76.2.patch → patches/webpack+5.93.0.patch

@@ -1,28 +1,30 @@
 diff --git a/node_modules/webpack/lib/webworker/ImportScriptsChunkLoadingRuntimeModule.js b/node_modules/webpack/lib/webworker/ImportScriptsChunkLoadingRuntimeModule.js
-index b9947d6..31273c5 100644
+index d290c42..a87b524 100644
 --- a/node_modules/webpack/lib/webworker/ImportScriptsChunkLoadingRuntimeModule.js
 +++ b/node_modules/webpack/lib/webworker/ImportScriptsChunkLoadingRuntimeModule.js
-@@ -88,6 +88,19 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
- 			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_importScripts`
- 			: undefined;
+@@ -92,7 +92,20 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
+ 		const runtimeTemplate = compilation.runtimeTemplate;
+ 		const { _withCreateScriptUrl: withCreateScriptUrl } = this;
 
-+		const outputName = this.compilation.getPath(
-+			getChunkFilenameTemplate(chunk, this.compilation.outputOptions),
-+			{
-+				chunk,
-+				contentHashType: "javascript"
-+			}
-+		);
-+		const rootOutputDir = JSON.stringify(getUndoPath(
-+			outputName,
-+			this.compilation.outputOptions.path,
-+			true
-+		));
+-		return Template.asString([
++ 		const outputName = compilation.getPath(
++ 			getChunkFilenameTemplate(chunk, compilation.outputOptions),
++ 			{
++ 				chunk,
++ 				contentHashType: "javascript"
++ 			}
++ 		);
++ 		const rootOutputDir = JSON.stringify(getUndoPath(
++ 			outputName,
++ 			compilation.outputOptions.path,
++ 			true
++ 		));
 +
- 		return Template.asString([
++ 		return Template.asString([
  			withBaseURI ? this._generateBaseUri(chunk) : "// no baseURI",
  			"",
-@@ -142,8 +155,8 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
+ 			"// object to store loaded chunks",
+@@ -146,8 +159,8 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
  											Template.indent(
  												`importScripts(${
  													withCreateScriptUrl
@@ -33,7 +35,7 @@ index b9947d6..31273c5 100644
  												});`
  											),
  											"}"
-@@ -183,8 +196,8 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
+@@ -187,8 +200,8 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
  							"// start update chunk loading",
  							`importScripts(${
  								withCreateScriptUrl
@@ -44,7 +46,7 @@ index b9947d6..31273c5 100644
  							});`,
  							'if(!success) throw new Error("Loading update chunk failed for unknown reason");'
  						]),
-@@ -221,7 +234,7 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
+@@ -225,7 +238,7 @@ class ImportScriptsChunkLoadingRuntimeModule extends RuntimeModule {
  							RuntimeGlobals.hmrDownloadManifest
  						} = ${runtimeTemplate.basicFunction("", [
  							'if (typeof fetch === "undefined") throw new Error("No browser support: need fetch API");',

src/PluginWrapper.js

@@ -1,106 +1,12 @@
-import { useCacheableSection, CacheableSection } from '@dhis2/app-runtime'
-import { CenteredContent, CircularLoader, Layer } from '@dhis2/ui'
-import postRobot from '@krakenjs/post-robot'
+import { DashboardPluginWrapper } from '@dhis2/analytics'
 import { debounce } from 'lodash/fp'
-import PropTypes from 'prop-types'
-import React, { useEffect, useLayoutEffect, useState } from 'react'
+import React, { useLayoutEffect, useState } from 'react'
 import { Plugin } from './components/plugin/Plugin.js'
-import { getPWAInstallationStatus } from './util/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 [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()
-    }, [])
-
     useLayoutEffect(() => {
         const updateRenderId = debounce(300, () =>
             setRenderId((renderId) =>
@@ -113,23 +19,11 @@ const PluginWrapper = () => {
         return () => window.removeEventListener('resize', updateRenderId)
     }, [])
 
-    return propsFromParent ? (
-        <div
-            style={{
-                display: 'flex',
-                height: '100%',
-                overflow: 'hidden',
-            }}
-        >
-            <CacheableSectionWrapper
-                id={propsFromParent.cacheId}
-                cacheNow={propsFromParent.recordOnNextLoad}
-                isParentCached={propsFromParent.isParentCached}
-            >
-                <Plugin id={renderId} {...propsFromParent} />
-            </CacheableSectionWrapper>
-        </div>
-    ) : null
+    return (
+        <DashboardPluginWrapper {...props}>
+            {(props) => <Plugin id={renderId} {...props} />}
+        </DashboardPluginWrapper>
+    )
 }
 
 export default PluginWrapper

src/components/app/styles/App.module.css

@@ -14,9 +14,9 @@
 }
 
 /* Avoid vertical layer dialog scroll on small screens */
-:global(#dhis2-portal-root) aside[role=dialog],
-:global(#dhis2-portal-root) aside[role=dialog] > div > div {
-    max-height: calc(100vh - 64px)
+:global(#dhis2-portal-root) aside[role='dialog'],
+:global(#dhis2-portal-root) aside[role='dialog'] > div > div {
+    max-height: calc(100vh - 64px);
 }
 
 /* Scrollbar width */

src/components/core/LabelDisplayOptions.js

@@ -6,7 +6,7 @@ import {
     LABEL_TEMPLATE_NAME_AND_VALUE,
     LABEL_TEMPLATE_VALUE_ONLY,
 } from '../../constants/layers.js'
-import { SelectField } from '.'
+import SelectField from './SelectField.js'
 
 const getLabelDisplayOptions = () => [
     {

src/components/core/styles/Checkbox.module.css

@@ -7,6 +7,6 @@
 /* This styles the tooltip span containing the svg */
 .checkbox span {
     margin-left: var(--spacers-dp4);
-    display:flex;
+    display: flex;
     flex-direction: column;
 }

src/components/core/styles/IconButton.module.css

@@ -11,7 +11,7 @@
 .iconButton.disabled svg {
     fill: var(--colors-grey400);
     cursor: not-allowed;
-    color: var(--colors-grey400)
+    color: var(--colors-grey400);
 }
 
 .iconButton:not(.disabled):hover {

src/components/datatable/styles/BottomPanel.module.css

@@ -32,7 +32,7 @@
 }
 
 .closeIcon svg {
-    position:absolute;
+    position: absolute;
     top: 50%;
     left: 50%;
     margin: -8px 0 0 -8px;

src/components/download/styles/DownloadMapInfo.module.css

@@ -26,7 +26,7 @@
 }
 
 .downloadMapInfo table {
-    table-layout:fixed;
+    table-layout: fixed;
 }
 
 .downloadMapInfo table td {

src/components/download/styles/DownloadMenubar.module.css

@@ -7,7 +7,7 @@
     z-index: 1200;
     background-color: var(--colors-grey600);
     left: 0;
-    top: 0
+    top: 0;
 }
 
 .downloadModeMenu button {
@@ -19,4 +19,3 @@
 :global(.dhis2-map-downloading .maplibregl-popup-close-button) {
     display: none;
 }
-

src/components/download/styles/LegendLayers.module.css

@@ -1,4 +1,3 @@
 .legendLayers {
     margin-left: 22px;
 }
-

src/components/download/styles/OverviewMap.module.css

@@ -1,5 +1,5 @@
 .overviewMap {
-    margin-top: var(--spacers-dp8); 
+    margin-top: var(--spacers-dp8);
     border: 1px solid #ccc;
     width: 100%;
     height: 260px;

src/components/layers/overlays/styles/LayerList.module.css

@@ -5,7 +5,8 @@
 .list {
     max-width: 684px;
     max-height: calc(100vh - 150px);
-    padding: var(--spacers-dp8) var(--spacers-dp4) var(--spacers-dp8) var(--spacers-dp12);
+    padding: var(--spacers-dp8) var(--spacers-dp4) var(--spacers-dp8)
+        var(--spacers-dp12);
     overflow-y: auto;
 }
 

src/components/map/MapLoadingMask.js

@@ -1,16 +1,10 @@
 import { ComponentCover, CenteredContent, CircularLoader } from '@dhis2/ui'
-import cx from 'classnames'
 import React from 'react'
-import styles from './styles/MapLoadingMask.module.css'
 
 export const loadingMaskClass = 'dhis2-map-loading-mask'
 
 const MapLoadingMask = () => (
-    <ComponentCover
-        translucent
-        className={cx(styles.cover, loadingMaskClass)}
-        dataTest="map-loading-mask"
-    >
+    <ComponentCover className={loadingMaskClass} dataTest="map-loading-mask">
         <CenteredContent>
             <CircularLoader />
         </CenteredContent>

src/components/map/styles/MapPosition.module.css

@@ -7,7 +7,7 @@
     width: 100%;
     position: relative;
     overflow: hidden;
-    flex: auto
+    flex: auto;
 }
 
 .mapContainer.download {