Skip to content

Commit

Permalink
Merge pull request #1355 from dhis2/LIBS-487/auto-resizing
Browse files Browse the repository at this point in the history 
feat: add auto resizing for plugins [LIBS-487]
  • Loading branch information
@tomzemp
tomzemp authored Sep 28, 2023
2 parents b02a515 + e53ecbd commit 4136bd5
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 41 deletions.
2 changes: 2 additions & 0 deletions docs/components/Plugin.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ const MyPlugin = (propsFromParent) => {
| **pluginSource** | _string_ (url) | _required_ if `pluginShortName` is not provided | The URL of the plugin. If this is not provided, `pluginShortName` must be provided. |
| **onError** | _Function_ | _optional_ | Callback function to be called when an error in the plugin triggers an error boundary. You can use this to pass an error back up to the app and create a custom handling/UX if errors occur in the plugin. In general, it is recommended that you use the plugin's built-in error boundaries |
| **showAlertsInPlugin** | _boolean_ | _optional_ | If `true`, any alerts within the plugin (defined with the `useAlert` hook) will be rendered within the iframe. By default, this is `false`. It is recommended, in general, that you do not override this and allow alerts to be hoisted up to the app level |
| **height** | _number_ | _optional_ | If a height is provided, the iframe will be fixed to the specified height. If no height is provided, the iframe will automatically resize based on its contents. |
| **width** | _number_ | _optional_ | If a width is provided, the iframe will be fixed to the specified width. If no width is provided, the iframe will automatically resize based on its contents. |

## Plugin Props (custom props)

Expand Down
32 changes: 16 additions & 16 deletions examples/cra/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1054,32 +1054,32 @@
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==

"@dhis2/app-runtime@file:../../runtime":
version "3.10.0-alpha.1"
version "3.10.0-alpha.2"
dependencies:
"@dhis2/app-service-alerts" "3.10.0-alpha.1"
"@dhis2/app-service-config" "3.10.0-alpha.1"
"@dhis2/app-service-data" "3.10.0-alpha.1"
"@dhis2/app-service-offline" "3.10.0-alpha.1"
"@dhis2/app-service-plugin" "3.10.0-alpha.1"
"@dhis2/app-service-alerts" "3.10.0-alpha.2"
"@dhis2/app-service-config" "3.10.0-alpha.2"
"@dhis2/app-service-data" "3.10.0-alpha.2"
"@dhis2/app-service-offline" "3.10.0-alpha.2"
"@dhis2/app-service-plugin" "3.10.0-alpha.2"

"@dhis2/[email protected].1", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.0-alpha.2"

"@dhis2/[email protected].1", "@dhis2/app-service-config@file:../../services/config":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/app-service-config@file:../../services/config":
version "3.10.0-alpha.2"

"@dhis2/[email protected].1", "@dhis2/app-service-data@file:../../services/data":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/app-service-data@file:../../services/data":
version "3.10.0-alpha.2"
dependencies:
react-query "^3.13.11"

"@dhis2/[email protected].1", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.0-alpha.2"
dependencies:
lodash "^4.17.21"

"@dhis2/[email protected].1", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.0-alpha.2"
dependencies:
post-robot "^10.0.46"

Expand Down
32 changes: 16 additions & 16 deletions examples/query-playground/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1800,32 +1800,32 @@
"@dhis2/app-service-offline" "3.8.0"

"@dhis2/app-runtime@^2.2.2", "@dhis2/app-runtime@file:../../runtime":
version "3.10.0-alpha.1"
version "3.10.0-alpha.2"
dependencies:
"@dhis2/app-service-alerts" "3.10.0-alpha.1"
"@dhis2/app-service-config" "3.10.0-alpha.1"
"@dhis2/app-service-data" "3.10.0-alpha.1"
"@dhis2/app-service-offline" "3.10.0-alpha.1"
"@dhis2/app-service-plugin" "3.10.0-alpha.1"
"@dhis2/app-service-alerts" "3.10.0-alpha.2"
"@dhis2/app-service-config" "3.10.0-alpha.2"
"@dhis2/app-service-data" "3.10.0-alpha.2"
"@dhis2/app-service-offline" "3.10.0-alpha.2"
"@dhis2/app-service-plugin" "3.10.0-alpha.2"

"@dhis2/[email protected].1", "@dhis2/[email protected]", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/[email protected]", "@dhis2/app-service-alerts@file:../../services/alerts":
version "3.10.0-alpha.2"

"@dhis2/[email protected].1", "@dhis2/[email protected]", "@dhis2/app-service-config@file:../../services/config":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/[email protected]", "@dhis2/app-service-config@file:../../services/config":
version "3.10.0-alpha.2"

"@dhis2/[email protected].1", "@dhis2/[email protected]", "@dhis2/app-service-data@file:../../services/data":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/[email protected]", "@dhis2/app-service-data@file:../../services/data":
version "3.10.0-alpha.2"
dependencies:
react-query "^3.13.11"

"@dhis2/[email protected].1", "@dhis2/[email protected]", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/[email protected]", "@dhis2/app-service-offline@file:../../services/offline":
version "3.10.0-alpha.2"
dependencies:
lodash "^4.17.21"

"@dhis2/[email protected].1", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.0-alpha.1"
"@dhis2/[email protected].2", "@dhis2/app-service-plugin@file:../../services/plugin":
version "3.10.0-alpha.2"
dependencies:
post-robot "^10.0.46"

Expand Down
47 changes: 38 additions & 9 deletions services/plugin/src/Plugin.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { AlertsManagerContext } from '@dhis2/app-service-alerts'
import { useDataQuery } from '@dhis2/app-service-data'
import postRobot from 'post-robot'
import React, { useContext, useEffect, useRef, useState } from 'react'
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
import PluginError from './PluginError'

const appsInfoQuery = {
Expand All @@ -27,14 +27,23 @@ const getPluginEntryPoint = ({
export const Plugin = ({
pluginSource,
pluginShortName,
...propsToPass
...propsToPassNonMemoized
}: {
pluginSource?: string
pluginShortName?: string
propsToPass: any
}): JSX.Element => {
const iframeRef = useRef<HTMLIFrameElement>(null)

// we do not know what is being sent in passed props, so for stable reference, memoize using JSON representation
const propsToPassNonMemoizedJSON = JSON.stringify(propsToPassNonMemoized)
const propsToPass: any = useMemo(
() => ({ ...propsToPassNonMemoized }),
// eslint-disable-next-line react-hooks/exhaustive-deps
[propsToPassNonMemoizedJSON]
)
const { height, width } = propsToPass

const { add: alertsAdd } = useContext(AlertsManagerContext)

const { data } = useDataQuery(appsInfoQuery)
Expand All @@ -49,12 +58,25 @@ export const Plugin = ({
useState<boolean>(false)

const [inErrorState, setInErrorState] = useState<boolean>(false)
const [pluginHeight, setPluginHeight] = useState<number>(150)
const [pluginWidth, setPluginWidth] = useState<number>(500)

useEffect(() => {
if (height) {
setPluginHeight(height)
}
if (width) {
setPluginWidth(width)
}
}, [height, width])

useEffect(() => {
if (iframeRef?.current) {
const iframeProps = {
...propsToPass,
alertsAdd,
setPluginHeight,
setPluginWidth,
setInErrorState,
setCommunicationReceived,
}
Expand Down Expand Up @@ -104,15 +126,22 @@ export const Plugin = ({

if (pluginEntryPoint) {
return (
<iframe
ref={iframeRef}
src={pluginSource}
<div
style={{
width: '100%',
height: '100%',
border: 'none',
height: `${pluginHeight}px`,
width: `${pluginWidth}px`,
}}
></iframe>
>
<iframe
ref={iframeRef}
src={pluginSource}
style={{
width: '100%',
height: '100%',
border: 'none',
}}
></iframe>
</div>
)
}

Expand Down

0 comments on commit 4136bd5

Please sign in to comment.