Refactoring the deployment view (#400)

Noah Lee · web-flow · commit c702383f614d · 2022-04-03T21:12:24.000+09:00
* Add the `deployment` dir for the view

* Move the `ReviewList` component into the dir

* Remove the state from components

* Move the `DeploymentDescriptor` component

* Move the `DeploymentStatusSteps` into the view

* Bind the state to the page
diff --git a/ui/src/App.tsx b/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"
 
diff --git a/ui/src/components/DeploymentDescriptor/index.tsx b/ui/src/components/DeploymentDescriptor/index.tsx
diff --git a/ui/src/views/deployment/CommitChanges.tsx b/ui/src/views/deployment/CommitChanges.tsx
diff --git a/ui/src/views/deployment/DeploymentDescriptor.tsx b/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>
diff --git a/ui/src/views/deployment/DeploymentStatusSteps.tsx b/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"
     }
 }
diff --git a/ui/src/views/deployment/HeaderBreadcrumb.tsx b/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>
+    )
+}
diff --git a/ui/src/views/deployment/ReviewButton.tsx b/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> 
-            }
         </>
     )
 
diff --git a/ui/src/views/deployment/ReviewList.tsx b/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" 
diff --git a/ui/src/views/deployment/index.tsx b/ui/src/views/deployment/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -2,11 +2,11 @@ import { Timeline, Typography } from "antd"`
`2`	`2`	`import { ClockCircleOutlined } from "@ant-design/icons"`
`3`	`3`	`import moment from "moment"`
`4`	`4`
`5`		`-import { DeploymentStatus } from "../models"`
	`5`	`+import { DeploymentStatus } from "../../models"`
`6`	`6`
`7`	`7`	`const { Text, Link } = Typography`
`8`	`8`
`9`		`-interface DeploymentStatusStepsProps {`
	`9`	`+export interface DeploymentStatusStepsProps {`
`10`	`10`	`statuses: DeploymentStatus[]`
`11`	`11`	`}`
`12`	`12`
`@@ -40,6 +40,6 @@ const getStatusColor = (status: string) => {`
`40`	`40`	`case "failure":`
`41`	`41`	`return "red"`
`42`	`42`	`default:`
`43`		`- return "#722ed1"`
	`43`	`+ return "purple"`
`44`	`44`	`}`
`45`	`45`	`}`