fix: consolidate legacy and default plugin and fix resizing (#2254)

* fix: consolidate legacy and default plugin and fix ER/EV resizing

* fix: show offline message on EE maps

---------

Co-authored-by: Jan Henrik Øverland <janhenrik.overland@gmail.com>

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-02-14T12:38:49.529Z\n"
-"PO-Revision-Date: 2023-02-14T12:38:49.529Z\n"
+"POT-Creation-Date: 2023-03-19T15:27:59.188Z\n"
+"PO-Revision-Date: 2023-03-19T15:27:59.188Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -101,15 +101,6 @@ msgstr "View as Map"
 msgid "There was a problem loading interpretations for this item"
 msgstr "There was a problem loading interpretations for this item"
 
-msgid "Maps with Earth Engine layers cannot be displayed when offline"
-msgstr "Maps with Earth Engine layers cannot be displayed when offline"
-
-msgid "The plugin for rendering this item is not available"
-msgstr "The plugin for rendering this item is not available"
-
-msgid "Install the {{appName}} app from the App Hub"
-msgstr "Install the {{appName}} app from the App Hub"
-
 msgid "The plugin for rendering this item is not available"
 msgstr "The plugin for rendering this item is not available"
 
@@ -119,12 +110,12 @@ msgstr "Install the {{appName}} app from the App Hub"
 msgid "No data to display"
 msgstr "No data to display"
 
-msgid "Filters are not applied to line list dashboard items."
-msgstr "Filters are not applied to line list dashboard items."
-
 msgid "Show without filters"
 msgstr "Show without filters"
 
+msgid "Maps with Earth Engine layers cannot be displayed when offline"
+msgstr "Maps with Earth Engine layers cannot be displayed when offline"
+
 msgid "Unable to load the plugin for this item"
 msgstr "Unable to load the plugin for this item"
 

src/components/Item/VisualizationItem/Visualization/LegacyPlugin.js

@@ -1,17 +1,28 @@
+import { useConfig } from '@dhis2/app-runtime'
+import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import getVisualizationContainerDomId from '../getVisualizationContainerDomId.js'
-import DefaultPlugin from './DefaultPlugin.js'
+import { load, unmount } from './plugin.js'
 
 const LegacyPlugin = ({
-    availableHeight,
-    availableWidth,
+    item,
+    activeType,
+    filterVersion,
+    visualization,
+    options,
+    style,
     gridWidth,
-    ...props
 }) => {
+    const { d2 } = useD2()
+    const { baseUrl } = useConfig()
+    const prevItem = useRef()
+    const prevActiveType = useRef()
+    const prevFilterVersion = useRef()
+
     useEffect(() => {
         const el = document.querySelector(
-            `#${getVisualizationContainerDomId(props.item.id)}`
+            `#${getVisualizationContainerDomId(item.id)}`
         )
         if (typeof el?.setViewportSize === 'function') {
             setTimeout(
@@ -20,18 +31,52 @@ const LegacyPlugin = ({
                 10
             )
         }
-    }, [availableHeight, availableWidth, gridWidth])
+    }, [style, gridWidth, item.id])
+
+    useEffect(() => {
+        if (
+            !prevItem.current ||
+            (prevItem.current === item &&
+                (prevActiveType.current !== activeType ||
+                    prevFilterVersion.current !== filterVersion))
+        ) {
+            // Initial load, or active type or filter has changed
+            load(item, visualization, {
+                credentials: {
+                    baseUrl,
+                    auth: d2.Api.getApi().defaultHeaders.Authorization,
+                },
+                activeType,
+                d2,
+                options,
+            })
+        }
 
-    return <DefaultPlugin {...props} />
+        prevItem.current = item
+        prevActiveType.current = activeType
+        prevFilterVersion.current = filterVersion
+
+        return () => unmount(item, item.type || activeType)
+    }, [item, visualization, activeType, filterVersion, baseUrl, options, d2])
+
+    return <div id={getVisualizationContainerDomId(item.id)} style={style} />
 }
 
 LegacyPlugin.propTypes = {
     activeType: PropTypes.string,
-    availableHeight: PropTypes.number,
-    availableWidth: PropTypes.number,
+    filterVersion: PropTypes.string,
     gridWidth: PropTypes.number,
-    isFullscreen: PropTypes.bool,
     item: PropTypes.object,
+    options: PropTypes.object,
+    style: PropTypes.object,
+    visualization: PropTypes.object,
+}
+
+LegacyPlugin.defaultProps = {
+    style: {},
+    item: {},
+    options: {},
+    visualization: {},
 }
 
 export default LegacyPlugin