paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

use outlet to render extra tabs instead of tabs prop

Browse Source 
Signed-off-by: Yousif Al-Raheem <yousifalraheem@gmail.com>
This commit is contained in:
Yousif Al-Raheem
2022-03-16 11:44:40 +01:00
parent 7ad0cd18aa
commit b66ae2b542
4 changed files with 78 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/user-settings/README.md
+10 -15
View File
@@ -68,23 +68,18 @@ const AppRoutes = () => (
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:
If you want to add more options for your users,
just pass the extra tabs as children of the `UserSettingsPage` route
where the children of that route represents the title of the tab.
The path is in this case a child of the settings path,
in the example below it would be `/settings/advanced` so that you can easily link to it.
```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>
);
<Route path="/settings" element={<UserSettingsPage />}>
<Route path="/advanced" element={<AdvancedSettings />}>
Advanced
</Route>
</Route>
```
To standardize the UI of all setting tabs,