diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
new file mode 100644
index 0000000000..849d3fce96
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
@@ -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 = (
+
+ {pullRequest.title}
+
+ );
+
+ const avatar = (
+
+ );
+
+ const classes = useStyles();
+
+ return (
+
+
+
+ {!simplified && }
+
+ );
+};
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/index.ts b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/index.ts
new file mode 100644
index 0000000000..5d6a49d09e
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/index.ts
@@ -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';
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/PullRequestGrid.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/PullRequestGrid.tsx
new file mode 100644
index 0000000000..68c6ad8d51
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/PullRequestGrid.tsx
@@ -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 (
+
+ {pullRequestGroups.map(pullRequestGroup => (
+
+ ))}
+
+ );
+};
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/index.ts b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/index.ts
new file mode 100644
index 0000000000..902680f80d
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/index.ts
@@ -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';
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/PullRequestGridColumn.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/PullRequestGridColumn.tsx
new file mode 100644
index 0000000000..2db77c4a49
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/PullRequestGridColumn.tsx
@@ -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 = (
+
+ {pullRequestGroup.title}
+
+ );
+
+ const pullRequests = (
+
+ {pullRequestGroup.pullRequests.map(pullRequest => (
+
+ ))}
+
+ );
+
+ return (
+
+ {columnTitle}
+ {pullRequests}
+
+ );
+};
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/index.ts b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/index.ts
new file mode 100644
index 0000000000..aa3cf82554
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGridColumn/index.ts
@@ -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';
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/types.ts b/plugins/azure-devops/src/components/PullRequestsPage/lib/types.ts
new file mode 100644
index 0000000000..f05e036a58
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/types.ts
@@ -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;
+}
diff --git a/plugins/azure-devops/src/index.ts b/plugins/azure-devops/src/index.ts
index 71d3b654fe..63e0d4923d 100644
--- a/plugins/azure-devops/src/index.ts
+++ b/plugins/azure-devops/src/index.ts
@@ -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';