Add instructions to readme

This commit is contained in:
Marcus Eide
2020-09-28 09:21:03 +02:00
parent 74d3579f49
commit 9c9031b788
+36 -5
View File
@@ -4,10 +4,41 @@ Welcome to the user-settings plugin!
_This plugin was created through the Backstage CLI_
## Getting started
## About the plugin
Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/user-settings](http://localhost:3000/user-settings).
This plugin is intended to be used within the [`<Sidebar>`](https://backstage.io/storybook/?path=/story/sidebar--sample-sidebar). It provides an item to the sidebar that will render an Avatar of the current signed in user, and when clicked display a settings UI where the user can control different settings across the App.
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
## Usage
Add the component to the sidebar:
```ts
import { UserSettings } from '@backstage/plugin-user-settings';
<SidebarPage>
<Sidebar>
<UserSettings />
</Sidebar>
</SidebarPage>;
```
### Props
**Auth Providers**
By default, the plugin provides a list of configured authentication providers is fetched from `app-config.yaml` and displayed in the "Auth Providers" tab.
If you want to supply your own custom list of Authentication Providers, use the `providerSettings` prop:
```ts
const MyAuthProviders = () => (
<ListItem>
<ListItemText primary="example" />
<ListItemSecondaryAction={someAction}>
</ListItem>
);
<UserSettings providerSettings={<MyAuthProviders />} />
```
> **Note that the list of providers expects to be rendered within a MUI [`<List>`](https://material-ui.com/components/lists/)**