Fix the status foldable in UI (#172)

Author: Noah Hanjun Lee

ui/src/components/DeployConfirm.tsx

@@ -4,6 +4,7 @@ import { useState } from "react"
 
 import { Deployment, Commit } from "../models"
 import DeploymentRefCode from "./DeploymentRefCode"
+import DeploymentStatusBadge from "./DeploymentStatusBadge"
 import DeploymentStatusSteps from "./DeploymentStatusSteps"
 
 const { Paragraph, Text } = Typography
@@ -48,7 +49,18 @@ export default function DeployConfirm(props: DeployConfirmProps): JSX.Element {
                 {...layout}
                 label="Status"
             >
-                <DeploymentStatusSteps deployment={props.deployment}/>
+                {(props.deployment.statuses)? 
+                    <Collapse ghost>
+                        <Panel
+                            key={1}
+                            header={<DeploymentStatusBadge deployment={props.deployment} />}
+                            style={{position: "relative", top: "-5px", left: "-15px"}}
+                        >
+                            <DeploymentStatusSteps statuses={props.deployment.statuses}/>
+                        </Panel>
+                    </Collapse> :
+                    <DeploymentStatusBadge deployment={props.deployment} />
+                }
             </Form.Item>
             <Form.Item
                 {...layout}
@@ -83,7 +95,7 @@ export default function DeployConfirm(props: DeployConfirmProps): JSX.Element {
                 <Collapse ghost >
                     <Panel 
                         key={1} 
-                        header="Click" 
+                        header="Show" 
                         // Fix the position to align with the field.
                         style={{position: "relative", top: "-5px", left: "-15px"}}
                     >
@@ -123,7 +135,7 @@ function CommitChanges(props: CommitChangesProps): JSX.Element {
 
     return (
         <Timeline>
-            {props.changes.slice(0, 10).map((change, idx) => {
+            {props.changes.map((change, idx) => {
                 return <Timeline.Item key={idx} color="gray">
                     <CommitChange commit={change} />
                 </Timeline.Item>

ui/src/components/DeploymentStatusSteps.tsx

@@ -1,46 +1,48 @@
-import { Steps, Popover } from "antd"
+import { Timeline, Typography } from "antd"
 import moment from "moment"
 
-import { Deployment } from "../models"
-import DeploymentStatusBadge from "./DeploymentStatusBadge"
+import { DeploymentStatus } from "../models"
 
-const { Step } = Steps
+const { Paragraph, Text, Link } = Typography
 
 interface DeploymentStatusStepsProps {
-    deployment: Deployment
+    statuses: DeploymentStatus[]
 }
 
 export default function DeploymentStatusSteps(props: DeploymentStatusStepsProps): JSX.Element {
-    if (typeof props.deployment.statuses === "undefined" 
-        || props.deployment.statuses.length === 0) {
-        return (
-            <DeploymentStatusBadge deployment={props.deployment}/>
-        )
-    }
-
     return  (
-        <Steps 
-            current={props.deployment.statuses.length - 1}
-            size="small" 
-            responsive
+        <Timeline
+            style={{
+                position: "relative",
+                top: 15,
+                paddingBottom: 0
+            }}
         >
-            {props.deployment.statuses.map((status, idx) => {
-                const title = (status.logUrl)?
-                    <a href={status.logUrl}>{status.status}</a> :
-                    <span>{status.status}</span>
-
-                const description = (status.description)?
-                    `${status.description.replace(/\.$/,' ')} at ${moment(status.createdAt).format('HH:mm:ss')}` :
-                    moment(status.createdAt).format('HH:mm:ss')
-
-                return (<Step 
-                            key={idx}
-                            style={{width: "100px"}}
-                            status="finish"
-                            icon={<span>•</span>}
-                            title={<Popover content={description}>{title}</Popover>}
-                        />)
+            {props.statuses.map((status, idx) => {
+                return (
+                    <Timeline.Item 
+                        color={getStatusColor(status.status)}
+                        style={(idx === props.statuses.length - 1)? {paddingBottom: 0} : {}}
+                    >
+                        <Paragraph style={{margin: 0}}>
+                            <Text strong>{status.description}</Text> 
+                            {(status.logUrl !== "")? <Link href={status.logUrl}> View</Link> : <></>}<br/>
+                            <Text>Updated</Text> <Text code className="gitploy-code">{status.status}</Text> <Text>at {moment(status.createdAt).format('HH:mm:ss')}</Text>
+                        </Paragraph>
+                    </Timeline.Item>
+                )
             })}
-        </Steps>
+        </Timeline>
     )
+}
+
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case "success":
+            return "green"
+        case "failure":
+            return "red"
+        default:
+            return "#722ed1"
+    }
 }