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

feat: README update with how to implement plugin

Browse Source 
Signed-off-by: Talita Gregory Nunes Freire <talita.freire@dazn.com>
This commit is contained in:
Talita Gregory Nunes Freire
2022-04-22 17:59:54 +02:00
parent ed77c0af0d
commit 4f3848e4c0
11 changed files with 146 additions and 952 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/catalog/EntityPage.tsx
+4
View File
@@ -137,6 +137,7 @@ import {
EntityNewRelicDashboardCard,
} from '@backstage/plugin-newrelic-dashboard';
import { EntityGoCdContent, isGoCdAvailable } from '@backstage/plugin-gocd';
import { TeamPullRequestsPage } from '@backstage/plugin-github-pull-requests-board';
import React, { ReactNode, useMemo, useState } from 'react';
@@ -623,6 +624,9 @@ const groupPage = (
</Grid>
</Grid>
</EntityLayout.Route>
<EntityLayout.Route path="/pull-requests" title="Pull Requests">
<TeamPullRequestsPage />
</EntityLayout.Route>
</EntityLayoutWrapper>
);
plugins/github-pull-requests-board/README.md
+66 -6
View File
@@ -1,15 +1,75 @@
# github-pull-requests-board
# GitHub Pull Requests Board Plugin
Welcome to the github-pull-requests-board plugin!
The GitHub Pull Requests Board Plugin helps to visualise all **Open Pull Requests** related to the owned team repository.
This plugin will help you and your team stay on top of open pull requests, hopefully reducing the time from open to merged. It's particularly useful when your team deals with many repositories.
![github-pull-requests-board](./docs/pull-requests-board.png)
It will help you and your team stay on top of open pull requests, hopefully reducing the time from open to merged. It's particularly useful when your team deals with many repositories.
## Prerequisites
- [GitHub Authentication Provider](https://backstage.io/docs/auth/github/provider)
## Getting started
The plugin exports the **TeamPullRequestsTable** component which should be added into the Team page level, so it can consume the backstage **"team"** entity.
The plugin exports the **TeamPullRequestsBoard** component which can be added to the Overview page ot the team at `backstage/packages/app/src/components/catalog/EntityPage.tsx`
```javascript
import { TeamPullRequestsTable } from '@backstage/plugin-github-pull-requests-board';
import { TeamPullRequestsBoard } from '@backstage/plugin-github-pull-requests-board';
<TeamPullRequestsTable />;
const groupPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="/" title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item xs={12} md={6}>
<EntityGroupProfileCard variant="gridItem" />
</Grid>
<Grid item xs={12} md={6}>
<EntityOwnershipCard
variant="gridItem"
entityFilterKind={customEntityFilterKind}
/>
</Grid>
<Grid item xs={12}>
<EntityMembersListCard />
</Grid>
<Grid item xs={12}>
<TeamPullRequestsBoard />
</Grid>
</Grid>
</EntityLayout.Route>
</EntityLayoutWrapper>
);
```
Or you can also import the **TeamPullRequestsPage** component which can be used to add a new page on the group page at `backstage/packages/app/src/components/catalog/EntityPage.tsx`
```javascript
import { TeamPullRequestsPage } from '@backstage/plugin-github-pull-requests-board';
const groupPage = (
<EntityLayoutWrapper>
<EntityLayout.Route path="/" title="Overview">
<Grid container spacing={3}>
{entityWarningContent}
<Grid item xs={12} md={6}>
<EntityGroupProfileCard variant="gridItem" />
</Grid>
<Grid item xs={12} md={6}>
<EntityOwnershipCard
variant="gridItem"
entityFilterKind={customEntityFilterKind}
/>
</Grid>
<Grid item xs={12}>
<EntityMembersListCard />
</Grid>
</Grid>
</EntityLayout.Route>
<EntityLayout.Route path="/pull-requests" title="Pull Requests">
<TeamPullRequestsPage />
</EntityLayout.Route>
</EntityLayoutWrapper>;
)
```
plugins/github-pull-requests-board/docs/pull-requests-board.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 402 KiB

plugins/github-pull-requests-board/package.json
+14 -14
View File
@@ -35,30 +35,30 @@
"clean": "backstage-cli clean"
},
"dependencies": {
"@backstage/catalog-model": "^1.0.0",
"@backstage/core-components": "^0.9.2",
"@backstage/core-plugin-api": "^1.0.0",
"@backstage/plugin-catalog-react": "^1.0.0",
"@backstage/catalog-model": "^1.0.1",
"@backstage/core-components": "^0.9.3",
"@backstage/core-plugin-api": "^1.0.1",
"@backstage/plugin-catalog-react": "^1.0.1",
"@backstage/theme": "^0.2.15",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.45",
"@material-ui/lab": "4.0.0-alpha.57",
"@octokit/rest": "^18.6.7",
"moment": "^2.29.1",
"react-use": "^17.2.4"
},
"devDependencies": {
"@backstage/cli": "^0.14.1",
"@backstage/core-app-api": "^0.5.2",
"@backstage/dev-utils": "^0.2.5",
"@backstage/test-utils": "^0.2.0",
"@backstage/cli": "^0.17.0",
"@backstage/core-app-api": "^1.0.1",
"@backstage/dev-utils": "^1.0.1",
"@backstage/test-utils": "^1.0.1",
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^13.1.8",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^14.0.0",
"@types/jest": "^26.0.7",
"@types/node": "^14.14.32",
"cross-fetch": "^3.0.6",
"msw": "^0.29.0"
"@types/node": "^16.11.26",
"cross-fetch": "^3.1.5",
"msw": "^0.35.0"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
plugins/github-pull-requests-board/src/components/TeamPullRequestsTable/TeamPullRequestsTable.tsx → plugins/github-pull-requests-board/src/components/TeamPullRequestsBoard/TeamPullRequestsBoard.tsx
+7 -7
View File
@@ -19,16 +19,16 @@ import FullscreenIcon from '@material-ui/icons/Fullscreen';
import { Progress, InfoCard } from '@backstage/core-components';
import { InfoCardHeader } from '../../components/InfoCardHeader';
import { PullRequestBoardOptions } from '../../components/PullRequestBoardOptions';
import { Wrapper } from '../../components/Wrapper';
import { PullRequestCard } from '../../components/PullRequestCard';
import { InfoCardHeader } from '../InfoCardHeader';
import { PullRequestBoardOptions } from '../PullRequestBoardOptions';
import { Wrapper } from '../Wrapper';
import { PullRequestCard } from '../PullRequestCard';
import { usePullRequestsByTeam } from '../../hooks/usePullRequestsByTeam';
import { PRCardFormating } from '../../utils/types';
import { DraftPrIcon } from '../../components/icons/DraftPr'
import { DraftPrIcon } from '../icons/DraftPr'
import { useUserRepositories } from '../../hooks/useUserRepositories';
const TeamPullRequestsTable: FunctionComponent = () => {
const TeamPullRequestsBoard: FunctionComponent = () => {
const [infoCardFormat, setInfoCardFormat] = useState<PRCardFormating[]>([]);
const { repositories } = useUserRepositories();
const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam(repositories);
@@ -117,4 +117,4 @@ const TeamPullRequestsTable: FunctionComponent = () => {
return <InfoCard title={header}>{getContent()}</InfoCard>;
};
export default TeamPullRequestsTable;
export default TeamPullRequestsBoard;
plugins/github-pull-requests-board/src/components/TeamPullRequestsBoard/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2022 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { default as TeamPullRequestsBoard } from './TeamPullRequestsBoard';
plugins/github-pull-requests-board/src/components/TeamPullRequestsTable/index.ts
-1
View File
@@ -1 +0,0 @@
export { default as TeamPullRequestsTable } from './TeamPullRequestsTable';
plugins/github-pull-requests-board/src/index.ts
+1 -1
View File
@@ -13,4 +13,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { TeamPullRequestsTable, TeamPullRequestsPage } from './plugin';
export { TeamPullRequestsBoard, TeamPullRequestsPage } from './plugin';
plugins/github-pull-requests-board/src/plugin.test.ts
+3 -3
View File
@@ -13,11 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { TeamPullRequestsTable, TeamPullRequestsPage } from './plugin';
import { TeamPullRequestsBoard, TeamPullRequestsPage } from './plugin';
describe('github-pull-requests-board', () => {
it('should export TeamPullRequestsTable', () => {
expect(TeamPullRequestsTable).toBeDefined();
it('should export TeamPullRequestsBoard', () => {
expect(TeamPullRequestsBoard).toBeDefined();
});
it('should export TeamPullRequestsPage', () => {
expect(TeamPullRequestsPage).toBeDefined();
plugins/github-pull-requests-board/src/plugin.ts
+4 -4
View File
@@ -27,13 +27,13 @@ const githubPullRequestsBoardPlugin = createPlugin({
},
});
export const TeamPullRequestsTable = githubPullRequestsBoardPlugin.provide(
export const TeamPullRequestsBoard = githubPullRequestsBoardPlugin.provide(
createComponentExtension({
name: 'TeamPullRequestsTable',
name: 'TeamPullRequestsBoard',
component: {
lazy: () =>
import('./components/TeamPullRequestsTable').then(
m => m.TeamPullRequestsTable,
import('./components/TeamPullRequestsBoard').then(
m => m.TeamPullRequestsBoard,
),
},
}),
yarn.lock
+31 -916
View File
File diff suppressed because it is too large Load Diff