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

feat: Created intial display components for PullRequestsPage.

Browse Source 
Signed-off-by: Marley Powell <Marley.Powell@exclaimer.com>
This commit is contained in:
Marley Powell
2021-11-08 12:02:40 +00:00
parent 0c97cb0eb4
commit cf9d60ff60
8 changed files with 298 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
+86
View File
@@ -0,0 +1,86 @@
/*
* Copyright 2021 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.
*/
import { Card, CardContent, CardHeader, Link } from '@material-ui/core';
import { Avatar } from '@backstage/core-components';
import { PullRequest } from '../../../../api/types';
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(
theme => ({
card: {
backgroundColor:
theme.palette.type === 'dark'
? theme.palette.grey[700]
: theme.palette.common.white,
},
cardHeaderSimplified: {
paddingBottom: theme.spacing(2),
},
content: {
display: 'flex',
flexDirection: 'row',
},
}),
{ name: 'PullRequestCard' },
);
type PullRequestCardProps = {
pullRequest: PullRequest;
simplified?: boolean;
};
export const PullRequestCard = ({
pullRequest,
simplified,
}: PullRequestCardProps) => {
const title = (
<Link
href={pullRequest.link}
title={pullRequest.description}
target="_blank"
rel="noopener noreferrer"
>
{pullRequest.title}
</Link>
);
const avatar = (
<Avatar
displayName={pullRequest.createdBy.displayName}
picture={pullRequest.createdBy.imageUrl}
customStyles={{ width: '2.5rem', height: '2.5rem', fontSize: '1rem' }}
/>
);
const classes = useStyles();
return (
<Card classes={{ root: classes.card }}>
<CardHeader
avatar={avatar}
title={title}
classes={{
...(simplified && { root: classes.cardHeaderSimplified }),
}}
/>
{!simplified && <CardContent className={classes.content} />}
</Card>
);
};
plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 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 { PullRequestCard } from './PullRequestCard';
plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/PullRequestGrid.tsx
+48
View File
@@ -0,0 +1,48 @@
/*
* Copyright 2021 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.
*/
import { PullRequestGridColumn } from '../PullRequestGridColumn';
import { PullRequestGroup } from '../types';
import React from 'react';
import { styled } from '@material-ui/core';
const GridDiv = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
'& > *': {
marginRight: theme.spacing(2),
},
'& > :last-of-type': {
marginRight: 0,
},
}));
type PullRequestGridProps = {
pullRequestGroups: PullRequestGroup[];
};
export const PullRequestGrid = ({
pullRequestGroups,
}: PullRequestGridProps) => {
return (
<GridDiv>
{pullRequestGroups.map(pullRequestGroup => (
<PullRequestGridColumn pullRequestGroup={pullRequestGroup} />
))}
</GridDiv>
);
};
plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 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 { PullRequestGrid } from './PullRequestGrid';
plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/PullRequestGridColumn.tsx
+86
View File
@@ -0,0 +1,86 @@
/*
* Copyright 2021 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.
*/
import { Paper, Typography, styled, withStyles } from '@material-ui/core';
import { PullRequestCard } from '../PullRequestCard';
import { PullRequestGroup } from '../types';
import React from 'react';
const ColumnPaper = withStyles(theme => ({
root: {
display: 'flex',
flexDirection: 'column',
flex: 1,
padding: theme.spacing(2),
backgroundColor:
theme.palette.type === 'dark'
? theme.palette.grey[800]
: theme.palette.grey[300],
height: '100%',
},
}))(Paper);
const ColumnTitleDiv = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: theme.spacing(2),
}));
export const PullRequestCardContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
'& > *': {
marginBottom: theme.spacing(2),
},
'& > :last-of-type': {
marginBottom: 0,
},
}));
type PullRequestGridColumnProps = {
pullRequestGroup: PullRequestGroup;
};
export const PullRequestGridColumn = ({
pullRequestGroup,
}: PullRequestGridColumnProps) => {
const columnTitle = (
<ColumnTitleDiv>
<Typography variant="h5">{pullRequestGroup.title}</Typography>
</ColumnTitleDiv>
);
const pullRequests = (
<PullRequestCardContainer>
{pullRequestGroup.pullRequests.map(pullRequest => (
<PullRequestCard
pullRequest={pullRequest}
simplified={pullRequestGroup.simplified}
/>
))}
</PullRequestCardContainer>
);
return (
<ColumnPaper>
{columnTitle}
{pullRequests}
</ColumnPaper>
);
};
plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 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 { PullRequestGridColumn } from './PullRequestGridColumn';
plugins/azure-devops/src/components/PullRequestsPage/lib/types.ts
+23
View File
@@ -0,0 +1,23 @@
/*
* Copyright 2021 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.
*/
import { PullRequest } from '../../../api/types';
export interface PullRequestGroup {
title: string;
pullRequests: PullRequest[];
simplified?: boolean;
}
plugins/azure-devops/src/index.ts
+4
View File
@@ -13,8 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export {
azureDevOpsPlugin,
EntityAzurePipelinesContent,
isAzureDevOpsAvailable,
AzurePullRequestsPage,
} from './plugin';
export * from './components/AzurePullRequestsIcon';