Merge pull request #33451 from backstage/rugvip/create-app-fixes

create-app: improve next template sidebar, nav wiring, and examples

.changeset/fix-sidebar-settings-nav.md

@@ -0,0 +1,5 @@
+---
+'@backstage/create-app': patch
+---
+
+Various fixes for the `create-app` template: reorganizing sidebar items, removing redundant config and code, and adding a documentation example.

.patches/pr-33451.txt

@@ -0,0 +1 @@
+Various fixes and improvements for the `@backstage/create-app` template.

packages/create-app/templates/next-app/app-config.yaml.hbs

@@ -6,12 +6,6 @@ app:
   packages: all
 
   extensions:
-    # Disable the nav items that we're manually rendering in packages/app/src/modules/nav/Sidebar.tsx
-    - nav-item:search: false
-    - nav-item:user-settings: false
-    - nav-item:catalog: false
-    - nav-item:scaffolder: false
-
     # Configure the catalog index page to be the root page, this is normally mounted on /catalog
     - page:catalog:
         config:

packages/create-app/templates/next-app/examples/entities.yaml

@@ -12,6 +12,8 @@ apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: example-website
+  annotations:
+    backstage.io/techdocs-ref: dir:./example-docs
 spec:
   type: website
   lifecycle: experimental

packages/create-app/templates/next-app/examples/example-docs/docs/index.md

@@ -0,0 +1,5 @@
+# Example TechDocs page
+
+This is an example TechDocs page!
+
+The source of this documentation for the `example-website` component is found in the `examples/example-docs` directory, which is referenced from `examples/entities.yaml`. Typically the `docs` directory would live alongside the `catalog-info.yaml` file of a component instead, but in this case it is separated out to avoid cluttering the examples directory.

packages/create-app/templates/next-app/examples/example-docs/mkdocs.yml

@@ -0,0 +1,4 @@
+site_name: example-website
+docs_dir: docs
+plugins:
+  - techdocs-core

packages/create-app/templates/next-app/packages/app/package.json.hbs

@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@backstage/cli": "^{{ version '@backstage/cli'}}",
-    "@backstage/core-compat-api": "^{{ version '@backstage/core-compat-api'}}",
     "@backstage/core-components": "^{{ version '@backstage/core-components'}}",
     "@backstage/core-plugin-api": "^{{ version '@backstage/core-plugin-api'}}",
     "@backstage/frontend-defaults": "^{{ version '@backstage/frontend-defaults'}}",

packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx

@@ -6,16 +6,12 @@ import {
   SidebarScrollWrapper,
   SidebarSpace,
 } from '@backstage/core-components';
-import { compatWrapper } from '@backstage/core-compat-api';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarLogo } from './SidebarLogo';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 import { SidebarSearchModal } from '@backstage/plugin-search';
-import {
-  UserSettingsSignInAvatar,
-  Settings as SidebarSettings,
-} from '@backstage/plugin-user-settings';
+import { UserSettingsSignInAvatar } from '@backstage/plugin-user-settings';
 import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
 
 export const SidebarContent = NavContentBlueprint.make({
@@ -24,9 +20,11 @@ export const SidebarContent = NavContentBlueprint.make({
       const nav = navItems.withComponent(item => (
         <SidebarItem icon={() => item.icon} to={item.href} text={item.title} />
       ));
+
       // Skipped items
-      nav.take('page:search');
-      return compatWrapper(
+      nav.take('page:search'); // Using search modal instead
+
+      return (
         <Sidebar>
           <SidebarLogo />
           <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
@@ -50,9 +48,10 @@ export const SidebarContent = NavContentBlueprint.make({
             icon={<UserSettingsSignInAvatar />}
             to="/settings"
           >
-            <SidebarSettings />
+            {nav.take('page:app-visualizer')}
+            {nav.take('page:user-settings')}
           </SidebarGroup>
-        </Sidebar>,
+        </Sidebar>
       );
     },
   },