feat: responsive deployment view (#94)

* Display the deployed time

* Support responsible view

Author: Noah Hanjun Lee

ui/src/components/DeployConfirm.tsx

@@ -1,4 +1,5 @@
 import { Form, Typography, Avatar, Button, Collapse, Timeline } from "antd"
+import moment from "moment"
 
 import { Deployment, Commit } from "../models"
 import DeploymentRefCode from "./DeploymentRefCode"
@@ -60,6 +61,12 @@ export default function DeployConfirm(props: DeployConfirmProps): JSX.Element {
                         U
                     </Avatar>}
             </Form.Item>
+            <Form.Item
+                {...layout}
+                label="Deployed At"
+            >
+                <Text>{moment(props.deployment.createdAt).format()}</Text>
+            </Form.Item>
             {(props.deployment.isApprovalEanbled) ?
                 <Form.Item
                     {...layout}

ui/src/components/DeploymentStatusSteps.tsx

@@ -1,4 +1,5 @@
 import { Steps, Popover } from "antd"
+import moment from "moment"
 
 import { Deployment } from "../models"
 import DeploymentStatusBadge from "./DeploymentStatusBadge"
@@ -23,17 +24,20 @@ export default function DeploymentStatusSteps(props: DeploymentStatusStepsProps)
             size="small" 
             responsive>
             {props.deployment.statuses.map((status, idx) => {
-                const title = (status.logUrl) ?
+                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={status.description}>
-                                {title}
-                            </Popover>}
+                            key={idx}
+                            style={{width: "100px"}}
+                            status="finish"
+                            icon={<span>•</span>}
+                            title={<Popover content={description}>{title}</Popover>}
                         />)
             })}
         </Steps>

ui/src/views/Deployment.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react"
-import { Breadcrumb, PageHeader, Row, Col } from "antd"
+import { Breadcrumb, PageHeader, Row, Col, Divider } from "antd"
 import { shallowEqual } from 'react-redux'
 import { useParams } from "react-router-dom"
 
@@ -154,10 +154,22 @@ export default function DeploymentView(): JSX.Element {
                     onBack={onBack} 
                 />
             </div>
-            {/* TODO: support mobile view */}
             <div style={{marginTop: "20px", marginBottom: "30px"}}>
                 <Row>
-                    <Col span="18">
+                    <Col xs={{span: 24}} md={{span: 0}}>
+                        {/* Mobile view */}
+                        {(deployment.isApprovalEanbled) ? 
+                            <ApproversSelector 
+                                approvers={approvers}
+                                candidates={candidates}
+                                approvals={approvals}
+                                onSearchCandidates={onSearchCandidates}
+                                onSelectCandidate={onSelectCandidate}
+                            /> :
+                            null}
+                        <Divider />
+                    </Col>
+                    <Col xs={{span: 24}} md={{span: 18}}>
                         <DeployConfirm 
                             isDeployable={(repo?.locked)? false : isDeployable(deployment, approvals)}
                             deploying={RequestStatus.Pending === deploying}
@@ -166,7 +178,8 @@ export default function DeploymentView(): JSX.Element {
                             onClickDeploy={onClickDeploy}
                         />
                     </Col>
-                    <Col span="6">
+                    <Col xs={{span: 0}} md={{span: 6}}>
+                        {/* Desktop view */}
                         {(deployment.isApprovalEanbled) ? 
                             <ApproversSelector 
                                 approvers={approvers}