core-app-api, create-app, dev-utils: updates to use withDefaults

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

packages/core-app-api/src/app/createApp.tsx

@@ -98,10 +98,9 @@ export function createApp(options?: AppOptions) {
   if (missingRequiredComponents.length > 0) {
     // eslint-disable-next-line no-console
     console.warn(
-      'DEPRECATION WARNING: The createApp options will soon require a minimal set of ' +
-        'components to be provided in the components option. These components can be ' +
-        'created using defaultAppComponents from @backstage/core-components and ' +
-        'passed along like this: createApp({ components: defaultAppComponents() }). ' +
+      'DEPRECATION WARNING: The createApp options will soon require a minimal set of components to ' +
+        'be provided. You can use the default components by using withDefaults from @backstage/core-components ' +
+        'like this: createApp(withDefaults({ ... })), or you can provide the components yourself. ' +
         `The following components are missing: ${missingRequiredComponents.join(
           ', ',
         )}`,
@@ -115,9 +114,9 @@ export function createApp(options?: AppOptions) {
   if (missingIconKeys.length > 0) {
     // eslint-disable-next-line no-console
     console.warn(
-      'DEPRECATION WARNING: The createApp options will soon require all app icons to be provided.' +
-        'These icons can be created using defaultAppIcons from @backstage/core-components ' +
-        'and then passed along like this: createApp({ icons: ...defaultAppIcons() })' +
+      'DEPRECATION WARNING: The createApp options will soon require a minimal set of icons to ' +
+        'be provided. You can use the default icons by using withDefaults from @backstage/core-components ' +
+        'like this: createApp(withDefaults({ ... })), or you can provide the icons yourself. ' +
         `The following icons are missing: ${missingIconKeys.join(', ')}`,
     );
   }
@@ -125,9 +124,9 @@ export function createApp(options?: AppOptions) {
   if (!options?.themes) {
     // eslint-disable-next-line no-console
     console.warn(
-      'DEPRECATION WARNING: The createApp options will soon require themes to be provided. ' +
-        'Themes can be created using defaultAppThemes from @backstage/core-components ' +
-        'and then passed along like this: createApp({ theme: defaultAppThemes() })',
+      'DEPRECATION WARNING: The createApp options will soon require the themes to be provided. ' +
+        'You can use the default themes by using withDefaults from @backstage/core-components ' +
+        'like this: createApp(withDefaults({ ... })), or you can provide the themes yourself. ',
     );
   }
 

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -25,25 +25,30 @@ import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
 import { Root } from './components/Root';
 
-import { AlertDisplay, defaultAppComponents, OAuthRequestDialog } from '@backstage/core-components';
+import {
+  AlertDisplay,
+  withDefaults,
+  OAuthRequestDialog,
+} from '@backstage/core-components';
 import { createApp, FlatRoutes } from '@backstage/core-app-api';
 
-const app = createApp({
-  apis,
-  components: defaultAppComponents(),
-  bindRoutes({ bind }) {
-    bind(catalogPlugin.externalRoutes, {
-      createComponent: scaffolderPlugin.routes.root,
-      viewTechDoc: techdocsPlugin.routes.docRoot,
-    });
-    bind(apiDocsPlugin.externalRoutes, {
-      createComponent: scaffolderPlugin.routes.root,
-    });
-    bind(scaffolderPlugin.externalRoutes, {
-      registerComponent: catalogImportPlugin.routes.importPage,
-    });
-  },
-});
+const app = createApp(
+  withDefaults({
+    apis,
+    bindRoutes({ bind }) {
+      bind(catalogPlugin.externalRoutes, {
+        createComponent: scaffolderPlugin.routes.root,
+        viewTechDoc: techdocsPlugin.routes.docRoot,
+      });
+      bind(apiDocsPlugin.externalRoutes, {
+        createComponent: scaffolderPlugin.routes.root,
+      });
+      bind(scaffolderPlugin.externalRoutes, {
+        registerComponent: catalogImportPlugin.routes.importPage,
+      });
+    },
+  }),
+);
 
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();

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

@@ -27,12 +27,12 @@ import { Route } from 'react-router';
 
 import {
   AlertDisplay,
-  defaultAppComponents,
   OAuthRequestDialog,
   Sidebar,
   SidebarItem,
   SidebarPage,
   SidebarSpacer,
+  withDefaults,
 } from '@backstage/core-components';
 
 import {
@@ -174,21 +174,22 @@ export class DevAppBuilder {
       );
     }
 
-    const app = createApp({
-      apis,
-      plugins: this.plugins,
-      themes: this.themes,
-      components: defaultAppComponents(),
-      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;
+    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);
           }
-          bind(plugin.externalRoutes, targets);
-        }
-      },
-    });
+        },
+      }),
+    );
 
     const AppProvider = app.getProvider();
     const AppRouter = app.getRouter();