dev-utils,test-utils,app: update to use app-defaults

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/app/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "bundled": true,
   "dependencies": {
+    "@backstage/app-defaults": "^0.1.0",
     "@backstage/catalog-model": "^0.9.5",
     "@backstage/cli": "^0.8.0",
     "@backstage/core-app-api": "^0.1.18",

packages/app/src/App.tsx

@@ -26,12 +26,12 @@ import {
   RELATION_PART_OF,
   RELATION_PROVIDES_API,
 } from '@backstage/catalog-model';
-import { createApp, FlatRoutes } from '@backstage/core-app-api';
+import { createApp } from '@backstage/app-defaults';
+import { FlatRoutes } from '@backstage/core-app-api';
 import {
   AlertDisplay,
   OAuthRequestDialog,
   SignInPage,
-  withDefaults,
 } from '@backstage/core-components';
 import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
 import {
@@ -87,46 +87,44 @@ import * as plugins from './plugins';
 
 import { techDocsPage } from './components/techdocs/TechDocsPage';
 
-const app = createApp(
-  withDefaults({
-    apis,
-    plugins: Object.values(plugins),
-    icons: {
-      // Custom icon example
-      alert: AlarmIcon,
+const app = createApp({
+  apis,
+  plugins: Object.values(plugins),
+  icons: {
+    // Custom icon example
+    alert: AlarmIcon,
+  },
+  components: {
+    SignInPage: props => {
+      return (
+        <SignInPage
+          {...props}
+          providers={['guest', 'custom', ...providers]}
+          title="Select a sign-in method"
+          align="center"
+        />
+      );
     },
-    components: {
-      SignInPage: props => {
-        return (
-          <SignInPage
-            {...props}
-            providers={['guest', 'custom', ...providers]}
-            title="Select a sign-in method"
-            align="center"
-          />
-        );
-      },
-    },
-    bindRoutes({ bind }) {
-      bind(catalogPlugin.externalRoutes, {
-        createComponent: scaffolderPlugin.routes.root,
-        viewTechDoc: techdocsPlugin.routes.docRoot,
-      });
-      bind(catalogGraphPlugin.externalRoutes, {
-        catalogEntity: catalogPlugin.routes.catalogEntity,
-      });
-      bind(apiDocsPlugin.externalRoutes, {
-        createComponent: scaffolderPlugin.routes.root,
-      });
-      bind(explorePlugin.externalRoutes, {
-        catalogEntity: catalogPlugin.routes.catalogEntity,
-      });
-      bind(scaffolderPlugin.externalRoutes, {
-        registerComponent: catalogImportPlugin.routes.importPage,
-      });
-    },
-  }),
-);
+  },
+  bindRoutes({ bind }) {
+    bind(catalogPlugin.externalRoutes, {
+      createComponent: scaffolderPlugin.routes.root,
+      viewTechDoc: techdocsPlugin.routes.docRoot,
+    });
+    bind(catalogGraphPlugin.externalRoutes, {
+      catalogEntity: catalogPlugin.routes.catalogEntity,
+    });
+    bind(apiDocsPlugin.externalRoutes, {
+      createComponent: scaffolderPlugin.routes.root,
+    });
+    bind(explorePlugin.externalRoutes, {
+      catalogEntity: catalogPlugin.routes.catalogEntity,
+    });
+    bind(scaffolderPlugin.externalRoutes, {
+      registerComponent: catalogImportPlugin.routes.importPage,
+    });
+  },
+});
 
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();

packages/dev-utils/package.json

@@ -29,6 +29,7 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
+    "@backstage/app-defaults": "^0.1.0",
     "@backstage/core-app-api": "^0.1.18",
     "@backstage/core-components": "^0.7.1",
     "@backstage/core-plugin-api": "^0.1.11",

packages/dev-utils/src/devApp/render.tsx

@@ -32,7 +32,6 @@ import {
   SidebarItem,
   SidebarPage,
   SidebarSpacer,
-  withDefaults,
 } from '@backstage/core-components';
 
 import {
@@ -48,7 +47,8 @@ import {
   BackstagePlugin,
 } from '@backstage/core-plugin-api';
 
-import { createApp, FlatRoutes } from '@backstage/core-app-api';
+import { createApp } from '@backstage/app-defaults';
+import { FlatRoutes } from '@backstage/core-app-api';
 
 const GatheringRoute: (props: {
   path: string;
@@ -174,22 +174,20 @@ export class DevAppBuilder {
       );
     }
 
-    const app = createApp(
-      withDefaults({
-        apis,
-        plugins: this.plugins,
-        themes: this.themes,
-        bindRoutes: ({ bind }) => {
-          for (const plugin of this.plugins ?? []) {
-            const targets: Record<string, RouteRef<any>> = {};
-            for (const routeKey of Object.keys(plugin.externalRoutes)) {
-              targets[routeKey] = dummyRouteRef;
-            }
-            bind(plugin.externalRoutes, targets);
+    const app = createApp({
+      apis,
+      plugins: this.plugins,
+      themes: this.themes,
+      bindRoutes: ({ bind }) => {
+        for (const plugin of this.plugins ?? []) {
+          const targets: Record<string, RouteRef<any>> = {};
+          for (const routeKey of Object.keys(plugin.externalRoutes)) {
+            targets[routeKey] = dummyRouteRef;
           }
-        },
-      }),
-    );
+          bind(plugin.externalRoutes, targets);
+        }
+      },
+    });
 
     const AppProvider = app.getProvider();
     const AppRouter = app.getRouter();

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -18,7 +18,7 @@ import React, { ComponentType, ReactNode, ReactElement } from 'react';
 import { MemoryRouter } from 'react-router';
 import { Route } from 'react-router-dom';
 import { lightTheme } from '@backstage/theme';
-import { createApp } from '@backstage/core-app-api';
+import { createSpecializedApp } from '@backstage/core-app-api';
 import {
   BootErrorPageProps,
   RouteRef,
@@ -30,6 +30,28 @@ import { RenderResult } from '@testing-library/react';
 import { renderWithEffects } from './testingLibrary';
 import { mockApis } from './mockApis';
 
+const mockIcons = {
+  'kind:api': () => <span />,
+  'kind:component': () => <span />,
+  'kind:domain': () => <span />,
+  'kind:group': () => <span />,
+  'kind:location': () => <span />,
+  'kind:system': () => <span />,
+  'kind:user': () => <span />,
+
+  brokenImage: () => <span />,
+  catalog: () => <span />,
+  chat: () => <span />,
+  dashboard: () => <span />,
+  docs: () => <span />,
+  email: () => <span />,
+  github: () => <span />,
+  group: () => <span />,
+  help: () => <span />,
+  user: () => <span />,
+  warning: () => <span />,
+};
+
 const ErrorBoundaryFallback = ({ error }: { error: Error }) => {
   throw new Error(`Reached ErrorBoundaryFallback Page with error, ${error}`);
 };
@@ -90,7 +112,7 @@ export function wrapInTestApp(
   const { routeEntries = ['/'] } = options;
   const boundRoutes = new Map<ExternalRouteRef, RouteRef>();
 
-  const app = createApp({
+  const app = createSpecializedApp({
     apis: mockApis,
     // Bit of a hack to make sure that the default config loader isn't used
     // as that would force every single test to wait for config loading.
@@ -104,6 +126,7 @@ export function wrapInTestApp(
         <MemoryRouter initialEntries={routeEntries} children={children} />
       ),
     },
+    icons: mockIcons,
     plugins: [],
     themes: [
       {