fix: disable LL items if the plugin version does not support installa…

…tionStatus message (#2293) This is a workaround until a more robust system of plugin version management has been decided on. Without this fix, only the first LL item will load. The rest get an infinite spinner.
dhis2 · May 5, 2023 · 69c90a1 · 69c90a1
1 parent 43fda1b
commit 69c90a1
Show file tree

Hide file tree

Showing 9 changed files with 265 additions and 165 deletions.
diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
@@ -190,8 +190,8 @@ jobs:
                   node-version: 14.x
 
             - name: Publish release to GitHub
-
               run: npx @dhis2/cli-utils release
+
     report-failure-to-slack:
         runs-on: ubuntu-latest
         needs: [build, lint, test, e2e, publish, release]

diff --git a/cypress/integration/common/view/open_the_SL_dashboard.js b/cypress/integration/common/view/open_the_SL_dashboard.js
@@ -17,4 +17,5 @@ Given('I open the {string} dashboard', (title) => {
     cy.get(dashboardTitleSel).should('be.visible').and('contain', title)
     // FIXME
     // cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
+    cy.wait(3000) // eslint-disable-line cypress/no-unnecessary-waiting
 })
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-03-19T15:27:59.188Z\n"
-"PO-Revision-Date: 2023-03-19T15:27:59.188Z\n"
+"POT-Creation-Date: 2023-05-03T11:08:21.315Z\n"
+"PO-Revision-Date: 2023-05-03T11:08:21.315Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -110,6 +110,15 @@ msgstr "Install the {{appName}} app from the App Hub"
 msgid "No data to display"
 msgstr "No data to display"
 
+msgid ""
+"Install Line Listing app version ${minLLVersion.join(\n"
+"                                '.'\n"
+"                            )} or higher in order to display this item."
+msgstr ""
+"Install Line Listing app version ${minLLVersion.join(\n"
+"                                '.'\n"
+"                            )} or higher in order to display this item."
+
 msgid "Show without filters"
 msgstr "Show without filters"
 

diff --git a/src/AppWrapper.js b/src/AppWrapper.js
@@ -41,11 +41,18 @@ const query = {
             paging: false,
         },
     },
+    apps: {
+        resource: 'apps',
+    },
 }
 
-const providerDataTransformation = ({ rootOrgUnits }) => ({
-    rootOrgUnits: rootOrgUnits.organisationUnits,
-})
+const providerDataTransformation = ({ rootOrgUnits, apps }) => {
+    const lineListingApp = apps.find((app) => app.key === 'line-listing') || {}
+    return {
+        rootOrgUnits: rootOrgUnits.organisationUnits,
+        lineListingAppVersion: lineListingApp.version || '0.0.0',
+    }
+}
 
 const AppWrapper = () => {
     const dataEngine = useDataEngine()

diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
@@ -218,9 +218,16 @@ const IframePlugin = ({
         !isFirstOfType
     ) {
         return (
-            <CenteredContent>
-                <CircularLoader />
-            </CenteredContent>
+            <div
+                style={{
+                    width: style.width || '100%',
+                    height: style.height || '100%',
+                }}
+            >
+                <CenteredContent>
+                    <CircularLoader />
+                </CenteredContent>
+            </div>
         )
     }
 

diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -1,3 +1,4 @@
+import { useCachedDataQuery } from '@dhis2/analytics'
 import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import i18n from '@dhis2/d2-i18n'
@@ -6,6 +7,10 @@ import uniqueId from 'lodash/uniqueId.js'
 import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 import { useSelector } from 'react-redux'
+import {
+    isLLVersionCompatible,
+    minLLVersion,
+} from '../../../../modules/isLLVersionCompatible.js'
 import {
     VISUALIZATION,
     EVENT_VISUALIZATION,
@@ -18,7 +23,6 @@ import getFilteredVisualization from './getFilteredVisualization.js'
 import getVisualizationConfig from './getVisualizationConfig.js'
 import IframePlugin from './IframePlugin.js'
 import LegacyPlugin from './LegacyPlugin.js'
-import NoVisualizationMessage from './NoVisualizationMessage.js'
 import { pluginIsAvailable } from './plugin.js'
 import classes from './styles/Visualization.module.css'
 
@@ -42,6 +46,7 @@ const Visualization = ({
     const { d2 } = useD2()
     const dashboardId = useSelector(sGetSelectedId)
     const { isDisconnected: offline } = useDhis2ConnectionStatus()
+    const { lineListingAppVersion } = useCachedDataQuery()
 
     // NOTE:
     // The following is all memoized because the IframePlugin (and potentially others)
@@ -98,7 +103,36 @@ const Visualization = ({
     )
 
     if (!visualization) {
-        return <NoVisualizationMessage message={i18n.t('No data to display')} />
+        return (
+            <div style={style}>
+                <Cover>
+                    <div className={classes.messageContent}>
+                        <IconWarning24 color={colors.grey500} />
+                        {i18n.t('No data to display')}
+                    </div>
+                </Cover>
+            </div>
+        )
+    }
+
+    if (
+        activeType === EVENT_VISUALIZATION &&
+        !isLLVersionCompatible(lineListingAppVersion)
+    ) {
+        return (
+            <div style={style}>
+                <Cover>
+                    <div className={classes.messageContent}>
+                        <IconWarning24 color={colors.grey500} />
+                        {i18n.t(
+                            `Install Line Listing app version ${minLLVersion.join(
+                                '.'
+                            )} or higher in order to display this item.`
+                        )}
+                    </div>
+                </Cover>
+            </div>
+        )
     }
 
     switch (activeType) {