@@ -1,3 +1,31 @@
|
||||
# Deprecated
|
||||
# org-react
|
||||
|
||||
This package has been moved to the [backstage-community/plugins](https://github.com/backstage/community-plugins) repository. Migrate to using `@backstage-community/plugin-org-react` instead.
|
||||
## features
|
||||
|
||||
- Group list picker component
|
||||
|
||||
### GroupListPicker
|
||||
|
||||
The `GroupListPicker` component displays a select box which also has autocomplete functionality.
|
||||
|
||||
To use the `GroupListPicker` component you'll need to import it and add it to your desired place.
|
||||
|
||||
```diff
|
||||
+ import { GroupListPicker } from '@backstage/plugin-org-react';
|
||||
+ import React, { useState } from 'react';
|
||||
|
||||
+ const [group, setGroup] = useState<GroupEntity | undefined>();
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
+ <GroupListPicker groupTypes={['team']} placeholder='Search for a team' onChange={setGroup} defaultValue='Team A'/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
```
|
||||
|
||||
The `GroupListPicker` comes with four props:
|
||||
|
||||
- `groupTypes`: gives the user the option which group types the component should load. If no value is provided all group types will be loaded in;
|
||||
- `placeholder`: the placeholder that the select box in the component should display. This might be helpful in informing your users what the functionality of the component is.
|
||||
- `onChange`: a prop to help the user to give access to the selected group
|
||||
- `defaultValue`: gives the user the option to define a default value that will be shown initially before making a selection
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
"name": "@backstage/plugin-org-react",
|
||||
"version": "0.1.23",
|
||||
"backstage": {
|
||||
"role": "web-library",
|
||||
"moved": "@backstage-community/plugin-org-react"
|
||||
"role": "web-library"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
@@ -60,6 +59,5 @@
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
|
||||
},
|
||||
"deprecated": "This package has been moved to the backstage/community-plugins repository. You should migrate to using @backstage-community/plugin-org-react instead."
|
||||
}
|
||||
}
|
||||
|
||||
+60
-2
@@ -1,3 +1,61 @@
|
||||
# Deprecated
|
||||
# Org Plugin for Backstage
|
||||
|
||||
This package has been moved to the [backstage-community/plugins](https://github.com/backstage/community-plugins) repository. Migrate to using `@backstage-community/plugin-org` instead.
|
||||
> Disclaimer:
|
||||
> If you are looking for documentation on the experimental new frontend system support, please go [here](./README-alpha.md).
|
||||
|
||||
## Features
|
||||
|
||||
- Show Group Page
|
||||
- Show User Profile
|
||||
- Quick access to Groups
|
||||
|
||||
### Group Page
|
||||
|
||||
Here's an example of what the Group Page looks like:
|
||||
|
||||

|
||||
|
||||
### User Profile
|
||||
|
||||
Here's an example of what the User Profile looks like:
|
||||
|
||||

|
||||
|
||||
### MyGroupsSidebarItem
|
||||
|
||||
The MyGroupsSidebarItem provides quick access to the group(s) the logged in user is a member of directly in the sidebar.
|
||||
|
||||
To use the MyGroupsSidebarItem you'll need to add it to your `Root.tsx` - found at `packages\app\src\components\Root` - like this:
|
||||
|
||||
```diff
|
||||
+ import { MyGroupsSidebarItem } from '@backstage/plugin-org';
|
||||
+ import GroupIcon from '@material-ui/icons/People';
|
||||
|
||||
<SidebarPage>
|
||||
<Sidebar>
|
||||
//...
|
||||
<SidebarGroup label="Menu" icon={<MenuIcon />}>
|
||||
{/* Global nav, not org-specific */}
|
||||
//...
|
||||
<SidebarItem icon={HomeIcon} to="catalog" text="Home" />
|
||||
+ <MyGroupsSidebarItem
|
||||
+ singularTitle="My Squad"
|
||||
+ pluralTitle="My Squads"
|
||||
+ icon={GroupIcon}
|
||||
+ />
|
||||
//...
|
||||
</SidebarGroup>
|
||||
</ Sidebar>
|
||||
</SidebarPage>
|
||||
```
|
||||
|
||||
Once added MyGroupsSidebarItem will work in three ways:
|
||||
|
||||
1. The user is not logged in or the logged in user is not a member of any group: the MyGroupsSidebarItem will not display anything in the sidebar
|
||||
2. The user is logged in and a member of only one group: the MyGroupsSidebarItem will display a single item in the sidebar like this:
|
||||
|
||||

|
||||
|
||||
3. The user is logged in and a member of more than one group: the MyGroupsSidebarItem will display a single items with a sub-menu with all the related groups like this:
|
||||
|
||||

|
||||
|
||||
@@ -3,8 +3,7 @@
|
||||
"version": "0.6.24",
|
||||
"description": "A Backstage plugin that helps you create entity pages for your organization",
|
||||
"backstage": {
|
||||
"role": "frontend-plugin",
|
||||
"moved": "@backstage-community/plugin-org"
|
||||
"role": "frontend-plugin"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -83,6 +82,5 @@
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
|
||||
},
|
||||
"deprecated": "This package has been moved to the backstage/community-plugins repository. You should migrate to using @backstage-community/plugin-org instead."
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user