Clean up example app comments and add missing backend plugin (#33440)

Made-with: Cursor

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

packages/app/src/App.tsx

@@ -55,35 +55,6 @@ import { unprocessedEntitiesDevToolsContent } from '@backstage/plugin-catalog-un
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
 import InfoIcon from '@material-ui/icons/Info';
 
-/*
-
-# Notes
-
-TODO:
- - proper createApp
- - connect extensions and plugins, provide method?
- - higher level API for creating standard extensions + higher order framework API for creating those?
- - extension config schema + validation
- - figure out how to resolve configured extension ref to runtime value, e.g. '@backstage/plugin-graphiql#GraphiqlPage'
- - make sure all shorthands work + tests
- - figure out package structure / how to ship, frontend-plugin-api/frontend-app-api
- - figure out routing, useRouteRef in the new system
- - Legacy plugins / interop
- - dynamic updates, runtime API
-
-*/
-
-/* core */
-
-// const discoverPackages = async () => {
-//   // stub for now, deferring package discovery til later
-//   return ['@backstage/plugin-graphiql'];
-// };
-
-/* graphiql package */
-
-/* app.tsx */
-
 /**
  * TechDocs does support the new frontend system so this conversion is not
  * strictly necessary, but it's left here to provide a demo of the utilities for
@@ -91,7 +62,6 @@ TODO:
  */
 const convertedTechdocsPlugin = convertLegacyPlugin(techdocsPlugin, {
   extensions: [
-    // TODO: We likely also need a way to convert an entire <Route> tree similar to collectLegacyRoutes
     convertLegacyPageExtension(TechDocsIndexPage, {
       name: 'index',
       path: '/docs',
@@ -185,60 +155,6 @@ const app = createApp({
   advanced: {
     pluginInfoResolver,
   },
-  /* Handled through config instead */
-  // bindRoutes({ bind }) {
-  //   bind(pagesPlugin.externalRoutes, { pageX: pagesPlugin.routes.pageX });
-  // },
 });
 
-// const legacyApp = createLegacyApp({ plugins: [legacyGraphiqlPlugin] });
-
 export default app.createRoot();
-
-// const routes = (
-//   <FlatRoutes>
-//     {/* <Route path="/" element={<Navigate to="catalog" />} />
-//     <Route path="/catalog" element={<CatalogIndexPage />} />
-//     <Route
-//       path="/catalog/:namespace/:kind/:name"
-//       element={<CatalogEntityPage />}
-//     >
-//       <EntityLayout>
-//         <EntityLayout.Route path="/" title="Overview">
-//           <Grid container spacing={3} alignItems="stretch">
-//             <Grid item md={6} xs={12}>
-//               <EntityAboutCard variant="gridItem" />
-//             </Grid>
-
-//             <Grid item md={4} xs={12}>
-//               <EntityLinksCard />
-//             </Grid>
-//           </Grid>
-//         </EntityLayout.Route>
-
-//         <EntityLayout.Route path="/todos" title="TODOs">
-//           <EntityTodoContent />
-//         </EntityLayout.Route>
-//       </EntityLayout>
-//     </Route>
-//     <Route
-//       path="/catalog-import"
-//       element={
-//           <CatalogImportPage />
-//       }
-//     /> */}
-//     {/* <Route
-//       path="/tech-radar"
-//       element={<TechRadarPage width={1500} height={800} />}
-//     /> */}
-//     <Route path="/graphiql" element={<GraphiQLPage />} />
-//   </FlatRoutes>
-// );
-
-// export default app.createRoot(
-//   <>
-//     {/* <AlertDisplay transientTimeoutMs={2500} />
-//     <OAuthRequestDialog /> */}
-//     <AppRouter>{routes}</AppRouter>
-//   </>,
-// );

packages/app/src/examples/pagesPlugin.tsx

@@ -36,11 +36,6 @@ export const externalPageXRouteRef = createExternalRouteRef({
   defaultTarget: 'pages.pageX',
 });
 export const pageXRouteRef = createRouteRef();
-// const page2RouteRef = createSubRouteRef({
-//   id: 'page2',
-//   parent: page1RouteRef,
-//   path: '/page2',
-// });
 
 function PluginInfo() {
   const node = useAppNode();
@@ -153,14 +148,12 @@ const Page1 = PageBlueprint.make({
       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>}
 
             <div>
@@ -188,7 +181,6 @@ const ExternalPage = PageBlueprint.make({
     loader: async () => {
       const Component = () => {
         const indexLink = useRouteRef(indexRouteRef);
-        // const pageXLink = useRouteRef(pageXRouteRef);
 
         return (
           <div>
@@ -468,13 +460,6 @@ const PermissionGatedPage = PageBlueprint.make({
 
 export const pagesPlugin = createFrontendPlugin({
   pluginId: 'pages',
-  // routes: {
-  //   index: indexRouteRef,
-  //   // reference in config:
-  //   //   'plugin.pages.routes.index'
-  //   //     OR
-  //   //   'page1'
-  // },
   info: {
     packageJson: () => import('../../package.json'),
     manifest: () => import('../../catalog-info.yaml'),

packages/app/src/modules/appModuleNav.tsx

@@ -107,7 +107,7 @@ export const appModuleNav = createFrontendModule({
               text={item.title}
             />
           ));
-          // Skip these
+          // Consume without rendering — these are handled by dedicated sidebar groups
           nav.take('page:home');
           nav.take('page:search');
           return (

packages/backend/package.json

@@ -41,6 +41,7 @@
     "@backstage/plugin-auth-node": "workspace:^",
     "@backstage/plugin-catalog-backend": "workspace:^",
     "@backstage/plugin-catalog-backend-module-backstage-openapi": "workspace:^",
+    "@backstage/plugin-catalog-backend-module-logs": "workspace:^",
     "@backstage/plugin-catalog-backend-module-openapi": "workspace:^",
     "@backstage/plugin-catalog-backend-module-scaffolder-entity-model": "workspace:^",
     "@backstage/plugin-catalog-backend-module-unprocessed": "workspace:^",

packages/backend/src/index.ts

@@ -50,6 +50,7 @@ backend.add(
   import('@backstage/plugin-catalog-backend-module-scaffolder-entity-model'),
 );
 backend.add(import('@backstage/plugin-catalog-backend'));
+backend.add(import('@backstage/plugin-catalog-backend-module-logs'));
 backend.add(import('@backstage/plugin-events-backend'));
 backend.add(import('@backstage/plugin-devtools-backend'));
 backend.add(import('@backstage/plugin-kubernetes-backend'));

yarn.lock

@@ -5008,7 +5008,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@backstage/plugin-catalog-backend-module-logs@workspace:plugins/catalog-backend-module-logs":
+"@backstage/plugin-catalog-backend-module-logs@workspace:^, @backstage/plugin-catalog-backend-module-logs@workspace:plugins/catalog-backend-module-logs":
   version: 0.0.0-use.local
   resolution: "@backstage/plugin-catalog-backend-module-logs@workspace:plugins/catalog-backend-module-logs"
   dependencies:
@@ -31054,6 +31054,7 @@ __metadata:
     "@backstage/plugin-auth-node": "workspace:^"
     "@backstage/plugin-catalog-backend": "workspace:^"
     "@backstage/plugin-catalog-backend-module-backstage-openapi": "workspace:^"
+    "@backstage/plugin-catalog-backend-module-logs": "workspace:^"
     "@backstage/plugin-catalog-backend-module-openapi": "workspace:^"
     "@backstage/plugin-catalog-backend-module-scaffolder-entity-model": "workspace:^"
     "@backstage/plugin-catalog-backend-module-unprocessed": "workspace:^"