From dbb6e265e0b3b01dfe975538703fcdde7c5f2b53 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Wed, 29 Mar 2023 16:44:32 +0200 Subject: [PATCH 1/5] feat: add autoresizing for height --- docs/components/Plugin.md | 1 + services/plugin/src/Plugin.tsx | 41 +++++++++++++++++++++++++--------- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/docs/components/Plugin.md b/docs/components/Plugin.md index a4ee4dff7..244e80d6c 100644 --- a/docs/components/Plugin.md +++ b/docs/components/Plugin.md @@ -53,6 +53,7 @@ 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. | ## Plugin Props (custom props) diff --git a/services/plugin/src/Plugin.tsx b/services/plugin/src/Plugin.tsx index 3fb2f149e..8a5c41b2d 100644 --- a/services/plugin/src/Plugin.tsx +++ b/services/plugin/src/Plugin.tsx @@ -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 = { @@ -27,7 +27,7 @@ const getPluginEntryPoint = ({ export const Plugin = ({ pluginSource, pluginShortName, - ...propsToPass + ...propsToPassNonMemoized }: { pluginSource?: string pluginShortName?: string @@ -35,6 +35,15 @@ export const Plugin = ({ }): JSX.Element => { const iframeRef = useRef(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 = useMemo( + () => ({ ...propsToPassNonMemoized }), + // eslint-disable-next-line react-hooks/exhaustive-deps + [propsToPassNonMemoizedJSON] + ) + const { height } = propsToPass + const { add: alertsAdd } = useContext(AlertsManagerContext) const { data } = useDataQuery(appsInfoQuery) @@ -49,12 +58,20 @@ export const Plugin = ({ useState(false) const [inErrorState, setInErrorState] = useState(false) + const [pluginHeight, setPluginHeight] = useState(150) + + useEffect(() => { + if (height) { + setPluginHeight(height) + } + }, [height]) useEffect(() => { if (iframeRef?.current) { const iframeProps = { ...propsToPass, alertsAdd, + setPluginHeight, setInErrorState, setCommunicationReceived, } @@ -104,15 +121,17 @@ export const Plugin = ({ if (pluginEntryPoint) { return ( - +
+ +
) } From 29910456aca9739848cac403c48a2ac4e64be1e3 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Thu, 25 May 2023 13:17:18 +0200 Subject: [PATCH 2/5] fix: working autorsize width --- examples/cra/yarn.lock | 32 ++++++++++++++--------------- examples/query-playground/yarn.lock | 32 ++++++++++++++--------------- services/plugin/src/Plugin.tsx | 19 +++++++++++++---- 3 files changed, 47 insertions(+), 36 deletions(-) diff --git a/examples/cra/yarn.lock b/examples/cra/yarn.lock index eaddddc42..2bcc31f09 100644 --- a/examples/cra/yarn.lock +++ b/examples/cra/yarn.lock @@ -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/app-service-alerts@3.10.0-alpha.1", "@dhis2/app-service-alerts@file:../../services/alerts": - version "3.10.0-alpha.1" +"@dhis2/app-service-alerts@3.10.0-alpha.2", "@dhis2/app-service-alerts@file:../../services/alerts": + version "3.10.0-alpha.2" -"@dhis2/app-service-config@3.10.0-alpha.1", "@dhis2/app-service-config@file:../../services/config": - version "3.10.0-alpha.1" +"@dhis2/app-service-config@3.10.0-alpha.2", "@dhis2/app-service-config@file:../../services/config": + version "3.10.0-alpha.2" -"@dhis2/app-service-data@3.10.0-alpha.1", "@dhis2/app-service-data@file:../../services/data": - version "3.10.0-alpha.1" +"@dhis2/app-service-data@3.10.0-alpha.2", "@dhis2/app-service-data@file:../../services/data": + version "3.10.0-alpha.2" dependencies: react-query "^3.13.11" -"@dhis2/app-service-offline@3.10.0-alpha.1", "@dhis2/app-service-offline@file:../../services/offline": - version "3.10.0-alpha.1" +"@dhis2/app-service-offline@3.10.0-alpha.2", "@dhis2/app-service-offline@file:../../services/offline": + version "3.10.0-alpha.2" dependencies: lodash "^4.17.21" -"@dhis2/app-service-plugin@3.10.0-alpha.1", "@dhis2/app-service-plugin@file:../../services/plugin": - version "3.10.0-alpha.1" +"@dhis2/app-service-plugin@3.10.0-alpha.2", "@dhis2/app-service-plugin@file:../../services/plugin": + version "3.10.0-alpha.2" dependencies: post-robot "^10.0.46" diff --git a/examples/query-playground/yarn.lock b/examples/query-playground/yarn.lock index 954755d63..2e25804ca 100644 --- a/examples/query-playground/yarn.lock +++ b/examples/query-playground/yarn.lock @@ -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/app-service-alerts@3.10.0-alpha.1", "@dhis2/app-service-alerts@3.8.0", "@dhis2/app-service-alerts@file:../../services/alerts": - version "3.10.0-alpha.1" +"@dhis2/app-service-alerts@3.10.0-alpha.2", "@dhis2/app-service-alerts@3.8.0", "@dhis2/app-service-alerts@file:../../services/alerts": + version "3.10.0-alpha.2" -"@dhis2/app-service-config@3.10.0-alpha.1", "@dhis2/app-service-config@3.8.0", "@dhis2/app-service-config@file:../../services/config": - version "3.10.0-alpha.1" +"@dhis2/app-service-config@3.10.0-alpha.2", "@dhis2/app-service-config@3.8.0", "@dhis2/app-service-config@file:../../services/config": + version "3.10.0-alpha.2" -"@dhis2/app-service-data@3.10.0-alpha.1", "@dhis2/app-service-data@3.8.0", "@dhis2/app-service-data@file:../../services/data": - version "3.10.0-alpha.1" +"@dhis2/app-service-data@3.10.0-alpha.2", "@dhis2/app-service-data@3.8.0", "@dhis2/app-service-data@file:../../services/data": + version "3.10.0-alpha.2" dependencies: react-query "^3.13.11" -"@dhis2/app-service-offline@3.10.0-alpha.1", "@dhis2/app-service-offline@3.8.0", "@dhis2/app-service-offline@file:../../services/offline": - version "3.10.0-alpha.1" +"@dhis2/app-service-offline@3.10.0-alpha.2", "@dhis2/app-service-offline@3.8.0", "@dhis2/app-service-offline@file:../../services/offline": + version "3.10.0-alpha.2" dependencies: lodash "^4.17.21" -"@dhis2/app-service-plugin@3.10.0-alpha.1", "@dhis2/app-service-plugin@file:../../services/plugin": - version "3.10.0-alpha.1" +"@dhis2/app-service-plugin@3.10.0-alpha.2", "@dhis2/app-service-plugin@file:../../services/plugin": + version "3.10.0-alpha.2" dependencies: post-robot "^10.0.46" diff --git a/services/plugin/src/Plugin.tsx b/services/plugin/src/Plugin.tsx index 8a5c41b2d..998370aa8 100644 --- a/services/plugin/src/Plugin.tsx +++ b/services/plugin/src/Plugin.tsx @@ -37,12 +37,12 @@ export const Plugin = ({ // 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 = useMemo( + const propsToPass: any = useMemo( () => ({ ...propsToPassNonMemoized }), // eslint-disable-next-line react-hooks/exhaustive-deps [propsToPassNonMemoizedJSON] ) - const { height } = propsToPass + const { height, width } = propsToPass const { add: alertsAdd } = useContext(AlertsManagerContext) @@ -59,12 +59,16 @@ export const Plugin = ({ const [inErrorState, setInErrorState] = useState(false) const [pluginHeight, setPluginHeight] = useState(150) + const [pluginWidth, setPluginWidth] = useState(500) useEffect(() => { if (height) { setPluginHeight(height) } - }, [height]) + if (width) { + setPluginWidth(width) + } + }, [height, width]) useEffect(() => { if (iframeRef?.current) { @@ -72,6 +76,7 @@ export const Plugin = ({ ...propsToPass, alertsAdd, setPluginHeight, + setPluginWidth, setInErrorState, setCommunicationReceived, } @@ -121,7 +126,12 @@ export const Plugin = ({ if (pluginEntryPoint) { return ( -
+
From 666419955d0f1f70c7b101a49d7440dcd33857a0 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Mon, 21 Aug 2023 16:12:59 +0200 Subject: [PATCH 3/5] fix: temporarily disable failing test --- services/config/src/__tests__/useTimeZoneConversion.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/config/src/__tests__/useTimeZoneConversion.test.tsx b/services/config/src/__tests__/useTimeZoneConversion.test.tsx index 0a209aee4..686cdc66b 100644 --- a/services/config/src/__tests__/useTimeZoneConversion.test.tsx +++ b/services/config/src/__tests__/useTimeZoneConversion.test.tsx @@ -42,7 +42,7 @@ describe('useTimeZoneConversion', () => { const serverDate = result.current.fromServerDate('2010-01-01') const expectedDateString = '2009-12-31T23:00:00.000' - expect(serverDate.getClientZonedISOString()).toBe(expectedDateString) + // expect(serverDate.getClientZonedISOString()).toBe(expectedDateString) }) // fromServerDate accepts number, valid date string, or date object From b2c62732bf37e6d52b30f155b68c8b126068e8e5 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Tue, 22 Aug 2023 10:30:20 +0200 Subject: [PATCH 4/5] fix: add width to plugin documentation [LIBS-487] --- docs/components/Plugin.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/components/Plugin.md b/docs/components/Plugin.md index 244e80d6c..c7df09be4 100644 --- a/docs/components/Plugin.md +++ b/docs/components/Plugin.md @@ -54,6 +54,7 @@ const MyPlugin = (propsFromParent) => { | **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) From e53ecbd0632e35681e135de9072169e6bfefe13c Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Fri, 25 Aug 2023 13:40:06 +0200 Subject: [PATCH 5/5] fix: clean up --- services/config/src/__tests__/useTimeZoneConversion.test.tsx | 2 +- services/plugin/src/Plugin.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/services/config/src/__tests__/useTimeZoneConversion.test.tsx b/services/config/src/__tests__/useTimeZoneConversion.test.tsx index 0733362d3..1454b4023 100644 --- a/services/config/src/__tests__/useTimeZoneConversion.test.tsx +++ b/services/config/src/__tests__/useTimeZoneConversion.test.tsx @@ -42,7 +42,7 @@ describe('useTimeZoneConversion', () => { const serverDate = result.current.fromServerDate('2010-01-01') const expectedDateString = '2009-12-31T23:00:00.000' - // expect(serverDate.getClientZonedISOString()).toBe(expectedDateString) + expect(serverDate.getClientZonedISOString()).toBe(expectedDateString) }) it('returns fromServerDate that corrects for server time zone (adjusting for summer time)', () => { diff --git a/services/plugin/src/Plugin.tsx b/services/plugin/src/Plugin.tsx index 998370aa8..85349c53a 100644 --- a/services/plugin/src/Plugin.tsx +++ b/services/plugin/src/Plugin.tsx @@ -139,7 +139,6 @@ export const Plugin = ({ width: '100%', height: '100%', border: 'none', - overflowX: 'hidden', }} >