From 58680506f4ad2a7942a7cd3c12270cbd0708e1be Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Fri, 6 Sep 2024 14:26:07 +0200 Subject: [PATCH] feat: pr feedback --- docs/components/Plugin.md | 16 ++++++++-------- services/plugin/src/Plugin.tsx | 26 +++++++++++++++++++------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/docs/components/Plugin.md b/docs/components/Plugin.md index a5cb843e..94107bbc 100644 --- a/docs/components/Plugin.md +++ b/docs/components/Plugin.md @@ -51,14 +51,14 @@ const MyPlugin = (propsFromParent) => { ## Plugin Props (reserved props) -| Name | Type | Required | Description | -| :--------------------: | :------------: | :---------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **pluginShortName** | _string_ | _required_ if `pluginSource` is not provided | The shortName of the app/plugin you wish to load (matching the result from api/apps). Used to look up the plugin entry point. If this is not provided, `pluginSource` must be provided. `pluginSource` will take precedence if provided. | -| **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 its height based on its contents. The value of `height` will not generally be passed to the plugin, as it is in an internal implementation detail. If you do need to also pass the height to the plugin, you can pass another variable (e.g. `pluginHeight`). | -| **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 its width based on its contents. The value of `width` will not generally be passed to the plugin, as it is in an internal implementation detail. If you do need to also pass the width to the plugin, you can pass another variable (e.g. `pluginWidth`). | +| Name | Type | Required | Description | +| :--------------------: | :------------: | :---------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **pluginShortName** | _string_ | _required_ if `pluginSource` is not provided | The shortName of the app/plugin you wish to load (matching the result from api/apps). Used to look up the plugin entry point. If this is not provided, `pluginSource` must be provided. `pluginSource` will take precedence if provided. | +| **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** | _string_ | _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 its height based on its contents. The value of `height` will not be passed to the plugin, as it is in an internal implementation detail. If you do need to also pass the height to the plugin, you can pass another variable (e.g. `pluginHeight`). | +| **width** | _string_ | _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 its width based on its contents. The value of `width` will not be passed to the plugin, as it is in an internal implementation detail. If you do need to also pass the width to the plugin, you can pass another variable (e.g. `pluginWidth`). | ## Plugin Props (custom props) diff --git a/services/plugin/src/Plugin.tsx b/services/plugin/src/Plugin.tsx index 06eaf20e..b456f558 100644 --- a/services/plugin/src/Plugin.tsx +++ b/services/plugin/src/Plugin.tsx @@ -24,21 +24,28 @@ const getPluginEntryPoint = ({ )?.pluginLaunchUrl } +const getIframeDimension = (dimension: string): string => { + if (!isNaN(Number(dimension))) { + return `${Number(dimension)}px` + } + return dimension +} + export const Plugin = ({ pluginSource, pluginShortName, + height, + width, ...propsToPassNonMemoized }: { pluginSource?: string pluginShortName?: string + height?: string + width?: string propsToPass: any - height?: number - width?: number }): JSX.Element => { const iframeRef = useRef(null) - const { height, width } = propsToPassNonMemoized - const { add: alertsAdd } = useContext(AlertsManagerContext) const { data } = useDataQuery(appsInfoQuery) @@ -66,7 +73,6 @@ export const Plugin = ({ [ ...Object.keys(propsToPassNonMemoized) .sort() - .filter((k) => !['height', 'width'].includes(k)) .map((k) => (propsToPassNonMemoized as any)[k]), ] /* eslint-enable react-hooks/exhaustive-deps */ @@ -145,8 +151,14 @@ export const Plugin = ({ ref={iframeRef} src={pluginSource} style={{ - width: `${width ?? resizedWidth}px`, - height: `${height ?? resizedHeight}px`, + width: `${ + width ? getIframeDimension(width) : resizedWidth + 'px' + }`, + height: `${ + height + ? getIframeDimension(height) + : resizedHeight + 'px' + }`, border: 'none', }} >