chore: fix deprecations in app-next

Signed-off-by: blam <ben@blam.sh>

packages/app-next/src/App.tsx

@@ -26,8 +26,8 @@ import homePlugin, {
 import {
   coreExtensionData,
   createExtension,
-  createApiExtension,
   createExtensionOverrides,
+  ApiBlueprint,
 } from '@backstage/frontend-plugin-api';
 import techdocsPlugin from '@backstage/plugin-techdocs/alpha';
 import appVisualizerPlugin from '@backstage/plugin-app-visualizer';
@@ -40,6 +40,7 @@ import { createApiFactory, configApiRef } from '@backstage/core-plugin-api';
 import {
   ScmAuth,
   ScmIntegrationsApi,
+  scmAuthApiRef,
   scmIntegrationsApiRef,
 } from '@backstage/integration-react';
 import kubernetesPlugin from '@backstage/plugin-kubernetes/alpha';
@@ -77,25 +78,31 @@ TODO:
 const homePageExtension = createExtension({
   name: 'myhomepage',
   attachTo: { id: 'page:home', input: 'props' },
-  output: {
-    children: coreExtensionData.reactElement,
-    title: titleExtensionDataRef,
-  },
+  output: [coreExtensionData.reactElement, titleExtensionDataRef],
   factory() {
-    return { children: homePage, title: 'just a title' };
+    return [
+      coreExtensionData.reactElement(homePage),
+      titleExtensionDataRef('just a title'),
+    ];
   },
 });
 
-const scmAuthExtension = createApiExtension({
-  factory: ScmAuth.createDefaultApiFactory(),
+const scmAuthExtension = ApiBlueprint.make({
+  namespace: scmAuthApiRef.id,
+  params: {
+    factory: ScmAuth.createDefaultApiFactory(),
+  },
 });
 
-const scmIntegrationApi = createApiExtension({
-  factory: createApiFactory({
-    api: scmIntegrationsApiRef,
-    deps: { configApi: configApiRef },
-    factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
-  }),
+const scmIntegrationApi = ApiBlueprint.make({
+  namespace: scmIntegrationsApiRef.id,
+  params: {
+    factory: createApiFactory({
+      api: scmIntegrationsApiRef,
+      deps: { configApi: configApiRef },
+      factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
+    }),
+  },
 });
 
 const collectedLegacyPlugins = convertLegacyApp(

packages/app-next/src/examples/pagesPlugin.tsx

@@ -17,11 +17,11 @@
 import React from 'react';
 import { Link } from '@backstage/core-components';
 import {
-  createPageExtension,
   createFrontendPlugin,
   createRouteRef,
   createExternalRouteRef,
   useRouteRef,
+  PageBlueprint,
 } from '@backstage/frontend-plugin-api';
 import { Route, Routes } from 'react-router-dom';
 
@@ -37,91 +37,97 @@ export const pageXRouteRef = createRouteRef();
 //   path: '/page2',
 // });
 
-const IndexPage = createPageExtension({
+const IndexPage = PageBlueprint.make({
   name: 'index',
-  defaultPath: '/',
-  routeRef: indexRouteRef,
-  loader: async () => {
-    const Component = () => {
-      const page1Link = useRouteRef(page1RouteRef);
-      return (
-        <div>
-          op
-          {page1Link && (
+  params: {
+    defaultPath: '/',
+    routeRef: indexRouteRef,
+    loader: async () => {
+      const Component = () => {
+        const page1Link = useRouteRef(page1RouteRef);
+        return (
+          <div>
+            op
+            {page1Link && (
+              <div>
+                <Link to={page1Link()}>Page 1</Link>
+              </div>
+            )}
             <div>
-              <Link to={page1Link()}>Page 1</Link>
+              <Link to="/home">Home</Link>
+            </div>
+            <div>
+              <Link to="/graphiql">GraphiQL</Link>
+            </div>
+            <div>
+              <Link to="/search">Search</Link>
+            </div>
+            <div>
+              <Link to="/settings">Settings</Link>
             </div>
-          )}
-          <div>
-            <Link to="/home">Home</Link>
           </div>
-          <div>
-            <Link to="/graphiql">GraphiQL</Link>
-          </div>
-          <div>
-            <Link to="/search">Search</Link>
-          </div>
-          <div>
-            <Link to="/settings">Settings</Link>
-          </div>
-        </div>
-      );
-    };
-    return <Component />;
+        );
+      };
+      return <Component />;
+    },
   },
 });
 
-const Page1 = createPageExtension({
+const Page1 = PageBlueprint.make({
   name: 'page1',
-  defaultPath: '/page1',
-  routeRef: page1RouteRef,
-  loader: async () => {
-    const Component = () => {
-      const indexLink = useRouteRef(indexRouteRef);
-      const xLink = useRouteRef(externalPageXRouteRef);
-      // const page2Link = useRouteRef(page2RouteRef);
-
-      return (
-        <div>
-          <h1>This is page 1</h1>
-          {indexLink && <Link to={indexLink()}>Go back</Link>}
-          <Link to="./page2">Page 2</Link>
-          {/* <Link to={page2Link()}>Page 2</Link> */}
-          {xLink && <Link to={xLink()}>Page X</Link>}
+  params: {
+    defaultPath: '/page1',
+    routeRef: page1RouteRef,
+    loader: async () => {
+      const Component = () => {
+        const indexLink = useRouteRef(indexRouteRef);
+        const xLink = useRouteRef(externalPageXRouteRef);
+        // const page2Link = useRouteRef(page2RouteRef);
 
+        return (
           <div>
-            Sub-page content:
+            <h1>This is page 1</h1>
+            {indexLink && <Link to={indexLink()}>Go back</Link>}
+            <Link to="./page2">Page 2</Link>
+            {/* <Link to={page2Link()}>Page 2</Link> */}
+            {xLink && <Link to={xLink()}>Page X</Link>}
+
             <div>
-              <Routes>
-                <Route path="/" element={<h2>This is also page 1</h2>} />
-                <Route path="/page2" element={<h2>This is page 2</h2>} />
-              </Routes>
+              Sub-page content:
+              <div>
+                <Routes>
+                  <Route path="/" element={<h2>This is also page 1</h2>} />
+                  <Route path="/page2" element={<h2>This is page 2</h2>} />
+                </Routes>
+              </div>
             </div>
           </div>
-        </div>
-      );
-    };
-    return <Component />;
+        );
+      };
+      return <Component />;
+    },
   },
 });
 
-const ExternalPage = createPageExtension({
+const ExternalPage = PageBlueprint.make({
   name: 'pageX',
-  defaultPath: '/pageX',
-  routeRef: pageXRouteRef,
-  loader: async () => {
-    const Component = () => {
-      const indexLink = useRouteRef(indexRouteRef);
-      // const pageXLink = useRouteRef(pageXRouteRef);
+  params: {
+    defaultPath: '/pageX',
+    routeRef: pageXRouteRef,
+    loader: async () => {
+      const Component = () => {
+        const indexLink = useRouteRef(indexRouteRef);
+        // const pageXLink = useRouteRef(pageXRouteRef);
 
-      return (
-        <div>
-          <h1>This is page X</h1>
-          {indexLink && <Link to={indexLink()}>Go back</Link>}
-        </div>
-      );
-    };
-    return <Component />;
+        return (
+          <div>
+            <h1>This is page X</h1>
+            {indexLink && <Link to={indexLink()}>Go back</Link>}
+          </div>
+        );
+      };
+      return <Component />;
+    },
   },
 });
 

packages/app-next/src/overrides/SignInPage.tsx

@@ -17,13 +17,16 @@
 import React from 'react';
 import { SignInPage } from '@backstage/core-components';
 import {
+  SignInPageBlueprint,
   createExtensionOverrides,
-  createSignInPageExtension,
 } from '@backstage/frontend-plugin-api';
 
-const signInPage = createSignInPageExtension({
+const signInPage = SignInPageBlueprint.make({
   name: 'guest',
-  loader: async () => props => <SignInPage {...props} providers={['guest']} />,
+  params: {
+    loader: async () => props =>
+      <SignInPage {...props} providers={['guest']} />,
+  },
 });
 
 export const signInPageOverrides = createExtensionOverrides({