Enhance UI of commit (#128)

* Add author to Commit

* Add author to commit in the Deploy tab

* Add commit detail to changes

* Fix the folder of detail

Author: Noah Hanjun Lee

internal/pkg/github/mapper.go

@@ -57,18 +57,20 @@ func mapGithubPermToRepoPerm(perms map[string]bool) vo.RemoteRepoPerm {
 }
 
 func mapGithubCommitToCommit(cm *github.RepositoryCommit) *vo.Commit {
-	isPullRequest := false
-	if cm.Commit.Author != nil && cm.Commit.Committer != nil {
-		if *cm.Commit.Author.Name != *cm.Commit.Committer.Name {
-			isPullRequest = true
+	var author *vo.Author
+	if cm.Author != nil && cm.Commit.Author != nil {
+		author = &vo.Author{
+			Login:     *cm.Author.Login,
+			AvatarURL: *cm.Author.AvatarURL,
+			Date:      *cm.Commit.Author.Date,
 		}
 	}
 
 	return &vo.Commit{
-		SHA:           *cm.SHA,
-		Message:       *cm.Commit.Message,
-		IsPullRequest: isPullRequest,
-		HTMLURL:       *cm.HTMLURL,
+		SHA:     *cm.SHA,
+		Message: *cm.Commit.Message,
+		HTMLURL: *cm.HTMLURL,
+		Author:  author,
 	}
 }
 

openapi.yml

@@ -1541,6 +1541,15 @@ components:
           type: boolean
         html_url:
           type: string  
+        author:
+          type: object
+          properties:
+            login:
+              type: string
+            avatar_url:
+              type: string
+            date:
+              type: string
       required:
         - sha
         - message

ui/src/apis/commit.ts

@@ -2,21 +2,37 @@ import { StatusCodes } from 'http-status-codes'
 
 import { instance, headers } from './setting'
 import { _fetch } from "./_base"
-import { Commit, Status, HttpNotFoundError, StatusState } from '../models'
+import { Commit, Author, Status, HttpNotFoundError, StatusState } from '../models'
 
 interface CommitData {
     sha: string
     message: string
     is_pull_request: boolean
     html_url: string
+    author?: {
+        login: string
+        avatar_url: string
+        date: string
+    }
 }
 
 export const mapDataToCommit = (data: CommitData): Commit => {
+    let author: Author | undefined
+
+    if (data.author) {
+        author = {
+            login: data.author.login,
+            avatarUrl: data.author.avatar_url,
+            date: new Date(data.author.date)
+        }
+    }
+
     return {
         sha: data.sha,
         message: data.message,
         isPullRequest: data.is_pull_request,
         htmlUrl: data.html_url,
+        author
     }
 }
 

ui/src/components/DeployConfirm.tsx

@@ -1,11 +1,12 @@
 import { Form, Typography, Avatar, Button, Collapse, Timeline } from "antd"
 import moment from "moment"
+import { useState } from "react"
 
 import { Deployment, Commit } from "../models"
 import DeploymentRefCode from "./DeploymentRefCode"
 import DeploymentStatusSteps from "./DeploymentStatusSteps"
 
-const { Text } = Typography
+const { Paragraph, Text } = Typography
 const { Panel } = Collapse
 
 interface DeployConfirmProps {
@@ -119,19 +120,56 @@ function CommitChanges(props: CommitChangesProps): JSX.Element {
     if (props.changes.length === 0) {
         return <div>There are no commits.</div>
     }
+
     return (
         <Timeline>
             {props.changes.slice(0, 10).map((change, idx) => {
-                const style: React.CSSProperties =  (idx === props.changes.length - 1) ?  {height: 0} : {}
-                // Omit lines after the first feedline.
-                const message = change.message.split("\n", 1)[0]
-
-                return <Timeline.Item key={idx} color="gray" style={style}>
-                    <a href={change.htmlUrl} className="gitploy-link">
-                        {message.substr(0, 50)}
-                    </a>
+                return <Timeline.Item key={idx} color="gray">
+                    <CommitChange commit={change} />
                 </Timeline.Item>
             })}
         </Timeline>
     )
+}
+
+interface CommitChangeProps {
+    commit: Commit
+}
+
+function CommitChange(props: CommitChangeProps): JSX.Element {
+    const commit = props.commit
+    const [message, description] = commit.message.split("\n\n", 2)
+
+    const [hide, setHide] = useState(true)
+
+    const onClickHide = () => {
+        setHide(!hide)
+    }
+
+    return (
+        <span >
+            <a href={commit.htmlUrl} className="gitploy-link"><strong>{message.substring(0, 50)}</strong></a>
+            {(description) ? 
+                <Button size="small" type="text" onClick={onClickHide}>
+                    <Text className="gitploy-code" code>...</Text>
+                </Button> :
+                null}
+            {/* Display the description of the commit. */}
+            {(!hide) ?
+                <Paragraph style={{margin: 0}}>
+                    <pre style={{marginBottom: 0}}>
+                        {description.split(/(\r\n)/g).map((line, idx) => {
+                            return (line !== "\r\n")? <Text key={idx}>{line}</Text> : <br/>
+                        })}
+                    </pre>
+                </Paragraph> :
+                null}
+            <br />
+            {(commit?.author) ?
+                <span >
+                    <Text >&nbsp;<Avatar size="small" src={commit.author.avatarUrl} /> {commit.author.login}</Text> <Text >committed {moment(commit.author?.date).fromNow()}</Text>
+                </span> :
+                null} 
+        </span>
+    )
 }

ui/src/components/DeployForm.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react"
-import { Form, Select, Radio, Button, Typography } from "antd"
+import { Form, Select, Radio, Button, Typography, Avatar } from "antd"
 
 import { Branch, Commit, Tag, DeploymentType, Status, User, Env } from "../models"
 
 import CreatableSelect, {Option as Op} from "./CreatableSelect"
 import StatusStateIcon from "./StatusStateIcon"
 import ApproversSelect from "./ApproversSelect"
+import moment from "moment"
 
 export type Option = Op
 
@@ -136,9 +137,7 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
 
     const mapCommitToOption = (commit: Commit) => {
         return {
-            label: <span>
-                <Text className="gitploy-code" code>{commit.sha.substring(0, 7)}</Text> - {commit.message} 
-            </span>,
+            label: <CommitDecorator commit={commit}/>,
             value: commit.sha,
         } as Option
     }
@@ -276,4 +275,20 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
             </Form.Item>
         </Form>
     )
+}
+
+interface CommitDecoratorProps {
+    commit: Commit
+}
+
+function CommitDecorator(props: CommitDecoratorProps): JSX.Element {
+    return (
+        <span>
+            <Text className="gitploy-code" code>{props.commit.sha.substring(0, 7)}</Text> - <Text strong>{props.commit.message}</Text> <br/>
+            {(props.commit?.author)?
+                <span >
+                    &nbsp;<Text ><Avatar size="small" src={props.commit.author.avatarUrl} /> {props.commit.author.login}</Text> <Text >committed {moment(props.commit.author?.date).fromNow()}</Text>
+                </span>: null} 
+        </span>
+    )
 }

ui/src/models/Commit.ts

@@ -3,6 +3,13 @@ export default interface Commit {
     message: string
     isPullRequest: boolean
     htmlUrl: string
+    author?: Author
+}
+
+export interface Author {
+    login: string
+    avatarUrl: string
+    date: Date
 }
 
 export interface Status {

ui/src/models/index.ts

@@ -6,7 +6,7 @@ import Deployment, {
     DeploymentStatus,
 } from "./Deployment"
 import Config, { Env, EnvApproval } from "./Config"
-import Commit, { Status, StatusState } from "./Commit"
+import Commit, { Author, Status, StatusState } from "./Commit"
 import Branch from "./Branch"
 import Tag from "./Tag"
 import User, { ChatUser, RateLimit } from "./User"
@@ -34,6 +34,7 @@ export type {
     Env,
     EnvApproval,
     Commit,
+    Author,
     Status,
     Branch,
     Tag,

vo/commit.go

@@ -1,11 +1,20 @@
 package vo
 
+import "time"
+
 type (
 	Commit struct {
-		SHA           string `json:"sha"`
-		Message       string `json:"message"`
-		IsPullRequest bool   `json:"is_pull_request"`
-		HTMLURL       string `json:"html_url"`
+		SHA           string  `json:"sha"`
+		Message       string  `json:"message"`
+		IsPullRequest bool    `json:"is_pull_request"`
+		HTMLURL       string  `json:"html_url"`
+		Author        *Author `json:"author,omitempty"`
+	}
+
+	Author struct {
+		Login     string    `json:"login"`
+		AvatarURL string    `json:"avatar_url"`
+		Date      time.Time `json:"date"`
 	}
 
 	StatusState string