Change the pending icon with Antd icon (#301)

* Fix the bug in the mapping status

* Change the pending status icon for commit and review

Author: Noah Lee

internal/pkg/github/mapper.go

@@ -99,13 +99,16 @@ func mapGithubStatusToStatus(s *github.RepoStatus) *extent.Status {
 		state = extent.StatusStatePending
 	}
 
-	return &extent.Status{
-		Context: *s.Context,
-		// TODO: fix
+	status := &extent.Status{
+		Context:   *s.Context,
 		AvatarURL: "",
-		TargetURL: *s.TargetURL,
 		State:     state,
 	}
+	if s.TargetURL != nil {
+		status.TargetURL = *s.TargetURL
+	}
+
+	return status
 }
 
 func mapGithubCheckRunToStatus(c *github.CheckRun) *extent.Status {

ui/src/App.less

@@ -30,12 +30,4 @@
     border-left: 4px solid rgba(100,100,100,.2);
     opacity: .85;
   }
-
-  &-pending-icon {
-    height: 6px;
-    width: 6px;
-    background-color: #bf8700;
-    border-radius: 50%;
-    display: inline-block;
-  }
 }

ui/src/components/ReviewerList.tsx

@@ -1,5 +1,5 @@
 import { List, Avatar, Popover, Button } from "antd"
-import { CheckOutlined, CloseOutlined, CommentOutlined } from "@ant-design/icons"
+import { CheckOutlined, CloseOutlined, CommentOutlined, SyncOutlined } from "@ant-design/icons"
 
 import { User, Review, ReviewStatusEnum } from "../models"
 
@@ -26,13 +26,13 @@ function ReviewItem(props: {review: Review}): JSX.Element {
     const status = (status: ReviewStatusEnum) => {
         switch (status) {
             case ReviewStatusEnum.Pending:
-                return <><span className="gitploy-pending-icon" />&nbsp;&nbsp;</>
+                return <SyncOutlined spin/>
             case ReviewStatusEnum.Approved:
                 return <CheckOutlined style={{color: "green"}} />
             case ReviewStatusEnum.Rejected:
                 return <CloseOutlined style={{color: "red"}} />
             default:
-                return <><span className="gitploy-pending-icon" />&nbsp;&nbsp;</>
+                return <SyncOutlined spin/>
         }
     }
 
@@ -82,5 +82,5 @@ export function ReviewStatus(props: {reviews: Review[]}): JSX.Element {
         }
     }
 
-    return <span><span className="gitploy-pending-icon" />&nbsp;&nbsp;Pending</span>
+    return <span><SyncOutlined spin/>&nbsp;&nbsp;Pending</span>
 }

ui/src/components/StatusStateIcon.tsx

@@ -1,5 +1,5 @@
 import { Popover, Avatar, Typography, Row, Col, Divider, Space } from "antd"
-import { CheckOutlined, CloseOutlined, StopOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
+import { CheckOutlined, CloseOutlined, StopOutlined, SyncOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
 
 import { Status, StatusState } from "../models"
 
@@ -66,11 +66,7 @@ function mapStateToIcon(state: StatusState): JSX.Element {
 		case StatusState.Null:
 			return <></>
 		case StatusState.Pending:
-			return (
-				<span>
-					<span className="gitploy-pending-icon" />&nbsp;&nbsp;
-				</span>
-			)
+			return <SyncOutlined spin/>
 		case StatusState.Success:
 			return <CheckOutlined style={{color: colorSuccess}}/>
 		case StatusState.Failure:
@@ -80,11 +76,7 @@ function mapStateToIcon(state: StatusState): JSX.Element {
 		case StatusState.Skipped:
 			return <StopOutlined />
 		default:
-			return (
-				<span>
-					<span className="gitploy-pending-icon" />&nbsp;&nbsp;
-				</span>
-			)
+			return <SyncOutlined spin/>
 	}
 }