From 3be9aeb1dd94a849d88d02fd859f12f3ed80ab5a Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Mon, 29 Jul 2024 09:46:00 +0200
Subject: [PATCH] changesets: add changeset for v2 extensions

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/green-planets-reflect.md |  6 +++
 .changeset/rare-foxes-compete.md    | 57 +++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 .changeset/green-planets-reflect.md
 create mode 100644 .changeset/rare-foxes-compete.md

diff --git a/.changeset/green-planets-reflect.md b/.changeset/green-planets-reflect.md
new file mode 100644
index 0000000000..513f0480a5
--- /dev/null
+++ b/.changeset/green-planets-reflect.md
@@ -0,0 +1,6 @@
+---
+'@backstage/frontend-test-utils': patch
+'@backstage/frontend-app-api': patch
+---
+
+Added support for v2 extensions, which declare their inputs and outputs without using a data map.
diff --git a/.changeset/rare-foxes-compete.md b/.changeset/rare-foxes-compete.md
new file mode 100644
index 0000000000..64dd9b557e
--- /dev/null
+++ b/.changeset/rare-foxes-compete.md
@@ -0,0 +1,57 @@
+---
+'@backstage/frontend-plugin-api': patch
+---
+
+Extensions have been changed to be declared with an array of inputs and outputs, rather than a map of named data refs. This change was made to reduce confusion around the role of the input and output names, as well as enable more powerful APIs for overriding extensions.
+
+An extension that was previously declared like this:
+
+```tsx
+const exampleExtension = createExtension({
+  name: 'example',
+  inputs: {
+    items: createExtensionInput({
+      element: coreExtensionData.reactElement,
+    }),
+  },
+  output: {
+    element: coreExtensionData.reactElement,
+  },
+  factory({ inputs }) {
+    return {
+      element: (
+        <div>
+          Example
+          {inputs.items.map(item => {
+            return <div>{item.output.element}</div>;
+          })}
+        </div>
+      ),
+    };
+  },
+});
+```
+
+Should be migrated to the following:
+
+```tsx
+const exampleExtension = createExtension({
+  name: 'example',
+  inputs: {
+    items: createExtensionInput([coreExtensionData.reactElement]),
+  },
+  output: [coreExtensionData.reactElement],
+  factory({ inputs }) {
+    return [
+      coreExtensionData.reactElement(
+        <div>
+          Example
+          {inputs.items.map(item => {
+            return <div>{item.get(coreExtensionData.reactElement)}</div>;
+          })}
+        </div>,
+      ),
+    ];
+  },
+});
+```