Migrate NFS pages to HeaderPage

Always render the plugin header for page blueprints and move page-level actions into the Backstage UI header pattern for affected NFS pages.

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

plugins/user-settings/src/alpha.tsx

@@ -37,8 +37,8 @@ const userSettingsPage = PageBlueprint.makeWithOverrides({
       path: '/settings',
       routeRef: settingsRouteRef,
       loader: () =>
-        import('./components/SettingsPage').then(m => (
-          <m.SettingsPage
+        import('./components/SettingsPage/SettingsPage').then(m => (
+          <m.NfsSettingsPage
             providerSettings={inputs.providerSettings?.get(
               coreExtensionData.reactElement,
             )}

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

@@ -18,7 +18,11 @@ 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 {
+  NfsSettingsLayout,
+  SettingsLayout,
+} from '../SettingsLayout/SettingsLayout';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { userSettingsTranslationRef } from '../../translation';
 
@@ -56,3 +60,35 @@ export const DefaultSettingsPage = (props: {
     </SettingsLayout>
   );
 };
+
+export const NfsDefaultSettingsPage = (props: {
+  tabs?: ReactElement<SettingsLayoutRouteProps>[];
+  providerSettings?: JSX.Element;
+}) => {
+  const { providerSettings, tabs } = props;
+  const { t } = useTranslationRef(userSettingsTranslationRef);
+
+  return (
+    <NfsSettingsLayout>
+      <SettingsLayout.Route
+        path="general"
+        title={t('defaultSettingsPage.tabsTitle.general')}
+      >
+        <UserSettingsGeneral />
+      </SettingsLayout.Route>
+      <SettingsLayout.Route
+        path="auth-providers"
+        title={t('defaultSettingsPage.tabsTitle.authProviders')}
+      >
+        <UserSettingsAuthProviders providerSettings={providerSettings} />
+      </SettingsLayout.Route>
+      <SettingsLayout.Route
+        path="feature-flags"
+        title={t('defaultSettingsPage.tabsTitle.featureFlags')}
+      >
+        <UserSettingsFeatureFlags />
+      </SettingsLayout.Route>
+      {tabs}
+    </NfsSettingsLayout>
+  );
+};

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

@@ -22,6 +22,7 @@ import {
   RoutedTabs,
   useSidebarPinState,
 } from '@backstage/core-components';
+import { HeaderPage } from '@backstage/ui';
 import {
   attachComponentData,
   useElementFilter,
@@ -80,6 +81,30 @@ export const SettingsLayout = (props: SettingsLayoutProps) => {
   );
 };
 
+export const NfsSettingsLayout = (props: SettingsLayoutProps) => {
+  const { title, children } = props;
+  const { isMobile } = useSidebarPinState();
+  const { t } = useTranslationRef(userSettingsTranslationRef);
+
+  const routes = useElementFilter(children, elements =>
+    elements
+      .selectByComponentData({
+        key: LAYOUT_ROUTE_DATA_KEY,
+        withStrictError:
+          'Child of SettingsLayout must be an SettingsLayout.Route',
+      })
+      .getElements<SettingsLayoutRouteProps>()
+      .map(child => child.props),
+  );
+
+  return (
+    <>
+      {!isMobile && <HeaderPage title={title ?? t('settingsLayout.title')} />}
+      <RoutedTabs routes={routes} />
+    </>
+  );
+};
+
 attachComponentData(SettingsLayout, LAYOUT_DATA_KEY, true);
 
 SettingsLayout.Route = Route;

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

@@ -15,6 +15,7 @@
  */
 import { useOutlet } from 'react-router-dom';
 import { DefaultSettingsPage } from '../DefaultSettingsPage';
+import { NfsDefaultSettingsPage } from '../DefaultSettingsPage/DefaultSettingsPage';
 import { useElementFilter } from '@backstage/core-plugin-api';
 import {
   SettingsLayoutProps,
@@ -52,3 +53,33 @@ export const SettingsPage = (props: { providerSettings?: JSX.Element }) => {
     </>
   );
 };
+
+export const NfsSettingsPage = (props: { providerSettings?: JSX.Element }) => {
+  const { providerSettings } = props;
+  const outlet = useOutlet();
+  const layout = useElementFilter(outlet, elements =>
+    elements
+      .selectByComponentData({
+        key: LAYOUT_DATA_KEY,
+      })
+      .getElements<SettingsLayoutProps>(),
+  );
+  const tabs = useElementFilter(outlet, elements =>
+    elements
+      .selectByComponentData({
+        key: LAYOUT_ROUTE_DATA_KEY,
+      })
+      .getElements<SettingsLayoutRouteProps>(),
+  );
+
+  return (
+    <>
+      {(layout.length !== 0 && layout) || (
+        <NfsDefaultSettingsPage
+          tabs={tabs}
+          providerSettings={providerSettings}
+        />
+      )}
+    </>
+  );
+};