diff --git a/plugins/org-react/README.md b/plugins/org-react/README.md index e406877e66..1f87a5e7e6 100644 --- a/plugins/org-react/README.md +++ b/plugins/org-react/README.md @@ -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(); + + + ++ + + +``` + +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 diff --git a/plugins/org-react/package.json b/plugins/org-react/package.json index 801d7f187f..b56d916e89 100644 --- a/plugins/org-react/package.json +++ b/plugins/org-react/package.json @@ -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." + } } diff --git a/plugins/org/README.md b/plugins/org/README.md index c3ec43c7e3..9cf165f06d 100644 --- a/plugins/org/README.md +++ b/plugins/org/README.md @@ -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: + +![Group Page example](./docs/group-page-example.png) + +### User Profile + +Here's an example of what the User Profile looks like: + +![Group Page example](./docs/user-profile-example.png) + +### 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'; + + + + //... + }> + {/* Global nav, not org-specific */} + //... + ++ + //... + + + +``` + +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: + + ![MyGroupsSidebarItem single example](./docs/mygroupssidebaritem-single.png) + +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: + + ![MyGroupsSidebarItem multiple example](./docs/mygroupssidebaritem-multiple.png) diff --git a/plugins/org/package.json b/plugins/org/package.json index 54b248a4b8..173495d846 100644 --- a/plugins/org/package.json +++ b/plugins/org/package.json @@ -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." + } }