Merge pull request #33389 from backstage/rugvip/nfs-header-page-migration

plugins: migrate NFS pages to HeaderPage

packages/app/src/modules/appModuleNav.tsx

@@ -27,15 +27,11 @@ import {
 } from '@backstage/core-components';
 import SearchIcon from '@material-ui/icons/Search';
 import MenuIcon from '@material-ui/icons/Menu';
-import BuildIcon from '@material-ui/icons/Build';
 import { createFrontendModule } from '@backstage/frontend-plugin-api';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarSearchModal } from '@backstage/plugin-search';
 import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
-import {
-  Settings,
-  UserSettingsSignInAvatar,
-} from '@backstage/plugin-user-settings';
+import { UserSettingsSignInAvatar } from '@backstage/plugin-user-settings';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useSidebarLogoStyles = makeStyles({
@@ -111,7 +107,9 @@ export const appModuleNav = createFrontendModule({
               text={item.title}
             />
           ));
-          nav.take('page:home'); // Skip home
+          // Skip these
+          nav.take('page:home');
+          nav.take('page:search');
           return (
             <Sidebar>
               <SidebarLogo />
@@ -136,8 +134,8 @@ export const appModuleNav = createFrontendModule({
                 to="/settings"
               >
                 <NotificationsSidebarItem />
-                <SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
-                <Settings />
+                {nav.take('page:devtools')}
+                {nav.take('page:user-settings')}
               </SidebarGroup>
             </Sidebar>
           );

packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx

@@ -75,6 +75,9 @@ export const PageBlueprint = createExtensionBlueprint({
     const icon = params.icon;
     const pluginId = node.spec.plugin.pluginId;
     const noHeader = params.noHeader ?? false;
+    const resolvedTitle =
+      title ?? node.spec.plugin.title ?? node.spec.plugin.pluginId;
+    const resolvedIcon = icon ?? node.spec.plugin.icon;
 
     yield coreExtensionData.routePath(config.path ?? params.path);
     if (params.loader) {
@@ -85,8 +88,8 @@ export const PageBlueprint = createExtensionBlueprint({
 
         return (
           <PageLayout
-            title={title ?? node.spec.plugin.title ?? node.spec.plugin.pluginId}
-            icon={icon ?? node.spec.plugin.icon}
+            title={resolvedTitle}
+            icon={resolvedIcon}
             noHeader={noHeader}
             headerActions={headerActions}
           >
@@ -117,8 +120,8 @@ export const PageBlueprint = createExtensionBlueprint({
 
         return (
           <PageLayout
-            title={title}
-            icon={icon}
+            title={resolvedTitle}
+            icon={resolvedIcon}
             tabs={tabs}
             headerActions={headerActions}
           >
@@ -147,7 +150,11 @@ export const PageBlueprint = createExtensionBlueprint({
         const headerActionsApi = useApi(pluginHeaderActionsApiRef);
         const headerActions = headerActionsApi.getPluginHeaderActions(pluginId);
         return (
-          <PageLayout title={title} icon={icon} headerActions={headerActions} />
+          <PageLayout
+            title={resolvedTitle}
+            icon={resolvedIcon}
+            headerActions={headerActions}
+          />
         );
       };
       yield coreExtensionData.reactElement(<PageContent />);