Display the current deployment tag for the REF (#130)

Author: Noah Hanjun Lee

ui/src/components/DeployForm.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react"
-import { Form, Select, Radio, Button, Typography, Avatar } from "antd"
+import { Form, Select, Radio, Button, Typography, Avatar, Tag as AntdTag } from "antd"
 
-import { Branch, Commit, Tag, DeploymentType, Status, User, Env } from "../models"
+import { Branch, Commit, Tag, Deployment, DeploymentType, Status, User, Env } from "../models"
 
 import CreatableSelect, {Option as Op} from "./CreatableSelect"
 import StatusStateIcon from "./StatusStateIcon"
@@ -16,6 +16,7 @@ interface DeployFormProps {
     envs: Env[]
     onSelectEnv(env: Env): void
     onChangeType(type: DeploymentType): void
+    currentDeployment?: Deployment
     branches: Branch[]
     onSelectBranch(branch: Branch): void
     onClickAddBranch(option: Option): void
@@ -114,20 +115,28 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
         props.onChangeType(type)
     }
 
-    const mapBranchToOption = (branch: Branch) => {
-        return {
-            label: <Text className="gitploy-code" code>{branch.name}</Text>,
-            value: branch.name
-        } as Option
-    }
-
     const onSelectEnv = (value: string) => {
         const env = props.envs.find(env => env.name === value)
         if (env === undefined) throw new Error("The env doesn't exist.")
 
         props.onSelectEnv(env)
     }
 
+    const mapBranchToOption = (branch: Branch) => {
+        // Display the tag only when the type is 'branch'.
+        const tag = (deploymentType === DeploymentType.Branch 
+                && branch.commitSha === props.currentDeployment?.sha) ?
+            <AntdTag color="success">{props.currentDeployment.env}</AntdTag> : 
+            null
+
+        return {
+            label: <span>
+                <Text className="gitploy-code" code>{branch.name}</Text>{tag}
+            </span>,
+            value: branch.name
+        } as Option
+    }
+
     const onSelectBranch = (option: Option) => {
         const branch = props.branches.find(b => b.name === option.value)
         if (branch === undefined) throw new Error("The branch doesn't exist.")
@@ -137,7 +146,7 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
 
     const mapCommitToOption = (commit: Commit) => {
         return {
-            label: <CommitDecorator commit={commit}/>,
+            label: <CommitDecorator commit={commit} currentDeployment={props.currentDeployment}/>,
             value: commit.sha,
         } as Option
     }
@@ -150,8 +159,12 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
     }
 
     const mapTagToOption = (tag: Tag) => {
+        const deploymentTag = (tag.commitSha === props.currentDeployment?.sha) ?
+            <AntdTag color="success">{props.currentDeployment.env}</AntdTag> : 
+            null
+
         return {
-            label: <Text className="gitploy-code" code>{tag.name}</Text>,
+            label: <Text className="gitploy-code" code>{tag.name} {deploymentTag}</Text>,
             value: tag.name
         } as Option
     }
@@ -279,16 +292,21 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
 
 interface CommitDecoratorProps {
     commit: Commit
+    currentDeployment?: Deployment
 }
 
 function CommitDecorator(props: CommitDecoratorProps): JSX.Element {
+    const tag = (props.commit.sha === props.currentDeployment?.sha) ?
+        <AntdTag color="success">{props.currentDeployment.env}</AntdTag> : 
+        null
+    
     return (
         <span>
-            <Text className="gitploy-code" code>{props.commit.sha.substring(0, 7)}</Text> - <Text strong>{props.commit.message}</Text> <br/>
+            <Text className="gitploy-code" code>{props.commit.sha.substring(0, 7)}</Text>{tag}- <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/redux/repoDeploy.tsx

@@ -22,6 +22,7 @@ import {
     searchRepo, 
     listPerms,
     getConfig, 
+    listDeployments,
     listBranches, 
     getBranch, 
     listCommits, 
@@ -43,6 +44,7 @@ interface RepoDeployState {
     config?: Config 
     env?: Env
     envs: Env[]
+    currentDeployment?: Deployment
     type?: DeploymentType 
     branch?: Branch 
     branchStatuses: Status[]
@@ -102,6 +104,23 @@ export const fetchConfig = createAsyncThunk<Config, void, { state: {repoDeploy:
     },
 )
 
+export const fetchCurrentDeploymentOfEnv = createAsyncThunk<Deployment | null, Env, { state: {repoDeploy: RepoDeployState} }>(
+    "repoDeploy/fetchCurrentDeployment", 
+    async (env, { getState, rejectWithValue } ) => {
+        const { repo } = getState().repoDeploy
+        if (!repo) {
+            throw new Error("The repo is undefined.")
+        }
+
+        try {
+            const deployments = await listDeployments(repo.id, env.name, "success", 1, 1)
+            return (deployments.length > 0)? deployments[0] : null
+        } catch (e) {
+            return rejectWithValue(e)
+        }
+    },
+)
+
 export const fetchBranches = createAsyncThunk<Branch[], void, { state: {repoDeploy: RepoDeployState }}>(
     "repoDeploy/fetchBranches",
     async (_, { getState }) => {
@@ -355,6 +374,14 @@ export const repoDeploySlice = createSlice({
                 state.envs = config.envs.map(e => e)
                 state.config = config
             })
+            .addCase(fetchCurrentDeploymentOfEnv.fulfilled, (state, action) => {
+                if (action.payload) {
+                    state.currentDeployment = action.payload
+                }
+            })
+            .addCase(fetchCurrentDeploymentOfEnv.rejected, (state) => {
+                state.currentDeployment = undefined
+            })
             .addCase(fetchBranches.fulfilled, (state, action) => {
                 state.branches = action.payload
             })

ui/src/views/RepoDeploy.tsx

@@ -9,6 +9,7 @@ import {
     init, 
     fetchConfig, 
     repoDeploySlice, 
+    fetchCurrentDeploymentOfEnv,
     fetchBranches, 
     checkBranch,
     addBranchManually, 
@@ -38,6 +39,7 @@ export default function RepoDeploy(): JSX.Element {
         config, 
         env,
         envs, 
+        currentDeployment,
         branches, 
         branchStatuses,
         commits, 
@@ -63,6 +65,7 @@ export default function RepoDeploy(): JSX.Element {
 
     const onSelectEnv = (env: Env) => {
         dispatch(actions.setEnv(env))
+        dispatch(fetchCurrentDeploymentOfEnv(env))
     }
 
     const onChangeType = (type: DeploymentType) => {
@@ -146,6 +149,7 @@ export default function RepoDeploy(): JSX.Element {
                     envs={envs}
                     onSelectEnv={onSelectEnv}
                     onChangeType={onChangeType}
+                    currentDeployment={currentDeployment}
                     branches={branches}
                     onSelectBranch={onSelectBranch}
                     onClickAddBranch={onClickAddBranch}