frontend-plugin-api: wrap resolved extension inputs in an object

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Vincenzo Scamporlino <vincenzos@spotify.com>
Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/catalog-react/api-report-alpha.md

@@ -9,7 +9,7 @@ import { AnyExtensionInputMap } from '@backstage/frontend-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { Entity } from '@backstage/catalog-model';
 import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
-import { ExtensionInputValues } from '@backstage/frontend-plugin-api';
+import { ResolvedExtensionInputs } from '@backstage/frontend-plugin-api';
 import { ResourcePermission } from '@backstage/plugin-permission-common';
 import { RouteRef } from '@backstage/frontend-plugin-api';
 
@@ -29,7 +29,7 @@ export function createEntityCardExtension<
     | typeof entityFilterFunctionExtensionDataRef.T
     | typeof entityFilterExpressionExtensionDataRef.T;
   loader: (options: {
-    inputs: Expand<ExtensionInputValues<TInputs>>;
+    inputs: Expand<ResolvedExtensionInputs<TInputs>>;
   }) => Promise<JSX.Element>;
 }): ExtensionDefinition<{
   filter?: string | undefined;
@@ -54,7 +54,7 @@ export function createEntityContentExtension<
     | typeof entityFilterFunctionExtensionDataRef.T
     | typeof entityFilterExpressionExtensionDataRef.T;
   loader: (options: {
-    inputs: Expand<ExtensionInputValues<TInputs>>;
+    inputs: Expand<ResolvedExtensionInputs<TInputs>>;
   }) => Promise<JSX.Element>;
 }): ExtensionDefinition<{
   title: string;

plugins/catalog-react/src/alpha.tsx

@@ -17,7 +17,7 @@
 import {
   AnyExtensionInputMap,
   ExtensionBoundary,
-  ExtensionInputValues,
+  ResolvedExtensionInputs,
   RouteRef,
   coreExtensionData,
   createExtension,
@@ -59,7 +59,7 @@ export function createEntityCardExtension<
     | typeof entityFilterFunctionExtensionDataRef.T
     | typeof entityFilterExpressionExtensionDataRef.T;
   loader: (options: {
-    inputs: Expand<ExtensionInputValues<TInputs>>;
+    inputs: Expand<ResolvedExtensionInputs<TInputs>>;
   }) => Promise<JSX.Element>;
 }) {
   return createExtension({
@@ -117,7 +117,7 @@ export function createEntityContentExtension<
     | typeof entityFilterFunctionExtensionDataRef.T
     | typeof entityFilterExpressionExtensionDataRef.T;
   loader: (options: {
-    inputs: Expand<ExtensionInputValues<TInputs>>;
+    inputs: Expand<ResolvedExtensionInputs<TInputs>>;
   }) => Promise<JSX.Element>;
 }) {
   return createExtension({

plugins/catalog/src/alpha/entityContents.tsx

@@ -39,7 +39,7 @@ export const OverviewEntityContent = createEntityContentExtension({
   },
   loader: async ({ inputs }) =>
     import('./EntityOverviewPage').then(m => (
-      <m.EntityOverviewPage cards={inputs.cards} />
+      <m.EntityOverviewPage cards={inputs.cards.map(c => c.output)} />
     )),
 });
 

plugins/catalog/src/alpha/pages.tsx

@@ -39,7 +39,7 @@ export const CatalogIndexPage = createPageExtension({
   },
   loader: async ({ inputs }) => {
     const { BaseCatalogPage } = await import('../components/CatalogPage');
-    const filters = inputs.filters.map(filter => filter.element);
+    const filters = inputs.filters.map(filter => filter.output.element);
     return <BaseCatalogPage filters={<>{filters}</>} />;
   },
 });
@@ -64,11 +64,11 @@ export const CatalogEntityPage = createPageExtension({
           <EntityLayout>
             {inputs.contents.map(content => (
               <EntityLayout.Route
-                key={content.path}
-                path={content.path}
-                title={content.title}
+                key={content.output.path}
+                path={content.output.path}
+                title={content.output.title}
               >
-                {content.element}
+                {content.output.element}
               </EntityLayout.Route>
             ))}
           </EntityLayout>

plugins/graphiql/src/alpha.tsx

@@ -66,7 +66,7 @@ export const graphiqlBrowseApi = createApiExtension({
   factory({ inputs }) {
     return createApiFactory(
       graphQlBrowseApiRef,
-      GraphQLEndpoints.from(inputs.endpoints.map(i => i.endpoint)),
+      GraphQLEndpoints.from(inputs.endpoints.map(i => i.output.endpoint)),
     );
   },
 });

plugins/home/src/alpha.tsx

@@ -51,8 +51,8 @@ const HomepageCompositionRootExtension = createPageExtension({
   loader: ({ inputs }) =>
     import('./components/').then(m => (
       <m.HomepageCompositionRoot
-        children={inputs.props?.children}
-        title={inputs.props?.title}
+        children={inputs.props?.output.children}
+        title={inputs.props?.output.title}
       />
     )),
 });

plugins/search-react/src/alpha.test.tsx

@@ -115,10 +115,10 @@ describe('createSearchResultListItemExtension', () => {
         );
 
         const getResultItemComponent = (result: SearchResult) => {
-          const value = inputs.items.find(({ item }) =>
-            item?.predicate?.(result),
+          const value = inputs.items.find(item =>
+            item?.output.item.predicate?.(result),
           );
-          return value?.item.component ?? DefaultResultItem;
+          return value?.output.item.component ?? DefaultResultItem;
         };
 
         const Component = () => {

plugins/search/src/alpha.tsx

@@ -112,8 +112,10 @@ export const SearchPage = createPageExtension({
   },
   loader: async ({ config, inputs }) => {
     const getResultItemComponent = (result: SearchResult) => {
-      const value = inputs.items.find(({ item }) => item?.predicate?.(result));
-      return value?.item.component ?? DefaultResultListItem;
+      const value = inputs.items.find(item =>
+        item?.output.item.predicate?.(result),
+      );
+      return value?.output.item.component ?? DefaultResultListItem;
     };
 
     const Component = () => {

plugins/user-settings/src/alpha.tsx

@@ -39,7 +39,9 @@ const UserSettingsPage = createPageExtension({
   },
   loader: ({ inputs }) =>
     import('./components/SettingsPage').then(m => (
-      <m.SettingsPage providerSettings={inputs.providerSettings?.element} />
+      <m.SettingsPage
+        providerSettings={inputs.providerSettings?.output.element}
+      />
     )),
 });