use outlet to render extra tabs instead of tabs prop

Signed-off-by: Yousif Al-Raheem <yousifalraheem@gmail.com>

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

@@ -16,7 +16,14 @@
 
 import React from 'react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
-import { SettingsPage, SettingsTab } from './SettingsPage';
+import { SettingsPage } from './SettingsPage';
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useOutlet: jest.fn().mockReturnValue(undefined),
+}));
+
+import { useOutlet, Route } from 'react-router';
 
 describe('<SettingsPage />', () => {
   it('should render the settings page with 3 tabs', async () => {
@@ -29,15 +36,41 @@ describe('<SettingsPage />', () => {
   });
 
   it('should render the settings page with 4 tabs when extra tabs are provided', async () => {
-    const extraTabs: SettingsTab[] = [
-      { title: 'Advanced', content: <div>advanced content</div> },
-    ];
+    const advancedTabRoute = (
+      <>
+        <Route path="/advanced" element={<div>Advanced settings</div>}>
+          Advanced
+        </Route>
+      </>
+    );
+    (useOutlet as jest.Mock).mockReturnValueOnce(advancedTabRoute);
     const { container } = await renderWithEffects(
-      wrapInTestApp(<SettingsPage tabs={extraTabs} />),
+      wrapInTestApp(<SettingsPage />),
     );
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
     expect(tabs).toHaveLength(4);
-    expect(tabs[3].textContent).toEqual(extraTabs[0].title);
+    expect(tabs[3].textContent).toEqual('Advanced');
+  });
+
+  it('should throw error if non compliant route is passed to settings routes', async () => {
+    const advancedTabRoute = (
+      <>
+        <Route path="/advanced" element={<div>Advanced settings</div>}>
+          Advanced
+        </Route>
+        <div>Non compliant element</div>
+      </>
+    );
+    (useOutlet as jest.Mock).mockReturnValueOnce(advancedTabRoute);
+    let error: Error;
+    try {
+      await renderWithEffects(wrapInTestApp(<SettingsPage />));
+    } catch (err) {
+      error = err;
+    }
+    expect(error!.message).toEqual(
+      expect.stringContaining('Invalid element passed'),
+    );
   });
 });

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

@@ -20,23 +20,30 @@ import {
   SidebarPinStateContext,
   TabbedLayout,
 } from '@backstage/core-components';
-import React, { useContext } from 'react';
+import React, { useContext, ReactElement } from 'react';
+import { useOutlet } from 'react-router';
 import { UserSettingsAuthProviders } from './AuthProviders';
 import { UserSettingsFeatureFlags } from './FeatureFlags';
 import { UserSettingsGeneral } from './General';
 
-export interface SettingsTab {
-  title: string;
-  content: React.ReactElement;
-}
-
 type Props = {
   providerSettings?: JSX.Element;
-  tabs?: SettingsTab[];
 };
 
-export const SettingsPage = ({ providerSettings, tabs }: Props) => {
+export const SettingsPage = ({ providerSettings }: Props) => {
   const { isMobile } = useContext(SidebarPinStateContext);
+  const outlet = useOutlet();
+
+  const extraTabs = (React.Children.toArray(outlet?.props?.children) ||
+    []) as Array<ReactElement>;
+  const notCompliantTab = Array.from(extraTabs).some(
+    child => (child.type as any)?.displayName !== 'Route',
+  );
+  if (notCompliantTab) {
+    throw new Error(
+      'Invalid element passed to SettingsPage Outlet. You may only pass children of type Route.',
+    );
+  }
 
   return (
     <Page themeId="home">
@@ -54,12 +61,14 @@ export const SettingsPage = ({ providerSettings, tabs }: Props) => {
         <TabbedLayout.Route path="feature-flags" title="Feature Flags">
           <UserSettingsFeatureFlags />
         </TabbedLayout.Route>
-        {tabs?.map(({ title, content }) => {
-          // Hyphenated the title
-          const path = title.toLocaleLowerCase().replace(/\s/, '-');
+
+        {extraTabs.map((child, i) => {
+          const path: string = child.props.path;
+          const title: string = child.props.children;
+
           return (
-            <TabbedLayout.Route key={path} path={path} title={title}>
-              {content}
+            <TabbedLayout.Route key={i} path={path} title={title}>
+              {child}
             </TabbedLayout.Route>
           );
         })}