feat(plugin): add onLoad prop for Plugin (#1407)

* feat(plugin): add onLoad prop for Plugin

* docs(plugin): add onLoad prop

* docs: update with event arg

docs/components/Plugin.md

@@ -61,6 +61,7 @@ const MyPlugin = (propsFromParent) => {
 |       **width**        | _string or number_ |                   _optional_                    | Width for the `iframe` element to use; can be any valid CSS dimension. The default is `100%` to approximate the behavior of a normal block element (but not quite, since `auto` is the default for blocks, but that doesn't work for `iframe`s). If you want the width to resize based on the size of the Plugin's contents, use the `clientWidth` prop instead. 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`). |
 |    **clientWidth**     |      _string_      |                   _optional_                    | Set this if you want the width of the iframe to be driven by the contents inside the plugin. The value provided here will be used as the `width` of a `div` wrapping the plugin contents, which will be watched with a resize observer to update the size of the iframe according to the plugin content width. Therefore, **`'max-content'`** is probably the value you want to use for this prop. `'fit-content'` or `'min-content'` may also work, depending on your use case.                                                                                                |
 |     **className**      |      _string_      |                   _optional_                    | A `className` value to be used on the `iframe` element to add styles. Sizing styles will take precedence over `width` and `height` props. Flex styles can be used, for example. **NB:** If you want to use this to add a margin, and you're using default width (or have set it `100%` yourself), you should instead wrap the `Plugin` with a div and add the margin on that div to approximate normal behavior of a block element                                                                                                                                              |
+|       **onLoad**       |     _function_     |                   _optional_                    | An event callback that will be called on the iframe's `load` event. Receives the load `Event` object as an argument                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
 ## Plugin Props (custom props)
 

services/plugin/src/Plugin.tsx

@@ -1,7 +1,14 @@
 import { AlertsManagerContext } from '@dhis2/app-service-alerts'
 import { useDataQuery } from '@dhis2/app-service-data'
 import postRobot from 'post-robot'
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, {
+    ReactEventHandler,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
 import PluginError from './PluginError'
 
 type PluginProps = {
@@ -46,6 +53,8 @@ type PluginProps = {
     clientWidth?: string | number
     /** Props that will be sent to the plugin */
     propsToPassNonMemoized?: any
+    /** Event callback that will be called during the iframe's Load event */
+    onLoad?: ReactEventHandler<HTMLIFrameElement>
 }
 
 const appsInfoQuery = {
@@ -71,6 +80,7 @@ const getPluginEntryPoint = ({
 export const Plugin = ({
     pluginSource,
     pluginShortName,
+    onLoad,
     height,
     width,
     className,
@@ -220,6 +230,7 @@ export const Plugin = ({
             width={clientWidth ? resizedWidth : width ?? '100%'}
             height={height ?? resizedHeight}
             style={{ border: 'none' }}
+            onLoad={onLoad}
         />
     )
 }