From 9f270c3cde3c2d3e0f4279d0823f514db42b21f9 Mon Sep 17 00:00:00 2001 From: yolossn Date: Wed, 28 Feb 2024 01:42:29 +0530 Subject: [PATCH] docs: Add documentation for registerPluginSettings this patch adds docs for registerPluginSettings and its related types. Signed-off-by: yolossn --- ...gin_registry.PluginSettingsDetailsProps.md | 18 +++++++ .../api/modules/plugin_registry.md | 54 +++++++++++++++++++ docs/development/plugins/functionality.md | 7 +++ 3 files changed, 79 insertions(+) create mode 100644 docs/development/api/interfaces/plugin_registry.PluginSettingsDetailsProps.md diff --git a/docs/development/api/interfaces/plugin_registry.PluginSettingsDetailsProps.md b/docs/development/api/interfaces/plugin_registry.PluginSettingsDetailsProps.md new file mode 100644 index 00000000000..d782068c259 --- /dev/null +++ b/docs/development/api/interfaces/plugin_registry.PluginSettingsDetailsProps.md @@ -0,0 +1,18 @@ +--- +title: "Interface: PluginSettingsDetailsProps" +linkTitle: "PluginSettingsDetailsProps" +slug: "plugin_registry.PluginSettingsDetailsProps" +--- + +[plugin/registry](../modules/plugin_registry.md).PluginSettingsDetailsProps + +## Properties + +### onDataChange + +• `Optional` **onDataChange**: (`data`: { [`key`: `string`]: `any` }) => `void` +• `readonly` **data**: { [`key`: `string`]: `any` } + +#### Defined in +[plugin/pluginsSlice.ts](https://github.com/headlamp-k8s/headlamp/blob/main/frontend/src/plugin/pluginsSlice.ts#L7) + diff --git a/docs/development/api/modules/plugin_registry.md b/docs/development/api/modules/plugin_registry.md index e6efb406830..264fdd22591 100644 --- a/docs/development/api/modules/plugin_registry.md +++ b/docs/development/api/modules/plugin_registry.md @@ -96,6 +96,13 @@ ___ [components/DetailsViewSection/DetailsViewSection.tsx:9](https://github.com/headlamp-k8s/headlamp/blob/b0236780/frontend/src/components/DetailsViewSection/DetailsViewSection.tsx#L9) +___ +### PluginSettingsComponentType + +Ƭ **PluginSettingsComponentType**: `React.ComponentType`<[`PluginSettingsDetailsProps`](../interfaces/plugin_registry.PluginSettingsDetailsProps.md)\> \| `ReactElement` \| typeof `React.Component` \| ``null`` + +#### Defined in +[plugin/pluginsSlice.ts:24](https://github.com/headlamp-k8s/headlamp/blob/main/frontend/src/plugin/pluginsSlice.ts#L24) ___ ### sectionFunc @@ -661,3 +668,50 @@ registerSidebarEntryFilter(entry => (entry.name === 'workloads' ? null : entry)) #### Defined in [plugin/registry.tsx:231](https://github.com/headlamp-k8s/headlamp/blob/b0236780/frontend/src/plugin/registry.tsx#L231) + +___ +### registerPluginSettings + +▸ **registerPluginSettings**(`name`,`component`,`displaySaveButton`): `void` + +**`example`** + +```tsx +import { registerPluginSettings } from "@kinvolk/headlamp-plugin/lib"; +import { TextField } from "@mui/material"; + +function MyPluginSettingsComponent(props: PluginSettingsDetailsProps) { + const { data, onDataChange } = props; + + function onChange(value: string) { + if (onDataChange) { + onDataChange({ works: value }); + } + } + + return ( + onChange(e.target.value)} + label="Normal Input" + variant="outlined" + fullWidth + /> + ); +} +const displaySaveButton = true; +// Register a plugin settings component. +registerPluginSettings( + "my-plugin", + MyPluginSettingsComponent, + displaySaveButton +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `name` | `string` | The name of the plugin. | +| `component` | `PluginSettingsComponentType` | The component to be rendered in the plugin settings page. | +| `displaySaveButton` | `boolean` | Whether to display the save button. | \ No newline at end of file diff --git a/docs/development/plugins/functionality.md b/docs/development/plugins/functionality.md index cb6f7d5ef6f..34b14fa5eee 100644 --- a/docs/development/plugins/functionality.md +++ b/docs/development/plugins/functionality.md @@ -166,3 +166,10 @@ React to Headlamp events with [registerHeadlampEventCallback](../api/modules/plu - Example plugin shows [How to show snackbars for Headlamp events](https://github.com/kinvolk/headlamp/tree/main/plugins/examples/headlamp-events). - API reference for [registerHeadlampEventCallback](../api/modules/plugin_registry.md#registerheadlampeventcallback) + + +### Plugin Settings + +The plugins can have user configurable settings that can be used to change the behavior of the plugin. The plugin settings can be created using [registerPluginSettings](../api/modules/plugin_registry.md#registerpluginsettings). + +- Example plugin shows [How to create plugin settings and use them](https://github.com/kinvolk/headlamp/tree/main/plugins/examples/change-logo) \ No newline at end of file