Add the commit changes

Author: noah

ui/src/components/DeploymentDescriptor/CommitChanges.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react"
+import { Button, Typography, List, Avatar } from "antd"
+import moment from "moment"
+
+import { Commit } from "../../models"
+
+interface CommitChangesProps {
+    changes:Commit[]
+}
+
+export default function CommitChanges(props: CommitChangesProps): JSX.Element {
+    return (
+        <List
+            style={{
+                maxHeight: 400,
+                overflow: "auto",
+            }}
+            bordered
+            dataSource={props.changes}
+            renderItem={(commit, idx) => {
+                return (
+                    <CommitChange key={idx} commit={commit}/>
+                )
+            }}
+        />
+    )
+}
+
+function CommitChange(props: {commit: Commit}): JSX.Element {
+    const [message, ...description] = props.commit.message.split(/(\r\n|\n|\r)/g)
+
+    const [hide, setHide] = useState(true)
+
+    const onClickHide = () => {
+        setHide(!hide)
+    }
+
+    return (
+        <List.Item>
+            <List.Item.Meta 
+                title={
+                    <>
+                        <a href={props.commit.htmlUrl} target="_blank">{message}</a>
+                        {/* Display the description when the button is clicked. */}
+                        {(description.length)?
+                            <Button size="small" type="text" onClick={onClickHide}>
+                                <Typography.Text className="gitploy-code" code>...</Typography.Text>
+                            </Button>
+                            :
+                            <></>}
+                        {(!hide) ?
+                            <Typography.Paragraph style={{margin: 0}}>
+                                <pre style={{marginBottom: 0, fontSize: 12}}>
+                                    {description.join("").trim()}
+                                </pre>
+                            </Typography.Paragraph> 
+                            :
+                            <></>}
+                    </>
+                }
+                description={(props.commit?.author)?
+                    <>
+                        <Avatar size="small" src={props.commit.author.avatarUrl} />&nbsp;
+                        <Typography.Text strong>{props.commit.author.login}</Typography.Text> committed&nbsp;
+                        {moment(props.commit.author?.date).fromNow()}
+                    </>
+                    :
+                    <></>
+                }
+            />
+            <div style={{marginLeft: 30}}>
+                <Button
+                    href={props.commit.htmlUrl}
+                    target="_blank"
+                >
+                        {props.commit.sha.substring(0, 7)}
+                </Button>
+            </div>
+        </List.Item>
+    )
+}

ui/src/components/DeploymentDescriptor/DeploymentDescriptor.tsx

@@ -3,15 +3,17 @@ import moment from "moment"
 
 import DeploymentStatusBadge from "../DeploymentStatusBadge"
 import UserAvatar from "../UserAvatar"
+import CommitChanges from "./CommitChanges"
 
-import { Deployment } from "../../models"
+import { Commit, Deployment } from "../../models"
 import { getShortRef } from "../../libs"
 import { useState } from "react"
 
 const { Text } = Typography
 
 interface DeploymentDescriptorProps {
     deployment: Deployment
+    commits: Commit[]
 }
 
 export default function DeploymentDescriptor(props: DeploymentDescriptorProps): JSX.Element {
@@ -51,10 +53,13 @@ export default function DeploymentDescriptor(props: DeploymentDescriptorProps):
                 <Modal 
                     title="Changes" 
                     visible={visible}
-                    width={1000}
+                    width={800}
+                    // Hide OK Button
+                    okButtonProps={{style: {display: "none"}}}
+                    cancelText="Close"
                     onCancel={hideModal}
                 >
-                    TODO: Show commits
+                    <CommitChanges changes={props.commits}/>
                 </Modal>
             </Descriptions.Item>
         </Descriptions>

ui/src/views/Deployment.tsx

@@ -154,14 +154,14 @@ export default function DeploymentView(): JSX.Element {
             </div>
             <Row>
                 <Col  span={23} offset={1} lg={{span: 13, offset: 1}}>
-                    <DeploymentDescriptor deployment={deployment}/>
+                    <DeploymentDescriptor commits={changes} deployment={deployment}/>
                 </Col>
                 <Col span={23} offset={1}  lg={{span: 6, offset: 2}}>
                    <ReviewerList reviews={reviews}/> 
                 </Col>
             </Row>
             <Row style={{marginTop: 40}}>
-                <Col offset={2} span={22}>
+                <Col offset={1} span={22} md={{offset: 2}}>
                     {deployment.statuses?
                         <DeploymentStatusSteps statuses={deployment.statuses}/>
                         :