chore: app runs correctly 🎉

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: blam <ben@blam.sh>

packages/app-next/package.json

@@ -24,6 +24,7 @@
     "@backstage/frontend-plugin-api": "workspace:^",
     "@backstage/integration-react": "workspace:^",
     "@backstage/plugin-api-docs": "workspace:^",
+    "@backstage/plugin-app": "workspace:^",
     "@backstage/plugin-app-visualizer": "workspace:^",
     "@backstage/plugin-auth-react": "workspace:^",
     "@backstage/plugin-catalog": "workspace:^",

packages/frontend-app-api/src/wiring/createApp.tsx

@@ -47,18 +47,12 @@ import {
   fetchApiRef,
 } from '@backstage/core-plugin-api';
 import { getAvailableFeatures } from './discovery';
-import {
-  ApiFactoryRegistry,
-  ApiProvider,
-  ApiResolver,
-} from '@backstage/core-app-api';
+import { ApiFactoryRegistry, ApiResolver } from '@backstage/core-app-api';
 
 // TODO: Get rid of all of these
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { isProtectedApp } from '../../../core-app-api/src/app/isProtectedApp';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
-import { AppThemeProvider } from '../../../core-app-api/src/app/AppThemeProvider';
-// eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { AppIdentityProxy } from '../../../core-app-api/src/apis/implementations/IdentityApi/AppIdentityProxy';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { defaultConfigLoaderSync } from '../../../core-app-api/src/app/defaultConfigLoader';
@@ -361,15 +355,11 @@ export function createSpecializedApp(options?: {
     .instance!.getData(coreExtensionData.reactElement);
 
   const AppComponent = () => (
-    <ApiProvider apis={apiHolder}>
-      <AppThemeProvider>
-        <InternalAppContext.Provider
-          value={{ appIdentityProxy, routeObjects: routeInfo.routeObjects }}
-        >
-          {rootEl}
-        </InternalAppContext.Provider>
-      </AppThemeProvider>
-    </ApiProvider>
+    <InternalAppContext.Provider
+      value={{ appIdentityProxy, routeObjects: routeInfo.routeObjects }}
+    >
+      {rootEl}
+    </InternalAppContext.Provider>
   );
 
   return {

packages/frontend-plugin-api/src/blueprints/IconBundleBlueprint.ts

@@ -25,7 +25,7 @@ const iconsDataRef = createExtensionDataRef<{
 export const IconBundleBlueprint = createExtensionBlueprint({
   kind: 'icon-bundle',
   namespace: 'app',
-  attachTo: { id: 'api:icons', input: 'icons' },
+  attachTo: { id: 'api:app/icons', input: 'icons' },
   output: [iconsDataRef],
   config: {
     schema: {

packages/frontend-plugin-api/src/blueprints/ThemeBlueprint.ts

@@ -29,7 +29,7 @@ const themeDataRef = createExtensionDataRef<AppTheme>().with({
 export const ThemeBlueprint = createExtensionBlueprint({
   kind: 'theme',
   namespace: 'app',
-  attachTo: { id: 'api:app-theme', input: 'themes' },
+  attachTo: { id: 'api:app/app-theme', input: 'themes' },
   output: [themeDataRef],
   dataRefs: {
     theme: themeDataRef,

packages/frontend-plugin-api/src/blueprints/TranslationBlueprint.ts

@@ -28,7 +28,7 @@ const translationDataRef = createExtensionDataRef<
  */
 export const TranslationBlueprint = createExtensionBlueprint({
   kind: 'translation',
-  attachTo: { id: 'api:translations', input: 'translations' },
+  attachTo: { id: 'api:app/translations', input: 'translations' },
   output: [translationDataRef],
   dataRefs: {
     translation: translationDataRef,

packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx

@@ -35,7 +35,7 @@ export function createComponentExtension<TProps extends {}>(options: {
     kind: 'component',
     namespace: options.ref.id,
     name: options.name,
-    attachTo: { id: 'api:components', input: 'components' },
+    attachTo: { id: 'api:app/components', input: 'components' },
     disabled: options.disabled,
     output: [createComponentExtension.componentDataRef],
     factory() {

plugins/app/src/extensions/App.tsx

@@ -21,6 +21,10 @@ import {
   createExtension,
   createExtensionInput,
 } from '@backstage/frontend-plugin-api';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { ApiProvider } from '../../../../packages/core-app-api/src';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { AppThemeProvider } from '../../../../packages/core-app-api/src/app/AppThemeProvider';
 
 export const App = createExtension({
   namespace: 'app',
@@ -31,11 +35,17 @@ export const App = createExtension({
     }),
   },
   output: [coreExtensionData.reactElement],
-  factory: ({ node, inputs }) => [
-    coreExtensionData.reactElement(
-      <ExtensionBoundary node={node}>
-        {inputs.root.get(coreExtensionData.reactElement)}
-      </ExtensionBoundary>,
-    ),
-  ],
+  factory: ({ node, apis, inputs }) => {
+    return [
+      coreExtensionData.reactElement(
+        <ApiProvider apis={apis}>
+          <AppThemeProvider>
+            <ExtensionBoundary node={node}>
+              {inputs.root.get(coreExtensionData.reactElement)}
+            </ExtensionBoundary>
+          </AppThemeProvider>
+        </ApiProvider>,
+      ),
+    ];
+  },
 });

yarn.lock

@@ -4684,7 +4684,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@backstage/plugin-app@^0.0.0, @backstage/plugin-app@workspace:plugins/app":
+"@backstage/plugin-app@^0.0.0, @backstage/plugin-app@workspace:^, @backstage/plugin-app@workspace:plugins/app":
   version: 0.0.0-use.local
   resolution: "@backstage/plugin-app@workspace:plugins/app"
   dependencies:
@@ -26842,6 +26842,7 @@ __metadata:
     "@backstage/frontend-plugin-api": "workspace:^"
     "@backstage/integration-react": "workspace:^"
     "@backstage/plugin-api-docs": "workspace:^"
+    "@backstage/plugin-app": "workspace:^"
     "@backstage/plugin-app-visualizer": "workspace:^"
     "@backstage/plugin-auth-react": "workspace:^"
     "@backstage/plugin-catalog": "workspace:^"