add updateSettings to props param

Signed-off-by: Teo Koon Peng <[email protected]>

packages/rmf-dashboard-framework/docs/micro-apps.md

@@ -54,6 +54,39 @@ createMicroApp(
 );
 ```
 
+### MicroApp Settings
+
+Your component may want to expose some settings for the user to change, you can do that with `rmf-dashboard-framework`'s `useSettings` and `useAppController` hooks.
+
+foo.tsx
+
+```tsx
+export const Foo = () => {
+  const settings = useSettings();
+  const fooSettings = settings.microAppSettings['example.foo'];
+  const { updateSettings } = useAppController(); // call `updateSettings` to save new settings.
+
+  return <div>{fooSettings.message}</div>;
+};
+
+export default Foo;
+```
+
+An alternative is to use the `settings` and `updateSettings` params in the `props` callback.
+
+foo-app.ts
+
+```ts
+createMicroApp(
+  'example.foo',
+  'Foo',
+  () => import('./foo'),
+  (settings, updateSettings) => ({ message: settings.microAppSettings['example.foo'].message }),
+);
+```
+
+Using the hooks is the recommended approach as the gives you the most flexibility in how to manage the settings.
+
 ### Integrating with RMF
 
 In most cases, you want your MicroApp to display some information from RMF, `rmf-dashboard-framework` provide hooks for you to do that. The most important hook is `useRmfApi`, this will return a `RmfApi` instance that you can use to interact with RMF.

packages/rmf-dashboard-framework/src/micro-apps/index.tsx

@@ -1,4 +1,5 @@
 import React, { Suspense } from 'react';
+import { useAppController } from 'rmf-dashboard-framework/hooks/use-app-controller';
 
 import { Window, WindowProps } from '../components/window';
 import { useSettings } from '../hooks/use-settings';
@@ -25,7 +26,10 @@ export function createMicroApp<P>(
   appId: string,
   displayName: string,
   loadComponent: () => Promise<{ default: React.ComponentType<P> }>,
-  props: (settings: Settings) => React.PropsWithoutRef<P> & React.Attributes,
+  props: (
+    settings: Settings,
+    updateSettings: (settings: Settings) => void,
+  ) => React.PropsWithoutRef<P> & React.Attributes,
 ): MicroAppManifest {
   const LazyComponent = React.lazy(loadComponent);
   return {
@@ -34,10 +38,11 @@ export function createMicroApp<P>(
     Component: React.forwardRef<HTMLDivElement>(
       ({ children, ...otherProps }: React.PropsWithChildren<MicroAppProps>, ref) => {
         const settings = useSettings();
+        const { updateSettings } = useAppController();
         return (
           <Window ref={ref} title={displayName} {...otherProps}>
             <Suspense fallback={null}>
-              <LazyComponent {...props(settings)} />
+              <LazyComponent {...props(settings, updateSettings)} />
             </Suspense>
             {/* this contains the resize handle */}
             {children}