enable adding extra setting tabs

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

.changeset/three-rivers-remain.md

@@ -0,0 +1,6 @@
+---
+'example-app': minor
+'@backstage/plugin-user-settings': minor
+---
+
+Added the ability to render extra setting tabs

packages/app/src/App.tsx

@@ -69,7 +69,7 @@ import {
   techdocsPlugin,
   TechDocsReaderPage,
 } from '@backstage/plugin-techdocs';
-import { UserSettingsPage } from '@backstage/plugin-user-settings';
+import { UserSettingsPage, SettingsTab } from '@backstage/plugin-user-settings';
 import AlarmIcon from '@material-ui/icons/Alarm';
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
@@ -82,7 +82,7 @@ import { LowerCaseValuePickerFieldExtension } from './components/scaffolder/cust
 import { searchPage } from './components/search/SearchPage';
 import { providers } from './identityProviders';
 import * as plugins from './plugins';
-
+import { AdvancedSettings } from './components/advancedSettings';
 import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { PermissionedRoute } from '@backstage/plugin-permission-react';
@@ -127,6 +127,10 @@ const app = createApp({
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
 
+const extraSettingTabs: SettingsTab[] = [
+  { title: 'Advanced', content: <AdvancedSettings /> },
+];
+
 const routes = (
   <FlatRoutes>
     <Navigate key="/" to="catalog" />
@@ -215,7 +219,10 @@ const routes = (
       path="/cost-insights/labeling-jobs"
       element={<CostInsightsLabelDataflowInstructionsPage />}
     />
-    <Route path="/settings" element={<UserSettingsPage />} />
+    <Route
+      path="/settings"
+      element={<UserSettingsPage tabs={extraSettingTabs} />}
+    />
     <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
     <Route path="/apache-airflow" element={<ApacheAirflowPage />} />
   </FlatRoutes>

packages/app/src/components/advancedSettings/AdvancedSettings.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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 { InfoCard } from '@backstage/core-components';
+import {
+  List,
+  Grid,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  Switch,
+} from '@material-ui/core';
+import { useLocalStorage } from 'react-use';
+
+export function AdvancedSettings() {
+  const [value, setValue] = useLocalStorage<'on' | 'off'>(
+    'advanced-option',
+    'off',
+  );
+
+  const toggleValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(ev.currentTarget.checked ? 'on' : 'off');
+  };
+
+  return (
+    <Grid container direction="row" spacing={3}>
+      <Grid item xs={12} md={6}>
+        <InfoCard title="Advanced settings" variant="gridItem">
+          <List>
+            <ListItem>
+              <ListItemText
+                primary="Advanced user option"
+                secondary="An extra settings tab to further customize the experience"
+              />
+              <ListItemSecondaryAction>
+                <Switch
+                  color="primary"
+                  value={value}
+                  onChange={toggleValue}
+                  name="advanced"
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
+          </List>
+        </InfoCard>
+      </Grid>
+    </Grid>
+  );
+}

packages/app/src/components/advancedSettings/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export * from './AdvancedSettings';

plugins/user-settings/README.md

@@ -63,3 +63,31 @@ const AppRoutes = () => (
 ```
 
 > **Note that the list of providers expects to be rendered within a MUI [`<List>`](https://material-ui.com/components/lists/)**
+
+**Tabs**
+By default, the plugin renders 3 tabs of settings; GENERAL, AUTHENTICATION PROVIDERS, and FEATURE FLAGS.
+
+If you want to add more options for your users, use the `tabs` prop:
+
+```tsx
+import { UserSettingsPage, SettingsTab } from '@backstage/plugin-user-settings';
+
+const extraSettingTabs: SettingsTab[] = [
+  { title: 'Advanced', content: <AdvancedSettings /> },
+];
+
+const AppRoutes = () => (
+  <Routes>
+    <Route
+      path="/settings"
+      element={<SettingsRouter tabs={extraSettingTabs} />}
+    />
+  </Routes>
+);
+```
+
+To standardize the UI of all setting tabs,
+make sure you use a similar component structure as the other tabs.
+You can take a look at
+[the example extra tab](https://github.com/backstage/backstage/blob/master/packages/app/src/components/advancedSettings/AdvancedSettings.tsx)
+we have created in Backstage's demo app.

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';