Merge pull request #4346 from backstage/rugvip/scaffort

scaffolder: migrate to new composability API

.changeset/chilled-toys-raise.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Migrated to new composability API, exporting the plugin as `scaffolderPlugin`. The template list page (`/create`) is exported as the `TemplateIndexPage` extension, and the templating page itself is exported as `TemplatePage`.

.changeset/moody-apricots-warn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/dev-utils': patch
+---
+
+Added `path` option to `addPage` that can be used to set a specific path for the page rather than a generated one. Also omit sidebar item altogether if `title` option is not set.

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

@@ -34,16 +34,16 @@ import {
   attachComponentData,
 } from '@backstage/core';
 import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
-import { Outlet } from 'react-router';
 
 const GatheringRoute: (props: {
   path: string;
-  children: JSX.Element;
-}) => JSX.Element = () => <Outlet />;
+  element: JSX.Element;
+}) => JSX.Element = ({ element }) => element;
 
 attachComponentData(GatheringRoute, 'core.gatherMountPoints', true);
 
 type RegisterPageOptions = {
+  path?: string;
   element: JSX.Element;
   title?: string;
   icon?: IconComponent;
@@ -93,21 +93,30 @@ class DevAppBuilder {
     return this;
   }
 
-  addPage({ element, title, icon }: RegisterPageOptions): DevAppBuilder {
-    const path = `/page-${this.routes.length + 1}`;
-    this.sidebarItems.push(
-      <SidebarItem
-        key={path}
-        to={path}
-        text={title ?? path}
-        icon={icon ?? BookmarkIcon}
-      />,
-    );
+  /**
+   * Adds a page component along with accompanying sidebar item.
+   *
+   * If no path is provided one will be generated.
+   * If no title is provided, no sidebar item will be created.
+   */
+  addPage(opts: RegisterPageOptions): DevAppBuilder {
+    const path = opts.path ?? `/page-${this.routes.length + 1}`;
+    if (opts.title) {
+      this.sidebarItems.push(
+        <SidebarItem
+          key={path}
+          to={path}
+          text={opts.title}
+          icon={opts.icon ?? BookmarkIcon}
+        />,
+      );
+    }
     this.routes.push(
-      <GatheringRoute key={path} path={path} children={element} />,
+      <GatheringRoute key={path} path={path} element={opts.element} />,
     );
     return this;
   }
+
   /**
    * Build a DevApp component using the resources registered so far
    */

plugins/scaffolder/dev/index.tsx

@@ -14,7 +14,32 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { discoveryApiRef } from '@backstage/core';
+import { CatalogClient } from '@backstage/catalog-client';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { TemplateIndexPage, TemplatePage } from '../src/plugin';
+import { ScaffolderApi, scaffolderApiRef } from '../src';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp()
+  .registerApi({
+    api: catalogApiRef,
+    deps: { discoveryApi: discoveryApiRef },
+    factory: ({ discoveryApi }) => new CatalogClient({ discoveryApi }),
+  })
+  .registerApi({
+    api: scaffolderApiRef,
+    deps: { discoveryApi: discoveryApiRef },
+    factory: ({ discoveryApi }) => new ScaffolderApi({ discoveryApi }),
+  })
+  .addPage({
+    path: '/create',
+    title: 'Create',
+    element: <TemplateIndexPage />,
+  })
+  .addPage({
+    path: '/create/:templateName',
+    element: <TemplatePage />,
+  })
+  .render();

plugins/scaffolder/package.json

@@ -54,6 +54,7 @@
     "@backstage/cli": "^0.5.0",
     "@backstage/dev-utils": "^0.1.8",
     "@backstage/test-utils": "^0.1.6",
+    "@backstage/catalog-client": "^0.3.5",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^10.4.1",
     "@testing-library/user-event": "^12.0.7",

plugins/scaffolder/src/index.ts

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  scaffolderPlugin,
+  scaffolderPlugin as plugin,
+  TemplateIndexPage,
+  TemplatePage,
+} from './plugin';
 export { ScaffolderApi, scaffolderApiRef } from './api';
 export { rootRoute, templateRoute } from './routes';

plugins/scaffolder/src/plugin.test.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { scaffolderPlugin } from './plugin';
 
 describe('scaffolder', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(scaffolderPlugin).toBeDefined();
   });
 });

plugins/scaffolder/src/plugin.ts

@@ -18,13 +18,14 @@ import {
   createPlugin,
   createApiFactory,
   discoveryApiRef,
+  createRoutableExtension,
 } from '@backstage/core';
-import { ScaffolderPage } from './components/ScaffolderPage';
-import { TemplatePage } from './components/TemplatePage';
+import { ScaffolderPage as ScaffolderPageComponent } from './components/ScaffolderPage';
+import { TemplatePage as TemplatePageComponent } from './components/TemplatePage';
 import { rootRoute, templateRoute } from './routes';
 import { scaffolderApiRef, ScaffolderApi } from './api';
 
-export const plugin = createPlugin({
+export const scaffolderPlugin = createPlugin({
   id: 'scaffolder',
   apis: [
     createApiFactory({
@@ -34,7 +35,27 @@ export const plugin = createPlugin({
     }),
   ],
   register({ router }) {
-    router.addRoute(rootRoute, ScaffolderPage);
-    router.addRoute(templateRoute, TemplatePage);
+    router.addRoute(rootRoute, ScaffolderPageComponent);
+    router.addRoute(templateRoute, TemplatePageComponent);
+  },
+  routes: {
+    templateIndex: rootRoute,
+    template: templateRoute,
   },
 });
+
+export const TemplateIndexPage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/ScaffolderPage').then(m => m.ScaffolderPage),
+    mountPoint: rootRoute,
+  }),
+);
+
+export const TemplatePage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/TemplatePage').then(m => m.TemplatePage),
+    mountPoint: templateRoute,
+  }),
+);

plugins/scaffolder/src/routes.ts

@@ -16,12 +16,11 @@
 import { createRouteRef } from '@backstage/core';
 
 export const rootRoute = createRouteRef({
-  icon: () => null,
   path: '/create',
   title: 'Create new entity',
 });
+
 export const templateRoute = createRouteRef({
-  icon: () => null,
   path: '/create/:templateName',
   title: 'Entity creation',
 });