enable adding extra setting tabs

Signed-off-by: Yousif Al-Raheem <yousifalraheem@gmail.com>
2022-03-07 18:31:16 +01:00
parent 241c284b32
commit 016c574b51
8 changed files with 184 additions and 4 deletions
@@ -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.