enable adding extra setting tabs

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

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

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { SettingsPage, SettingsTab } from './SettingsPage';
+
+describe('<SettingsPage />', () => {
+  it('should render the settings page with 3 tabs', async () => {
+    const { container } = await renderWithEffects(
+      wrapInTestApp(<SettingsPage />),
+    );
+
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    expect(tabs).toHaveLength(3);
+  });
+
+  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 { container } = await renderWithEffects(
+      wrapInTestApp(<SettingsPage tabs={extraTabs} />),
+    );
+
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    expect(tabs).toHaveLength(4);
+    expect(tabs[3].textContent).toEqual(extraTabs[0].title);
+  });
+});

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

@@ -25,11 +25,17 @@ 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 }: Props) => {
+export const SettingsPage = ({ providerSettings, tabs }: Props) => {
   const { isMobile } = useContext(SidebarPinStateContext);
 
   return (
@@ -48,6 +54,15 @@ export const SettingsPage = ({ providerSettings }: 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/, '-');
+          return (
+            <TabbedLayout.Route key={path} path={path} title={title}>
+              {content}
+            </TabbedLayout.Route>
+          );
+        })}
       </TabbedLayout>
     </Page>
   );

plugins/user-settings/src/components/index.ts

@@ -15,6 +15,7 @@
  */
 export { Settings } from './Settings';
 export { SettingsPage as Router } from './SettingsPage';
+export type { SettingsTab } from './SettingsPage';
 export * from './AuthProviders';
 export * from './General';
 export * from './FeatureFlags';