Refactoring the deployment view

ui/src/App.tsx

@@ -7,7 +7,7 @@ import {
 
 import Home from "./views/home"
 import Repo from "./views/Repo"
-import Deployment from "./views/Deployment"
+import Deployment from "./views/deployment"
 import Settings from "./views/settings"
 import Members from "./views/members"
 

ui/src/components/DeploymentDescriptor/DeploymentDescriptor.tsx → ui/src/views/deployment/DeploymentDescriptor.tsx

@@ -1,22 +1,25 @@
+import { useState } from "react"
 import { Button, Descriptions, Modal, Typography } from "antd"
 import moment from "moment"
 
-import DeploymentStatusBadge from "../DeploymentStatusBadge"
-import UserAvatar from "../UserAvatar"
 import CommitChanges from "./CommitChanges"
+import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
+import UserAvatar from "../../components/UserAvatar"
 
 import { Commit, Deployment } from "../../models"
 import { getShortRef } from "../../libs"
-import { useState } from "react"
 
 const { Text } = Typography
 
-interface DeploymentDescriptorProps {
+export interface DeploymentDescriptorProps {
     deployment: Deployment
-    commits: Commit[]
+    changes: Commit[]
 }
 
-export default function DeploymentDescriptor(props: DeploymentDescriptorProps): JSX.Element {
+export default function DeploymentDescriptor({
+    deployment, 
+    changes
+}: DeploymentDescriptorProps): JSX.Element {
     const [visible, setVisible] = useState<boolean>(false)
 
     const showModal = () => {
@@ -29,18 +32,20 @@ export default function DeploymentDescriptor(props: DeploymentDescriptorProps):
 
     return (
         <Descriptions title="Information" bordered column={1}>
-            <Descriptions.Item label="Environment">{props.deployment.env}</Descriptions.Item>
+            <Descriptions.Item label="Environment">
+                {deployment.env}
+            </Descriptions.Item>
             <Descriptions.Item label="Ref">
-                <Text className="gitploy-code" code>{getShortRef(props.deployment)}</Text>
+                <Text className="gitploy-code" code>{getShortRef(deployment)}</Text>
             </Descriptions.Item>
             <Descriptions.Item label="Status">
-                <DeploymentStatusBadge deployment={props.deployment}/>
+                <DeploymentStatusBadge deployment={deployment}/>
             </Descriptions.Item>
             <Descriptions.Item label="Deployer">
-                <UserAvatar user={props.deployment.deployer} boldName={false}/>
+                <UserAvatar user={deployment.deployer} boldName={false}/>
             </Descriptions.Item>
             <Descriptions.Item label="Deploy Time">
-                {moment(props.deployment.createdAt).format("YYYY-MM-DD HH:mm:ss")}
+                {moment(deployment.createdAt).format("YYYY-MM-DD HH:mm:ss")}
             </Descriptions.Item>
             <Descriptions.Item label="Changes">
                 <Button 
@@ -59,7 +64,7 @@ export default function DeploymentDescriptor(props: DeploymentDescriptorProps):
                     cancelText="Close"
                     onCancel={hideModal}
                 >
-                    <CommitChanges changes={props.commits}/>
+                    <CommitChanges changes={changes}/>
                 </Modal>
             </Descriptions.Item>
         </Descriptions>

ui/src/components/DeploymentStatusSteps.tsx → ui/src/views/deployment/DeploymentStatusSteps.tsx

@@ -2,11 +2,11 @@ import { Timeline, Typography } from "antd"
 import { ClockCircleOutlined } from "@ant-design/icons"
 import moment from "moment"
 
-import { DeploymentStatus } from "../models"
+import { DeploymentStatus } from "../../models"
 
 const { Text, Link } = Typography
 
-interface DeploymentStatusStepsProps {
+export interface DeploymentStatusStepsProps {
     statuses: DeploymentStatus[]
 }
 
@@ -40,6 +40,6 @@ const getStatusColor = (status: string) => {
         case "failure":
             return "red"
         default:
-            return "#722ed1"
+            return "purple"
     }
 }

ui/src/views/deployment/HeaderBreadcrumb.tsx

@@ -0,0 +1,34 @@
+import { Breadcrumb } from "antd"
+
+export interface HeaderBreadcrumbProps {
+    namespace: string
+    name: string
+    number: string
+}
+
+export default function HeaderBreadcrumb({
+    namespace,
+    name,
+    number
+}: HeaderBreadcrumbProps): JSX.Element {
+
+    return (
+        <Breadcrumb>
+            <Breadcrumb.Item>
+                <a href="/">Repositories</a>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                {namespace}
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                <a href={`/${namespace}/${name}`}>{name}</a>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                Deployments
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>
+                {number}
+            </Breadcrumb.Item>
+        </Breadcrumb>
+    )
+}

ui/src/components/ReviewModal.tsx → ui/src/views/deployment/ReviewButton.tsx

@@ -1,19 +1,25 @@
 import { useState } from "react"
 import { Button, Modal, Space, Input } from "antd"
 
-import { Review, ReviewStatusEnum } from "../models"
+import { Review, ReviewStatusEnum,  } from "../../models"
 
-const { TextArea } = Input
-
-interface ReviewModalProps {
-    review: Review
+export interface ReviewButtonProps {
+    review?: Review
     onClickApprove(comment: string): void
     onClickApproveAndDeploy(comment: string): void
     onClickReject(comment: string): void
 }
 
-export default function ReviewModal(props: ReviewModalProps): JSX.Element {
-    const [comment, setComment] = useState(props.review.comment)
+export default function ReviewButton(props: ReviewButtonProps): JSX.Element {
+    const { review } = props
+
+    // If no review has been assigned, an empty value is returned.
+    if (!review) {
+        return <></>
+    }
+
+    // Stores the review comment state and passes it as a parameter when updating.
+    const [comment, setComment] = useState(review.comment)
 
     const onChangeComment = (e: any) => {
         setComment(e.target.value)
@@ -24,6 +30,10 @@ export default function ReviewModal(props: ReviewModalProps): JSX.Element {
     const showModal = () => {
         setIsModalVisible(true);
     }
+
+    const onClickCancel = () => {
+        setIsModalVisible(false)
+    }
 
     const onClickApprove = () => {
         props.onClickApprove(comment)
@@ -40,34 +50,30 @@ export default function ReviewModal(props: ReviewModalProps): JSX.Element {
         setIsModalVisible(false)
     }
 
-    const onClickCancel = () => {
-        setIsModalVisible(false)
-    }
-
     return (
         <>
+            {(review.status === ReviewStatusEnum.Pending)? 
+                <Button type="primary" onClick={showModal}>
+                    Review
+                </Button> 
+                :
+                <Button onClick={showModal}>
+                    Reviewed
+                </Button>}
             <Modal 
                 title="Review" 
                 visible={isModalVisible} 
                 onCancel={onClickCancel}
-                footer={
+                footer={(
                     <Space>
                         <Button type="primary" danger onClick={onClickReject}>Reject</Button>
                         <Button type="primary" onClick={onClickApproveAndDeploy}>Approve and Deploy</Button>
                         <Button type="primary" onClick={onClickApprove}>Approve</Button>
                     </Space>
-                }
+                )}
             >
-                <TextArea rows={3} onChange={onChangeComment} value={comment}/>
+                <Input.TextArea rows={3} onChange={onChangeComment} value={comment}/>
             </Modal>
-            {(props.review.status === ReviewStatusEnum.Pending)? 
-                <Button type="primary" onClick={showModal}>
-                    Review
-                </Button> :
-                <Button onClick={showModal}>
-                    Reviewed
-                </Button> 
-            }
         </>
     )
 

ui/src/components/ReviewerList.tsx → ui/src/views/deployment/ReviewList.tsx

@@ -1,26 +1,29 @@
 import { Popover, Button, Descriptions, Typography } from "antd"
 import { CheckOutlined, CloseOutlined, CommentOutlined, ClockCircleOutlined } from "@ant-design/icons"
 
-import { Review, ReviewStatusEnum } from "../models"
-import UserAvatar from "./UserAvatar"
+import { Review, ReviewStatusEnum } from "../../models"
+import UserAvatar from "../../components/UserAvatar"
 
 const { Text } = Typography
-export interface ReviewerListProps {
+
+export interface ReviewListProps {
     reviews: Review[]
 }
 
-export default function ReviewerList(props: ReviewerListProps): JSX.Element {
-    if (props.reviews.length === 0) {
+export default function ReviewList({ reviews }: ReviewListProps): JSX.Element {
+    if (reviews.length === 0) {
         return (
             <Descriptions title="Reviewers" >
-                <Descriptions.Item><Text type="secondary">No reviewers</Text></Descriptions.Item>
+                <Descriptions.Item>
+                    <Text type="secondary">No reviewers</Text>
+                </Descriptions.Item>
             </Descriptions>
         )
     }
 
     return (
         <Descriptions title="Reviewers" size="small" column={1}>
-            {props.reviews.map((review, idx) => {
+            {reviews.map((review, idx) => {
                 return (
                     <Descriptions.Item key={idx}>
                         <ReviewStatusIcon review={review} />&nbsp;
@@ -50,13 +53,11 @@ function ReviewCommentIcon(props: {review: Review}): JSX.Element {
     const comment = props.review.comment
 
     return (
-        comment? 
+        (comment)? 
             <Popover
                 title="Comment"
                 trigger="click"
-                content={
-                    <div style={{whiteSpace: "pre"}}>{comment}</div>
-                }
+                content={<div style={{whiteSpace: "pre"}}>{comment}</div>}
             >
                 <Button 
                     type="text"