feat: change the style of ref code (#112)

* Fix the style of ref

* Change the style of rollback form

Author: Noah Hanjun Lee

ui/src/components/CreatableSelect.tsx

@@ -9,7 +9,7 @@ interface CreatableSelectProps extends SelectProps<string>{
 }
 
 export interface Option {
-    label: string
+    label: string | JSX.Element
     value: string
 }
 
@@ -58,7 +58,8 @@ export default function CreatableSelect(props: CreatableSelectProps): JSX.Elemen
                         bordered={false} />
                     <a
                         style={{ flex: 'none', padding: '4px', display: 'block', cursor: 'pointer' }} 
-                        onClick={_onClickAddItem}>
+                        onClick={_onClickAddItem}
+                    >
                       <PlusOutlined /> Add item
                     </a>
                 </div>

ui/src/components/DeployForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { Form, Select, Radio, Button } from "antd"
+import { Form, Select, Radio, Button, Typography } from "antd"
 
 import { Branch, Commit, Tag, DeploymentType, Status, User, Env } from "../models"
 
@@ -9,6 +9,8 @@ import ApproversSelect from "./ApproversSelect"
 
 export type Option = Op
 
+const { Text } = Typography
+
 interface DeployFormProps {
     envs: Env[]
     onSelectEnv(env: Env): void
@@ -113,7 +115,7 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
 
     const mapBranchToOption = (branch: Branch) => {
         return {
-            label: branch.name,
+            label: <Text className="gitploy-code" code>{branch.name}</Text>,
             value: branch.name
         } as Option
     }
@@ -134,7 +136,9 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
 
     const mapCommitToOption = (commit: Commit) => {
         return {
-            label: `${commit.sha.substr(0, 7)} - ${commit.message}`,
+            label: <span>
+                <Text className="gitploy-code" code>{commit.sha.substring(0, 7)}</Text> - {commit.message} 
+            </span>,
             value: commit.sha,
         } as Option
     }
@@ -148,7 +152,7 @@ export default function DeployForm(props: DeployFormProps): JSX.Element {
 
     const mapTagToOption = (tag: Tag) => {
         return {
-            label: tag.name,
+            label: <Text className="gitploy-code" code>{tag.name}</Text>,
             value: tag.name
         } as Option
     }

ui/src/components/RollbackForm.tsx

@@ -3,6 +3,7 @@ import moment from 'moment'
 
 import { User, Deployment, DeploymentType, Env } from "../models"
 import ApproversSelect from "./ApproversSelect"
+import DeploymentRefCode from './DeploymentRefCode'
 
 interface RollbackFormProps {
     envs: Env[]
@@ -82,11 +83,11 @@ export default function RollbackForm(props: RollbackFormProps): JSX.Element {
 
                             if (d.deployer) {
                                 option = <Select.Option key={idx} value={d.id}>
-                                   {ref} deployed by <Avatar size="small" src={d.deployer.avatar} /> {d.deployer.login} {moment(d.createdAt).fromNow()}
+                                   #{d.number} - <DeploymentRefCode deployment={d}/> deployed by <Avatar size="small" src={d.deployer.avatar} /> {d.deployer.login} {moment(d.createdAt).fromNow()}
                                 </Select.Option>
                             } else {
                                 option = <Select.Option key={idx} value={d.id}>
-                                   {ref} deployed {moment(d.createdAt).fromNow()}
+                                   #{d.number} - <DeploymentRefCode deployment={d}/> deployed {moment(d.createdAt).fromNow()}
                                 </Select.Option>
                             }
                             return option