From fdb2eb0b963c5c289b82b93b3e9c9a59d1dd4860 Mon Sep 17 00:00:00 2001
From: Marley Powell <Marley.Powell@exclaimer.com>
Date: Mon, 8 Nov 2021 12:22:09 +0000
Subject: [PATCH] feat: Created `AutoCompleteIcon` component for
 `PullRequestCard`.

Signed-off-by: Marley Powell <Marley.Powell@exclaimer.com>
---
 .../lib/AutoCompleteIcon/AutoCompleteIcon.tsx | 29 +++++++++++++++++++
 .../lib/AutoCompleteIcon/index.ts             | 17 +++++++++++
 .../lib/PullRequestCard/PullRequestCard.tsx   | 10 +++++++
 3 files changed, 56 insertions(+)
 create mode 100644 plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx
 create mode 100644 plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/index.ts

diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx
new file mode 100644
index 0000000000..aea64ff23b
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 DoneAllIcon from '@material-ui/icons/DoneAll';
+import { withStyles } from '@material-ui/core/styles';
+
+export const AutoCompleteIcon = withStyles(
+  theme => ({
+    root: (props: { hasAutoComplete: boolean }) => ({
+      color: props.hasAutoComplete
+        ? theme.palette.success.main
+        : theme.palette.grey[400],
+    }),
+  }),
+  { name: 'AutoCompleteIcon' },
+)(DoneAllIcon);
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/index.ts b/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/index.ts
new file mode 100644
index 0000000000..d83b0ffad0
--- /dev/null
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/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 { AutoCompleteIcon } from './AutoCompleteIcon';
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
index 849d3fce96..85fc337aae 100644
--- a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
@@ -16,6 +16,7 @@
 
 import { Card, CardContent, CardHeader, Link } from '@material-ui/core';
 
+import { AutoCompleteIcon } from '../AutoCompleteIcon';
 import { Avatar } from '@backstage/core-components';
 import { PullRequest } from '../../../../api/types';
 import React from 'react';
@@ -36,6 +37,11 @@ const useStyles = makeStyles(
       display: 'flex',
       flexDirection: 'row',
     },
+    cardHeaderAction: {
+      display: 'flex',
+      alignSelf: 'center',
+      margin: 0,
+    },
   }),
   { name: 'PullRequestCard' },
 );
@@ -75,8 +81,12 @@ export const PullRequestCard = ({
       <CardHeader
         avatar={avatar}
         title={title}
+        action={
+          <AutoCompleteIcon hasAutoComplete={pullRequest.hasAutoComplete} />
+        }
         classes={{
           ...(simplified && { root: classes.cardHeaderSimplified }),
+          action: classes.cardHeaderAction,
         }}
       />