docs: Add documentation for registerPluginSettings

this patch adds docs for registerPluginSettings and its related types. Signed-off-by: yolossn <[email protected]>
headlamp-k8s · Feb 28, 2024 · 9f270c3 · 9f270c3
1 parent 34b8478
commit 9f270c3
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/docs/development/api/interfaces/plugin_registry.PluginSettingsDetailsProps.md 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
@@ -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 (
+    <TextField
+      value={data?.works || ""}
+      onChange={(e) => 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. |
diff --git 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)