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

plugins: migrate NFS pages to HeaderPage

plugins/user-settings/src/alpha.tsx

@@ -19,7 +19,9 @@ import {
   createFrontendPlugin,
   PageBlueprint,
   NavItemBlueprint,
+  SubPageBlueprint,
 } from '@backstage/frontend-plugin-api';
+import { Content } from '@backstage/core-components';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { settingsRouteRef } from './plugin';
 
@@ -31,7 +33,30 @@ import { userSettingsTranslationRef as _userSettingsTranslationRef } from './tra
  */
 export const userSettingsTranslationRef = _userSettingsTranslationRef;
 
-const userSettingsPage = PageBlueprint.makeWithOverrides({
+const userSettingsPage = PageBlueprint.make({
+  params: {
+    path: '/settings',
+    routeRef: settingsRouteRef,
+    title: 'Settings',
+  },
+});
+
+const generalSettingsPage = SubPageBlueprint.make({
+  name: 'general',
+  params: {
+    path: 'general',
+    title: 'General',
+    loader: () =>
+      import('./components/General').then(m => (
+        <Content>
+          <m.UserSettingsGeneral />
+        </Content>
+      )),
+  },
+});
+
+const authProvidersSettingsPage = SubPageBlueprint.makeWithOverrides({
+  name: 'auth-providers',
   inputs: {
     providerSettings: createExtensionInput([coreExtensionData.reactElement], {
       singleton: true,
@@ -40,20 +65,36 @@ const userSettingsPage = PageBlueprint.makeWithOverrides({
   },
   factory(originalFactory, { inputs }) {
     return originalFactory({
-      path: '/settings',
-      routeRef: settingsRouteRef,
+      path: 'auth-providers',
+      title: 'Authentication Providers',
       loader: () =>
-        import('./components/SettingsPage').then(m => (
-          <m.SettingsPage
-            providerSettings={inputs.providerSettings?.get(
-              coreExtensionData.reactElement,
-            )}
-          />
+        import('./components/AuthProviders').then(m => (
+          <Content>
+            <m.UserSettingsAuthProviders
+              providerSettings={inputs.providerSettings?.get(
+                coreExtensionData.reactElement,
+              )}
+            />
+          </Content>
         )),
     });
   },
 });
 
+const featureFlagsSettingsPage = SubPageBlueprint.make({
+  name: 'feature-flags',
+  params: {
+    path: 'feature-flags',
+    title: 'Feature Flags',
+    loader: () =>
+      import('./components/FeatureFlags').then(m => (
+        <Content>
+          <m.UserSettingsFeatureFlags />
+        </Content>
+      )),
+  },
+});
+
 /** @alpha */
 export const settingsNavItem = NavItemBlueprint.make({
   params: {
@@ -71,7 +112,13 @@ export default createFrontendPlugin({
   title: 'Settings',
   icon: <SettingsIcon fontSize="inherit" />,
   info: { packageJson: () => import('../package.json') },
-  extensions: [userSettingsPage, settingsNavItem],
+  extensions: [
+    userSettingsPage,
+    generalSettingsPage,
+    authProvidersSettingsPage,
+    featureFlagsSettingsPage,
+    settingsNavItem,
+  ],
   routes: {
     root: settingsRouteRef,
   },

plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx

@@ -18,7 +18,8 @@ import { ReactElement } from 'react';
 import { UserSettingsAuthProviders } from '../AuthProviders';
 import { UserSettingsFeatureFlags } from '../FeatureFlags';
 import { UserSettingsGeneral } from '../General';
-import { SettingsLayout, SettingsLayoutRouteProps } from '../SettingsLayout';
+import { SettingsLayoutRouteProps } from '../SettingsLayout';
+import { SettingsLayout } from '../SettingsLayout/SettingsLayout';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { userSettingsTranslationRef } from '../../translation';