From a2bb9d2e351d400851fc0d6f59b4d56d9915e723 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 15 Aug 2024 15:15:03 +0200
Subject: [PATCH] docs/frontend-system: docs for how to override declared
 inputs

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../architecture/25-extension-overrides.md    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/docs/frontend-system/architecture/25-extension-overrides.md b/docs/frontend-system/architecture/25-extension-overrides.md
index 0efa578a30..8b6d87bc81 100644
--- a/docs/frontend-system/architecture/25-extension-overrides.md
+++ b/docs/frontend-system/architecture/25-extension-overrides.md
@@ -102,6 +102,40 @@ const overrideExtension = exampleExtension.override({
 
 When overriding the output declaration you don't need to include the original outputs. Just remember that you will no longer be able to directly forward the output from the original factory, and will still need to adhere to the contract of the input that the extension is attached to.
 
+## Overriding declared inputs
+
+When overriding an extension you can also provide new input declarations. You can define any number of new inputs, but you are **not** able to override the existing inputs declared by the original extension. The new inputs will be merged with the existing ones, giving the override factory access to both. The following example shows how to override an extension and add a new input declaration:
+
+```tsx
+const myOverrideExtension = myExtension.override({
+  inputs: {
+    myOverrideInput: createExtensionInput([coreExtensionData.reactElement]),
+  },
+  factory(originalFactory, { inputs }) {
+    const originalOutput = originalFactory();
+    const originalElement = originalOutput.get(coreExtensionData.reactElement);
+
+    return [
+      ...originalOutput,
+      coreExtensionData.reactElement(
+        <div>
+          <h1>Original element</h1>
+          {originalElement}
+          <h1>Additional inputs</h1>
+          <ul>
+            {inputs.myOverrideInput.map(i => (
+              <li key={i.node.spec.id}>
+                {i.get(coreExtensionData.reactElement)}
+              </li>
+            ))}
+          </ul>
+        </div>,
+      ),
+    ];
+  },
+});
+```
+
 ## Override App Extensions
 
 In order to override an app extension, you must create a new extension and add it to the list of overridden features. The steps are: create your extension overrides and use them in Backstage.