From 86f09f46cea6d9f3058fdb58cdae81710e60f3e6 Mon Sep 17 00:00:00 2001
From: noah <noah.lee@buzzvil.com>
Date: Sat, 7 May 2022 21:59:27 +0900
Subject: [PATCH 1/3] Install prettier

---
 ui/.prettierignore   |  2 ++
 ui/.prettierrc.json  |  5 +++++
 ui/package-lock.json | 23 +++++++++++++++++++++++
 ui/package.json      |  5 +++--
 4 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 ui/.prettierignore
 create mode 100644 ui/.prettierrc.json

diff --git a/ui/.prettierignore b/ui/.prettierignore
new file mode 100644
index 00000000..227b71fe
--- /dev/null
+++ b/ui/.prettierignore
@@ -0,0 +1,2 @@
+build
+coverage
\ No newline at end of file
diff --git a/ui/.prettierrc.json b/ui/.prettierrc.json
new file mode 100644
index 00000000..6a8af5e9
--- /dev/null
+++ b/ui/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/ui/package-lock.json b/ui/package-lock.json
index fd07218e..177b63dd 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "ui",
       "version": "0.1.0",
       "dependencies": {
         "@craco/craco": "^6.1.2",
@@ -37,6 +38,7 @@
         "@typescript-eslint/eslint-plugin": "^4.28.4",
         "@typescript-eslint/parser": "^4.28.4",
         "eslint": "^7.31.0",
+        "prettier": "2.6.2",
         "typescript": "^4.3.5"
       }
     },
@@ -15036,6 +15038,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -33451,6 +33468,12 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index e3dfb418..51c898d4 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^12.8.3",
     "antd": "^4.16.1",
     "craco-less": "^1.17.1",
+    "follow-redirects": "^1.14.7",
     "http-status-codes": "^2.1.4",
     "lodash.debounce": "^4.0.8",
     "moment": "^2.29.1",
@@ -19,8 +20,7 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2",
-    "follow-redirects": "^1.14.7"
+    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "craco start",
@@ -58,6 +58,7 @@
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "eslint": "^7.31.0",
+    "prettier": "2.6.2",
     "typescript": "^4.3.5"
   }
 }

From 4619f7cdcb3d4a803951391dbb3d3cf42584f4e6 Mon Sep 17 00:00:00 2001
From: noah <noah.lee@buzzvil.com>
Date: Sat, 7 May 2022 22:04:19 +0900
Subject: [PATCH 2/3] Run prettier

---
 ui/.eslintrc.js                               |  24 +-
 ui/craco.config.js                            |   8 +-
 ui/public/index.html                          |   5 +-
 ui/src/App.less                               |   8 +-
 ui/src/App.tsx                                |  78 +-
 ui/src/apis/_base.ts                          |  37 +-
 ui/src/apis/branch.ts                         |  83 +-
 ui/src/apis/chat.ts                           |  26 +-
 ui/src/apis/commit.ts                         | 243 ++---
 ui/src/apis/config.ts                         |  93 +-
 ui/src/apis/deployment.ts                     | 546 ++++++-----
 ui/src/apis/events.ts                         |  57 +-
 ui/src/apis/index.ts                          | 101 +--
 ui/src/apis/license.ts                        |  42 +-
 ui/src/apis/lock.ts                           | 219 +++--
 ui/src/apis/perm.ts                           |  73 +-
 ui/src/apis/repo.ts                           | 362 ++++----
 ui/src/apis/review.ts                         | 288 +++---
 ui/src/apis/setting.ts                        |  18 +-
 ui/src/apis/sync.ts                           |  16 +-
 ui/src/apis/tag.ts                            |  85 +-
 ui/src/apis/user.ts                           | 239 ++---
 ui/src/components/ActivateButton.tsx          |  39 +-
 ui/src/components/CreatableSelect.tsx         | 129 +--
 ui/src/components/DeploymentRefCode.tsx       |  39 +-
 ui/src/components/DeploymentStatusBadge.tsx   |  56 +-
 ui/src/components/Pagination.tsx              |  36 +-
 ui/src/components/RecentActivities.tsx        | 140 +--
 ui/src/components/Spin.tsx                    |   8 +-
 ui/src/components/UserAvatar.tsx              |  36 +-
 .../components/partials/deploymentStatus.tsx  |  40 +-
 ui/src/components/partials/index.tsx          |   4 +-
 ui/src/index.tsx                              |   6 +-
 ui/src/libs/index.ts                          |  12 +-
 ui/src/models/Branch.ts                       |   6 +-
 ui/src/models/Commit.ts                       |  38 +-
 ui/src/models/Config.ts                       |  44 +-
 ui/src/models/Deployment.ts                   |  78 +-
 ui/src/models/Event.ts                        |  26 +-
 ui/src/models/License.ts                      |   8 +-
 ui/src/models/Lock.ts                         |  14 +-
 ui/src/models/Perm.ts                         |  16 +-
 ui/src/models/Repo.ts                         |  24 +-
 ui/src/models/Request.ts                      |  10 +-
 ui/src/models/Review.ts                       |  26 +-
 ui/src/models/Tag.ts                          |   6 +-
 ui/src/models/User.ts                         |  32 +-
 ui/src/models/errors.ts                       |  68 +-
 ui/src/models/index.ts                        | 140 +--
 ui/src/redux/activities.tsx                   | 115 +--
 ui/src/redux/deployment.tsx                   | 477 +++++-----
 ui/src/redux/home.ts                          | 173 ++--
 ui/src/redux/hooks.ts                         |   8 +-
 ui/src/redux/main.ts                          | 446 ++++-----
 ui/src/redux/members.ts                       | 205 +++--
 ui/src/redux/repo.ts                          | 136 +--
 ui/src/redux/repoDeploy.tsx                   | 851 ++++++++++--------
 ui/src/redux/repoHome.ts                      | 142 +--
 ui/src/redux/repoLock.ts                      | 310 +++----
 ui/src/redux/repoRollback.tsx                 | 408 +++++----
 ui/src/redux/repoSettings.tsx                 | 226 ++---
 ui/src/redux/settings.ts                      | 115 +--
 ui/src/redux/store.ts                         |  42 +-
 ui/src/views/activities/ActivityHistory.tsx   |  68 +-
 ui/src/views/activities/SearchActivities.tsx  | 118 +--
 ui/src/views/activities/index.tsx             | 199 ++--
 ui/src/views/deployment/CommitChanges.tsx     | 147 +--
 .../views/deployment/DeploymentDescriptor.tsx | 124 +--
 .../deployment/DeploymentStatusSteps.tsx      |  81 +-
 ui/src/views/deployment/HeaderBreadcrumb.tsx  |  49 +-
 ui/src/views/deployment/ReviewButton.tsx      | 134 +--
 ui/src/views/deployment/ReviewList.tsx        | 120 +--
 ui/src/views/deployment/index.tsx             | 454 +++++-----
 ui/src/views/home/RepoList.tsx                |  84 +-
 ui/src/views/home/index.tsx                   | 238 ++---
 ui/src/views/main/Content.tsx                 | 124 +--
 ui/src/views/main/Header.tsx                  | 181 ++--
 ui/src/views/main/LicenseWarningFooter.tsx    |  81 +-
 ui/src/views/main/index.tsx                   | 230 +++--
 ui/src/views/members/MemberList.tsx           |  76 +-
 ui/src/views/members/index.tsx                | 185 ++--
 ui/src/views/repo/index.tsx                   | 260 +++---
 ui/src/views/repoDeploy/DeployForm.tsx        | 619 +++++++------
 .../views/repoDeploy/DynamicPayloadModal.tsx  | 225 ++---
 ui/src/views/repoDeploy/StatusStateIcon.tsx   | 182 ++--
 ui/src/views/repoDeploy/index.tsx             | 467 +++++-----
 ui/src/views/repoHome/ActivityLogs.tsx        |  72 +-
 ui/src/views/repoHome/index.tsx               | 222 ++---
 ui/src/views/repoLock/LockList.tsx            | 161 ++--
 ui/src/views/repoLock/index.tsx               | 185 ++--
 ui/src/views/repoRollback/RollbackForm.tsx    | 180 ++--
 ui/src/views/repoRollback/index.tsx           | 227 ++---
 ui/src/views/repoSettings/SettingsForm.tsx    | 147 ++-
 ui/src/views/repoSettings/index.tsx           | 133 +--
 ui/src/views/settings/SlackDescriptions.tsx   |  36 +-
 ui/src/views/settings/UserDescriptions.tsx    |  61 +-
 ui/src/views/settings/index.tsx               |  96 +-
 ui/tsconfig.json                              |  10 +-
 98 files changed, 7060 insertions(+), 6302 deletions(-)

diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index 709d3e31..153c3fe3 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -1,16 +1,10 @@
 module.exports = {
-    root: true,
-    parser: '@typescript-eslint/parser',
-    plugins: [
-      '@typescript-eslint',
-    ],
-    extends: [
-      'eslint:recommended',
-      'plugin:@typescript-eslint/recommended',
-    ],
-    rules: {
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-empty-interface": "off"
-    },
-  };
-  
\ No newline at end of file
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+  },
+};
diff --git a/ui/craco.config.js b/ui/craco.config.js
index 165cb7e8..21767add 100644
--- a/ui/craco.config.js
+++ b/ui/craco.config.js
@@ -7,7 +7,7 @@ module.exports = {
       options: {
         lessLoaderOptions: {
           lessOptions: {
-            modifyVars: { 
+            modifyVars: {
               // Custom theme
               // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
               // Colors
@@ -17,8 +17,8 @@ module.exports = {
               // Layout
               '@layout-header-background': '@purple-10',
               '@layout-body-background': '#fff',
-              // 
-              '@border-radius-base': '5px'
+              //
+              '@border-radius-base': '5px',
             },
             javascriptEnabled: true,
           },
@@ -26,4 +26,4 @@ module.exports = {
       },
     },
   ],
-};
\ No newline at end of file
+};
diff --git a/ui/public/index.html b/ui/public/index.html
index 4ce1a7dd..de165bf4 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -4,10 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Deploy Application safe and fast."
-    />
+    <meta name="description" content="Deploy Application safe and fast." />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/ui/src/App.less b/ui/src/App.less
index e69053a8..e4341b47 100644
--- a/ui/src/App.less
+++ b/ui/src/App.less
@@ -21,13 +21,13 @@
   // Override border of code.
   &-code {
     > code {
-      border: 0
+      border: 0;
     }
   }
 
   &-quote {
-    padding: 0 0 0 .6em;
-    border-left: 4px solid rgba(100,100,100,.2);
-    opacity: .85;
+    padding: 0 0 0 0.6em;
+    border-left: 4px solid rgba(100, 100, 100, 0.2);
+    opacity: 0.85;
   }
 }
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index b04d7208..cbc6c047 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,47 +1,43 @@
-import './App.less'
-import {
-    BrowserRouter as Router,
-    Switch,
-    Route,
-} from "react-router-dom";
+import './App.less';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
-import Home from "./views/home"
-import Repo from "./views/repo"
-import Deployment from "./views/deployment"
-import Settings from "./views/settings"
-import Members from "./views/members"
-import Activities from "./views/activities"
+import Home from './views/home';
+import Repo from './views/repo';
+import Deployment from './views/deployment';
+import Settings from './views/settings';
+import Members from './views/members';
+import Activities from './views/activities';
 
 function App(): JSX.Element {
-    return (
-        <div className="App">
-            <Router>
-                <Switch>
-                    <Route path="/:namespace/:name/deployments/:number">
-                        <Deployment />
-                    </Route>
-                    <Route path="/:namespace/:name/:tab">
-                        <Repo />
-                    </Route>
-                    <Route path="/:namespace/:name">
-                        <Repo />
-                    </Route>
-                    <Route path="/settings">
-                        <Settings />
-                    </Route>
-                    <Route path="/members">
-                        <Members />
-                    </Route>
-                    <Route path="/activities">
-                        <Activities />
-                    </Route>
-                    <Route path="/">
-                        <Home />
-                    </Route>
-                </Switch>
-            </Router>
-        </div>
-    );
+  return (
+    <div className="App">
+      <Router>
+        <Switch>
+          <Route path="/:namespace/:name/deployments/:number">
+            <Deployment />
+          </Route>
+          <Route path="/:namespace/:name/:tab">
+            <Repo />
+          </Route>
+          <Route path="/:namespace/:name">
+            <Repo />
+          </Route>
+          <Route path="/settings">
+            <Settings />
+          </Route>
+          <Route path="/members">
+            <Members />
+          </Route>
+          <Route path="/activities">
+            <Activities />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+      </Router>
+    </div>
+  );
 }
 
 export default App;
diff --git a/ui/src/apis/_base.ts b/ui/src/apis/_base.ts
index 7deff9b9..cf7ea3f4 100644
--- a/ui/src/apis/_base.ts
+++ b/ui/src/apis/_base.ts
@@ -1,17 +1,24 @@
-import { StatusCodes } from "http-status-codes"
-import { HttpInternalServerError,  HttpUnauthorizedError, HttpPaymentRequiredError } from "../models/errors"
+import { StatusCodes } from 'http-status-codes';
+import {
+  HttpInternalServerError,
+  HttpUnauthorizedError,
+  HttpPaymentRequiredError,
+} from '../models/errors';
 
-export const _fetch = async (input: RequestInfo, init?: RequestInit): Promise<Response>  => {
-    const response = await fetch(input, init)
-    
-    // Throw exception when the general status code is received.
-    if (response.status === StatusCodes.INTERNAL_SERVER_ERROR) {
-        throw new HttpInternalServerError("The internal server error occurs.")
-    } else if (response.status === StatusCodes.UNAUTHORIZED) {
-        throw new HttpUnauthorizedError("The session is expired.")
-    } else if (response.status === StatusCodes.PAYMENT_REQUIRED) {
-        throw new HttpPaymentRequiredError("The license is expired.")
-    }
+export const _fetch = async (
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<Response> => {
+  const response = await fetch(input, init);
 
-    return response
-}
\ No newline at end of file
+  // Throw exception when the general status code is received.
+  if (response.status === StatusCodes.INTERNAL_SERVER_ERROR) {
+    throw new HttpInternalServerError('The internal server error occurs.');
+  } else if (response.status === StatusCodes.UNAUTHORIZED) {
+    throw new HttpUnauthorizedError('The session is expired.');
+  } else if (response.status === StatusCodes.PAYMENT_REQUIRED) {
+    throw new HttpPaymentRequiredError('The license is expired.');
+  }
+
+  return response;
+};
diff --git a/ui/src/apis/branch.ts b/ui/src/apis/branch.ts
index 816c2229..a0218cbd 100644
--- a/ui/src/apis/branch.ts
+++ b/ui/src/apis/branch.ts
@@ -1,45 +1,60 @@
-import { StatusCodes } from 'http-status-codes'
+import { StatusCodes } from 'http-status-codes';
 
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
-import { Branch, HttpNotFoundError } from '../models'
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import { Branch, HttpNotFoundError } from '../models';
 
 interface BranchData {
-    name: string
-    commit_sha: string
+  name: string;
+  commit_sha: string;
 }
 
 const mapDataToBranch = (data: BranchData): Branch => {
-    return {
-        name: data.name,
-        commitSha: data.commit_sha
+  return {
+    name: data.name,
+    commitSha: data.commit_sha,
+  };
+};
+
+export const listBranches = async (
+  namespace: string,
+  name: string,
+  page = 1,
+  perPage = 30
+): Promise<Branch[]> => {
+  const branches: Branch[] = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/branches?page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
-}
+  )
+    .then((response) => response.json())
+    .then((branches) => branches.map((b: BranchData) => mapDataToBranch(b)));
 
-export const listBranches = async (namespace: string, name: string, page = 1, perPage = 30): Promise<Branch[]> => {
-    const branches: Branch[] = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/branches?page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: "same-origin",
-    })
-        .then(response => response.json())
-        .then(branches => branches.map((b: BranchData) => mapDataToBranch(b)))
-    
-    return branches
-}
+  return branches;
+};
 
-export const getBranch = async (namespace: string, name: string, branch: string): Promise<Branch> => {
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/branches/${branch}`, {
-        headers,
-        credentials: "same-origin",
-    })
-    if (response.status === StatusCodes.NOT_FOUND) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpNotFoundError(message)
+export const getBranch = async (
+  namespace: string,
+  name: string,
+  branch: string
+): Promise<Branch> => {
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/branches/${branch}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
+  );
+  if (response.status === StatusCodes.NOT_FOUND) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpNotFoundError(message);
+  }
+
+  const ret: Branch = await response
+    .json()
+    .then((b: BranchData) => mapDataToBranch(b));
 
-    const ret:Branch = await response
-        .json()
-        .then((b: BranchData) => mapDataToBranch(b))
-    
-    return ret
-}
\ No newline at end of file
+  return ret;
+};
diff --git a/ui/src/apis/chat.ts b/ui/src/apis/chat.ts
index 0fc01c1b..c3533397 100644
--- a/ui/src/apis/chat.ts
+++ b/ui/src/apis/chat.ts
@@ -1,16 +1,16 @@
-import { _fetch } from "./_base"
-import { instance, headers } from "./setting"
-import { StatusCodes } from "http-status-codes"
+import { _fetch } from './_base';
+import { instance, headers } from './setting';
+import { StatusCodes } from 'http-status-codes';
 
 export const checkSlack = async (): Promise<boolean> => {
-    const res = await _fetch(`${instance}/slack`, {
-        headers,
-        credentials: "same-origin",
-        method: "HEAD"
-    })
-    if (res.status === StatusCodes.NOT_FOUND) {
-        return false
-    }
+  const res = await _fetch(`${instance}/slack`, {
+    headers,
+    credentials: 'same-origin',
+    method: 'HEAD',
+  });
+  if (res.status === StatusCodes.NOT_FOUND) {
+    return false;
+  }
 
-    return true
-}
\ No newline at end of file
+  return true;
+};
diff --git a/ui/src/apis/commit.ts b/ui/src/apis/commit.ts
index 76a7d766..3ab1a251 100644
--- a/ui/src/apis/commit.ts
+++ b/ui/src/apis/commit.ts
@@ -1,129 +1,158 @@
-import { StatusCodes } from 'http-status-codes'
+import { StatusCodes } from 'http-status-codes';
 
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
-import { Commit, Author, Status, HttpNotFoundError, StatusState } from '../models'
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+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
-    }
+  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)
-        }
-    }
+  let author: Author | undefined;
 
-    return {
-        sha: data.sha,
-        message: data.message,
-        isPullRequest: data.is_pull_request,
-        htmlUrl: data.html_url,
-        author
-    }
-}
+  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,
+  };
+};
 
 interface StatusData {
-    context: string
-    avatar_url: string
-    target_url: string
-    state: string
+  context: string;
+  avatar_url: string;
+  target_url: string;
+  state: string;
 }
 
 const mapDataToStatus = (data: StatusData): Status => {
-    return {
-        context: data.context,
-        avatarUrl: data.avatar_url,
-        targetUrl: data.target_url,
-        state: mapStatusState(data.state),
-    }
-}
+  return {
+    context: data.context,
+    avatarUrl: data.avatar_url,
+    targetUrl: data.target_url,
+    state: mapStatusState(data.state),
+  };
+};
 
 const mapStatusState = (state: string): StatusState => {
-    switch (state) {
-        case "pending":
-            return StatusState.Pending
-        case "success":
-            return StatusState.Success
-        case "failure":
-            return StatusState.Failure
-        case "cancelled":
-            return StatusState.Cancelled
-        case "skipped":
-            return StatusState.Skipped
-        default:
-            return StatusState.Pending
+  switch (state) {
+    case 'pending':
+      return StatusState.Pending;
+    case 'success':
+      return StatusState.Success;
+    case 'failure':
+      return StatusState.Failure;
+    case 'cancelled':
+      return StatusState.Cancelled;
+    case 'skipped':
+      return StatusState.Skipped;
+    default:
+      return StatusState.Pending;
+  }
+};
+
+export const listCommits = async (
+  namespace: string,
+  name: string,
+  branch: string,
+  page = 1,
+  perPage = 30
+): Promise<Commit[]> => {
+  const commits: Commit[] = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/commits?branch=${branch}&page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
-}
+  )
+    .then((response) => response.json())
+    .then((commits) => commits.map((c: CommitData) => mapDataToCommit(c)));
 
-export const listCommits = async (namespace: string, name: string, branch: string, page = 1, perPage = 30): Promise<Commit[]> => {
-    const commits: Commit[] = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/commits?branch=${branch}&page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: "same-origin",
-    })
-        .then(response => response.json())
-        .then(commits => commits.map((c: CommitData) => mapDataToCommit(c)))
-    
-    return commits
-}
+  return commits;
+};
 
-export const getCommit = async (namespace: string, name: string, sha: string): Promise<Commit> => {
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/commits/${sha}`, {
-        headers,
-        credentials: "same-origin",
-    })
-    if (response.status === StatusCodes.NOT_FOUND) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpNotFoundError(message)
+export const getCommit = async (
+  namespace: string,
+  name: string,
+  sha: string
+): Promise<Commit> => {
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/commits/${sha}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
+  );
+  if (response.status === StatusCodes.NOT_FOUND) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpNotFoundError(message);
+  }
 
-    const commit: Commit = await response
-        .json()
-        .then((c: CommitData) => mapDataToCommit(c))
-    
-    return commit
-}
+  const commit: Commit = await response
+    .json()
+    .then((c: CommitData) => mapDataToCommit(c));
 
-export const listStatuses = async (namespace: string, name: string, sha: string): Promise<{state: StatusState, statuses: Status[]}> => {
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/commits/${sha}/statuses`, {
-        headers,
-        credentials: "same-origin",
-    })
-    if (response.status === StatusCodes.NOT_FOUND) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpNotFoundError(message)
+  return commit;
+};
+
+export const listStatuses = async (
+  namespace: string,
+  name: string,
+  sha: string
+): Promise<{ state: StatusState; statuses: Status[] }> => {
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/commits/${sha}/statuses`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
+  );
+  if (response.status === StatusCodes.NOT_FOUND) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpNotFoundError(message);
+  }
+
+  const result = await response.json().then((d) => {
+    let state: StatusState;
+    const statuses: Status[] = d.statuses.map((status: StatusData) =>
+      mapDataToStatus(status)
+    );
+
+    if (statuses.length === 0) {
+      state = StatusState.Null;
+    } else {
+      state = mapStatusState(d.state);
+    }
+
+    return {
+      state,
+      statuses,
+    };
+  });
 
-    const result = await response
-        .json()
-        .then(d => {
-            let state: StatusState
-            const statuses: Status[] =  d.statuses.map((status: StatusData) => mapDataToStatus(status))
-
-            if (statuses.length === 0) {
-                state = StatusState.Null
-            } else {
-                state = mapStatusState(d.state)
-            }
-
-            return {
-                state,
-                statuses
-            }
-        })
-    
-    return result 
-}
\ No newline at end of file
+  return result;
+};
diff --git a/ui/src/apis/config.ts b/ui/src/apis/config.ts
index b8937c49..490ccaf1 100644
--- a/ui/src/apis/config.ts
+++ b/ui/src/apis/config.ts
@@ -1,58 +1,65 @@
-import { StatusCodes } from 'http-status-codes'
+import { StatusCodes } from 'http-status-codes';
 
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
-import { Config, Env, HttpNotFoundError } from '../models'
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import { Config, Env, HttpNotFoundError } from '../models';
 
 interface ConfigData {
-    envs: EnvData[]
+  envs: EnvData[];
 }
 
 interface EnvData {
-    name: string
-    required_contexts?: string[]
-    dynamic_payload?: {
-        enabled: boolean,
-        inputs: any,
-    }
-    review?: {
-        enabled: boolean
-        reviewers: string[]
-    }
+  name: string;
+  required_contexts?: string[];
+  dynamic_payload?: {
+    enabled: boolean;
+    inputs: any;
+  };
+  review?: {
+    enabled: boolean;
+    reviewers: string[];
+  };
 }
 
 const mapDataToConfig = (data: ConfigData): Config => {
-    const envs: Env[] = data.envs.map((e: EnvData) => {
-        const { dynamic_payload, review } = e
-
-        return {
-            name: e.name,
-            requiredContexts: e.required_contexts,
-            dynamicPayload: (dynamic_payload)? {
-                enabled: dynamic_payload?.enabled,
-                inputs: dynamic_payload?.inputs,
-            } : undefined,
-            review,
-        }
-    })
+  const envs: Env[] = data.envs.map((e: EnvData) => {
+    const { dynamic_payload, review } = e;
 
     return {
-        envs,
-    }
-}
+      name: e.name,
+      requiredContexts: e.required_contexts,
+      dynamicPayload: dynamic_payload
+        ? {
+            enabled: dynamic_payload?.enabled,
+            inputs: dynamic_payload?.inputs,
+          }
+        : undefined,
+      review,
+    };
+  });
+
+  return {
+    envs,
+  };
+};
 
-export const getConfig = async (namespace: string, name: string): Promise<Config> => {
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/config`, {
-        headers,
-        credentials: "same-origin",
-    })
-    if (response.status === StatusCodes.NOT_FOUND) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpNotFoundError(message)
+export const getConfig = async (
+  namespace: string,
+  name: string
+): Promise<Config> => {
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/config`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
+  );
+  if (response.status === StatusCodes.NOT_FOUND) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpNotFoundError(message);
+  }
 
-    const conf = await response.json()
-        .then(c => mapDataToConfig(c))
+  const conf = await response.json().then((c) => mapDataToConfig(c));
 
-    return conf
-}
+  return conf;
+};
diff --git a/ui/src/apis/deployment.ts b/ui/src/apis/deployment.ts
index 2863d3f5..967eb62e 100644
--- a/ui/src/apis/deployment.ts
+++ b/ui/src/apis/deployment.ts
@@ -1,290 +1,350 @@
-import { StatusCodes } from "http-status-codes"
+import { StatusCodes } from 'http-status-codes';
 
-import { instance, headers } from "./setting"
-import { _fetch } from "./_base"
-import { 
-    User,
-    Repo,
-    Deployment, 
-    DeploymentType, 
-    DeploymentStatus,
-    DeploymentStatusEnum, 
-    Commit,
-    HttpUnprocessableEntityError, 
-    HttpForbiddenError,
-    HttpConflictError
-} from "../models"
-import { UserData, mapDataToUser } from "./user"
-import { RepoData, mapDataToRepo } from "./repo"
-import { mapDataToCommit } from "./commit"
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import {
+  User,
+  Repo,
+  Deployment,
+  DeploymentType,
+  DeploymentStatus,
+  DeploymentStatusEnum,
+  Commit,
+  HttpUnprocessableEntityError,
+  HttpForbiddenError,
+  HttpConflictError,
+} from '../models';
+import { UserData, mapDataToUser } from './user';
+import { RepoData, mapDataToRepo } from './repo';
+import { mapDataToCommit } from './commit';
 
 export interface DeploymentData {
-    id: number
-    number: number
-    type: string
-    ref: string
-    sha: string
-    env: string
-    status: string
-    uid: number
-    is_rollback: boolean
-    auto_deploy: boolean
-    created_at: string
-    updated_at: string
-    edges: {
-        user?: UserData,
-        repo?: RepoData,
-        deployment_statuses?: DeploymentStatusData[]
-    }
+  id: number;
+  number: number;
+  type: string;
+  ref: string;
+  sha: string;
+  env: string;
+  status: string;
+  uid: number;
+  is_rollback: boolean;
+  auto_deploy: boolean;
+  created_at: string;
+  updated_at: string;
+  edges: {
+    user?: UserData;
+    repo?: RepoData;
+    deployment_statuses?: DeploymentStatusData[];
+  };
 }
 
 interface DeploymentStatusData {
-    id: number
-    status: string
-    description: string
-    log_url: string
-    created_at: string
-    updated_at: string
+  id: number;
+  status: string;
+  description: string;
+  log_url: string;
+  created_at: string;
+  updated_at: string;
 }
 
 export const mapDataToDeployment = (data: DeploymentData): Deployment => {
-    let deployer: User | undefined
-    let repo: Repo | undefined
-    let statuses: DeploymentStatus[] = []
+  let deployer: User | undefined;
+  let repo: Repo | undefined;
+  let statuses: DeploymentStatus[] = [];
 
-    if (typeof data.edges.user !== "undefined") {
-        deployer = mapDataToUser(data.edges.user)
-    }
+  if (typeof data.edges.user !== 'undefined') {
+    deployer = mapDataToUser(data.edges.user);
+  }
 
-    if (typeof data.edges.repo !== "undefined") {
-        repo = mapDataToRepo(data.edges.repo) 
-    }
+  if (typeof data.edges.repo !== 'undefined') {
+    repo = mapDataToRepo(data.edges.repo);
+  }
 
-    if (typeof data.edges.deployment_statuses !== "undefined") {
-        statuses =  data.edges.deployment_statuses
-            .map((data: any) => mapDataToDeploymentStatus(data))
-    }
+  if (typeof data.edges.deployment_statuses !== 'undefined') {
+    statuses = data.edges.deployment_statuses.map((data: any) =>
+      mapDataToDeploymentStatus(data)
+    );
+  }
 
-    return {
-        id: data.id,
-        number: data.number,
-        type: mapDeploymentType(data.type),
-        ref: data.ref,
-        sha: data.sha,
-        env: data.env,
-        status: mapDeploymentStatusEnum(data.status),
-        uid: data.uid,
-        isRollback: data.is_rollback,
-        createdAt: new Date(data.created_at),
-        updatedAt: new Date(data.updated_at),
-        deployer,
-        repo,
-        statuses,
-    }
-}
+  return {
+    id: data.id,
+    number: data.number,
+    type: mapDeploymentType(data.type),
+    ref: data.ref,
+    sha: data.sha,
+    env: data.env,
+    status: mapDeploymentStatusEnum(data.status),
+    uid: data.uid,
+    isRollback: data.is_rollback,
+    createdAt: new Date(data.created_at),
+    updatedAt: new Date(data.updated_at),
+    deployer,
+    repo,
+    statuses,
+  };
+};
 
 function mapDeploymentType(t: string) {
-    switch (t) {
-        case "commit":
-            return DeploymentType.Commit
-        case "branch":
-            return DeploymentType.Branch
-        case "tag":
-            return DeploymentType.Tag
-        default:
-            return DeploymentType.Commit
-    }
+  switch (t) {
+    case 'commit':
+      return DeploymentType.Commit;
+    case 'branch':
+      return DeploymentType.Branch;
+    case 'tag':
+      return DeploymentType.Tag;
+    default:
+      return DeploymentType.Commit;
+  }
 }
 
 function mapDeploymentStatusEnum(s: string) {
-    switch (s) {
-        case "waiting":
-            return DeploymentStatusEnum.Waiting
-        case "created":
-            return DeploymentStatusEnum.Created
-        case "queued":
-            return DeploymentStatusEnum.Queued
-        case "running":
-            return DeploymentStatusEnum.Running
-        case "success":
-            return DeploymentStatusEnum.Success
-        case "failure":
-            return DeploymentStatusEnum.Failure
-        case "canceled":
-            return DeploymentStatusEnum.Canceled
-        default:
-            return DeploymentStatusEnum.Waiting
-    }
+  switch (s) {
+    case 'waiting':
+      return DeploymentStatusEnum.Waiting;
+    case 'created':
+      return DeploymentStatusEnum.Created;
+    case 'queued':
+      return DeploymentStatusEnum.Queued;
+    case 'running':
+      return DeploymentStatusEnum.Running;
+    case 'success':
+      return DeploymentStatusEnum.Success;
+    case 'failure':
+      return DeploymentStatusEnum.Failure;
+    case 'canceled':
+      return DeploymentStatusEnum.Canceled;
+    default:
+      return DeploymentStatusEnum.Waiting;
+  }
 }
 
 // eslint-disable-next-line
 export function mapDataToDeploymentStatus(data: any): DeploymentStatus {
-    return {
-        id: data.id,
-        status: data.status,
-        description: data.description,
-        logUrl: data.log_url,
-        createdAt: data.created_at,
-        updatedAt: data.updated_at,
-        deploymentId: data.deployment_id,
-        repoId: data.repo_id,
-        edges: {
-            deployment: (data.edges.deployment)? mapDataToDeployment(data.edges.deployment) : undefined,
-            repo: (data.edges.repo)? mapDataToRepo(data.edges.repo) : undefined
-        }
-    }
+  return {
+    id: data.id,
+    status: data.status,
+    description: data.description,
+    logUrl: data.log_url,
+    createdAt: data.created_at,
+    updatedAt: data.updated_at,
+    deploymentId: data.deployment_id,
+    repoId: data.repo_id,
+    edges: {
+      deployment: data.edges.deployment
+        ? mapDataToDeployment(data.edges.deployment)
+        : undefined,
+      repo: data.edges.repo ? mapDataToRepo(data.edges.repo) : undefined,
+    },
+  };
 }
 
 function mapDeploymentStatusToString(status: DeploymentStatusEnum): string {
-    switch (status) {
-        case DeploymentStatusEnum.Waiting:
-            return "waiting"
-        case DeploymentStatusEnum.Created:
-            return "created"
-        case DeploymentStatusEnum.Queued:
-            return "queued"
-        case DeploymentStatusEnum.Running:
-            return "running"
-        case DeploymentStatusEnum.Success:
-            return "success"
-        case DeploymentStatusEnum.Failure:
-            return "failure"
-        case DeploymentStatusEnum.Canceled:
-            return "canceled"
-        default:
-            return "waiting"
-    }
-
+  switch (status) {
+    case DeploymentStatusEnum.Waiting:
+      return 'waiting';
+    case DeploymentStatusEnum.Created:
+      return 'created';
+    case DeploymentStatusEnum.Queued:
+      return 'queued';
+    case DeploymentStatusEnum.Running:
+      return 'running';
+    case DeploymentStatusEnum.Success:
+      return 'success';
+    case DeploymentStatusEnum.Failure:
+      return 'failure';
+    case DeploymentStatusEnum.Canceled:
+      return 'canceled';
+    default:
+      return 'waiting';
+  }
 }
 
-export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned: boolean, productionOnly: boolean, from?: Date, to?: Date, page = 1, perPage = 30): Promise<Deployment[]> => {
-    const ss: string[] = []
-    statuses.forEach((status) => {
-        ss.push(mapDeploymentStatusToString(status))
-    })
+export const searchDeployments = async (
+  statuses: DeploymentStatusEnum[],
+  owned: boolean,
+  productionOnly: boolean,
+  from?: Date,
+  to?: Date,
+  page = 1,
+  perPage = 30
+): Promise<Deployment[]> => {
+  const ss: string[] = [];
+  statuses.forEach((status) => {
+    ss.push(mapDeploymentStatusToString(status));
+  });
 
-    const fromParam = (from)? `from=${from.toISOString()}` : ""
-    const toParam = (to)? `&to=${to.toISOString()}` : ""
-    
-    const deployments: Deployment[] = await _fetch(`${instance}/api/v1/search/deployments?statuses=${ss.join(",")}&owned=${owned}&production_only=${productionOnly}&${fromParam}&${toParam}&page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: 'same-origin',
-    })
-        .then(response => response.json())
-        .then(ds => ds.map((d: any): Deployment => mapDataToDeployment(d)))
+  const fromParam = from ? `from=${from.toISOString()}` : '';
+  const toParam = to ? `&to=${to.toISOString()}` : '';
 
-    return deployments
-}
+  const deployments: Deployment[] = await _fetch(
+    `${instance}/api/v1/search/deployments?statuses=${ss.join(
+      ','
+    )}&owned=${owned}&production_only=${productionOnly}&${fromParam}&${toParam}&page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
+    }
+  )
+    .then((response) => response.json())
+    .then((ds) => ds.map((d: any): Deployment => mapDataToDeployment(d)));
 
-export const listDeployments = async (namespace: string, name: string, env: string, status: string, page: number, perPage: number): Promise<Deployment[]> => {
-    const deployments: Deployment[] = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments?env=${env}&status=${status}&page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: 'same-origin',
-    })
-        .then(response => response.json())
-        .then(ds => ds.map((d: any): Deployment => mapDataToDeployment(d)))
+  return deployments;
+};
 
-    return deployments
-}
+export const listDeployments = async (
+  namespace: string,
+  name: string,
+  env: string,
+  status: string,
+  page: number,
+  perPage: number
+): Promise<Deployment[]> => {
+  const deployments: Deployment[] = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments?env=${env}&status=${status}&page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
+    }
+  )
+    .then((response) => response.json())
+    .then((ds) => ds.map((d: any): Deployment => mapDataToDeployment(d)));
 
-export const getDeployment = async (namespace: string, name: string, number: number): Promise<Deployment> => {
-    const deployment = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}`, {
-        headers,
-        credentials: 'same-origin',
-    })
-        .then(response => response.json())
-        .then(data => mapDataToDeployment(data))
+  return deployments;
+};
 
-    return deployment
-}
+export const getDeployment = async (
+  namespace: string,
+  name: string,
+  number: number
+): Promise<Deployment> => {
+  const deployment = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}`,
+    {
+      headers,
+      credentials: 'same-origin',
+    }
+  )
+    .then((response) => response.json())
+    .then((data) => mapDataToDeployment(data));
+
+  return deployment;
+};
 
 // eslint-disable-next-line
-export const createDeployment = async (namespace: string, name: string, type: DeploymentType = DeploymentType.Commit, ref: string, env: string, payload?: any): Promise<Deployment> => {
-    const body = JSON.stringify({
-        type,
-        ref,
-        env,
-        dynamic_payload: payload
-    })
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments`, {
-        headers,
-        credentials: 'same-origin',
-        method: "POST",
-        body: body,
-    })
-    if (response.status === StatusCodes.FORBIDDEN) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
-    } else if (response.status === StatusCodes.UNPROCESSABLE_ENTITY) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpUnprocessableEntityError(message)
-    } else if (response.status === StatusCodes.CONFLICT) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpConflictError(message)
+export const createDeployment = async (
+  namespace: string,
+  name: string,
+  type: DeploymentType = DeploymentType.Commit,
+  ref: string,
+  env: string,
+  // eslint-disable-next-line
+  payload?: any
+): Promise<Deployment> => {
+  const body = JSON.stringify({
+    type,
+    ref,
+    env,
+    dynamic_payload: payload,
+  });
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'POST',
+      body: body,
     }
+  );
+  if (response.status === StatusCodes.FORBIDDEN) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  } else if (response.status === StatusCodes.UNPROCESSABLE_ENTITY) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpUnprocessableEntityError(message);
+  } else if (response.status === StatusCodes.CONFLICT) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpConflictError(message);
+  }
 
-    const deployment = response
-        .json()
-        .then(d => mapDataToDeployment(d))
-    return deployment
-}
+  const deployment = response.json().then((d) => mapDataToDeployment(d));
+  return deployment;
+};
 
-export const createRemoteDeployment = async (namespace: string, name: string, number: number): Promise<Deployment> => {
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "PUT",
-    })
-    if (response.status === StatusCodes.FORBIDDEN) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
-    } else if (response.status === StatusCodes.UNPROCESSABLE_ENTITY) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpUnprocessableEntityError(message)
+export const createRemoteDeployment = async (
+  namespace: string,
+  name: string,
+  number: number
+): Promise<Deployment> => {
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'PUT',
     }
+  );
+  if (response.status === StatusCodes.FORBIDDEN) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  } else if (response.status === StatusCodes.UNPROCESSABLE_ENTITY) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpUnprocessableEntityError(message);
+  }
 
-    const deployment = response
-        .json()
-        .then(d => mapDataToDeployment(d))
-    return deployment
-}
+  const deployment = response.json().then((d) => mapDataToDeployment(d));
+  return deployment;
+};
 
-export const rollbackDeployment = async (namespace: string, name: string, number: number): Promise<Deployment> => {
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/rollback`, {
-        headers,
-        credentials: 'same-origin',
-        method: "POST",
-    })
-    if (response.status === StatusCodes.FORBIDDEN) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
-    } else if (response.status === StatusCodes.UNPROCESSABLE_ENTITY) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpUnprocessableEntityError(message)
-    } else if (response.status === StatusCodes.CONFLICT) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpConflictError(message)
+export const rollbackDeployment = async (
+  namespace: string,
+  name: string,
+  number: number
+): Promise<Deployment> => {
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/rollback`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'POST',
     }
+  );
+  if (response.status === StatusCodes.FORBIDDEN) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  } else if (response.status === StatusCodes.UNPROCESSABLE_ENTITY) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpUnprocessableEntityError(message);
+  } else if (response.status === StatusCodes.CONFLICT) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpConflictError(message);
+  }
 
-    const deployment = response
-        .json()
-        .then(d => mapDataToDeployment(d))
-    return deployment
-}
-
-export const listDeploymentChanges = async (namespace: string, name: string, number: number, page = 1, perPage = 30): Promise<Commit[]> => {
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/changes?page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: 'same-origin',
-    })
+  const deployment = response.json().then((d) => mapDataToDeployment(d));
+  return deployment;
+};
 
-    if (res.status === StatusCodes.NOT_FOUND) {
-        return []
+export const listDeploymentChanges = async (
+  namespace: string,
+  name: string,
+  number: number,
+  page = 1,
+  perPage = 30
+): Promise<Commit[]> => {
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/changes?page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
+  );
+
+  if (res.status === StatusCodes.NOT_FOUND) {
+    return [];
+  }
 
-    const commits: Commit[] = await res
-        .json()
-        .then(ds => ds.map((d: any): Commit => mapDataToCommit(d)))
+  const commits: Commit[] = await res
+    .json()
+    .then((ds) => ds.map((d: any): Commit => mapDataToCommit(d)));
 
-    return commits
-}
\ No newline at end of file
+  return commits;
+};
diff --git a/ui/src/apis/events.ts b/ui/src/apis/events.ts
index 22d88402..32843957 100644
--- a/ui/src/apis/events.ts
+++ b/ui/src/apis/events.ts
@@ -1,36 +1,39 @@
-import { instance } from './setting'
+import { instance } from './setting';
 
-import { mapDataToDeploymentStatus } from "./deployment"
-import { mapDataToReview } from "./review"
-import { DeploymentStatus, Review  } from "../models"
+import { mapDataToDeploymentStatus } from './deployment';
+import { mapDataToReview } from './review';
+import { DeploymentStatus, Review } from '../models';
 
+export const subscribeDeploymentStatusEvents = (
+  cb: (status: DeploymentStatus) => void
+): EventSource => {
+  const sse = new EventSource(`${instance}/api/v1/stream/events`, {
+    withCredentials: true,
+  });
 
-export const subscribeDeploymentStatusEvents = (cb: (status: DeploymentStatus) => void): EventSource => {
-    const sse = new EventSource(`${instance}/api/v1/stream/events`, {
-        withCredentials: true,
-    })
+  sse.addEventListener('deployment_status', (e: any) => {
+    const data = JSON.parse(e.data);
+    const status = mapDataToDeploymentStatus(data);
 
-    sse.addEventListener("deployment_status", (e: any) => {
-        const data = JSON.parse(e.data)
-        const status = mapDataToDeploymentStatus(data)
+    cb(status);
+  });
 
-        cb(status)
-    })
+  return sse;
+};
 
-    return sse
-}
+export const subscribeReviewEvents = (
+  cb: (review: Review) => void
+): EventSource => {
+  const sse = new EventSource(`${instance}/api/v1/stream/events`, {
+    withCredentials: true,
+  });
 
-export const subscribeReviewEvents = (cb: (review: Review) => void): EventSource => {
-    const sse = new EventSource(`${instance}/api/v1/stream/events`, {
-        withCredentials: true,
-    })
+  sse.addEventListener('review', (e: any) => {
+    const data = JSON.parse(e.data);
+    const review = mapDataToReview(data);
 
-    sse.addEventListener("review", (e: any) => {
-        const data = JSON.parse(e.data)
-        const review = mapDataToReview(data)
+    cb(review);
+  });
 
-        cb(review)
-    })
-
-    return sse
-}
+  return sse;
+};
diff --git a/ui/src/apis/index.ts b/ui/src/apis/index.ts
index beaa1546..328743b8 100644
--- a/ui/src/apis/index.ts
+++ b/ui/src/apis/index.ts
@@ -1,70 +1,39 @@
+export { sync } from './sync';
 export {
-    sync 
-} from "./sync"
-export { 
-    listRepos, 
-    getRepo, 
-    updateRepo, 
-    activateRepo, 
-    deactivateRepo,
-    lockRepo,
-    unlockRepo,
-} from "./repo"
-export { 
-    listPerms 
-} from "./perm"
-export { 
-    searchDeployments, 
-    listDeployments, 
-    getDeployment,
-    createDeployment, 
-    createRemoteDeployment, 
-    rollbackDeployment, 
-    listDeploymentChanges 
-} from './deployment'
+  listRepos,
+  getRepo,
+  updateRepo,
+  activateRepo,
+  deactivateRepo,
+  lockRepo,
+  unlockRepo,
+} from './repo';
+export { listPerms } from './perm';
 export {
-    getConfig 
-} from './config'
-export { 
-    listCommits, 
-    getCommit, 
-    listStatuses 
-} from './commit'
-export { 
-    listBranches, 
-    getBranch 
-} from './branch'
-export { 
-    listTags, 
-    getTag 
-} from './tag'
-export { 
-    listUsers, 
-    updateUser, 
-    deleteUser, 
-    getMe, 
-    getRateLimit 
-} from "./user"
-export { 
-    checkSlack 
-} from "./chat"
+  searchDeployments,
+  listDeployments,
+  getDeployment,
+  createDeployment,
+  createRemoteDeployment,
+  rollbackDeployment,
+  listDeploymentChanges,
+} from './deployment';
+export { getConfig } from './config';
+export { listCommits, getCommit, listStatuses } from './commit';
+export { listBranches, getBranch } from './branch';
+export { listTags, getTag } from './tag';
+export { listUsers, updateUser, deleteUser, getMe, getRateLimit } from './user';
+export { checkSlack } from './chat';
 export {
-    searchReviews,
-    listReviews,
-    getUserReview,
-    approveReview,
-    rejectReview,
-} from "./review"
+  searchReviews,
+  listReviews,
+  getUserReview,
+  approveReview,
+  rejectReview,
+} from './review';
+export { listLocks, lock, unlock, updateLock } from './lock';
+export { getLicense } from './license';
 export {
-    listLocks,
-    lock,
-    unlock,
-    updateLock
-} from "./lock"
-export { 
-    getLicense  
-} from "./license"
-export { 
-    subscribeDeploymentStatusEvents,
-    subscribeReviewEvents,
-} from "./events"
+  subscribeDeploymentStatusEvents,
+  subscribeReviewEvents,
+} from './events';
diff --git a/ui/src/apis/license.ts b/ui/src/apis/license.ts
index dd04db06..44bdda94 100644
--- a/ui/src/apis/license.ts
+++ b/ui/src/apis/license.ts
@@ -1,31 +1,31 @@
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
 
-import { License } from "../models"
+import { License } from '../models';
 
 interface LicenseData {
-    kind: string
-    member_count: number
-    member_limit: number
-    expired_at: string
+  kind: string;
+  member_count: number;
+  member_limit: number;
+  expired_at: string;
 }
 
 function mapDataToLicense(data: LicenseData): License {
-    return {
-        kind: data.kind,
-        memberCount: data.member_count,
-        memberLimit: data.member_limit,
-        expiredAt: new Date(data.expired_at),
-    }
+  return {
+    kind: data.kind,
+    memberCount: data.member_count,
+    memberLimit: data.member_limit,
+    expiredAt: new Date(data.expired_at),
+  };
 }
 
 export const getLicense = async (): Promise<License> => {
-    const lic = await _fetch(`${instance}/api/v1/license`, {
-        headers,
-        credentials: 'same-origin',
-    })
-        .then(res => res.json())
-        .then(data => mapDataToLicense(data))
+  const lic = await _fetch(`${instance}/api/v1/license`, {
+    headers,
+    credentials: 'same-origin',
+  })
+    .then((res) => res.json())
+    .then((data) => mapDataToLicense(data));
 
-    return lic
-}
\ No newline at end of file
+  return lic;
+};
diff --git a/ui/src/apis/lock.ts b/ui/src/apis/lock.ts
index 8fa279f9..33139ce2 100644
--- a/ui/src/apis/lock.ts
+++ b/ui/src/apis/lock.ts
@@ -1,105 +1,138 @@
-import { StatusCodes } from "http-status-codes"
-
-import { instance, headers } from "./setting"
-import { _fetch } from "./_base"
-import { UserData, mapDataToUser } from "./user"
-import { Lock, User, HttpForbiddenError, HttpNotFoundError, HttpUnprocessableEntityError } from "../models"
+import { StatusCodes } from 'http-status-codes';
+
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import { UserData, mapDataToUser } from './user';
+import {
+  Lock,
+  User,
+  HttpForbiddenError,
+  HttpNotFoundError,
+  HttpUnprocessableEntityError,
+} from '../models';
 
 interface LockData {
-    id: number
-    env: string
-    expired_at?: string
-    created_at: string
-    edges: {
-        user?: UserData
-    }
+  id: number;
+  env: string;
+  expired_at?: string;
+  created_at: string;
+  edges: {
+    user?: UserData;
+  };
 }
 
 const mapDataToLock = (data: LockData): Lock => {
-    let user: User | undefined
-
-    if (data.edges.user) {
-        user = mapDataToUser(data.edges.user)
+  let user: User | undefined;
+
+  if (data.edges.user) {
+    user = mapDataToUser(data.edges.user);
+  }
+
+  return {
+    id: data.id,
+    env: data.env,
+    expiredAt: data.expired_at ? new Date(data.expired_at) : undefined,
+    createdAt: new Date(data.created_at),
+    user,
+  };
+};
+
+export const listLocks = async (
+  namespace: string,
+  name: string
+): Promise<Lock[]> => {
+  const locks = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/locks`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
-
-    return {
-        id: data.id,
-        env: data.env,
-        expiredAt: (data.expired_at)? new Date(data.expired_at) : undefined,
-        createdAt: new Date(data.created_at),
-        user,
+  )
+    .then((res) => res.json())
+    .then((datas) => datas.map((d: any): Lock => mapDataToLock(d)));
+
+  return locks;
+};
+
+export const lock = async (
+  namespace: string,
+  name: string,
+  env: string
+): Promise<Lock> => {
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/locks`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'POST',
+      body: JSON.stringify({ env }),
     }
-}
-
-export const listLocks = async (namespace: string, name: string): Promise<Lock[]> => {
-    const locks = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/locks`, {
-        headers,
-        credentials: 'same-origin',
-    })
-        .then(res => res.json())
-        .then(datas => datas.map((d: any): Lock => mapDataToLock(d)))
-
-    return locks
-}
-
-export const lock = async (namespace: string, name: string, env: string): Promise<Lock> => {
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/locks`, {
-        headers,
-        credentials: 'same-origin',
-        method: "POST",
-        body: JSON.stringify({env})
-    })
-
-    if (res.status === StatusCodes.FORBIDDEN) {
-        const {message} = await res.json()
-        throw new HttpForbiddenError(message)
-    } else if (res.status === StatusCodes.UNPROCESSABLE_ENTITY) {
-        const {message} = await res.json()
-        throw new HttpUnprocessableEntityError(message)
+  );
+
+  if (res.status === StatusCodes.FORBIDDEN) {
+    const { message } = await res.json();
+    throw new HttpForbiddenError(message);
+  } else if (res.status === StatusCodes.UNPROCESSABLE_ENTITY) {
+    const { message } = await res.json();
+    throw new HttpUnprocessableEntityError(message);
+  }
+
+  const lock = await res.json().then((data) => mapDataToLock(data));
+  return lock;
+};
+
+export const unlock = async (
+  namespace: string,
+  name: string,
+  id: number
+): Promise<void> => {
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/locks/${id}`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'DELETE',
     }
-
-    const lock = await res
-        .json()
-        .then(data => mapDataToLock(data))
-    return lock
-}
-
-export const unlock = async (namespace: string, name: string, id: number): Promise<void> => {
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/locks/${id}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "DELETE",
-    })
-
-    if (res.status === StatusCodes.FORBIDDEN) {
-        const {message} = await res.json()
-        throw new HttpForbiddenError(message)
+  );
+
+  if (res.status === StatusCodes.FORBIDDEN) {
+    const { message } = await res.json();
+    throw new HttpForbiddenError(message);
+  }
+};
+
+export const updateLock = async (
+  namespace: string,
+  name: string,
+  id: number,
+  payload: { expiredAt?: Date }
+): Promise<Lock> => {
+  const expired_at: string | undefined = payload.expiredAt
+    ? payload.expiredAt.toISOString()
+    : undefined;
+
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/locks/${id}`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'PATCH',
+      body: JSON.stringify({
+        expired_at,
+      }),
     }
-}
+  );
 
-export const updateLock = async (namespace: string, name: string, id: number, payload: {expiredAt?: Date}): Promise<Lock> => {
-    const expired_at: string | undefined = (payload.expiredAt)? payload.expiredAt.toISOString() : undefined
-
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/locks/${id}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "PATCH",
-        body: JSON.stringify({
-            expired_at,
-        }),
-    })
-
-    if (res.status === StatusCodes.FORBIDDEN) {
-        const {message} = await res.json()
-        throw new HttpForbiddenError(message)
-    }
+  if (res.status === StatusCodes.FORBIDDEN) {
+    const { message } = await res.json();
+    throw new HttpForbiddenError(message);
+  }
 
-    if (res.status === StatusCodes.NOT_FOUND) {
-        const {message} = await res.json()
-        throw new HttpNotFoundError(message)
-    }
+  if (res.status === StatusCodes.NOT_FOUND) {
+    const { message } = await res.json();
+    throw new HttpNotFoundError(message);
+  }
 
-    const lock = res.json()
-        .then(data => mapDataToLock(data))
-    return lock
-}
\ No newline at end of file
+  const lock = res.json().then((data) => mapDataToLock(data));
+  return lock;
+};
diff --git a/ui/src/apis/perm.ts b/ui/src/apis/perm.ts
index db152a71..8269ab02 100644
--- a/ui/src/apis/perm.ts
+++ b/ui/src/apis/perm.ts
@@ -1,38 +1,47 @@
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
-import { mapDataToUser, UserData } from "./user"
-import { mapDataToRepo, RepoData } from "./repo"
-import { Perm } from '../models'
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import { mapDataToUser, UserData } from './user';
+import { mapDataToRepo, RepoData } from './repo';
+import { Perm } from '../models';
 
-interface PermData{
-    repo_perm: string
-    synced_at: string
-    created_at: string
-    updated_at: string
-    edges: {
-        user: UserData,
-        repo: RepoData,
-    }
+interface PermData {
+  repo_perm: string;
+  synced_at: string;
+  created_at: string;
+  updated_at: string;
+  edges: {
+    user: UserData;
+    repo: RepoData;
+  };
 }
 
 const mapDataToPerm = (data: PermData): Perm => {
-    return {
-        repoPerm: data.repo_perm,
-        syncedAt: new Date(data.synced_at),
-        createdAt: new Date(data.created_at),
-        updatedAt: new Date(data.updated_at),
-        user: mapDataToUser(data.edges.user),
-        repo: mapDataToRepo(data.edges.repo),
+  return {
+    repoPerm: data.repo_perm,
+    syncedAt: new Date(data.synced_at),
+    createdAt: new Date(data.created_at),
+    updatedAt: new Date(data.updated_at),
+    user: mapDataToUser(data.edges.user),
+    repo: mapDataToRepo(data.edges.repo),
+  };
+};
+
+export const listPerms = async (
+  namespace: string,
+  name: string,
+  q: string,
+  page = 1,
+  perPage = 30
+): Promise<Perm[]> => {
+  const perms: Perm[] = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/perms?q=${q}&page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
-}
+  )
+    .then((res) => res.json())
+    .then((data) => data.map((d: any) => mapDataToPerm(d)));
 
-export const listPerms = async (namespace: string, name: string, q: string, page = 1, perPage = 30): Promise<Perm[]> => {
-    const perms: Perm[] = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/perms?q=${q}&page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: "same-origin"
-    })
-        .then(res => res.json())
-        .then(data => data.map((d: any) => mapDataToPerm(d)))
-    
-    return perms
-}
\ No newline at end of file
+  return perms;
+};
diff --git a/ui/src/apis/repo.ts b/ui/src/apis/repo.ts
index a171024f..73a23609 100644
--- a/ui/src/apis/repo.ts
+++ b/ui/src/apis/repo.ts
@@ -1,176 +1,214 @@
-import { StatusCodes } from 'http-status-codes'
+import { StatusCodes } from 'http-status-codes';
 
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
-import { DeploymentData, mapDataToDeployment } from "./deployment"
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import { DeploymentData, mapDataToDeployment } from './deployment';
 
-import { Repo, HttpForbiddenError, Deployment, HttpUnprocessableEntityError } from '../models'
+import {
+  Repo,
+  HttpForbiddenError,
+  Deployment,
+  HttpUnprocessableEntityError,
+} from '../models';
 
 export interface RepoData {
-    id: number
-    namespace: string
-    name: string
-    description: string
-    config_path: string
-    active: boolean
-    webhook_id: number
-    locked: boolean
-    created_at: string
-    updated_at: string
-    edges: {
-        deployments?: DeploymentData[]
-    }
+  id: number;
+  namespace: string;
+  name: string;
+  description: string;
+  config_path: string;
+  active: boolean;
+  webhook_id: number;
+  locked: boolean;
+  created_at: string;
+  updated_at: string;
+  edges: {
+    deployments?: DeploymentData[];
+  };
 }
 
 // eslint-disable-next-line
 export const mapDataToRepo = (data: RepoData): Repo => {
-    let deployments: Deployment[] | undefined
-
-    if (typeof data.edges.deployments !== "undefined") {
-        deployments = data.edges.deployments.map(data => mapDataToDeployment(data))
-    }
-
-    return {
-        id: data.id,
-        namespace: data.namespace,
-        name: data.name,
-        description: data.description, 
-        configPath: data.config_path,
-        active: data.active,
-        webhookId: data.webhook_id,
-        createdAt: new Date(data.created_at),
-        updatedAt: new Date(data.updated_at),
-        deployments,
-    }
-}
-
-export const listRepos = async (q: string, page = 1, perPage = 30): Promise<Repo[]> => {
-    const repos: Repo[] = await _fetch(`${instance}/api/v1/repos?q=${q}&sort=true&page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: 'same-origin',
-    })
-        .then(response => response.json())
-        .then(repos => repos.map((r: any): Repo => (mapDataToRepo(r))))
-
-    return repos
-}
-
-export const getRepo = async (namespace: string, name: string): Promise<Repo> => {
-    const repo: Repo = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}`, {
-        headers,
-        credentials: 'same-origin',
-    })
-        .then(response => response.json())
-        .then(repo => mapDataToRepo(repo))
-
-    return repo
-}
-
-export const updateRepo = async (namespace: string, name: string, payload: {
-    name?: string,
-    config_path?: string,
-}): Promise<Repo> => {
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "PATCH",
-        body: JSON.stringify(payload)
-    })
-    if (res.status === StatusCodes.FORBIDDEN) {
-        const message = await res.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
-    } else if (res.status === StatusCodes.UNPROCESSABLE_ENTITY) {
-        const message = await res.json().then(data => data.message)
-        throw new HttpUnprocessableEntityError(message)
-    }
-
-    const ret: Repo = await res
-        .json()
-        .then((repo: any) => (mapDataToRepo(repo)))
-
-    return ret
-}
-
-export const activateRepo = async (namespace: string, name: string): Promise<Repo> => {
-    const body = {
-        "active": true,
+  let deployments: Deployment[] | undefined;
+
+  if (typeof data.edges.deployments !== 'undefined') {
+    deployments = data.edges.deployments.map((data) =>
+      mapDataToDeployment(data)
+    );
+  }
+
+  return {
+    id: data.id,
+    namespace: data.namespace,
+    name: data.name,
+    description: data.description,
+    configPath: data.config_path,
+    active: data.active,
+    webhookId: data.webhook_id,
+    createdAt: new Date(data.created_at),
+    updatedAt: new Date(data.updated_at),
+    deployments,
+  };
+};
+
+export const listRepos = async (
+  q: string,
+  page = 1,
+  perPage = 30
+): Promise<Repo[]> => {
+  const repos: Repo[] = await _fetch(
+    `${instance}/api/v1/repos?q=${q}&sort=true&page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "PATCH",
-        body: JSON.stringify(body)
-    })
-    if (response.status === StatusCodes.FORBIDDEN) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
+  )
+    .then((response) => response.json())
+    .then((repos) => repos.map((r: any): Repo => mapDataToRepo(r)));
+
+  return repos;
+};
+
+export const getRepo = async (
+  namespace: string,
+  name: string
+): Promise<Repo> => {
+  const repo: Repo = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
-
-    const repo = await response
-        .json()
-        .then((r:any) => mapDataToRepo(r))
-    return repo
-}
-
-export const deactivateRepo = async (namespace: string, name: string): Promise<Repo> => {
-    const body = {
-        "active": false,
+  )
+    .then((response) => response.json())
+    .then((repo) => mapDataToRepo(repo));
+
+  return repo;
+};
+
+export const updateRepo = async (
+  namespace: string,
+  name: string,
+  payload: {
+    name?: string;
+    config_path?: string;
+  }
+): Promise<Repo> => {
+  const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}`, {
+    headers,
+    credentials: 'same-origin',
+    method: 'PATCH',
+    body: JSON.stringify(payload),
+  });
+  if (res.status === StatusCodes.FORBIDDEN) {
+    const message = await res.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  } else if (res.status === StatusCodes.UNPROCESSABLE_ENTITY) {
+    const message = await res.json().then((data) => data.message);
+    throw new HttpUnprocessableEntityError(message);
+  }
+
+  const ret: Repo = await res.json().then((repo: any) => mapDataToRepo(repo));
+
+  return ret;
+};
+
+export const activateRepo = async (
+  namespace: string,
+  name: string
+): Promise<Repo> => {
+  const body = {
+    active: true,
+  };
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'PATCH',
+      body: JSON.stringify(body),
     }
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "PATCH",
-        body: JSON.stringify(body)
-    })
-    if (response.status === StatusCodes.FORBIDDEN) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
+  );
+  if (response.status === StatusCodes.FORBIDDEN) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  }
+
+  const repo = await response.json().then((r: any) => mapDataToRepo(r));
+  return repo;
+};
+
+export const deactivateRepo = async (
+  namespace: string,
+  name: string
+): Promise<Repo> => {
+  const body = {
+    active: false,
+  };
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'PATCH',
+      body: JSON.stringify(body),
     }
-
-    const repo = await response
-        .json()
-        .then((r:any) => mapDataToRepo(r))
-    return repo
-}
-
-export const lockRepo = async (namespace: string, name: string): Promise<Repo> => {
-    const body = {
-        "locked": true,
+  );
+  if (response.status === StatusCodes.FORBIDDEN) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  }
+
+  const repo = await response.json().then((r: any) => mapDataToRepo(r));
+  return repo;
+};
+
+export const lockRepo = async (
+  namespace: string,
+  name: string
+): Promise<Repo> => {
+  const body = {
+    locked: true,
+  };
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'PATCH',
+      body: JSON.stringify(body),
     }
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "PATCH",
-        body: JSON.stringify(body)
-    })
-    if (response.status === StatusCodes.FORBIDDEN) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
+  );
+  if (response.status === StatusCodes.FORBIDDEN) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  }
+
+  const repo = await response.json().then((r: any) => mapDataToRepo(r));
+  return repo;
+};
+
+export const unlockRepo = async (
+  namespace: string,
+  name: string
+): Promise<Repo> => {
+  const body = {
+    locked: false,
+  };
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}`,
+    {
+      headers,
+      credentials: 'same-origin',
+      method: 'PATCH',
+      body: JSON.stringify(body),
     }
-
-    const repo = await response
-        .json()
-        .then((r:any) => mapDataToRepo(r))
-    return repo
-}
-
-export const unlockRepo = async (namespace: string, name: string): Promise<Repo> => {
-    const body = {
-        "locked": false,
-    }
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}`, {
-        headers,
-        credentials: 'same-origin',
-        method: "PATCH",
-        body: JSON.stringify(body)
-    })
-    if (response.status === StatusCodes.FORBIDDEN) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
-    }
-
-    const repo = await response
-        .json()
-        .then((r:any) => mapDataToRepo(r))
-    return repo
-}
\ No newline at end of file
+  );
+  if (response.status === StatusCodes.FORBIDDEN) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  }
+
+  const repo = await response.json().then((r: any) => mapDataToRepo(r));
+  return repo;
+};
diff --git a/ui/src/apis/review.ts b/ui/src/apis/review.ts
index dafd23f1..af852b08 100644
--- a/ui/src/apis/review.ts
+++ b/ui/src/apis/review.ts
@@ -1,145 +1,173 @@
-import { StatusCodes } from 'http-status-codes'
-
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
-import { UserData, mapDataToUser } from "./user"
-import { DeploymentData, mapDataToDeployment } from "./deployment"
-import { 
-    User,
-    Deployment,
-    Review,
-    ReviewStatusEnum,
-    HttpNotFoundError,
- } from '../models'
+import { StatusCodes } from 'http-status-codes';
+
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import { UserData, mapDataToUser } from './user';
+import { DeploymentData, mapDataToDeployment } from './deployment';
+import {
+  User,
+  Deployment,
+  Review,
+  ReviewStatusEnum,
+  HttpNotFoundError,
+} from '../models';
 
 export interface ReviewData {
-    id: number
-    status: string
-    comment: string
-    created_at: string
-    updated_at: string
-    edges: {
-        user: UserData
-        deployment: DeploymentData
-    }
+  id: number;
+  status: string;
+  comment: string;
+  created_at: string;
+  updated_at: string;
+  edges: {
+    user: UserData;
+    deployment: DeploymentData;
+  };
 }
 
 // eslint-disable-next-line
 export const mapDataToReview = (data: ReviewData): Review => {
-    let user: User | undefined 
-    let deployment: Deployment | undefined 
-
-    if ("user" in data.edges) {
-        user = mapDataToUser(data.edges.user)
-    }
-
-    if ("deployment" in data.edges) {
-        deployment = mapDataToDeployment(data.edges.deployment)
-    }
-
-    return  {
-        id: data.id,
-        status: mapDataToReviewStatus(data.status),
-        comment: data.comment,
-        createdAt: new Date(data.created_at),
-        updatedAt: new Date(data.updated_at),
-        user,
-        deployment
-    }
-}
+  let user: User | undefined;
+  let deployment: Deployment | undefined;
+
+  if ('user' in data.edges) {
+    user = mapDataToUser(data.edges.user);
+  }
+
+  if ('deployment' in data.edges) {
+    deployment = mapDataToDeployment(data.edges.deployment);
+  }
+
+  return {
+    id: data.id,
+    status: mapDataToReviewStatus(data.status),
+    comment: data.comment,
+    createdAt: new Date(data.created_at),
+    updatedAt: new Date(data.updated_at),
+    user,
+    deployment,
+  };
+};
 
 const mapDataToReviewStatus = (status: string): ReviewStatusEnum => {
-    switch (status) {
-        case "pending":
-            return ReviewStatusEnum.Pending
-        case "approved":
-            return ReviewStatusEnum.Approved
-        case "rejected":
-            return ReviewStatusEnum.Rejected
-        default:
-            return ReviewStatusEnum.Pending
-    }
-}
+  switch (status) {
+    case 'pending':
+      return ReviewStatusEnum.Pending;
+    case 'approved':
+      return ReviewStatusEnum.Approved;
+    case 'rejected':
+      return ReviewStatusEnum.Rejected;
+    default:
+      return ReviewStatusEnum.Pending;
+  }
+};
 
 export const searchReviews = async (): Promise<Review[]> => {
-    const reviews: Review[] = await _fetch(`${instance}/api/v1/search/reviews`, {
-        credentials: "same-origin",
-        headers,
-    })
-        .then(res => res.json())
-        .then(data => data.map((d:any): Review => mapDataToReview(d)))
-
-    return reviews
-}
-
-export const listReviews = async (namespace: string, name: string, number: number): Promise<Review[]> => {
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/reviews`, {
-        credentials: "same-origin",
-        headers,
-    })
-
-    const reviews: Review[] = await res.json()
-        .then(data => data.map((d:any): Review => mapDataToReview(d)))
-
-    return reviews
-}
-
-export const getUserReview = async (namespace: string, name: string, number: number): Promise<Review> => {
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/review`, {
-        credentials: "same-origin",
-        headers,
-    })
-
-    if (res.status === StatusCodes.NOT_FOUND) {
-        const { message } = await res.json()
-        throw new HttpNotFoundError(message)
-    }
-
-    const review = await res.json()
-        .then(data => mapDataToReview(data))
-    return review
-}
-
-export const approveReview = async (namespace: string, name: string, number: number, comment?: string): Promise<Review> => {
-    const body = {
-        status: "approved",
-        comment,
+  const reviews: Review[] = await _fetch(`${instance}/api/v1/search/reviews`, {
+    credentials: 'same-origin',
+    headers,
+  })
+    .then((res) => res.json())
+    .then((data) => data.map((d: any): Review => mapDataToReview(d)));
+
+  return reviews;
+};
+
+export const listReviews = async (
+  namespace: string,
+  name: string,
+  number: number
+): Promise<Review[]> => {
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/reviews`,
+    {
+      credentials: 'same-origin',
+      headers,
     }
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/review`, {
-        credentials: "same-origin",
-        headers,
-        method: "PATCH",
-        body: JSON.stringify(body),
-    })
-
-    if (res.status === StatusCodes.NOT_FOUND) {
-        const { message } = await res.json()
-        throw new HttpNotFoundError(message)
+  );
+
+  const reviews: Review[] = await res
+    .json()
+    .then((data) => data.map((d: any): Review => mapDataToReview(d)));
+
+  return reviews;
+};
+
+export const getUserReview = async (
+  namespace: string,
+  name: string,
+  number: number
+): Promise<Review> => {
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/review`,
+    {
+      credentials: 'same-origin',
+      headers,
     }
-
-    const review = await res.json()
-        .then(data => mapDataToReview(data))
-    return review
-}
-
-export const rejectReview = async (namespace: string, name: string, number: number, comment?: string): Promise<Review> => {
-    const body = {
-        status: "rejected",
-        comment,
+  );
+
+  if (res.status === StatusCodes.NOT_FOUND) {
+    const { message } = await res.json();
+    throw new HttpNotFoundError(message);
+  }
+
+  const review = await res.json().then((data) => mapDataToReview(data));
+  return review;
+};
+
+export const approveReview = async (
+  namespace: string,
+  name: string,
+  number: number,
+  comment?: string
+): Promise<Review> => {
+  const body = {
+    status: 'approved',
+    comment,
+  };
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/review`,
+    {
+      credentials: 'same-origin',
+      headers,
+      method: 'PATCH',
+      body: JSON.stringify(body),
     }
-    const res = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/review`, {
-        credentials: "same-origin",
-        headers,
-        method: "PATCH",
-        body: JSON.stringify(body),
-    })
-
-    if (res.status === StatusCodes.NOT_FOUND) {
-        const { message } = await res.json()
-        throw new HttpNotFoundError(message)
+  );
+
+  if (res.status === StatusCodes.NOT_FOUND) {
+    const { message } = await res.json();
+    throw new HttpNotFoundError(message);
+  }
+
+  const review = await res.json().then((data) => mapDataToReview(data));
+  return review;
+};
+
+export const rejectReview = async (
+  namespace: string,
+  name: string,
+  number: number,
+  comment?: string
+): Promise<Review> => {
+  const body = {
+    status: 'rejected',
+    comment,
+  };
+  const res = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/deployments/${number}/review`,
+    {
+      credentials: 'same-origin',
+      headers,
+      method: 'PATCH',
+      body: JSON.stringify(body),
     }
+  );
+
+  if (res.status === StatusCodes.NOT_FOUND) {
+    const { message } = await res.json();
+    throw new HttpNotFoundError(message);
+  }
 
-    const review = await res.json()
-        .then(data => mapDataToReview(data))
-    return review
-}
\ No newline at end of file
+  const review = await res.json().then((data) => mapDataToReview(data));
+  return review;
+};
diff --git a/ui/src/apis/setting.ts b/ui/src/apis/setting.ts
index 09f43ff8..06ee9824 100644
--- a/ui/src/apis/setting.ts
+++ b/ui/src/apis/setting.ts
@@ -1,18 +1,18 @@
 // default authentication credentials. In product cookie-based
 // authentication is being used.
 export const headers = new Headers(
-    process.env.REACT_APP_GITPLOY_TOKEN ?
-        {
-            'Authorization': `Bearer ${process.env.REACT_APP_GITPLOY_TOKEN}`,
-            'Content-Type': 'application/json',
-        } :
-        {
-            'Content-Type': 'application/json',
-        }
+  process.env.REACT_APP_GITPLOY_TOKEN
+    ? {
+        Authorization: `Bearer ${process.env.REACT_APP_GITPLOY_TOKEN}`,
+        'Content-Type': 'application/json',
+      }
+    : {
+        'Content-Type': 'application/json',
+      }
 );
 
 // default server api token.
 export const token: string | undefined = process.env.REACT_APP_GITPLOY_TOKEN;
 
 // default server address.
-export const instance: string = process.env.REACT_APP_GITPLOY_SERVER || "";
\ No newline at end of file
+export const instance: string = process.env.REACT_APP_GITPLOY_SERVER || '';
diff --git a/ui/src/apis/sync.ts b/ui/src/apis/sync.ts
index f06a78ad..dce4dd77 100644
--- a/ui/src/apis/sync.ts
+++ b/ui/src/apis/sync.ts
@@ -1,10 +1,10 @@
-import { instance, headers } from "./setting"
-import { _fetch } from "./_base"
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
 
 export const sync = async (): Promise<void> => {
-    await _fetch(`${instance}/api/v1/sync`, {
-        headers,
-        credentials: 'same-origin',
-        method: "POST",
-    })
-}
\ No newline at end of file
+  await _fetch(`${instance}/api/v1/sync`, {
+    headers,
+    credentials: 'same-origin',
+    method: 'POST',
+  });
+};
diff --git a/ui/src/apis/tag.ts b/ui/src/apis/tag.ts
index 716273cc..094ce10b 100644
--- a/ui/src/apis/tag.ts
+++ b/ui/src/apis/tag.ts
@@ -1,40 +1,55 @@
-import { StatusCodes } from 'http-status-codes'
+import { StatusCodes } from 'http-status-codes';
 
-import { instance, headers } from './setting'
-import { _fetch } from "./_base"
-import { Tag, HttpNotFoundError } from '../models'
+import { instance, headers } from './setting';
+import { _fetch } from './_base';
+import { Tag, HttpNotFoundError } from '../models';
 
-export const listTags = async (namespace: string, name: string, page = 1, perPage = 30): Promise<Tag[]> => {
-    const tags: Tag[] = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/tags?page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: "same-origin",
-    })
-        .then(response => response.json())
-        .then(tags => tags.map((t: any): Tag => {
-            return {
-                name: t.name,
-                commitSha: t.commit_sha,
-            } 
-        }))
-    
-    return tags
-}
+export const listTags = async (
+  namespace: string,
+  name: string,
+  page = 1,
+  perPage = 30
+): Promise<Tag[]> => {
+  const tags: Tag[] = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/tags?page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
+    }
+  )
+    .then((response) => response.json())
+    .then((tags) =>
+      tags.map((t: any): Tag => {
+        return {
+          name: t.name,
+          commitSha: t.commit_sha,
+        };
+      })
+    );
+
+  return tags;
+};
 
-export const getTag = async (namespace: string, name: string, tag: string): Promise<Tag> => {
-    const response = await _fetch(`${instance}/api/v1/repos/${namespace}/${name}/tags/${tag}`, {
-        headers,
-        credentials: "same-origin",
-    })
-    if (response.status === StatusCodes.NOT_FOUND) {
-        const message = await response.json().then(data => data.message)
-        throw new HttpNotFoundError(message)
+export const getTag = async (
+  namespace: string,
+  name: string,
+  tag: string
+): Promise<Tag> => {
+  const response = await _fetch(
+    `${instance}/api/v1/repos/${namespace}/${name}/tags/${tag}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
+  );
+  if (response.status === StatusCodes.NOT_FOUND) {
+    const message = await response.json().then((data) => data.message);
+    throw new HttpNotFoundError(message);
+  }
 
-    const ret: Tag = await response
-            .json()
-            .then(t => ({
-                name: t.name,
-                commitSha: t.commit_sha,
-        }))
-    return ret
-}
\ No newline at end of file
+  const ret: Tag = await response.json().then((t) => ({
+    name: t.name,
+    commitSha: t.commit_sha,
+  }));
+  return ret;
+};
diff --git a/ui/src/apis/user.ts b/ui/src/apis/user.ts
index b3361ba4..c382afd2 100644
--- a/ui/src/apis/user.ts
+++ b/ui/src/apis/user.ts
@@ -1,137 +1,150 @@
-import { StatusCodes } from "http-status-codes"
+import { StatusCodes } from 'http-status-codes';
 
-import { _fetch } from "./_base"
-import { instance, headers } from "./setting"
-import { User, ChatUser, RateLimit, HttpForbiddenError } from "../models"
+import { _fetch } from './_base';
+import { instance, headers } from './setting';
+import { User, ChatUser, RateLimit, HttpForbiddenError } from '../models';
 
 export interface UserData {
-    id: number
-    login: string
-    avatar: string
-    admin: boolean
-    hash?: string
-    created_at: string
-    updated_at: string
-    edges: {
-        chat_user: ChatUserData
-    }
+  id: number;
+  login: string;
+  avatar: string;
+  admin: boolean;
+  hash?: string;
+  created_at: string;
+  updated_at: string;
+  edges: {
+    chat_user: ChatUserData;
+  };
 }
 
 interface ChatUserData {
-    id: string
-    created_at: string
-    updated_at: string
+  id: string;
+  created_at: string;
+  updated_at: string;
 }
 
 interface RateLimitData {
-    limit: number
-    remaining: number
-    reset: string
+  limit: number;
+  remaining: number;
+  reset: string;
 }
 
 export const mapDataToUser = (data: UserData): User => {
-    let cu:ChatUser | null
-    if (data.edges.chat_user) {
-        const chat_user = data.edges.chat_user
-
-        cu = {
-            id: chat_user.id,
-            createdAt: new Date(chat_user.created_at),
-            updatedAt: new Date(chat_user.updated_at),
-        }
-    } else  {
-        cu = null
-    }
-
-    return {
-        id: data.id,
-        login: data.login,
-        avatar: data.avatar,
-        admin: data.admin,
-        hash: data.hash,
-        createdAt: new Date(data.created_at),
-        updatedAt: new Date(data.updated_at),
-        chatUser: cu,
-    }
-}
+  let cu: ChatUser | null;
+  if (data.edges.chat_user) {
+    const chat_user = data.edges.chat_user;
+
+    cu = {
+      id: chat_user.id,
+      createdAt: new Date(chat_user.created_at),
+      updatedAt: new Date(chat_user.updated_at),
+    };
+  } else {
+    cu = null;
+  }
+
+  return {
+    id: data.id,
+    login: data.login,
+    avatar: data.avatar,
+    admin: data.admin,
+    hash: data.hash,
+    createdAt: new Date(data.created_at),
+    updatedAt: new Date(data.updated_at),
+    chatUser: cu,
+  };
+};
 
 export const mapDataToRateLimit = (data: RateLimitData): RateLimit => {
-    return {
-        limit: data.limit,
-        remaining: data.remaining,
-        reset: new Date(data.reset)
-    }
-}
+  return {
+    limit: data.limit,
+    remaining: data.remaining,
+    reset: new Date(data.reset),
+  };
+};
 
 /**
  * Only admin can access to users API.
-*/
-export const listUsers = async (q: string, page = 1, perPage = 30): Promise<User[]> => {
-    const res = await _fetch(`${instance}/api/v1/users?q=${q}&page=${page}&per_page=${perPage}`, {
-        headers,
-        credentials: "same-origin",
-    })
-    if (res.status === StatusCodes.FORBIDDEN) {
-        const message = await res.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
+ */
+export const listUsers = async (
+  q: string,
+  page = 1,
+  perPage = 30
+): Promise<User[]> => {
+  const res = await _fetch(
+    `${instance}/api/v1/users?q=${q}&page=${page}&per_page=${perPage}`,
+    {
+      headers,
+      credentials: 'same-origin',
     }
-
-    const users = await res
-        .json()
-        .then((data: UserData[]) => (data.map(d => mapDataToUser(d))))
-
-    return users
-}
-
-export const updateUser = async (id: number, payload: {admin: boolean}): Promise<User> => {
-    const res = await _fetch(`${instance}/api/v1/users/${id}`, {
-        headers,
-        credentials: "same-origin",
-        method: "PATCH",
-        body: JSON.stringify(payload)
-    }) 
-    if (res.status === StatusCodes.FORBIDDEN) {
-        const message = await res.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
-    }
-
-    const user:User = await res
-        .json()
-        .then((data: UserData) => mapDataToUser(data))
-
-    return user
-}
+  );
+  if (res.status === StatusCodes.FORBIDDEN) {
+    const message = await res.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  }
+
+  const users = await res
+    .json()
+    .then((data: UserData[]) => data.map((d) => mapDataToUser(d)));
+
+  return users;
+};
+
+export const updateUser = async (
+  id: number,
+  payload: { admin: boolean }
+): Promise<User> => {
+  const res = await _fetch(`${instance}/api/v1/users/${id}`, {
+    headers,
+    credentials: 'same-origin',
+    method: 'PATCH',
+    body: JSON.stringify(payload),
+  });
+  if (res.status === StatusCodes.FORBIDDEN) {
+    const message = await res.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  }
+
+  const user: User = await res
+    .json()
+    .then((data: UserData) => mapDataToUser(data));
+
+  return user;
+};
 
 export const deleteUser = async (id: number): Promise<void> => {
-    const res = await _fetch(`${instance}/api/v1/users/${id}`, {
-        headers,
-        credentials: "same-origin",
-        method: "DELETE"
-    })
-    if (res.status === StatusCodes.FORBIDDEN) {
-        const message = await res.json().then(data => data.message)
-        throw new HttpForbiddenError(message)
-    }
-}
+  const res = await _fetch(`${instance}/api/v1/users/${id}`, {
+    headers,
+    credentials: 'same-origin',
+    method: 'DELETE',
+  });
+  if (res.status === StatusCodes.FORBIDDEN) {
+    const message = await res.json().then((data) => data.message);
+    throw new HttpForbiddenError(message);
+  }
+};
 
 export const getMe = async (): Promise<User> => {
-    const user:User = await _fetch(`${instance}/api/v1/user`, {
-        headers,
-        credentials: "same-origin",
-    })
-        .then(response => response.json())
-        .then(data => (mapDataToUser(data)))
-
-    return user
-}
+  const user: User = await _fetch(`${instance}/api/v1/user`, {
+    headers,
+    credentials: 'same-origin',
+  })
+    .then((response) => response.json())
+    .then((data) => mapDataToUser(data));
+
+  return user;
+};
 
 export const getRateLimit = async (): Promise<RateLimit> => {
-    const rateLimit:RateLimit = await _fetch(`${instance}/api/v1/user/rate-limit`, {
-        headers,
-        credentials: "same-origin",
-    })
-        .then(response => response.json())
-        .then(data => (mapDataToRateLimit(data)))
-
-    return rateLimit
-}
\ No newline at end of file
+  const rateLimit: RateLimit = await _fetch(
+    `${instance}/api/v1/user/rate-limit`,
+    {
+      headers,
+      credentials: 'same-origin',
+    }
+  )
+    .then((response) => response.json())
+    .then((data) => mapDataToRateLimit(data));
+
+  return rateLimit;
+};
diff --git a/ui/src/components/ActivateButton.tsx b/ui/src/components/ActivateButton.tsx
index 54669092..602a7eda 100644
--- a/ui/src/components/ActivateButton.tsx
+++ b/ui/src/components/ActivateButton.tsx
@@ -1,22 +1,25 @@
-import { Result, Button } from "antd"
+import { Result, Button } from 'antd';
 
 export interface ActivateButtonProps {
-    onClickActivate(): void
+  onClickActivate(): void;
 }
 
-export default function ActivateButton(props: ActivateButtonProps): JSX.Element {
-    return (
-        <Result
-            title="Activate your repository"
-            extra={[
-                <Button
-                    key={0}
-                    onClick={props.onClickActivate}
-                    type="primary"
-                    size="large">
-                    ACTIVATE
-                </Button>,
-            ]}
-        />
-    )
-}
\ No newline at end of file
+export default function ActivateButton(
+  props: ActivateButtonProps
+): JSX.Element {
+  return (
+    <Result
+      title="Activate your repository"
+      extra={[
+        <Button
+          key={0}
+          onClick={props.onClickActivate}
+          type="primary"
+          size="large"
+        >
+          ACTIVATE
+        </Button>,
+      ]}
+    />
+  );
+}
diff --git a/ui/src/components/CreatableSelect.tsx b/ui/src/components/CreatableSelect.tsx
index 497a8ec7..c5e20866 100644
--- a/ui/src/components/CreatableSelect.tsx
+++ b/ui/src/components/CreatableSelect.tsx
@@ -1,73 +1,86 @@
 import { useState } from 'react';
-import { Select, Divider, Input, SelectProps } from 'antd'
+import { Select, Divider, Input, SelectProps } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 
-interface CreatableSelectProps extends SelectProps<string>{
-    options: Option[]
-    onSelectOption(option: Option): void
-    onClickAddItem(option: Option): void
+interface CreatableSelectProps extends SelectProps<string> {
+  options: Option[];
+  onSelectOption(option: Option): void;
+  onClickAddItem(option: Option): void;
 }
 
 export interface Option {
-    label: string | JSX.Element
-    value: string
+  label: string | JSX.Element;
+  value: string;
 }
 
-export default function CreatableSelect(props: CreatableSelectProps): JSX.Element {
-    const initOption = {label: "", value: ""}
-    const [item, setItem] = useState<Option>(initOption)
+export default function CreatableSelect(
+  props: CreatableSelectProps
+): JSX.Element {
+  const initOption = { label: '', value: '' };
+  const [item, setItem] = useState<Option>(initOption);
 
-    // Clone Select props only
-    // https://stackoverflow.com/questions/34698905/how-can-i-clone-a-javascript-object-except-for-one-key
-    const {options, onSelectOption, onClickAddItem, ...selectProps} = props // eslint-disable-line
+  // Clone Select props only
+  // https://stackoverflow.com/questions/34698905/how-can-i-clone-a-javascript-object-except-for-one-key
+  const { options, onSelectOption, onClickAddItem, ...selectProps } = props; // eslint-disable-line
 
-    const _onChangeItem = (e: any) => {
-        const value = e.target.value
-        setItem({
-            label: value,
-            value: value
-        })
-    }
+  const _onChangeItem = (e: any) => {
+    const value = e.target.value;
+    setItem({
+      label: value,
+      value: value,
+    });
+  };
 
-    const _onClickAddItem = () => {
-        onClickAddItem(item)
-        setItem(initOption)
-    }
+  const _onClickAddItem = () => {
+    onClickAddItem(item);
+    setItem(initOption);
+  };
 
-    const _onSelectOption = (value: string) => {
-        const option = props.options.find(o => o.value === value)
+  const _onSelectOption = (value: string) => {
+    const option = props.options.find((o) => o.value === value);
 
-        if (option === undefined) throw new Error("The option doesn't exist.")
+    if (option === undefined) throw new Error("The option doesn't exist.");
 
-        onSelectOption(option)
-    }
+    onSelectOption(option);
+  };
 
-    return (
-        <Select
-            {...selectProps}
-            onSelect={_onSelectOption}
-            dropdownRender={menu => (
-            <div>
-                {menu}
-                <Divider style={{ margin: '4px 0' }} />
-                <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
-                    <Input 
-                        value={item.value}
-                        onChange={_onChangeItem}
-                        placeholder="Add item manually"
-                        bordered={false} />
-                    <a
-                        style={{ flex: 'none', padding: '4px', display: 'block', cursor: 'pointer' }} 
-                        onClick={_onClickAddItem}
-                    >
-                      <PlusOutlined /> Add item
-                    </a>
-                </div>
-            </div>
-        )}>
-            {props.options.map((option, idx) => {
-                return <Select.Option key={idx} value={option.value}>{option.label}</Select.Option>
-            })}
-        </Select>
-    )
-}
\ No newline at end of file
+  return (
+    <Select
+      {...selectProps}
+      onSelect={_onSelectOption}
+      dropdownRender={(menu) => (
+        <div>
+          {menu}
+          <Divider style={{ margin: '4px 0' }} />
+          <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
+            <Input
+              value={item.value}
+              onChange={_onChangeItem}
+              placeholder="Add item manually"
+              bordered={false}
+            />
+            <a
+              style={{
+                flex: 'none',
+                padding: '4px',
+                display: 'block',
+                cursor: 'pointer',
+              }}
+              onClick={_onClickAddItem}
+            >
+              <PlusOutlined /> Add item
+            </a>
+          </div>
+        </div>
+      )}
+    >
+      {props.options.map((option, idx) => {
+        return (
+          <Select.Option key={idx} value={option.value}>
+            {option.label}
+          </Select.Option>
+        );
+      })}
+    </Select>
+  );
+}
diff --git a/ui/src/components/DeploymentRefCode.tsx b/ui/src/components/DeploymentRefCode.tsx
index ae76293a..38c2870e 100644
--- a/ui/src/components/DeploymentRefCode.tsx
+++ b/ui/src/components/DeploymentRefCode.tsx
@@ -1,24 +1,31 @@
-import { Typography } from "antd"
+import { Typography } from 'antd';
 
-import { Deployment, DeploymentType } from "../models"
+import { Deployment, DeploymentType } from '../models';
 
-const { Text } = Typography
+const { Text } = Typography;
 
 interface DeploymentRefCodeProps {
-    deployment: Deployment
+  deployment: Deployment;
 }
 
-export default function DeploymentRefCode(props: DeploymentRefCodeProps): JSX.Element {
-    let ref: string
-    if (props.deployment.type === DeploymentType.Commit) {
-        ref = props.deployment.ref.substring(0, 7)
-    } else if (props.deployment.type === DeploymentType.Branch && props.deployment.sha !== "") {
-        ref = `${props.deployment.ref}(${props.deployment.sha.substring(0, 7)})`
-    } else {
-        ref = props.deployment.ref
-    }
+export default function DeploymentRefCode(
+  props: DeploymentRefCodeProps
+): JSX.Element {
+  let ref: string;
+  if (props.deployment.type === DeploymentType.Commit) {
+    ref = props.deployment.ref.substring(0, 7);
+  } else if (
+    props.deployment.type === DeploymentType.Branch &&
+    props.deployment.sha !== ''
+  ) {
+    ref = `${props.deployment.ref}(${props.deployment.sha.substring(0, 7)})`;
+  } else {
+    ref = props.deployment.ref;
+  }
 
-    return <Text className="gitploy-code" code>
-        {ref}
+  return (
+    <Text className="gitploy-code" code>
+      {ref}
     </Text>
-}
\ No newline at end of file
+  );
+}
diff --git a/ui/src/components/DeploymentStatusBadge.tsx b/ui/src/components/DeploymentStatusBadge.tsx
index f2f85cfa..3d526d75 100644
--- a/ui/src/components/DeploymentStatusBadge.tsx
+++ b/ui/src/components/DeploymentStatusBadge.tsx
@@ -1,36 +1,38 @@
-import { Badge } from "antd"
+import { Badge } from 'antd';
 
-import { Deployment, DeploymentStatusEnum } from "../models"
+import { Deployment, DeploymentStatusEnum } from '../models';
 
 interface DeploymentStatusBadgeProps {
-    deployment: Deployment
+  deployment: Deployment;
 }
 
-export default function DeploymentStatusBadge(props: DeploymentStatusBadgeProps): JSX.Element {
-    const deployment = props.deployment
-    return (
-        <Badge color={getStatusColor(deployment.status)}text={deployment.status}/>
-    )
+export default function DeploymentStatusBadge(
+  props: DeploymentStatusBadgeProps
+): JSX.Element {
+  const deployment = props.deployment;
+  return (
+    <Badge color={getStatusColor(deployment.status)} text={deployment.status} />
+  );
 }
 
 // https://ant.design/components/timeline/#Timeline.Item
 const getStatusColor = (status: DeploymentStatusEnum) => {
-    switch (status) {
-        case DeploymentStatusEnum.Waiting:
-            return "gray"
-        case DeploymentStatusEnum.Created:
-            return "purple"
-        case DeploymentStatusEnum.Queued:
-            return "purple"
-        case DeploymentStatusEnum.Running:
-            return "purple"
-        case DeploymentStatusEnum.Success:
-            return "green"
-        case DeploymentStatusEnum.Failure:
-            return "red"
-        case DeploymentStatusEnum.Canceled:
-            return "gray"
-        default:
-            return "gray"
-    }
-}
\ No newline at end of file
+  switch (status) {
+    case DeploymentStatusEnum.Waiting:
+      return 'gray';
+    case DeploymentStatusEnum.Created:
+      return 'purple';
+    case DeploymentStatusEnum.Queued:
+      return 'purple';
+    case DeploymentStatusEnum.Running:
+      return 'purple';
+    case DeploymentStatusEnum.Success:
+      return 'green';
+    case DeploymentStatusEnum.Failure:
+      return 'red';
+    case DeploymentStatusEnum.Canceled:
+      return 'gray';
+    default:
+      return 'gray';
+  }
+};
diff --git a/ui/src/components/Pagination.tsx b/ui/src/components/Pagination.tsx
index a3583ffa..73f9449f 100644
--- a/ui/src/components/Pagination.tsx
+++ b/ui/src/components/Pagination.tsx
@@ -1,17 +1,29 @@
-import { Button } from 'antd'
+import { Button } from 'antd';
 
 export interface PaginationProps {
-    disabledPrev: boolean
-    disabledNext: boolean
-    onClickPrev(): void
-    onClickNext(): void
+  disabledPrev: boolean;
+  disabledNext: boolean;
+  onClickPrev(): void;
+  onClickNext(): void;
 }
 
 export default function Pagination(props: PaginationProps): JSX.Element {
-    return (
-        <div>
-            <Button disabled={props.disabledPrev} onClick={props.onClickPrev} style={{borderTopRightRadius: 0, borderBottomRightRadius: 0}}>Prev</Button>
-            <Button disabled={props.disabledNext} onClick={props.onClickNext} style={{borderTopLeftRadius: 0, borderBottomLeftRadius: 0}}>Next</Button>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div>
+      <Button
+        disabled={props.disabledPrev}
+        onClick={props.onClickPrev}
+        style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+      >
+        Prev
+      </Button>
+      <Button
+        disabled={props.disabledNext}
+        onClick={props.onClickNext}
+        style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+      >
+        Next
+      </Button>
+    </div>
+  );
+}
diff --git a/ui/src/components/RecentActivities.tsx b/ui/src/components/RecentActivities.tsx
index 16a4b4a0..04b27b0b 100644
--- a/ui/src/components/RecentActivities.tsx
+++ b/ui/src/components/RecentActivities.tsx
@@ -1,77 +1,113 @@
-import { Tabs, List, Typography } from "antd"
-import moment from "moment"
+import { Tabs, List, Typography } from 'antd';
+import moment from 'moment';
 
-import { Deployment, Review } from "../models"
+import { Deployment, Review } from '../models';
 
-import DeploymentRefCode from "./DeploymentRefCode"
-import DeploymentStatusBadge from "./DeploymentStatusBadge"
+import DeploymentRefCode from './DeploymentRefCode';
+import DeploymentStatusBadge from './DeploymentStatusBadge';
 
-const { TabPane } = Tabs
-const { Paragraph, Text } = Typography
+const { TabPane } = Tabs;
+const { Paragraph, Text } = Typography;
 
 interface RecentActivitiesProps {
-    deployments: Deployment[]
-    reviews: Review[]
+  deployments: Deployment[];
+  reviews: Review[];
 }
 
-export default function RecentActivities(props: RecentActivitiesProps): JSX.Element {
-    return <Tabs>
-        <TabPane tab="Deployments" key={1}>
-            <DeploymentList deployments={props.deployments}/>
-        </TabPane>
-        <TabPane tab="Reviews" key={2}>
-            <ReviewList reviews={props.reviews} />
-        </TabPane>
+export default function RecentActivities(
+  props: RecentActivitiesProps
+): JSX.Element {
+  return (
+    <Tabs>
+      <TabPane tab="Deployments" key={1}>
+        <DeploymentList deployments={props.deployments} />
+      </TabPane>
+      <TabPane tab="Reviews" key={2}>
+        <ReviewList reviews={props.reviews} />
+      </TabPane>
     </Tabs>
+  );
 }
 
 interface DeploymentListProps {
-    deployments: Deployment[]
+  deployments: Deployment[];
 }
 
 // TODO: Move the component into the main view.
 function DeploymentList(props: DeploymentListProps): JSX.Element {
-    return <List
-        dataSource={props.deployments}
-        renderItem={(d) => {
-            const title = (d.repo) ? `${d.repo.namespace}/${d.repo.name} #${d.number}` : `Deployment #${d.number}`
-            const link = (d.repo) ? `/${d.repo.namespace}/${d.repo.name}/deployments/${d.number}` : `#`
+  return (
+    <List
+      dataSource={props.deployments}
+      renderItem={(d) => {
+        const title = d.repo
+          ? `${d.repo.namespace}/${d.repo.name} #${d.number}`
+          : `Deployment #${d.number}`;
+        const link = d.repo
+          ? `/${d.repo.namespace}/${d.repo.name}/deployments/${d.number}`
+          : `#`;
 
-            return <List.Item>
-                <List.Item.Meta
-                    title={<a href={link}>{title}</a>}
-                    description={<Paragraph>
-                        Deployed <DeploymentRefCode deployment={d}/> to the <Text className="gitploy-code" code>{d.env}</Text> environment {moment(d.createdAt).fromNow()} <DeploymentStatusBadge deployment={d}/>
-                    </Paragraph>}
-                />
-            </List.Item>
-        }}
+        return (
+          <List.Item>
+            <List.Item.Meta
+              title={<a href={link}>{title}</a>}
+              description={
+                <Paragraph>
+                  Deployed <DeploymentRefCode deployment={d} /> to the{' '}
+                  <Text className="gitploy-code" code>
+                    {d.env}
+                  </Text>{' '}
+                  environment {moment(d.createdAt).fromNow()}{' '}
+                  <DeploymentStatusBadge deployment={d} />
+                </Paragraph>
+              }
+            />
+          </List.Item>
+        );
+      }}
     />
+  );
 }
 
 interface ReviewListProps {
-    reviews: Review[]
+  reviews: Review[];
 }
 
 function ReviewList(props: ReviewListProps): JSX.Element {
-    return <List
-        dataSource={props.reviews}
-        renderItem={(review) => {
-            if (!review.deployment) {
-                throw new ReferenceError("The deployment of the review is not found.")
-            }
-            const d = review.deployment
-            const title = (d?.repo) ? `${d.repo.namespace}/${d.repo.name} #${d.number}` : `Deployment #${d.number}`
-            const link = (d.repo) ? `/${d.repo.namespace}/${d.repo.name}/deployments/${d.number}` : `#`
+  return (
+    <List
+      dataSource={props.reviews}
+      renderItem={(review) => {
+        if (!review.deployment) {
+          throw new ReferenceError(
+            'The deployment of the review is not found.'
+          );
+        }
+        const d = review.deployment;
+        const title = d?.repo
+          ? `${d.repo.namespace}/${d.repo.name} #${d.number}`
+          : `Deployment #${d.number}`;
+        const link = d.repo
+          ? `/${d.repo.namespace}/${d.repo.name}/deployments/${d.number}`
+          : `#`;
 
-            return <List.Item>
-                <List.Item.Meta
-                    title={<a href={link}>{title}</a>}
-                    description={<Paragraph>
-                        Requested the review to deploy <DeploymentRefCode deployment={d}/> to the <Text className="gitploy-code" code>{d.env}</Text> environment {moment(d.createdAt).fromNow()}
-                    </Paragraph>}
-                />
-            </List.Item>
-        }}
+        return (
+          <List.Item>
+            <List.Item.Meta
+              title={<a href={link}>{title}</a>}
+              description={
+                <Paragraph>
+                  Requested the review to deploy{' '}
+                  <DeploymentRefCode deployment={d} /> to the{' '}
+                  <Text className="gitploy-code" code>
+                    {d.env}
+                  </Text>{' '}
+                  environment {moment(d.createdAt).fromNow()}
+                </Paragraph>
+              }
+            />
+          </List.Item>
+        );
+      }}
     />
-}
\ No newline at end of file
+  );
+}
diff --git a/ui/src/components/Spin.tsx b/ui/src/components/Spin.tsx
index 8e944b00..10ff627d 100644
--- a/ui/src/components/Spin.tsx
+++ b/ui/src/components/Spin.tsx
@@ -1,10 +1,8 @@
-import { Spin as S} from 'antd';
+import { Spin as S } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 
 const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
 export default function Spin(): JSX.Element {
-    return (
-        <S indicator={antIcon} />
-    )
-}
\ No newline at end of file
+  return <S indicator={antIcon} />;
+}
diff --git a/ui/src/components/UserAvatar.tsx b/ui/src/components/UserAvatar.tsx
index 0699ff19..7d8a6bd8 100644
--- a/ui/src/components/UserAvatar.tsx
+++ b/ui/src/components/UserAvatar.tsx
@@ -1,25 +1,25 @@
-import { Avatar, Typography } from "antd"
+import { Avatar, Typography } from 'antd';
 
-import { User } from "../models";
+import { User } from '../models';
 
-const { Text } = Typography
+const { Text } = Typography;
 
 interface UserAvatarProps {
-    boldName?: boolean
-    user?: User
+  boldName?: boolean;
+  user?: User;
 }
 
 export default function UserAvatar(props: UserAvatarProps): JSX.Element {
-    const boldName = props.boldName === undefined? true : props.boldName
-    return (
-        props.user?
-            <span>
-                <Avatar size="small" src={props.user.avatar} />&nbsp;
-                <Text strong={boldName}>{props.user.login}</Text>
-            </span> 
-            :
-            <span>
-                <Avatar size="small">U</Avatar>
-            </span> 
-    )
-}
\ No newline at end of file
+  const boldName = props.boldName === undefined ? true : props.boldName;
+  return props.user ? (
+    <span>
+      <Avatar size="small" src={props.user.avatar} />
+      &nbsp;
+      <Text strong={boldName}>{props.user.login}</Text>
+    </span>
+  ) : (
+    <span>
+      <Avatar size="small">U</Avatar>
+    </span>
+  );
+}
diff --git a/ui/src/components/partials/deploymentStatus.tsx b/ui/src/components/partials/deploymentStatus.tsx
index 3f362e74..831b7f81 100644
--- a/ui/src/components/partials/deploymentStatus.tsx
+++ b/ui/src/components/partials/deploymentStatus.tsx
@@ -1,23 +1,23 @@
-import { DeploymentStatusEnum } from "../../models"
+import { DeploymentStatusEnum } from '../../models';
 
 // https://ant.design/components/timeline/#Timeline.Item
 export const getStatusColor = (status: DeploymentStatusEnum): string => {
-    switch (status) {
-        case DeploymentStatusEnum.Waiting:
-            return "gray"
-        case DeploymentStatusEnum.Created:
-            return "purple"
-        case DeploymentStatusEnum.Queued:
-            return "purple"
-        case DeploymentStatusEnum.Running:
-            return "purple"
-        case DeploymentStatusEnum.Success:
-            return "green"
-        case DeploymentStatusEnum.Failure:
-            return "red"
-        case DeploymentStatusEnum.Canceled:
-            return "gray"
-        default:
-            return "gray"
-    }
-}
\ No newline at end of file
+  switch (status) {
+    case DeploymentStatusEnum.Waiting:
+      return 'gray';
+    case DeploymentStatusEnum.Created:
+      return 'purple';
+    case DeploymentStatusEnum.Queued:
+      return 'purple';
+    case DeploymentStatusEnum.Running:
+      return 'purple';
+    case DeploymentStatusEnum.Success:
+      return 'green';
+    case DeploymentStatusEnum.Failure:
+      return 'red';
+    case DeploymentStatusEnum.Canceled:
+      return 'gray';
+    default:
+      return 'gray';
+  }
+};
diff --git a/ui/src/components/partials/index.tsx b/ui/src/components/partials/index.tsx
index 80d1de8f..c0e38a42 100644
--- a/ui/src/components/partials/index.tsx
+++ b/ui/src/components/partials/index.tsx
@@ -1,3 +1,3 @@
-import { getStatusColor } from "./deploymentStatus"
+import { getStatusColor } from './deploymentStatus';
 
-export { getStatusColor }
\ No newline at end of file
+export { getStatusColor };
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 72ac6c8c..87d51b15 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -3,13 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { store } from './redux/store'
-import { Provider } from 'react-redux'
+import { store } from './redux/store';
+import { Provider } from 'react-redux';
 
 ReactDOM.render(
   <Provider store={store}>
     <App />
-  </Provider> ,
+  </Provider>,
   document.getElementById('root')
 );
 
diff --git a/ui/src/libs/index.ts b/ui/src/libs/index.ts
index 43fdfd52..e1ae6f8d 100644
--- a/ui/src/libs/index.ts
+++ b/ui/src/libs/index.ts
@@ -1,10 +1,12 @@
-import { Deployment, DeploymentType } from "../models"
+import { Deployment, DeploymentType } from '../models';
 
 /**
  * The function returns the short-formatted ref string.
- * @param deployment 
- * @returns 
+ * @param deployment
+ * @returns
  */
 export const getShortRef = (deployment: Deployment): string => {
-    return deployment.type === DeploymentType.Commit? deployment.ref.substring(0, 7) : deployment.ref
-}
+  return deployment.type === DeploymentType.Commit
+    ? deployment.ref.substring(0, 7)
+    : deployment.ref;
+};
diff --git a/ui/src/models/Branch.ts b/ui/src/models/Branch.ts
index 8c246eb0..d9aee4ce 100644
--- a/ui/src/models/Branch.ts
+++ b/ui/src/models/Branch.ts
@@ -1,4 +1,4 @@
 export default interface Branch {
-    name: string
-    commitSha: string
-}
\ No newline at end of file
+  name: string;
+  commitSha: string;
+}
diff --git a/ui/src/models/Commit.ts b/ui/src/models/Commit.ts
index a91b25da..36c4301c 100644
--- a/ui/src/models/Commit.ts
+++ b/ui/src/models/Commit.ts
@@ -1,29 +1,29 @@
 export default interface Commit {
-    sha: string
-    message: string
-    isPullRequest: boolean
-    htmlUrl: string
-    author?: Author
+  sha: string;
+  message: string;
+  isPullRequest: boolean;
+  htmlUrl: string;
+  author?: Author;
 }
 
 export interface Author {
-    login: string
-    avatarUrl: string
-    date: Date
+  login: string;
+  avatarUrl: string;
+  date: Date;
 }
 
 export interface Status {
-    context: string
-    avatarUrl: string
-    targetUrl: string
-    state: StatusState
+  context: string;
+  avatarUrl: string;
+  targetUrl: string;
+  state: StatusState;
 }
 
 export enum StatusState {
-    Null = "null",
-    Pending = "pending",
-    Success = "success",
-    Failure = "failure",
-    Cancelled = "cancelled",
-    Skipped = "skipped"
-}
\ No newline at end of file
+  Null = 'null',
+  Pending = 'pending',
+  Success = 'success',
+  Failure = 'failure',
+  Cancelled = 'cancelled',
+  Skipped = 'skipped',
+}
diff --git a/ui/src/models/Config.ts b/ui/src/models/Config.ts
index 519f5fbb..861bc4eb 100644
--- a/ui/src/models/Config.ts
+++ b/ui/src/models/Config.ts
@@ -1,35 +1,35 @@
-export default interface Config  {
-    envs: Env[]
+export default interface Config {
+  envs: Env[];
 }
 
 export interface Env {
-    name: string
-    requiredContexts?: string[]
-    dynamicPayload?: DynamicPayload
-    review?: {
-        enabled: boolean
-        reviewers: string[]
-    }
+  name: string;
+  requiredContexts?: string[];
+  dynamicPayload?: DynamicPayload;
+  review?: {
+    enabled: boolean;
+    reviewers: string[];
+  };
 }
 
 export interface DynamicPayload {
-    enabled: boolean
-    inputs: {
-        [key: string]: DynamicPayloadInput
-    }
+  enabled: boolean;
+  inputs: {
+    [key: string]: DynamicPayloadInput;
+  };
 }
 
 export interface DynamicPayloadInput {
-    type: DynamicPayloadInputTypeEnum
-    required?: boolean
-    default?: any
-    description?: string
-    options?: string[]
+  type: DynamicPayloadInputTypeEnum;
+  required?: boolean;
+  default?: any;
+  description?: string;
+  options?: string[];
 }
 
 export enum DynamicPayloadInputTypeEnum {
-    Select = "select",
-    String = "string",
-    Number = "number",
-    Boolean = "boolean"
+  Select = 'select',
+  String = 'string',
+  Number = 'number',
+  Boolean = 'boolean',
 }
diff --git a/ui/src/models/Deployment.ts b/ui/src/models/Deployment.ts
index 6d8c3c06..edd902ad 100644
--- a/ui/src/models/Deployment.ts
+++ b/ui/src/models/Deployment.ts
@@ -1,50 +1,50 @@
-import User from "./User"
-import Repo from "./Repo"
+import User from './User';
+import Repo from './Repo';
 
 export default interface Deployment {
-    id: number
-    number: number
-    type: DeploymentType
-    ref: string
-    sha: string
-    env: string
-    status: DeploymentStatusEnum
-    uid: number
-    isRollback: boolean 
-    createdAt: Date
-    updatedAt: Date
-    deployer?: User
-    repo?: Repo
-    statuses?: DeploymentStatus[]
+  id: number;
+  number: number;
+  type: DeploymentType;
+  ref: string;
+  sha: string;
+  env: string;
+  status: DeploymentStatusEnum;
+  uid: number;
+  isRollback: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+  deployer?: User;
+  repo?: Repo;
+  statuses?: DeploymentStatus[];
 }
 
 export enum DeploymentType {
-    Commit = "commit",
-    Branch = "branch",
-    Tag = "tag"
+  Commit = 'commit',
+  Branch = 'branch',
+  Tag = 'tag',
 }
 
 export enum DeploymentStatusEnum {
-    Waiting = "waiting",
-    Created = "created",
-    Queued = "queued",
-    Running = "running",
-    Success = "success",
-    Failure = "failure",
-    Canceled = "canceled"
+  Waiting = 'waiting',
+  Created = 'created',
+  Queued = 'queued',
+  Running = 'running',
+  Success = 'success',
+  Failure = 'failure',
+  Canceled = 'canceled',
 }
 
 export interface DeploymentStatus {
-    id: number
-    status: string
-    description: string
-    logUrl: string
-    createdAt: string
-    updatedAt: string
-    deploymentId: number
-    repoId: number
-    edges?: {
-        deployment?: Deployment
-        repo?: Repo
-    }
-}
\ No newline at end of file
+  id: number;
+  status: string;
+  description: string;
+  logUrl: string;
+  createdAt: string;
+  updatedAt: string;
+  deploymentId: number;
+  repoId: number;
+  edges?: {
+    deployment?: Deployment;
+    repo?: Repo;
+  };
+}
diff --git a/ui/src/models/Event.ts b/ui/src/models/Event.ts
index dc1def08..c62a43d0 100644
--- a/ui/src/models/Event.ts
+++ b/ui/src/models/Event.ts
@@ -1,22 +1,22 @@
-import Deployment from "./Deployment"
-import { Review } from "./Review"
+import Deployment from './Deployment';
+import { Review } from './Review';
 
 export default interface Event {
-    id: number
-    kind: EventKindEnum
-    type: EventTypeEnum
-    deployment?: Deployment
-    review?: Review
-    deletedId: number 
+  id: number;
+  kind: EventKindEnum;
+  type: EventTypeEnum;
+  deployment?: Deployment;
+  review?: Review;
+  deletedId: number;
 }
 
 export enum EventKindEnum {
-    Deployment = "deployment",
-    Review = "review"
+  Deployment = 'deployment',
+  Review = 'review',
 }
 
 export enum EventTypeEnum {
-    Created = "created",
-    Updated = "updated",
-    Deleted = "deleted"
+  Created = 'created',
+  Updated = 'updated',
+  Deleted = 'deleted',
 }
diff --git a/ui/src/models/License.ts b/ui/src/models/License.ts
index 5474bf2b..ffe057cd 100644
--- a/ui/src/models/License.ts
+++ b/ui/src/models/License.ts
@@ -1,6 +1,6 @@
 export default interface License {
-    kind: string
-    memberCount: number
-    memberLimit: number
-    expiredAt: Date
+  kind: string;
+  memberCount: number;
+  memberLimit: number;
+  expiredAt: Date;
 }
diff --git a/ui/src/models/Lock.ts b/ui/src/models/Lock.ts
index 0cd56988..0fe48afd 100644
--- a/ui/src/models/Lock.ts
+++ b/ui/src/models/Lock.ts
@@ -1,9 +1,9 @@
-import User from "./User"
+import User from './User';
 
 export default interface Lock {
-    id: number
-    env: string
-    expiredAt?: Date
-    createdAt: Date
-    user?: User
-}
\ No newline at end of file
+  id: number;
+  env: string;
+  expiredAt?: Date;
+  createdAt: Date;
+  user?: User;
+}
diff --git a/ui/src/models/Perm.ts b/ui/src/models/Perm.ts
index b9d8a014..fe22a034 100644
--- a/ui/src/models/Perm.ts
+++ b/ui/src/models/Perm.ts
@@ -1,11 +1,11 @@
-import User from "./User"
-import Repo from "./Repo"
+import User from './User';
+import Repo from './Repo';
 
 export default interface Perm {
-    repoPerm: string
-    syncedAt: Date
-    createdAt: Date
-    updatedAt: Date
-    user: User
-    repo: Repo
+  repoPerm: string;
+  syncedAt: Date;
+  createdAt: Date;
+  updatedAt: Date;
+  user: User;
+  repo: Repo;
 }
diff --git a/ui/src/models/Repo.ts b/ui/src/models/Repo.ts
index 5826de12..0c5dad2a 100644
--- a/ui/src/models/Repo.ts
+++ b/ui/src/models/Repo.ts
@@ -1,14 +1,14 @@
-import Deployment from "./Deployment"
+import Deployment from './Deployment';
 
-export default interface Repo { 
-    id: number
-    namespace: string
-    name: string
-    description: string
-    configPath: string
-    active: boolean
-    webhookId: number
-    createdAt: Date
-    updatedAt: Date 
-    deployments?: Deployment[]
+export default interface Repo {
+  id: number;
+  namespace: string;
+  name: string;
+  description: string;
+  configPath: string;
+  active: boolean;
+  webhookId: number;
+  createdAt: Date;
+  updatedAt: Date;
+  deployments?: Deployment[];
 }
diff --git a/ui/src/models/Request.ts b/ui/src/models/Request.ts
index ba17e95b..0c4a22fd 100644
--- a/ui/src/models/Request.ts
+++ b/ui/src/models/Request.ts
@@ -1,6 +1,6 @@
 export enum RequestStatus {
-    Idle = "idle",
-    Pending = "pending",
-    Success = "success",
-    Failure = "failure"
-}
\ No newline at end of file
+  Idle = 'idle',
+  Pending = 'pending',
+  Success = 'success',
+  Failure = 'failure',
+}
diff --git a/ui/src/models/Review.ts b/ui/src/models/Review.ts
index 0cf73b0e..67d7b43d 100644
--- a/ui/src/models/Review.ts
+++ b/ui/src/models/Review.ts
@@ -1,18 +1,18 @@
-import User from "./User"
-import Deployment from "./Deployment"
+import User from './User';
+import Deployment from './Deployment';
 
 export interface Review {
-    id: number
-    status: ReviewStatusEnum
-    comment: string
-    createdAt: Date
-    updatedAt: Date
-    user?: User 
-    deployment?: Deployment 
+  id: number;
+  status: ReviewStatusEnum;
+  comment: string;
+  createdAt: Date;
+  updatedAt: Date;
+  user?: User;
+  deployment?: Deployment;
 }
 
 export enum ReviewStatusEnum {
-    Pending = "pending",
-    Approved = "approved",
-    Rejected = "rejected"
-}
\ No newline at end of file
+  Pending = 'pending',
+  Approved = 'approved',
+  Rejected = 'rejected',
+}
diff --git a/ui/src/models/Tag.ts b/ui/src/models/Tag.ts
index 6375a0b5..e3f537fe 100644
--- a/ui/src/models/Tag.ts
+++ b/ui/src/models/Tag.ts
@@ -1,4 +1,4 @@
 export default interface Tag {
-    name: string
-    commitSha: string
-}
\ No newline at end of file
+  name: string;
+  commitSha: string;
+}
diff --git a/ui/src/models/User.ts b/ui/src/models/User.ts
index ba2dafe5..23defd8f 100644
--- a/ui/src/models/User.ts
+++ b/ui/src/models/User.ts
@@ -1,23 +1,23 @@
 export default interface User {
-    id: number
-    login: string
-    avatar: string
-    admin: boolean
-    // It exists only when getting self user.
-    hash?: string
-    createdAt: Date
-    updatedAt: Date
-    chatUser: ChatUser | null
+  id: number;
+  login: string;
+  avatar: string;
+  admin: boolean;
+  // It exists only when getting self user.
+  hash?: string;
+  createdAt: Date;
+  updatedAt: Date;
+  chatUser: ChatUser | null;
 }
 
 export interface ChatUser {
-    id: string
-    createdAt: Date
-    updatedAt: Date
+  id: string;
+  createdAt: Date;
+  updatedAt: Date;
 }
 
 export interface RateLimit {
-    limit: number
-    remaining: number
-    reset: Date
-}
\ No newline at end of file
+  limit: number;
+  remaining: number;
+  reset: Date;
+}
diff --git a/ui/src/models/errors.ts b/ui/src/models/errors.ts
index bd4f1156..e295d8d4 100644
--- a/ui/src/models/errors.ts
+++ b/ui/src/models/errors.ts
@@ -1,65 +1,65 @@
-import { StatusCodes } from 'http-status-codes'
+import { StatusCodes } from 'http-status-codes';
 
 export class HttpRequestError extends Error {
-    constructor(public code: number, public m: string) {
-        super(m)
+  constructor(public code: number, public m: string) {
+    super(m);
 
-        Object.setPrototypeOf(this, HttpRequestError.prototype)
-    }
+    Object.setPrototypeOf(this, HttpRequestError.prototype);
+  }
 }
 
 export class HttpInternalServerError extends HttpRequestError {
-    constructor(public m: string) {
-        super(StatusCodes.INTERNAL_SERVER_ERROR, m)
+  constructor(public m: string) {
+    super(StatusCodes.INTERNAL_SERVER_ERROR, m);
 
-        Object.setPrototypeOf(this, HttpInternalServerError.prototype)
-    }
+    Object.setPrototypeOf(this, HttpInternalServerError.prototype);
+  }
 }
 
 export class HttpUnauthorizedError extends HttpRequestError {
-    constructor(public m: string) {
-        super(StatusCodes.UNAUTHORIZED, m)
+  constructor(public m: string) {
+    super(StatusCodes.UNAUTHORIZED, m);
 
-        Object.setPrototypeOf(this, HttpUnauthorizedError.prototype)
-    }
+    Object.setPrototypeOf(this, HttpUnauthorizedError.prototype);
+  }
 }
 
 export class HttpPaymentRequiredError extends HttpRequestError {
-    constructor(public m: string) {
-        super(StatusCodes.PAYMENT_REQUIRED, m)
+  constructor(public m: string) {
+    super(StatusCodes.PAYMENT_REQUIRED, m);
 
-        Object.setPrototypeOf(this, HttpPaymentRequiredError.prototype)
-    }
+    Object.setPrototypeOf(this, HttpPaymentRequiredError.prototype);
+  }
 }
 
 export class HttpForbiddenError extends HttpRequestError {
-    constructor(public m: string) {
-        super(StatusCodes.FORBIDDEN, m)
+  constructor(public m: string) {
+    super(StatusCodes.FORBIDDEN, m);
 
-        Object.setPrototypeOf(this, HttpForbiddenError.prototype)
-    }
+    Object.setPrototypeOf(this, HttpForbiddenError.prototype);
+  }
 }
 
 export class HttpNotFoundError extends HttpRequestError {
-    constructor(public m: string) {
-        super(StatusCodes.NOT_FOUND, m)
+  constructor(public m: string) {
+    super(StatusCodes.NOT_FOUND, m);
 
-        Object.setPrototypeOf(this, HttpNotFoundError.prototype)
-    }
+    Object.setPrototypeOf(this, HttpNotFoundError.prototype);
+  }
 }
 
 export class HttpConflictError extends HttpRequestError {
-    constructor(public m: string) {
-        super(StatusCodes.CONFLICT, m)
+  constructor(public m: string) {
+    super(StatusCodes.CONFLICT, m);
 
-        Object.setPrototypeOf(this, HttpConflictError.prototype)
-    }
+    Object.setPrototypeOf(this, HttpConflictError.prototype);
+  }
 }
 
 export class HttpUnprocessableEntityError extends HttpRequestError {
-    constructor(public m: string) {
-        super(StatusCodes.UNPROCESSABLE_ENTITY, m)
+  constructor(public m: string) {
+    super(StatusCodes.UNPROCESSABLE_ENTITY, m);
 
-        Object.setPrototypeOf(this, HttpUnprocessableEntityError.prototype)
-    }
-}
\ No newline at end of file
+    Object.setPrototypeOf(this, HttpUnprocessableEntityError.prototype);
+  }
+}
diff --git a/ui/src/models/index.ts b/ui/src/models/index.ts
index fd03431e..3ec9cb28 100644
--- a/ui/src/models/index.ts
+++ b/ui/src/models/index.ts
@@ -1,74 +1,74 @@
-import Repo from './Repo'
-import Perm from "./Perm"
-import Deployment, { 
-    DeploymentStatusEnum, 
-    DeploymentType,
-    DeploymentStatus,
-} from "./Deployment"
-import Config, { 
-    Env, 
-    DynamicPayload, 
-    DynamicPayloadInput,
-    DynamicPayloadInputTypeEnum 
-} from "./Config"
-import Commit, { Author, Status, StatusState } from "./Commit"
-import Branch from "./Branch"
-import Tag from "./Tag"
-import User, { ChatUser, RateLimit } from "./User"
-import { Review, ReviewStatusEnum } from "./Review"
-import Lock from "./Lock"
-import License from "./License"
-import Event, {EventKindEnum, EventTypeEnum} from "./Event"
-import { 
-    HttpRequestError, 
-    HttpInternalServerError, 
-    HttpUnauthorizedError, 
-    HttpPaymentRequiredError,
-    HttpForbiddenError, 
-    HttpNotFoundError, 
-    HttpConflictError,
-    HttpUnprocessableEntityError 
-} from './errors'
-import { RequestStatus } from './Request'
+import Repo from './Repo';
+import Perm from './Perm';
+import Deployment, {
+  DeploymentStatusEnum,
+  DeploymentType,
+  DeploymentStatus,
+} from './Deployment';
+import Config, {
+  Env,
+  DynamicPayload,
+  DynamicPayloadInput,
+  DynamicPayloadInputTypeEnum,
+} from './Config';
+import Commit, { Author, Status, StatusState } from './Commit';
+import Branch from './Branch';
+import Tag from './Tag';
+import User, { ChatUser, RateLimit } from './User';
+import { Review, ReviewStatusEnum } from './Review';
+import Lock from './Lock';
+import License from './License';
+import Event, { EventKindEnum, EventTypeEnum } from './Event';
+import {
+  HttpRequestError,
+  HttpInternalServerError,
+  HttpUnauthorizedError,
+  HttpPaymentRequiredError,
+  HttpForbiddenError,
+  HttpNotFoundError,
+  HttpConflictError,
+  HttpUnprocessableEntityError,
+} from './errors';
+import { RequestStatus } from './Request';
 
 export type {
-    Repo,
-    Perm,
-    Deployment,
-    DeploymentStatus,
-    Config,
-    Env,
-    DynamicPayload,
-    DynamicPayloadInput,
-    Commit,
-    Author,
-    Status,
-    Branch,
-    Tag,
-    User,
-    ChatUser,
-    RateLimit,
-    Review,
-    Lock,
-    License,
-    Event
-}
+  Repo,
+  Perm,
+  Deployment,
+  DeploymentStatus,
+  Config,
+  Env,
+  DynamicPayload,
+  DynamicPayloadInput,
+  Commit,
+  Author,
+  Status,
+  Branch,
+  Tag,
+  User,
+  ChatUser,
+  RateLimit,
+  Review,
+  Lock,
+  License,
+  Event,
+};
 
 export {
-    HttpRequestError,
-    HttpInternalServerError,
-    HttpUnauthorizedError,
-    HttpPaymentRequiredError,
-    HttpForbiddenError,
-    HttpNotFoundError,
-    HttpConflictError,
-    HttpUnprocessableEntityError,
-    DeploymentStatusEnum,
-    DeploymentType,
-    DynamicPayloadInputTypeEnum,
-    StatusState,
-    RequestStatus,
-    ReviewStatusEnum,
-    EventKindEnum, 
-    EventTypeEnum
-}
\ No newline at end of file
+  HttpRequestError,
+  HttpInternalServerError,
+  HttpUnauthorizedError,
+  HttpPaymentRequiredError,
+  HttpForbiddenError,
+  HttpNotFoundError,
+  HttpConflictError,
+  HttpUnprocessableEntityError,
+  DeploymentStatusEnum,
+  DeploymentType,
+  DynamicPayloadInputTypeEnum,
+  StatusState,
+  RequestStatus,
+  ReviewStatusEnum,
+  EventKindEnum,
+  EventTypeEnum,
+};
diff --git a/ui/src/redux/activities.tsx b/ui/src/redux/activities.tsx
index 47107e44..752a9c6d 100644
--- a/ui/src/redux/activities.tsx
+++ b/ui/src/redux/activities.tsx
@@ -1,66 +1,75 @@
-import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
-import { 
-    searchDeployments as _searchDeployments, 
-} from "../apis"
-import { Deployment, } from "../models"
+import { searchDeployments as _searchDeployments } from '../apis';
+import { Deployment } from '../models';
 
-export const perPage = 30
+export const perPage = 30;
 
 interface ActivitiesState {
-    loading: boolean
-    deployments: Deployment[]
-    page: number
+  loading: boolean;
+  deployments: Deployment[];
+  page: number;
 }
 
 const initialState: ActivitiesState = {
-    loading: false,
-    deployments: [],
-    page: 1,
-}
+  loading: false,
+  deployments: [],
+  page: 1,
+};
 
 export const searchDeployments = createAsyncThunk<
-    Deployment[], {
-        start?: Date,
-        end?: Date,
-        productionOnly: boolean,
-    }, {
-    state: { activities: ActivitiesState } 
-}>(
-    "activities/searchDeployments",
-    async ({start, end, productionOnly}, { getState, rejectWithValue }) => {
-        const {page} = getState().activities
-        try {
-            return await _searchDeployments([], false, productionOnly, start, end, page, perPage)
-        } catch (e) {
-            return rejectWithValue(e)
-        }
+  Deployment[],
+  {
+    start?: Date;
+    end?: Date;
+    productionOnly: boolean;
+  },
+  {
+    state: { activities: ActivitiesState };
+  }
+>(
+  'activities/searchDeployments',
+  async ({ start, end, productionOnly }, { getState, rejectWithValue }) => {
+    const { page } = getState().activities;
+    try {
+      return await _searchDeployments(
+        [],
+        false,
+        productionOnly,
+        start,
+        end,
+        page,
+        perPage
+      );
+    } catch (e) {
+      return rejectWithValue(e);
     }
-)
+  }
+);
 
 export const activitiesSlice = createSlice({
-    name: "activities",
-    initialState,
-    reducers: {
-        increasePage: (state) => {
-            state.page = state.page + 1
-        },
-        decreasePage: (state) => {
-            state.page = state.page - 1
-        },
+  name: 'activities',
+  initialState,
+  reducers: {
+    increasePage: (state) => {
+      state.page = state.page + 1;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(searchDeployments.pending, (state) => {
-                state.loading = true
-                state.deployments = []
-            })
-            .addCase(searchDeployments.fulfilled, (state, action) => {
-                state.loading = false
-                state.deployments = action.payload
-            })
-            .addCase(searchDeployments.rejected, (state) => {
-                state.loading = false
-            })
-    }
-})
+    decreasePage: (state) => {
+      state.page = state.page - 1;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(searchDeployments.pending, (state) => {
+        state.loading = true;
+        state.deployments = [];
+      })
+      .addCase(searchDeployments.fulfilled, (state, action) => {
+        state.loading = false;
+        state.deployments = action.payload;
+      })
+      .addCase(searchDeployments.rejected, (state) => {
+        state.loading = false;
+      });
+  },
+});
diff --git a/ui/src/redux/deployment.tsx b/ui/src/redux/deployment.tsx
index 218cd8f4..4e7bb54b 100644
--- a/ui/src/redux/deployment.tsx
+++ b/ui/src/redux/deployment.tsx
@@ -1,248 +1,273 @@
-import { message } from "antd"
-import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
-
-import { 
-    Deployment, 
-    DeploymentStatus,
-    Commit,
-    Review,
-    RequestStatus, 
-    HttpNotFoundError, 
-    HttpForbiddenError,
-    HttpUnprocessableEntityError,
-} from "../models"
-import { 
-    getDeployment, 
-    createRemoteDeployment, 
-    listReviews,
-    getUserReview,
-    approveReview,
-    rejectReview,
-    listDeploymentChanges,
-} from "../apis"
+import { message } from 'antd';
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+
+import {
+  Deployment,
+  DeploymentStatus,
+  Commit,
+  Review,
+  RequestStatus,
+  HttpNotFoundError,
+  HttpForbiddenError,
+  HttpUnprocessableEntityError,
+} from '../models';
+import {
+  getDeployment,
+  createRemoteDeployment,
+  listReviews,
+  getUserReview,
+  approveReview,
+  rejectReview,
+  listDeploymentChanges,
+} from '../apis';
 
 interface DeploymentState {
-    display: boolean
-    namespace: string
-    name: string
-    number: number
-    deployment?: Deployment
-    changes: Commit[]
-    deploying: RequestStatus
-    deployId: string
-    reviews: Review[]
-    userReview?: Review
+  display: boolean;
+  namespace: string;
+  name: string;
+  number: number;
+  deployment?: Deployment;
+  changes: Commit[];
+  deploying: RequestStatus;
+  deployId: string;
+  reviews: Review[];
+  userReview?: Review;
 }
 
 const initialState: DeploymentState = {
-    display: false,
-    namespace: "",
-    name: "",
-    number: 0,
-    changes: [],
-    deploying: RequestStatus.Idle,
-    deployId: "",
-    reviews: [],
-}
+  display: false,
+  namespace: '',
+  name: '',
+  number: 0,
+  changes: [],
+  deploying: RequestStatus.Idle,
+  deployId: '',
+  reviews: [],
+};
 
-export const fetchDeployment = createAsyncThunk<Deployment, void, { state: {deployment: DeploymentState} }>(
-    'deployment/fetchDeployment', 
-    async (_, { getState, rejectWithValue } ) => {
-        const { namespace, name, number } = getState().deployment
+export const fetchDeployment = createAsyncThunk<
+  Deployment,
+  void,
+  { state: { deployment: DeploymentState } }
+>('deployment/fetchDeployment', async (_, { getState, rejectWithValue }) => {
+  const { namespace, name, number } = getState().deployment;
 
-        try {
-            const deployment = await getDeployment(namespace, name, number)
-            return deployment
-        } catch(e) { 
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const fetchDeploymentChanges = createAsyncThunk<Commit[], void, { state: {deployment: DeploymentState} }>(
-    'deployment/fetchDeploymentChanges', 
-    async (_, { getState, rejectWithValue } ) => {
-        const { namespace, name, number } = getState().deployment
-
-        try {
-            const commits = await listDeploymentChanges(namespace, name, number)
-            return commits
-        } catch(e) { 
-            return rejectWithValue(e)
-        }
-    },
-)
+  try {
+    const deployment = await getDeployment(namespace, name, number);
+    return deployment;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
-export const deployToSCM = createAsyncThunk<Deployment, void, { state: {deployment: DeploymentState} }>(
-    'deployment/deployToSCM', 
-    async (_, { getState, rejectWithValue, requestId } ) => {
-        const { namespace, name, number, deploying, deployId } = getState().deployment
+export const fetchDeploymentChanges = createAsyncThunk<
+  Commit[],
+  void,
+  { state: { deployment: DeploymentState } }
+>(
+  'deployment/fetchDeploymentChanges',
+  async (_, { getState, rejectWithValue }) => {
+    const { namespace, name, number } = getState().deployment;
 
-        if (deploying !== RequestStatus.Pending || requestId !== deployId ) {
-            throw new Error("The previous action is not finished.")
-        }
+    try {
+      const commits = await listDeploymentChanges(namespace, name, number);
+      return commits;
+    } catch (e) {
+      return rejectWithValue(e);
+    }
+  }
+);
 
-        try {
-            const deployment = await createRemoteDeployment(namespace, name, number)
-            message.info("It starts to deploy.", 3)
-
-            return deployment
-        } catch(e) { 
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only write permission can deploy.", 3)
-            } else if (e instanceof HttpUnprocessableEntityError)  {
-                const msg = <span> 
-                    <span>It is unprocesable entity.</span><br/>
-                    <span className="gitploy-quote">{e.message}</span>
-                </span>
-                message.error(msg, 3)
-            } 
-
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const fetchReviews = createAsyncThunk<Review[], void, { state: {deployment: DeploymentState} }>(
-    'deployment/fetchReviews', 
-    async (_, { getState, rejectWithValue } ) => {
-        const { namespace, name, number } = getState().deployment
-
-        try {
-            const reviews = await listReviews(namespace, name, number)
-            return reviews
-        } catch(e) { 
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const approve = createAsyncThunk<Review, string, { state: {deployment: DeploymentState }}>(
-    "deployment/approve",
-    async (comment, { getState, rejectWithValue }) => {
-        const { namespace, name, number } = getState().deployment
-
-        try {
-            const review = await approveReview(namespace, name, number, comment)
-            message.info("Approve to deploy.")
-            return review
-        } catch(e) {
-            return rejectWithValue(e)
-        }
+export const deployToSCM = createAsyncThunk<
+  Deployment,
+  void,
+  { state: { deployment: DeploymentState } }
+>(
+  'deployment/deployToSCM',
+  async (_, { getState, rejectWithValue, requestId }) => {
+    const { namespace, name, number, deploying, deployId } =
+      getState().deployment;
+
+    if (deploying !== RequestStatus.Pending || requestId !== deployId) {
+      throw new Error('The previous action is not finished.');
     }
-)
 
+    try {
+      const deployment = await createRemoteDeployment(namespace, name, number);
+      message.info('It starts to deploy.', 3);
 
-export const reject = createAsyncThunk<Review, string, { state: {deployment: DeploymentState }}>(
-    "deployment/reject",
-    async (comment, { getState, rejectWithValue }) => {
-        const { namespace, name, number } = getState().deployment
+      return deployment;
+    } catch (e) {
+      if (e instanceof HttpForbiddenError) {
+        message.warn('Only write permission can deploy.', 3);
+      } else if (e instanceof HttpUnprocessableEntityError) {
+        const msg = (
+          <span>
+            <span>It is unprocesable entity.</span>
+            <br />
+            <span className="gitploy-quote">{e.message}</span>
+          </span>
+        );
+        message.error(msg, 3);
+      }
 
-        try {
-            const review = await rejectReview(namespace, name, number, comment)
-            message.info("Reject to deploy.")
-            return review
-        } catch(e) {
-            return rejectWithValue(e)
-        }
+      return rejectWithValue(e);
     }
-)
-
-export const fetchUserReview = createAsyncThunk<Review, void, { state: {deployment: DeploymentState} }>(
-    "deployment/fetchUserReview", 
-    async (_, { getState, rejectWithValue } ) => {
-        const { namespace, name, number } = getState().deployment
-
-        try {
-            const review = await getUserReview(namespace, name, number)
-            return review
-        } catch(e) { 
-            if (e instanceof HttpNotFoundError ) {
-                return rejectWithValue(e)
-            }
-
-            return rejectWithValue(e)
-        }
-    },
-)
+  }
+);
 
-export const handleDeploymentStatusEvent = createAsyncThunk<Deployment, DeploymentStatus, { state: { deployment: DeploymentState } }>(
-    "deployment/handleDeploymentStatusEvent",
-    async (deploymentStatus, { rejectWithValue }) => {
-        if (deploymentStatus.edges === undefined) {
-            return rejectWithValue(new Error("Edges is not included."))
-        }
+export const fetchReviews = createAsyncThunk<
+  Review[],
+  void,
+  { state: { deployment: DeploymentState } }
+>('deployment/fetchReviews', async (_, { getState, rejectWithValue }) => {
+  const { namespace, name, number } = getState().deployment;
 
-        const { repo, deployment } = deploymentStatus.edges
-        if (repo === undefined || deployment === undefined) {
-            return rejectWithValue(new Error("Repo or Deployment is not included in the edges."))
-        }
+  try {
+    const reviews = await listReviews(namespace, name, number);
+    return reviews;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const approve = createAsyncThunk<
+  Review,
+  string,
+  { state: { deployment: DeploymentState } }
+>('deployment/approve', async (comment, { getState, rejectWithValue }) => {
+  const { namespace, name, number } = getState().deployment;
+
+  try {
+    const review = await approveReview(namespace, name, number, comment);
+    message.info('Approve to deploy.');
+    return review;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const reject = createAsyncThunk<
+  Review,
+  string,
+  { state: { deployment: DeploymentState } }
+>('deployment/reject', async (comment, { getState, rejectWithValue }) => {
+  const { namespace, name, number } = getState().deployment;
+
+  try {
+    const review = await rejectReview(namespace, name, number, comment);
+    message.info('Reject to deploy.');
+    return review;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const fetchUserReview = createAsyncThunk<
+  Review,
+  void,
+  { state: { deployment: DeploymentState } }
+>('deployment/fetchUserReview', async (_, { getState, rejectWithValue }) => {
+  const { namespace, name, number } = getState().deployment;
+
+  try {
+    const review = await getUserReview(namespace, name, number);
+    return review;
+  } catch (e) {
+    if (e instanceof HttpNotFoundError) {
+      return rejectWithValue(e);
+    }
+
+    return rejectWithValue(e);
+  }
+});
 
-        return await getDeployment(repo.namespace, repo.name, deployment.number)
+export const handleDeploymentStatusEvent = createAsyncThunk<
+  Deployment,
+  DeploymentStatus,
+  { state: { deployment: DeploymentState } }
+>(
+  'deployment/handleDeploymentStatusEvent',
+  async (deploymentStatus, { rejectWithValue }) => {
+    if (deploymentStatus.edges === undefined) {
+      return rejectWithValue(new Error('Edges is not included.'));
     }
-)
+
+    const { repo, deployment } = deploymentStatus.edges;
+    if (repo === undefined || deployment === undefined) {
+      return rejectWithValue(
+        new Error('Repo or Deployment is not included in the edges.')
+      );
+    }
+
+    return await getDeployment(repo.namespace, repo.name, deployment.number);
+  }
+);
 
 export const deploymentSlice = createSlice({
-    name: "deployment",
-    initialState,
-    reducers: {
-        init: (state, action: PayloadAction<{namespace: string, name: string, number: number}>) => {
-            state.namespace = action.payload.namespace
-            state.name = action.payload.name
-            state.number = action.payload.number
-        },
-        setDisplay: (state, action: PayloadAction<boolean>) => {
-            state.display = action.payload
-        },
-        handleReviewEvent: (state, action: PayloadAction<Review>) => {
-            state.reviews = state.reviews.map((review) => {
-                return (action.payload.id === review.id)? action.payload : review
-            })
-        }
+  name: 'deployment',
+  initialState,
+  reducers: {
+    init: (
+      state,
+      action: PayloadAction<{ namespace: string; name: string; number: number }>
+    ) => {
+      state.namespace = action.payload.namespace;
+      state.name = action.payload.name;
+      state.number = action.payload.number;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(fetchDeployment.fulfilled, (state, action) => {
-                state.deployment = action.payload
-            })
-            .addCase(fetchDeploymentChanges.fulfilled, (state, action) => {
-                state.changes = action.payload
-            })
-            .addCase(deployToSCM.pending, (state, action) => {
-                if (state.deploying === RequestStatus.Idle) {
-                    state.deploying = RequestStatus.Pending
-                    state.deployId = action.meta.requestId
-                }
-            })
-            .addCase(deployToSCM.fulfilled, (state, action) => {
-                state.deployment = action.payload
-                state.deploying = RequestStatus.Idle
-            })
-            .addCase(deployToSCM.rejected, (state) => {
-                state.deploying = RequestStatus.Idle
-            })
-            .addCase(fetchReviews.fulfilled, (state, action) => {
-                state.reviews = action.payload
-            })
-            .addCase(approve.fulfilled, (state, action) => {
-                state.userReview = action.payload
-                state.reviews = state.reviews.map((review) => {
-                    return (review.id === action.payload.id)? action.payload : review
-                })
-            })
-            .addCase(reject.fulfilled, (state, action) => {
-                state.userReview = action.payload
-                state.reviews = state.reviews.map((review) => {
-                    return (review.id === action.payload.id)? action.payload : review
-                })
-            })
-            .addCase(fetchUserReview.fulfilled, (state, action) => {
-                state.userReview = action.payload
-            })
-            .addCase(handleDeploymentStatusEvent.fulfilled, (state, action) => {
-                if (action.payload.id === state.deployment?.id) {
-                    state.deployment = action.payload
-                }
-            })
-    }
-})
\ No newline at end of file
+    setDisplay: (state, action: PayloadAction<boolean>) => {
+      state.display = action.payload;
+    },
+    handleReviewEvent: (state, action: PayloadAction<Review>) => {
+      state.reviews = state.reviews.map((review) => {
+        return action.payload.id === review.id ? action.payload : review;
+      });
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchDeployment.fulfilled, (state, action) => {
+        state.deployment = action.payload;
+      })
+      .addCase(fetchDeploymentChanges.fulfilled, (state, action) => {
+        state.changes = action.payload;
+      })
+      .addCase(deployToSCM.pending, (state, action) => {
+        if (state.deploying === RequestStatus.Idle) {
+          state.deploying = RequestStatus.Pending;
+          state.deployId = action.meta.requestId;
+        }
+      })
+      .addCase(deployToSCM.fulfilled, (state, action) => {
+        state.deployment = action.payload;
+        state.deploying = RequestStatus.Idle;
+      })
+      .addCase(deployToSCM.rejected, (state) => {
+        state.deploying = RequestStatus.Idle;
+      })
+      .addCase(fetchReviews.fulfilled, (state, action) => {
+        state.reviews = action.payload;
+      })
+      .addCase(approve.fulfilled, (state, action) => {
+        state.userReview = action.payload;
+        state.reviews = state.reviews.map((review) => {
+          return review.id === action.payload.id ? action.payload : review;
+        });
+      })
+      .addCase(reject.fulfilled, (state, action) => {
+        state.userReview = action.payload;
+        state.reviews = state.reviews.map((review) => {
+          return review.id === action.payload.id ? action.payload : review;
+        });
+      })
+      .addCase(fetchUserReview.fulfilled, (state, action) => {
+        state.userReview = action.payload;
+      })
+      .addCase(handleDeploymentStatusEvent.fulfilled, (state, action) => {
+        if (action.payload.id === state.deployment?.id) {
+          state.deployment = action.payload;
+        }
+      });
+  },
+});
diff --git a/ui/src/redux/home.ts b/ui/src/redux/home.ts
index 0c1b9f92..18b3ae01 100644
--- a/ui/src/redux/home.ts
+++ b/ui/src/redux/home.ts
@@ -1,100 +1,99 @@
-import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
 
-import { 
-    Repo, 
-    RequestStatus, 
-} from '../models'
-import * as apis from '../apis'
+import { Repo, RequestStatus } from '../models';
+import * as apis from '../apis';
 
-export const perPage = 30
+export const perPage = 30;
 
 interface HomeState {
-    loading: boolean 
-    q: string
-    repos: Repo[]
-    page: number
-    syncId: string
-    syncing: RequestStatus
+  loading: boolean;
+  q: string;
+  repos: Repo[];
+  page: number;
+  syncId: string;
+  syncing: RequestStatus;
 }
 
 const initialState: HomeState = {
-    loading: true,
-    q: "",
-    repos: [],
-    page: 1,
-    syncId: "",
-    syncing: RequestStatus.Idle
-}
+  loading: true,
+  q: '',
+  repos: [],
+  page: 1,
+  syncId: '',
+  syncing: RequestStatus.Idle,
+};
 
-export const listRepos = createAsyncThunk<Repo[], void, { state: {home: HomeState} }>(
-    'home/listRepos', 
-    async (_, { getState, rejectWithValue }) => {
-        const {q, page } = getState().home
-        try {
-            const repos = await apis.listRepos(q, page, perPage)
-            return repos
-        } catch(e) {
-            return rejectWithValue(e)
-        }
-    },
-)
+export const listRepos = createAsyncThunk<
+  Repo[],
+  void,
+  { state: { home: HomeState } }
+>('home/listRepos', async (_, { getState, rejectWithValue }) => {
+  const { q, page } = getState().home;
+  try {
+    const repos = await apis.listRepos(q, page, perPage);
+    return repos;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
-export const sync = createAsyncThunk<void, void, {state: {home: HomeState}}>(
-    "home/sync",
-    async (_, { getState, rejectWithValue, requestId}) => {
-        const { syncId, syncing } = getState().home
-        if (!(syncing === RequestStatus.Pending && syncId === requestId)) {
-            return
-        }
+export const sync = createAsyncThunk<
+  void,
+  void,
+  { state: { home: HomeState } }
+>('home/sync', async (_, { getState, rejectWithValue, requestId }) => {
+  const { syncId, syncing } = getState().home;
+  if (!(syncing === RequestStatus.Pending && syncId === requestId)) {
+    return;
+  }
 
-        try {
-            await apis.sync()
-        } catch(e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+  try {
+    await apis.sync();
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
 export const homeSlice = createSlice({
-    name: 'home',
-    initialState,
-    reducers: {
-        setQ: (state, action: PayloadAction<string>) => {
-            state.q = action.payload
-        },
-        setFirstPage: (state) => {
-            state.page = 1
-        },
-        increasePage: (state) => {
-            state.page = state.page + 1
-        },
-        decreasePage: (state) => {
-            state.page = state.page - 1
-        },
+  name: 'home',
+  initialState,
+  reducers: {
+    setQ: (state, action: PayloadAction<string>) => {
+      state.q = action.payload;
+    },
+    setFirstPage: (state) => {
+      state.page = 1;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(listRepos.fulfilled, (state, action) => {
-                state.repos = action.payload
-                state.loading = false
-            })
-            .addCase(sync.pending, (state, action) => {
-                if (state.syncing === RequestStatus.Idle) {
-                    state.syncId = action.meta.requestId
-                    state.syncing = RequestStatus.Pending
-                }
-            })
-            .addCase(sync.fulfilled, (state) => {
-                if (state.syncing === RequestStatus.Pending) {
-                    state.syncId = ""
-                    state.syncing = RequestStatus.Idle
-                }
-            })
-            .addCase(sync.rejected, (state) => {
-                if (state.syncing === RequestStatus.Pending) {
-                    state.syncId = ""
-                    state.syncing = RequestStatus.Idle
-                }
-            })
-    }
-})
+    increasePage: (state) => {
+      state.page = state.page + 1;
+    },
+    decreasePage: (state) => {
+      state.page = state.page - 1;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(listRepos.fulfilled, (state, action) => {
+        state.repos = action.payload;
+        state.loading = false;
+      })
+      .addCase(sync.pending, (state, action) => {
+        if (state.syncing === RequestStatus.Idle) {
+          state.syncId = action.meta.requestId;
+          state.syncing = RequestStatus.Pending;
+        }
+      })
+      .addCase(sync.fulfilled, (state) => {
+        if (state.syncing === RequestStatus.Pending) {
+          state.syncId = '';
+          state.syncing = RequestStatus.Idle;
+        }
+      })
+      .addCase(sync.rejected, (state) => {
+        if (state.syncing === RequestStatus.Pending) {
+          state.syncId = '';
+          state.syncing = RequestStatus.Idle;
+        }
+      });
+  },
+});
diff --git a/ui/src/redux/hooks.ts b/ui/src/redux/hooks.ts
index 92c9eabe..f217b0fa 100644
--- a/ui/src/redux/hooks.ts
+++ b/ui/src/redux/hooks.ts
@@ -1,6 +1,6 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import type { RootState, AppDispatch } from './store'
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch = () => useDispatch<AppDispatch>() // eslint-disable-line
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
\ No newline at end of file
+export const useAppDispatch = () => useDispatch<AppDispatch>(); // eslint-disable-line
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/ui/src/redux/main.ts b/ui/src/redux/main.ts
index d13da0f1..a12af61c 100644
--- a/ui/src/redux/main.ts
+++ b/ui/src/redux/main.ts
@@ -1,257 +1,287 @@
-import { createSlice, Middleware, MiddlewareAPI, isRejectedWithValue, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit"
-import { message } from "antd"
+import {
+  createSlice,
+  Middleware,
+  MiddlewareAPI,
+  isRejectedWithValue,
+  PayloadAction,
+  createAsyncThunk,
+} from '@reduxjs/toolkit';
+import { message } from 'antd';
 
-import { 
-    User, 
-    Deployment, 
-    DeploymentStatusEnum, 
-    Review,
-    HttpInternalServerError, 
-    HttpUnauthorizedError, 
-    HttpPaymentRequiredError,
-    License,
-    ReviewStatusEnum,
-    DeploymentStatus,
-} from "../models"
-import { 
-    getMe, 
-    searchDeployments as _searchDeployments, 
-    searchReviews as _searchReviews,
-    getDeployment,
-    getLicense 
-} from "../apis"
+import {
+  User,
+  Deployment,
+  DeploymentStatusEnum,
+  Review,
+  HttpInternalServerError,
+  HttpUnauthorizedError,
+  HttpPaymentRequiredError,
+  License,
+  ReviewStatusEnum,
+  DeploymentStatus,
+} from '../models';
+import {
+  getMe,
+  searchDeployments as _searchDeployments,
+  searchReviews as _searchReviews,
+  getDeployment,
+  getLicense,
+} from '../apis';
 
 interface MainState {
-    available: boolean
-    authorized: boolean
-    expired: boolean
-    user?: User 
-    deployments: Deployment[]
-    reviews: Review[]
-    license?: License
+  available: boolean;
+  authorized: boolean;
+  expired: boolean;
+  user?: User;
+  deployments: Deployment[];
+  reviews: Review[];
+  license?: License;
 }
 
 const initialState: MainState = {
-    available: true,
-    authorized: true,
-    expired: false,
-    deployments: [],
-    reviews: [],
-}
+  available: true,
+  authorized: true,
+  expired: false,
+  deployments: [],
+  reviews: [],
+};
 
-export const apiMiddleware: Middleware = (api: MiddlewareAPI) => (
-    next
-) => (action) => {
+export const apiMiddleware: Middleware =
+  (api: MiddlewareAPI) => (next) => (action) => {
     if (!isRejectedWithValue(action)) {
-        next(action)
-        return
+      next(action);
+      return;
     }
 
     if (action.payload instanceof HttpUnauthorizedError) {
-        api.dispatch(mainSlice.actions.setAuthorized(false))
+      api.dispatch(mainSlice.actions.setAuthorized(false));
     } else if (action.payload instanceof HttpInternalServerError) {
-        api.dispatch(mainSlice.actions.setAvailable(false))
+      api.dispatch(mainSlice.actions.setAvailable(false));
     } else if (action.payload instanceof HttpPaymentRequiredError) {
-        // Only display the message to prevent damaging the user expirence.
-        if (process.env.REACT_APP_GITPLOY_OSS?.toUpperCase() === "TRUE") {
-            message.warn("Sorry, it is limited to the community edition.")
-        } else {
-            api.dispatch(mainSlice.actions.setExpired(true))
-        }
+      // Only display the message to prevent damaging the user expirence.
+      if (process.env.REACT_APP_GITPLOY_OSS?.toUpperCase() === 'TRUE') {
+        message.warn('Sorry, it is limited to the community edition.');
+      } else {
+        api.dispatch(mainSlice.actions.setExpired(true));
+      }
     }
 
-    next(action)
-}
+    next(action);
+  };
 
-export const init = createAsyncThunk<User, void, { state: { main: MainState } }>(
-    "main/init",
-    async (_, { rejectWithValue }) => {
-        try {
-            const user = await getMe()
-            return user
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+export const init = createAsyncThunk<
+  User,
+  void,
+  { state: { main: MainState } }
+>('main/init', async (_, { rejectWithValue }) => {
+  try {
+    const user = await getMe();
+    return user;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
 /**
  * Search all processing deployments that the user can access.
  */
-export const searchDeployments = createAsyncThunk<Deployment[], void, { state: { main: MainState } }>(
-    "main/searchDeployments",
-    async (_, { rejectWithValue }) => {
-        try {
-            const deployments = await _searchDeployments([
-                DeploymentStatusEnum.Waiting, 
-                DeploymentStatusEnum.Created, 
-                DeploymentStatusEnum.Queued,
-                DeploymentStatusEnum.Running,
-            ], false, false)
-            return deployments
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+export const searchDeployments = createAsyncThunk<
+  Deployment[],
+  void,
+  { state: { main: MainState } }
+>('main/searchDeployments', async (_, { rejectWithValue }) => {
+  try {
+    const deployments = await _searchDeployments(
+      [
+        DeploymentStatusEnum.Waiting,
+        DeploymentStatusEnum.Created,
+        DeploymentStatusEnum.Queued,
+        DeploymentStatusEnum.Running,
+      ],
+      false,
+      false
+    );
+    return deployments;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
 /**
  * Search all reviews has requested.
  */
-export const searchReviews = createAsyncThunk<Review[], void, { state: { main: MainState } }>(
-    "main/searchReviews",
-    async (_, { rejectWithValue }) => {
-        try {
-            const reviews = await _searchReviews()
-            return reviews
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+export const searchReviews = createAsyncThunk<
+  Review[],
+  void,
+  { state: { main: MainState } }
+>('main/searchReviews', async (_, { rejectWithValue }) => {
+  try {
+    const reviews = await _searchReviews();
+    return reviews;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
-export const fetchLicense = createAsyncThunk<License, void, { state: { main: MainState } }>(
-    "main/fetchLicense",
-    async (_, { rejectWithValue }) => {
-        try {
-            const lic = await getLicense()
-            return lic
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+export const fetchLicense = createAsyncThunk<
+  License,
+  void,
+  { state: { main: MainState } }
+>('main/fetchLicense', async (_, { rejectWithValue }) => {
+  try {
+    const lic = await getLicense();
+    return lic;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
 const notify = (title: string, options?: NotificationOptions) => {
-    if (!("Notification" in window)) {
-        console.log("This browser doesn't support the notification.")
-        return
-    }
+  if (!('Notification' in window)) {
+    console.log("This browser doesn't support the notification.");
+    return;
+  }
 
-    if (Notification.permission === "default") {
-        Notification.requestPermission()
-    }
-
-    new Notification(title, options)
-}
+  if (Notification.permission === 'default') {
+    Notification.requestPermission();
+  }
 
-export const notifyDeploymentStatusEvent = createAsyncThunk<void, DeploymentStatus, { state: { main: MainState } }>(
-    "main/notifyDeploymentStatusEvent",
-    async (deploymentStatus, {rejectWithValue}) => {
-        if (deploymentStatus.edges === undefined) {
-            return rejectWithValue(new Error("Edges is not included."))
-        }
+  new Notification(title, options);
+};
 
-        const { repo, deployment } = deploymentStatus.edges
-        if (repo === undefined || deployment === undefined) {
-            return rejectWithValue(new Error("Repo or Deployment is not included in the edges."))
-        }
+export const notifyDeploymentStatusEvent = createAsyncThunk<
+  void,
+  DeploymentStatus,
+  { state: { main: MainState } }
+>(
+  'main/notifyDeploymentStatusEvent',
+  async (deploymentStatus, { rejectWithValue }) => {
+    if (deploymentStatus.edges === undefined) {
+      return rejectWithValue(new Error('Edges is not included.'));
+    }
 
-        notify(`${repo.namespace}/${repo.name} #${deployment.number}`, {
-            icon: "/logo192.png",
-            body: `${deploymentStatus.status} - ${deploymentStatus.description}`,
-            tag: String(deployment.id),
-            
-        })
+    const { repo, deployment } = deploymentStatus.edges;
+    if (repo === undefined || deployment === undefined) {
+      return rejectWithValue(
+        new Error('Repo or Deployment is not included in the edges.')
+      );
     }
-)
+
+    notify(`${repo.namespace}/${repo.name} #${deployment.number}`, {
+      icon: '/logo192.png',
+      body: `${deploymentStatus.status} - ${deploymentStatus.description}`,
+      tag: String(deployment.id),
+    });
+  }
+);
 
 /**
- * The browser notifies the requester when the review is responded to, 
+ * The browser notifies the requester when the review is responded to,
  * but it should notify the reviewer when the review is requested.
  */
-export const notifyReviewmentEvent = createAsyncThunk<void, Review, { state: { main: MainState } }>(
-    "main/notifyReviewmentEvent",
-    async (review) => {
-        if (review.status === ReviewStatusEnum.Pending) {
-            notify(`Review Requested`, {
-                icon: "/logo192.png",
-                body: `${review.deployment?.deployer?.login} requested the review for the deployment ${review.deployment?.number} of ${review.deployment?.repo?.namespace}/${review.deployment?.repo?.name}`,
-                tag: String(review.id),
-            })
-            return
-        }
+export const notifyReviewmentEvent = createAsyncThunk<
+  void,
+  Review,
+  { state: { main: MainState } }
+>('main/notifyReviewmentEvent', async (review) => {
+  if (review.status === ReviewStatusEnum.Pending) {
+    notify(`Review Requested`, {
+      icon: '/logo192.png',
+      body: `${review.deployment?.deployer?.login} requested the review for the deployment ${review.deployment?.number} of ${review.deployment?.repo?.namespace}/${review.deployment?.repo?.name}`,
+      tag: String(review.id),
+    });
+    return;
+  }
 
-        notify(`Review Responded`, {
-            icon: "/logo192.png",
-            body: `${review.user?.login} ${review.status} the deployment ${review.deployment?.number} of ${review.deployment?.repo?.namespace}/${review.deployment?.repo?.name}`,
-            tag: String(review.id),
-        })
-        return
-    }
-)
-
-
-export const handleDeploymentStatusEvent = createAsyncThunk<Deployment, DeploymentStatus, { state: { main: MainState } }>(
-    "main/handleDeploymentStatusEvent",
-    async (deploymentStatus, { rejectWithValue }) => {
-        if (deploymentStatus.edges === undefined) {
-            return rejectWithValue(new Error("Edges is not included."))
-        }
+  notify(`Review Responded`, {
+    icon: '/logo192.png',
+    body: `${review.user?.login} ${review.status} the deployment ${review.deployment?.number} of ${review.deployment?.repo?.namespace}/${review.deployment?.repo?.name}`,
+    tag: String(review.id),
+  });
+  return;
+});
 
-        const { repo, deployment } = deploymentStatus.edges
-        if (repo === undefined || deployment === undefined) {
-            return rejectWithValue(new Error("Repo or Deployment is not included in the edges."))
-        }
+export const handleDeploymentStatusEvent = createAsyncThunk<
+  Deployment,
+  DeploymentStatus,
+  { state: { main: MainState } }
+>(
+  'main/handleDeploymentStatusEvent',
+  async (deploymentStatus, { rejectWithValue }) => {
+    if (deploymentStatus.edges === undefined) {
+      return rejectWithValue(new Error('Edges is not included.'));
+    }
 
-        return await getDeployment(repo.namespace, repo.name, deployment.number)
+    const { repo, deployment } = deploymentStatus.edges;
+    if (repo === undefined || deployment === undefined) {
+      return rejectWithValue(
+        new Error('Repo or Deployment is not included in the edges.')
+      );
     }
-)
+
+    return await getDeployment(repo.namespace, repo.name, deployment.number);
+  }
+);
 
 export const mainSlice = createSlice({
-    name: "main",
-    initialState,
-    reducers: {
-        setAvailable: (state, action: PayloadAction<boolean>) => {
-            state.available = action.payload
-        },
-        setAuthorized: (state, action: PayloadAction<boolean>) => {
-            state.authorized = action.payload
-        },
-        setExpired: (state, action: PayloadAction<boolean>) => {
-            state.expired = action.payload
-        },
-        /**
-         * Reviews are removed from the state.
-         */
-        handleReviewEvent: (state, { payload: review }: PayloadAction<Review>) => {
-            state.reviews = state.reviews.filter((item) => {
-                return item.id !== review.id
-            })
-        },
+  name: 'main',
+  initialState,
+  reducers: {
+    setAvailable: (state, action: PayloadAction<boolean>) => {
+      state.available = action.payload;
+    },
+    setAuthorized: (state, action: PayloadAction<boolean>) => {
+      state.authorized = action.payload;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(init.fulfilled, (state, action) => {
-                state.user = action.payload
-            }) 
+    setExpired: (state, action: PayloadAction<boolean>) => {
+      state.expired = action.payload;
+    },
+    /**
+     * Reviews are removed from the state.
+     */
+    handleReviewEvent: (state, { payload: review }: PayloadAction<Review>) => {
+      state.reviews = state.reviews.filter((item) => {
+        return item.id !== review.id;
+      });
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(init.fulfilled, (state, action) => {
+        state.user = action.payload;
+      })
 
-            .addCase(searchDeployments.fulfilled, (state, action) => {
-                state.deployments = action.payload
-            })
+      .addCase(searchDeployments.fulfilled, (state, action) => {
+        state.deployments = action.payload;
+      })
 
-            .addCase(searchReviews.fulfilled, (state, action) => {
-                state.reviews = action.payload
-            })
+      .addCase(searchReviews.fulfilled, (state, action) => {
+        state.reviews = action.payload;
+      })
 
-            .addCase(fetchLicense.fulfilled, (state, action) => {
-                state.license = action.payload
-            })
+      .addCase(fetchLicense.fulfilled, (state, action) => {
+        state.license = action.payload;
+      })
 
-            .addCase(handleDeploymentStatusEvent.fulfilled, (state, { payload: deployment }) => {
-                if (deployment.status === DeploymentStatusEnum.Created) {
-                    state.deployments.unshift(deployment)
-                    return
-                }
+      .addCase(
+        handleDeploymentStatusEvent.fulfilled,
+        (state, { payload: deployment }) => {
+          if (deployment.status === DeploymentStatusEnum.Created) {
+            state.deployments.unshift(deployment);
+            return;
+          }
 
-                state.deployments = state.deployments.map((item) => {
-                    return (item.id === deployment.id)? deployment : item
-                })
+          state.deployments = state.deployments.map((item) => {
+            return item.id === deployment.id ? deployment : item;
+          });
 
-                state.deployments = state.deployments.filter((item) => {
-                    return !(item.status === DeploymentStatusEnum.Success 
-                        || item.status === DeploymentStatusEnum.Failure)
-                })
-            })
-    }
-})
\ No newline at end of file
+          state.deployments = state.deployments.filter((item) => {
+            return !(
+              item.status === DeploymentStatusEnum.Success ||
+              item.status === DeploymentStatusEnum.Failure
+            );
+          });
+        }
+      );
+  },
+});
diff --git a/ui/src/redux/members.ts b/ui/src/redux/members.ts
index 7cafef20..9f153258 100644
--- a/ui/src/redux/members.ts
+++ b/ui/src/redux/members.ts
@@ -1,113 +1,120 @@
-import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit"
-import { message } from "antd"
+import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
+import { message } from 'antd';
 
-import { User, HttpForbiddenError } from "../models"
-import { listUsers, updateUser as _updateUser, deleteUser as _deleteUser } from "../apis"
+import { User, HttpForbiddenError } from '../models';
+import {
+  listUsers,
+  updateUser as _updateUser,
+  deleteUser as _deleteUser,
+} from '../apis';
 
-export const perPage = 30
+export const perPage = 30;
 
 interface MembersState {
-    users: User[]
-    q: string
-    page: number
+  users: User[];
+  q: string;
+  page: number;
 }
 
 const initialState: MembersState = {
-    users: [],
-    q: "",
-    page: 1,
-}
+  users: [],
+  q: '',
+  page: 1,
+};
+
+export const fetchUsers = createAsyncThunk<
+  User[],
+  void,
+  { state: { members: MembersState } }
+>('members/fetchUsers', async (_, { getState, rejectWithValue }) => {
+  const { q, page } = getState().members;
+
+  try {
+    const users = await listUsers(q, page);
+    return users;
+  } catch (e) {
+    if (e instanceof HttpForbiddenError) {
+      message.warn('Only admin can access.', 3);
+    }
+
+    return rejectWithValue(e);
+  }
+});
+
+export const updateUser = createAsyncThunk<
+  User,
+  { user: User; admin: boolean },
+  { state: { members: MembersState } }
+>('members/updateUser', async ({ user, admin }, { rejectWithValue }) => {
+  try {
+    const u = await _updateUser(user.id, { admin });
+    return u;
+  } catch (e) {
+    if (e instanceof HttpForbiddenError) {
+      message.warn('Only admin can access.', 3);
+    }
 
-export const fetchUsers = createAsyncThunk<User[], void, { state: {members: MembersState} }>(
-    "members/fetchUsers", 
-    async (_, { getState, rejectWithValue } ) => {
-        const { q, page } = getState().members
+    return rejectWithValue(e);
+  }
+});
+
+export const deleteUser = createAsyncThunk<
+  number,
+  User,
+  { state: { members: MembersState } }
+>('members/deleteUser', async (user, { rejectWithValue }) => {
+  try {
+    await _deleteUser(user.id);
+    return user.id;
+  } catch (e) {
+    if (e instanceof HttpForbiddenError) {
+      message.warn('Only admin can access.', 3);
+    }
 
-        try {
-            const users = await listUsers(q, page)
-            return users
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only admin can access.", 3)
-            }
+    return rejectWithValue(e);
+  }
+});
 
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const updateUser = createAsyncThunk<User, {user: User, admin: boolean}, { state: {members: MembersState} }>(
-    "members/updateUser", 
-    async ({user, admin}, { rejectWithValue } ) => {
-        try {
-            const u = await _updateUser(user.id, {admin})
-            return u
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only admin can access.", 3)
-            }
-
-            return rejectWithValue(e)
-        }
+export const membersSlice = createSlice({
+  name: 'members',
+  initialState,
+  reducers: {
+    setQuery: (state, action: PayloadAction<string>) => {
+      state.q = action.payload;
     },
-)
-
-export const deleteUser = createAsyncThunk<number, User, { state: {members: MembersState} }>(
-    "members/deleteUser", 
-    async (user, { rejectWithValue } ) => {
-        try {
-            await _deleteUser(user.id)
-            return user.id
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only admin can access.", 3)
-            }
-
-            return rejectWithValue(e)
-        }
+    increasePage: (state) => {
+      state.page = state.page + 1;
     },
-)
+    decreasePage: (state) => {
+      if (state.page <= 1) {
+        return;
+      }
 
-export const membersSlice = createSlice({
-    name: "members",
-    initialState,
-    reducers: {
-        setQuery: (state, action: PayloadAction<string>) => {
-            state.q = action.payload
-        },
-        increasePage: (state) => {
-            state.page = state.page + 1
-        },
-        decreasePage: (state) => {
-            if (state.page <= 1) {
-                return
-            }
-
-            state.page = state.page - 1
-        },
+      state.page = state.page - 1;
     },
-    extraReducers: (builder) => {
-        builder
-            .addCase(fetchUsers.fulfilled, (state, action) => {
-                state.users = action.payload
-            })
-
-            .addCase(updateUser.fulfilled, (state, action) => {
-                const idx = state.users.findIndex((u) => {
-                    return u.id === action.payload.id
-                })
-                if (idx === -1) {
-                    console.log("The updated user is not found.")
-                    return
-                }
-
-                state.users[idx] = action.payload
-            })
-
-            .addCase(deleteUser.fulfilled, (state, action) => {
-                state.users = state.users.filter((u) => {
-                    return u.id !== action.payload
-                })
-            })
-    }
-})
\ No newline at end of file
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchUsers.fulfilled, (state, action) => {
+        state.users = action.payload;
+      })
+
+      .addCase(updateUser.fulfilled, (state, action) => {
+        const idx = state.users.findIndex((u) => {
+          return u.id === action.payload.id;
+        });
+        if (idx === -1) {
+          console.log('The updated user is not found.');
+          return;
+        }
+
+        state.users[idx] = action.payload;
+      })
+
+      .addCase(deleteUser.fulfilled, (state, action) => {
+        state.users = state.users.filter((u) => {
+          return u.id !== action.payload;
+        });
+      });
+  },
+});
diff --git a/ui/src/redux/repo.ts b/ui/src/redux/repo.ts
index ab4e47e2..98865958 100644
--- a/ui/src/redux/repo.ts
+++ b/ui/src/redux/repo.ts
@@ -1,80 +1,82 @@
-import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
-import { message } from "antd"
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import { message } from 'antd';
 
-import { getRepo, activateRepo } from "../apis/repo"
-import { Repo, RequestStatus } from "../models"
-import { HttpForbiddenError } from '../models/errors'
+import { getRepo, activateRepo } from '../apis/repo';
+import { Repo, RequestStatus } from '../models';
+import { HttpForbiddenError } from '../models/errors';
 
 interface RepoState {
-    display: boolean
-    repo?: Repo
-    activating: RequestStatus
+  display: boolean;
+  repo?: Repo;
+  activating: RequestStatus;
 }
 
 const initialState: RepoState = {
-    display: false,
-    activating: RequestStatus.Idle
-}
+  display: false,
+  activating: RequestStatus.Idle,
+};
 
-export const init = createAsyncThunk<Repo, {namespace: string, name: string}, { state: {repo: RepoState} }>(
-    'repo/init', 
-    async (params, {rejectWithValue}) => {
-        try {
-            const repo = await getRepo(params.namespace, params.name)
-            return repo
-        } catch (e) {
-            console.log(e)
-            return rejectWithValue(e)
-        }
-    },
-)
+export const init = createAsyncThunk<
+  Repo,
+  { namespace: string; name: string },
+  { state: { repo: RepoState } }
+>('repo/init', async (params, { rejectWithValue }) => {
+  try {
+    const repo = await getRepo(params.namespace, params.name);
+    return repo;
+  } catch (e) {
+    console.log(e);
+    return rejectWithValue(e);
+  }
+});
 
-export const activate = createAsyncThunk<Repo, void, { state: {repo: RepoState} }>(
-    'repo/activate', 
-    async (_, { getState, rejectWithValue } ) => {
-        const { repo } = getState().repo
+export const activate = createAsyncThunk<
+  Repo,
+  void,
+  { state: { repo: RepoState } }
+>('repo/activate', async (_, { getState, rejectWithValue }) => {
+  const { repo } = getState().repo;
 
-        if (!repo) {
-            throw new Error("The repo is undefined.")
-        }
+  if (!repo) {
+    throw new Error('The repo is undefined.');
+  }
 
-        try {
-            const ret =  await activateRepo(repo.namespace, repo.name)
-            return ret
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only admin permission can activate.", 3)
-            } else {
-                message.error("It has failed to save.", 3)
-            }
-            return rejectWithValue(e)
-        }
-    },
-)
+  try {
+    const ret = await activateRepo(repo.namespace, repo.name);
+    return ret;
+  } catch (e) {
+    if (e instanceof HttpForbiddenError) {
+      message.warn('Only admin permission can activate.', 3);
+    } else {
+      message.error('It has failed to save.', 3);
+    }
+    return rejectWithValue(e);
+  }
+});
 
 export const repoSlice = createSlice({
-    name: "repo",
-    initialState,
-    reducers: {
-        setDisplay: (state, action: PayloadAction<boolean>) => {
-            state.display = action.payload
-        }
+  name: 'repo',
+  initialState,
+  reducers: {
+    setDisplay: (state, action: PayloadAction<boolean>) => {
+      state.display = action.payload;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(init.fulfilled, (state, action) => {
-                const repo = action.payload
-                state.repo = repo
-            })
-            .addCase(activate.pending, (state) => {
-                state.activating = RequestStatus.Pending
-            })
-            .addCase(activate.fulfilled, (state, action) => {
-                state.activating = RequestStatus.Idle
-                state.repo = action.payload
-            })
-            .addCase(activate.rejected, (state) => {
-                state.activating = RequestStatus.Idle
-            })
-    }
-})
\ No newline at end of file
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(init.fulfilled, (state, action) => {
+        const repo = action.payload;
+        state.repo = repo;
+      })
+      .addCase(activate.pending, (state) => {
+        state.activating = RequestStatus.Pending;
+      })
+      .addCase(activate.fulfilled, (state, action) => {
+        state.activating = RequestStatus.Idle;
+        state.repo = action.payload;
+      })
+      .addCase(activate.rejected, (state) => {
+        state.activating = RequestStatus.Idle;
+      });
+  },
+});
diff --git a/ui/src/redux/repoDeploy.tsx b/ui/src/redux/repoDeploy.tsx
index 164021f1..c04e2d22 100644
--- a/ui/src/redux/repoDeploy.tsx
+++ b/ui/src/redux/repoDeploy.tsx
@@ -1,396 +1,493 @@
-import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'
-import { message } from "antd"
-
-import { 
-    User, 
-    Deployment,
-    Branch, 
-    Commit, 
-    Tag, 
-    Config,
-    Env,
-    Status,
-    DeploymentType, 
-    RequestStatus, 
-    HttpNotFoundError, 
-    HttpForbiddenError,
-    HttpConflictError,
-    HttpUnprocessableEntityError
-} from '../models'
-import { 
-    listPerms,
-    getConfig, 
-    listDeployments,
-    listBranches, 
-    getBranch, 
-    listCommits, 
-    getCommit, 
-    listStatuses, 
-    listTags, 
-    getTag, 
-    createDeployment,
-    getMe,
-} from '../apis'
+import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
+import { message } from 'antd';
+
+import {
+  User,
+  Deployment,
+  Branch,
+  Commit,
+  Tag,
+  Config,
+  Env,
+  Status,
+  DeploymentType,
+  RequestStatus,
+  HttpNotFoundError,
+  HttpForbiddenError,
+  HttpConflictError,
+  HttpUnprocessableEntityError,
+} from '../models';
+import {
+  listPerms,
+  getConfig,
+  listDeployments,
+  listBranches,
+  getBranch,
+  listCommits,
+  getCommit,
+  listStatuses,
+  listTags,
+  getTag,
+  createDeployment,
+  getMe,
+} from '../apis';
 
 // fetch all at the first page.
-const firstPage = 1
-const perPage = 100
+const firstPage = 1;
+const perPage = 100;
 
 interface RepoDeployState {
-    display: boolean
-    namespace: string
-    name: string
-    config?: Config 
-    env?: Env
-    envs: Env[]
-    currentDeployment?: Deployment
-    type?: DeploymentType 
-    branch?: Branch 
-    branchStatuses: Status[]
-    branches: Branch[]
-    commit?: Commit 
-    commitStatuses: Status[]
-    commits: Commit[]
-    tag?: Tag 
-    tagStatuses: Status[]
-    tags: Tag[]
-    deploying: RequestStatus
-    deployId: string
+  display: boolean;
+  namespace: string;
+  name: string;
+  config?: Config;
+  env?: Env;
+  envs: Env[];
+  currentDeployment?: Deployment;
+  type?: DeploymentType;
+  branch?: Branch;
+  branchStatuses: Status[];
+  branches: Branch[];
+  commit?: Commit;
+  commitStatuses: Status[];
+  commits: Commit[];
+  tag?: Tag;
+  tagStatuses: Status[];
+  tags: Tag[];
+  deploying: RequestStatus;
+  deployId: string;
 }
 
 const initialState: RepoDeployState = {
-    display: false,
-    namespace: "",
-    name: "",
-    envs: [],
-    branchStatuses: [],
-    branches: [],
-    commitStatuses: [],
-    commits: [],
-    tagStatuses: [],
-    tags: [],
-    deploying: RequestStatus.Idle,
-    deployId: "",
-}
-
-export const fetchConfig = createAsyncThunk<Config, void, { state: {repoDeploy: RepoDeployState} }>(
-    "repoDeploy/fetchConfig", 
-    async (_, { getState, rejectWithValue } ) => {
-        const { namespace, name } = getState().repoDeploy
-
-        try {
-            const config = await getConfig(namespace, name)
-            return config
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const fetchCurrentDeploymentOfEnv = createAsyncThunk<Deployment | null, Env, { state: {repoDeploy: RepoDeployState} }>(
-    "repoDeploy/fetchCurrentDeployment", 
-    async (env, { getState, rejectWithValue } ) => {
-        const { namespace, name } = getState().repoDeploy
-
-        try {
-            const deployments = await listDeployments(namespace, name, 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 }) => {
-        const { namespace, name } = getState().repoDeploy
-
-        const branches = await listBranches(namespace, name, firstPage, perPage)
-        return branches
+  display: false,
+  namespace: '',
+  name: '',
+  envs: [],
+  branchStatuses: [],
+  branches: [],
+  commitStatuses: [],
+  commits: [],
+  tagStatuses: [],
+  tags: [],
+  deploying: RequestStatus.Idle,
+  deployId: '',
+};
+
+export const fetchConfig = createAsyncThunk<
+  Config,
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/fetchConfig', async (_, { getState, rejectWithValue }) => {
+  const { namespace, name } = getState().repoDeploy;
+
+  try {
+    const config = await getConfig(namespace, name);
+    return config;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const fetchCurrentDeploymentOfEnv = createAsyncThunk<
+  Deployment | null,
+  Env,
+  { state: { repoDeploy: RepoDeployState } }
+>(
+  'repoDeploy/fetchCurrentDeployment',
+  async (env, { getState, rejectWithValue }) => {
+    const { namespace, name } = getState().repoDeploy;
+
+    try {
+      const deployments = await listDeployments(
+        namespace,
+        name,
+        env.name,
+        'success',
+        1,
+        1
+      );
+      return deployments.length > 0 ? deployments[0] : null;
+    } catch (e) {
+      return rejectWithValue(e);
     }
-)
-
-export const checkBranch = createAsyncThunk<Status[], void, { state: {repoDeploy: RepoDeployState}}>(
-    "repoDeploy/checkBranch",
-    async (_, { getState }) => {
-        const { namespace, name, branch } = getState().repoDeploy
-        if (!branch) {
-            throw new Error("The branch is undefined.") 
-        }
-
-        const { statuses } = await listStatuses(namespace, name, branch.commitSha)
-        return statuses
+  }
+);
+
+export const fetchBranches = createAsyncThunk<
+  Branch[],
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/fetchBranches', async (_, { getState }) => {
+  const { namespace, name } = getState().repoDeploy;
+
+  const branches = await listBranches(namespace, name, firstPage, perPage);
+  return branches;
+});
+
+export const checkBranch = createAsyncThunk<
+  Status[],
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/checkBranch', async (_, { getState }) => {
+  const { namespace, name, branch } = getState().repoDeploy;
+  if (!branch) {
+    throw new Error('The branch is undefined.');
+  }
+
+  const { statuses } = await listStatuses(namespace, name, branch.commitSha);
+  return statuses;
+});
+
+export const addBranchManually = createAsyncThunk<
+  Branch,
+  string,
+  { state: { repoDeploy: RepoDeployState } }
+>(
+  'repoDeploy/addBranchManually',
+  async (brnach: string, { getState, rejectWithValue }) => {
+    const { namespace, name } = getState().repoDeploy;
+
+    try {
+      const branch = await getBranch(namespace, name, brnach);
+      return branch;
+    } catch (e) {
+      if (e instanceof HttpNotFoundError) {
+        message.warn('The branch is not found. Check the branch is correct.');
+      }
+
+      return rejectWithValue(e);
     }
-)
-
-export const addBranchManually = createAsyncThunk<Branch, string, { state: {repoDeploy: RepoDeployState}}>(
-    "repoDeploy/addBranchManually",
-    async (brnach: string, { getState, rejectWithValue }) => {
-        const { namespace, name } = getState().repoDeploy
-
-        try {
-            const branch = await getBranch(namespace, name, brnach)
-            return branch
-        } catch(e) {
-            if (e instanceof HttpNotFoundError) {
-                message.warn("The branch is not found. Check the branch is correct.")
-            } 
-
-            return rejectWithValue(e)
-        }
+  }
+);
+
+export const fetchCommits = createAsyncThunk<
+  Commit[],
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/fetchCommits', async (_, { getState }) => {
+  const { namespace, name, branch } = getState().repoDeploy;
+
+  const branchName = branch ? branch.name : '';
+  const commits = await listCommits(
+    namespace,
+    name,
+    branchName,
+    firstPage,
+    perPage
+  );
+  return commits;
+});
+
+export const checkCommit = createAsyncThunk<
+  Status[],
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/checkCommit', async (_, { getState }) => {
+  const { namespace, name, commit } = getState().repoDeploy;
+
+  if (!commit) {
+    throw new Error('The commit is undefined.');
+  }
+
+  const { statuses } = await listStatuses(namespace, name, commit.sha);
+  return statuses;
+});
+
+export const addCommitManually = createAsyncThunk<
+  Commit,
+  string,
+  { state: { repoDeploy: RepoDeployState } }
+>(
+  'repoDeploy/addCommitManually',
+  async (sha: string, { getState, rejectWithValue }) => {
+    const { namespace, name } = getState().repoDeploy;
+
+    try {
+      const commit = await getCommit(namespace, name, sha);
+      return commit;
+    } catch (e) {
+      if (e instanceof HttpNotFoundError) {
+        message.warn('The ref is not found. Check the ref is correct.');
+      }
+
+      return rejectWithValue(e);
     }
-)
-
-export const fetchCommits = createAsyncThunk<Commit[], void, { state: {repoDeploy: RepoDeployState }}>(
-    "repoDeploy/fetchCommits",
-    async (_, { getState }) => {
-        const { namespace, name, branch } = getState().repoDeploy
-
-        const branchName = (branch)? branch.name : ""
-        const commits = await listCommits(namespace, name, branchName, firstPage, perPage)
-        return commits
+  }
+);
+
+export const fetchTags = createAsyncThunk<
+  Tag[],
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/fetchTags', async (_, { getState }) => {
+  const { namespace, name } = getState().repoDeploy;
+
+  const tags = await listTags(namespace, name, firstPage, perPage);
+  return tags;
+});
+
+export const checkTag = createAsyncThunk<
+  Status[],
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/checkTag', async (_, { getState }) => {
+  const { namespace, name, tag } = getState().repoDeploy;
+
+  if (!tag) {
+    throw new Error('The tag is undefined.');
+  }
+
+  const { statuses } = await listStatuses(namespace, name, tag.commitSha);
+  return statuses;
+});
+
+export const addTagManually = createAsyncThunk<
+  Tag,
+  string,
+  { state: { repoDeploy: RepoDeployState } }
+>(
+  'repoDeploy/addTagManually',
+  async (tagName: string, { getState, rejectWithValue }) => {
+    const { namespace, name } = getState().repoDeploy;
+
+    try {
+      const tag = await getTag(namespace, name, tagName);
+      return tag;
+    } catch (e) {
+      if (e instanceof HttpNotFoundError) {
+        message.warn('The tag is not found. Check the tag is correct.');
+      }
+
+      return rejectWithValue(e);
     }
-)
-
-export const checkCommit = createAsyncThunk<Status[], void, { state: {repoDeploy: RepoDeployState}}>(
-    "repoDeploy/checkCommit",
-    async (_, { getState }) => {
-        const { namespace, name, commit } = getState().repoDeploy
-
-        if (!commit) {
-            throw new Error("The commit is undefined.") 
-        }
-
-        const { statuses } = await listStatuses(namespace, name, commit.sha)
-        return statuses
-    }
-)
-
-export const addCommitManually = createAsyncThunk<Commit, string, { state: {repoDeploy: RepoDeployState}}>(
-    "repoDeploy/addCommitManually",
-    async (sha: string, { getState, rejectWithValue }) => {
-        const { namespace, name } = getState().repoDeploy
-
-        try {
-            const commit = await getCommit(namespace, name, sha)
-            return commit
-        } catch(e) {
-            if (e instanceof HttpNotFoundError) {
-                message.warn("The ref is not found. Check the ref is correct.")
-            } 
-
-            return rejectWithValue(e)
-        }
-    }
-)
-
-export const fetchTags = createAsyncThunk<Tag[], void, { state: {repoDeploy: RepoDeployState }}>(
-    "repoDeploy/fetchTags",
-    async (_, { getState }) => {
-        const { namespace, name } = getState().repoDeploy
-
-        const tags = await listTags(namespace, name, firstPage, perPage)
-        return tags
+  }
+);
+
+export const searchCandidates = createAsyncThunk<
+  User[],
+  string,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/searchCandidates', async (q, { getState, rejectWithValue }) => {
+  const { namespace, name } = getState().repoDeploy;
+
+  try {
+    const perms = await listPerms(namespace, name, q);
+    const candidates = perms.map((p) => {
+      return p.user;
+    });
+    return candidates;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const fetchUser = createAsyncThunk<
+  User,
+  void,
+  { state: { repoDeploy: RepoDeployState } }
+>('repoDeploy/fetchUser', async (_, { rejectWithValue }) => {
+  try {
+    const user = await getMe();
+    return user;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const deploy = createAsyncThunk<
+  void,
+  any,
+  { state: { repoDeploy: RepoDeployState } }
+>(
+  'repoDeploy/deploy',
+  async (payload, { getState, rejectWithValue, requestId }) => {
+    const {
+      namespace,
+      name,
+      env,
+      type,
+      branch,
+      commit,
+      tag,
+      deploying,
+      deployId,
+    } = getState().repoDeploy;
+    if (!env) {
+      throw new Error('The env is undefined.');
     }
-)
 
-export const checkTag = createAsyncThunk<Status[], void, { state: {repoDeploy: RepoDeployState}}>(
-    "repoDeploy/checkTag",
-    async (_, { getState }) => {
-        const { namespace, name, tag } = getState().repoDeploy
-
-        if (!tag) {
-            throw new Error("The tag is undefined.") 
-        }
-
-        const { statuses } = await listStatuses(namespace, name, tag.commitSha)
-        return statuses
-    }
-)
-
-export const addTagManually = createAsyncThunk<Tag, string, { state: {repoDeploy: RepoDeployState}}>(
-    "repoDeploy/addTagManually",
-    async (tagName: string, { getState, rejectWithValue }) => {
-        const { namespace, name } = getState().repoDeploy
-
-        try {
-            const tag = await getTag(namespace, name, tagName)
-            return tag
-        } catch(e) {
-            if (e instanceof HttpNotFoundError) {
-                message.warn("The tag is not found. Check the tag is correct.")
-            } 
-
-            return rejectWithValue(e)
-        }
-    }
-)
-
-export const searchCandidates = createAsyncThunk<User[], string, { state: {repoDeploy: RepoDeployState }}>(
-    "repoDeploy/searchCandidates",
-    async (q, { getState, rejectWithValue }) => {
-        const { namespace, name } = getState().repoDeploy
-
-        try {
-            const perms = await listPerms(namespace, name, q)
-            const candidates = perms.map((p) => {
-                return p.user
-            })
-            return candidates
-        } catch(e) {
-            return rejectWithValue(e)
-        }
-    }
-)
-
-export const fetchUser = createAsyncThunk<User, void, { state: {repoDeploy: RepoDeployState }}>(
-    "repoDeploy/fetchUser",
-    async (_, { rejectWithValue }) => {
-        try {
-            const user = await getMe()
-            return user
-        } catch(e) {
-            return rejectWithValue(e)
-        }
+    if (deploying !== RequestStatus.Pending || requestId !== deployId) {
+      return;
     }
-)
-
-export const deploy = createAsyncThunk<void, any, { state: {repoDeploy: RepoDeployState}}> (
-    "repoDeploy/deploy",
-    async (payload, { getState, rejectWithValue, requestId }) => {
-        const { namespace, name, env, type, branch, commit, tag, deploying, deployId } = getState().repoDeploy
-        if (!env) {
-            throw new Error("The env is undefined.")
-        }
-
-        if (deploying !== RequestStatus.Pending || requestId !== deployId ) {
-            return
-        }
 
-        try {
-            let deployment: Deployment
-            if (type === DeploymentType.Commit && commit) {
-                deployment = await createDeployment(namespace, name, type, commit.sha, env.name, payload)
-            } else if (type === DeploymentType.Branch && branch) {
-                deployment = await createDeployment(namespace, name, type, branch.name, env.name, payload)
-            } else if (type === DeploymentType.Tag && tag) {
-                deployment = await createDeployment(namespace, name, type, tag.name, env.name, payload)
-            } else {
-                throw new Error("The type should be one of them: commit, branch, and tag.")
-            }
-
-            if (!env.review?.enabled) {
-                const msg = <span>
-                    Starts to deploy. <a href={`/${namespace}/${name}/deployments/${deployment.number}`}>#{deployment.number}</a>
-                </span>
-                message.success(msg, 3)
-                return
-            }
-
-            const msg = <span>
-                Request a review to reviewers. <a href={`/${namespace}/${name}/deployments/${deployment.number}`}>#{deployment.number}</a>
-            </span>
-            message.success(msg, 3)
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only write permission can deploy.", 3)
-            } else if (e instanceof HttpUnprocessableEntityError)  {
-                const msg = <span> 
-                    <span>It is unprocesable entity.</span><br/>
-                    <span className="gitploy-quote">{e.message}</span>
-                </span>
-                message.error(msg, 3)
-            } else if (e instanceof HttpConflictError) {
-                message.error("It has conflicted, please retry it.", 3)
-            }
-            return rejectWithValue(e)
-        }
+    try {
+      let deployment: Deployment;
+      if (type === DeploymentType.Commit && commit) {
+        deployment = await createDeployment(
+          namespace,
+          name,
+          type,
+          commit.sha,
+          env.name,
+          payload
+        );
+      } else if (type === DeploymentType.Branch && branch) {
+        deployment = await createDeployment(
+          namespace,
+          name,
+          type,
+          branch.name,
+          env.name,
+          payload
+        );
+      } else if (type === DeploymentType.Tag && tag) {
+        deployment = await createDeployment(
+          namespace,
+          name,
+          type,
+          tag.name,
+          env.name,
+          payload
+        );
+      } else {
+        throw new Error(
+          'The type should be one of them: commit, branch, and tag.'
+        );
+      }
+
+      if (!env.review?.enabled) {
+        const msg = (
+          <span>
+            Starts to deploy.{' '}
+            <a href={`/${namespace}/${name}/deployments/${deployment.number}`}>
+              #{deployment.number}
+            </a>
+          </span>
+        );
+        message.success(msg, 3);
+        return;
+      }
+
+      const msg = (
+        <span>
+          Request a review to reviewers.{' '}
+          <a href={`/${namespace}/${name}/deployments/${deployment.number}`}>
+            #{deployment.number}
+          </a>
+        </span>
+      );
+      message.success(msg, 3);
+    } catch (e) {
+      if (e instanceof HttpForbiddenError) {
+        message.warn('Only write permission can deploy.', 3);
+      } else if (e instanceof HttpUnprocessableEntityError) {
+        const msg = (
+          <span>
+            <span>It is unprocesable entity.</span>
+            <br />
+            <span className="gitploy-quote">{e.message}</span>
+          </span>
+        );
+        message.error(msg, 3);
+      } else if (e instanceof HttpConflictError) {
+        message.error('It has conflicted, please retry it.', 3);
+      }
+      return rejectWithValue(e);
     }
-)
+  }
+);
 
 export const repoDeploySlice = createSlice({
-    name: "repoDeploy",
-    initialState,
-    reducers: {
-        init: (state, action: PayloadAction<{namespace: string, name: string}>) => {
-            state.namespace = action.payload.namespace
-            state.name = action.payload.name
-        },
-        setDisplay: (state, action: PayloadAction<boolean>) => {
-            state.display = action.payload
-        },
-        setEnv: (state, action: PayloadAction<Env>) => {
-            state.env =  action.payload
-        },
-        setType: (state, action: PayloadAction<DeploymentType>) => {
-            state.type = action.payload
-        },
-        setBranch: (state, action: PayloadAction<Branch>) => {
-            state.branch = action.payload
-        },
-        setCommit: (state, action: PayloadAction<Commit>) => {
-            state.commit = action.payload
-        },
-        setTag: (state, action: PayloadAction<Tag>) => {
-            state.tag = action.payload
-        },
+  name: 'repoDeploy',
+  initialState,
+  reducers: {
+    init: (
+      state,
+      action: PayloadAction<{ namespace: string; name: string }>
+    ) => {
+      state.namespace = action.payload.namespace;
+      state.name = action.payload.name;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(fetchConfig.fulfilled, (state, action) => {
-                const config = action.payload
-                state.envs = config.envs.map(e => e)
-                state.config = config
-            })
-            .addCase(fetchCurrentDeploymentOfEnv.fulfilled, (state, action) => {
-                state.currentDeployment = action.payload? action.payload : undefined
-            })
-            .addCase(fetchCurrentDeploymentOfEnv.rejected, (state) => {
-                state.currentDeployment = undefined
-            })
-            .addCase(fetchBranches.fulfilled, (state, action) => {
-                state.branches = action.payload
-            })
-            .addCase(checkBranch.fulfilled, (state, action) => {
-                state.branchStatuses = action.payload
-            })
-            .addCase(addBranchManually.fulfilled, (state, action) => {
-                state.branches.unshift(action.payload)
-            })
-            .addCase(fetchCommits.fulfilled, (state, action) => {
-                state.commits = action.payload
-            })
-            .addCase(checkCommit.fulfilled, (state, action) => {
-                state.commitStatuses = action.payload
-            })
-            .addCase(addCommitManually.fulfilled, (state, action) => {
-                state.commits.unshift(action.payload)
-            })
-            .addCase(fetchTags.fulfilled, (state, action) => {
-                state.tags = action.payload
-            })
-            .addCase(checkTag.fulfilled, (state, action) => {
-                state.tagStatuses = action.payload
-            })
-            .addCase(addTagManually.fulfilled, (state, action) => {
-                state.tags.unshift(action.payload)
-            })
-            .addCase(deploy.pending, (state, action) => {
-                if (state.deploying === RequestStatus.Idle) {
-                    state.deploying = RequestStatus.Pending
-                    state.deployId = action.meta.requestId
-                }
-            })
-            .addCase(deploy.fulfilled, (state, action) => {
-                if (state.deploying === RequestStatus.Pending && state.deployId === action.meta.requestId) {
-                    state.deploying = RequestStatus.Idle
-                }
-            })
-            .addCase(deploy.rejected, (state, action) => {
-                if (state.deploying === RequestStatus.Pending && state.deployId === action.meta.requestId) {
-                    state.deploying = RequestStatus.Idle
-                }
-            })
-    }
-})
+    setDisplay: (state, action: PayloadAction<boolean>) => {
+      state.display = action.payload;
+    },
+    setEnv: (state, action: PayloadAction<Env>) => {
+      state.env = action.payload;
+    },
+    setType: (state, action: PayloadAction<DeploymentType>) => {
+      state.type = action.payload;
+    },
+    setBranch: (state, action: PayloadAction<Branch>) => {
+      state.branch = action.payload;
+    },
+    setCommit: (state, action: PayloadAction<Commit>) => {
+      state.commit = action.payload;
+    },
+    setTag: (state, action: PayloadAction<Tag>) => {
+      state.tag = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchConfig.fulfilled, (state, action) => {
+        const config = action.payload;
+        state.envs = config.envs.map((e) => e);
+        state.config = config;
+      })
+      .addCase(fetchCurrentDeploymentOfEnv.fulfilled, (state, action) => {
+        state.currentDeployment = action.payload ? action.payload : undefined;
+      })
+      .addCase(fetchCurrentDeploymentOfEnv.rejected, (state) => {
+        state.currentDeployment = undefined;
+      })
+      .addCase(fetchBranches.fulfilled, (state, action) => {
+        state.branches = action.payload;
+      })
+      .addCase(checkBranch.fulfilled, (state, action) => {
+        state.branchStatuses = action.payload;
+      })
+      .addCase(addBranchManually.fulfilled, (state, action) => {
+        state.branches.unshift(action.payload);
+      })
+      .addCase(fetchCommits.fulfilled, (state, action) => {
+        state.commits = action.payload;
+      })
+      .addCase(checkCommit.fulfilled, (state, action) => {
+        state.commitStatuses = action.payload;
+      })
+      .addCase(addCommitManually.fulfilled, (state, action) => {
+        state.commits.unshift(action.payload);
+      })
+      .addCase(fetchTags.fulfilled, (state, action) => {
+        state.tags = action.payload;
+      })
+      .addCase(checkTag.fulfilled, (state, action) => {
+        state.tagStatuses = action.payload;
+      })
+      .addCase(addTagManually.fulfilled, (state, action) => {
+        state.tags.unshift(action.payload);
+      })
+      .addCase(deploy.pending, (state, action) => {
+        if (state.deploying === RequestStatus.Idle) {
+          state.deploying = RequestStatus.Pending;
+          state.deployId = action.meta.requestId;
+        }
+      })
+      .addCase(deploy.fulfilled, (state, action) => {
+        if (
+          state.deploying === RequestStatus.Pending &&
+          state.deployId === action.meta.requestId
+        ) {
+          state.deploying = RequestStatus.Idle;
+        }
+      })
+      .addCase(deploy.rejected, (state, action) => {
+        if (
+          state.deploying === RequestStatus.Pending &&
+          state.deployId === action.meta.requestId
+        ) {
+          state.deploying = RequestStatus.Idle;
+        }
+      });
+  },
+});
diff --git a/ui/src/redux/repoHome.ts b/ui/src/redux/repoHome.ts
index 8ce4f832..d8cfd27d 100644
--- a/ui/src/redux/repoHome.ts
+++ b/ui/src/redux/repoHome.ts
@@ -1,81 +1,93 @@
-import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'
+import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
 
-import { Deployment } from '../models'
-import { listDeployments, getConfig } from '../apis'
+import { Deployment } from '../models';
+import { listDeployments, getConfig } from '../apis';
 
 export const perPage = 20;
 
 interface RepoHomeState {
-    loading: boolean
-    namespace: string
-    name: string
-    envs: string[]
-    env: string
-    deployments: Deployment[]
-    page: number
+  loading: boolean;
+  namespace: string;
+  name: string;
+  envs: string[];
+  env: string;
+  deployments: Deployment[];
+  page: number;
 }
 
 const initialState: RepoHomeState = {
-    loading: true,
-    namespace: "",
-    name: "",
-    envs: [],
-    env: "",
-    deployments: [],
-    page: 1,
-}
+  loading: true,
+  namespace: '',
+  name: '',
+  envs: [],
+  env: '',
+  deployments: [],
+  page: 1,
+};
 
-export const fetchEnvs = createAsyncThunk<string[], void, { state: {repoHome: RepoHomeState} }>(
-    "repoHome/fetchEnvs", 
-    async (_, { getState } ) => {
-        const { namespace, name } = getState().repoHome
+export const fetchEnvs = createAsyncThunk<
+  string[],
+  void,
+  { state: { repoHome: RepoHomeState } }
+>('repoHome/fetchEnvs', async (_, { getState }) => {
+  const { namespace, name } = getState().repoHome;
 
-        const config = await getConfig(namespace, name)
-        return config.envs.map(e =>  e.name)
-    },
-)
+  const config = await getConfig(namespace, name);
+  return config.envs.map((e) => e.name);
+});
 
-export const fetchDeployments = createAsyncThunk<Deployment[], void, { state: {repoHome: RepoHomeState} }>(
-    'repoHome/fetchDeployments', 
-    async (_, { getState } ) => {
-        const { namespace, name, env, page} = getState().repoHome
+export const fetchDeployments = createAsyncThunk<
+  Deployment[],
+  void,
+  { state: { repoHome: RepoHomeState } }
+>('repoHome/fetchDeployments', async (_, { getState }) => {
+  const { namespace, name, env, page } = getState().repoHome;
 
-        const deployments = await listDeployments(namespace, name, env, "",page, perPage)
-        return deployments
-    },
-)
+  const deployments = await listDeployments(
+    namespace,
+    name,
+    env,
+    '',
+    page,
+    perPage
+  );
+  return deployments;
+});
 
 export const repoHomeSlice = createSlice({
-    name: "repoHome",
-    initialState,
-    reducers: {
-        init: (state, action: PayloadAction<{namespace: string, name: string}>) => {
-            state.namespace = action.payload.namespace
-            state.name = action.payload.name
-        },
-        setEnv: (state, action: PayloadAction<string>) => {
-            state.env = action.payload
-        },
-        increasePage: (state) => {
-            state.page = state.page + 1
-        },
-        decreasePage: (state) => {
-            state.page = state.page - 1
-        },
+  name: 'repoHome',
+  initialState,
+  reducers: {
+    init: (
+      state,
+      action: PayloadAction<{ namespace: string; name: string }>
+    ) => {
+      state.namespace = action.payload.namespace;
+      state.name = action.payload.name;
+    },
+    setEnv: (state, action: PayloadAction<string>) => {
+      state.env = action.payload;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(fetchEnvs.fulfilled, (state, action) => {
-                state.envs = action.payload
-            })
-            
-            .addCase(fetchDeployments.pending, (state) => {
-                state.loading = true
-            })
+    increasePage: (state) => {
+      state.page = state.page + 1;
+    },
+    decreasePage: (state) => {
+      state.page = state.page - 1;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchEnvs.fulfilled, (state, action) => {
+        state.envs = action.payload;
+      })
+
+      .addCase(fetchDeployments.pending, (state) => {
+        state.loading = true;
+      })
 
-            .addCase(fetchDeployments.fulfilled, (state, action) => {
-                state.deployments = action.payload
-                state.loading = false
-            })
-    }
-})
\ No newline at end of file
+      .addCase(fetchDeployments.fulfilled, (state, action) => {
+        state.deployments = action.payload;
+        state.loading = false;
+      });
+  },
+});
diff --git a/ui/src/redux/repoLock.ts b/ui/src/redux/repoLock.ts
index 3dfc1a2d..d95c9d61 100644
--- a/ui/src/redux/repoLock.ts
+++ b/ui/src/redux/repoLock.ts
@@ -1,164 +1,172 @@
-import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'
-import { message } from "antd"
+import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
+import { message } from 'antd';
 
+import { Config, Lock, HttpForbiddenError, HttpNotFoundError } from '../models';
 import {
-    Config,
-    Lock,
-    HttpForbiddenError,
-    HttpNotFoundError
-} from "../models"
-import {
-    getConfig,
-    listLocks as _listLocks,
-    lock as _lock,
-    unlock as _unlock,
-    updateLock
-} from "../apis"
+  getConfig,
+  listLocks as _listLocks,
+  lock as _lock,
+  unlock as _unlock,
+  updateLock,
+} from '../apis';
 
 interface RepoLockState {
-    display: boolean
-    namespace: string
-    name: string
-    config?: Config
-    locks: Lock[]
+  display: boolean;
+  namespace: string;
+  name: string;
+  config?: Config;
+  locks: Lock[];
 }
 
 const initialState: RepoLockState = {
-    display: false,
-    namespace: "",
-    name: "",
-    locks: [],
-}
-
-export const fetchConfig = createAsyncThunk<Config, void, { state: {repoLock: RepoLockState} }>(
-    "repoLock/fetchConfig", 
-    async (_, { getState, rejectWithValue } ) => {
-        const { namespace, name } = getState().repoLock
-
-        try {
-            const config = await getConfig(namespace, name)
-            return config
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const listLocks = createAsyncThunk<Lock[], void, { state: {repoLock: RepoLockState} }>(
-    'repoLock/listLocks', 
-    async (_, { getState, rejectWithValue }) => {
-        const { namespace, name } = getState().repoLock
-
-        try {
-            const locks = await _listLocks(namespace, name)
-            return locks
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const lock = createAsyncThunk<Lock, string, { state: {repoLock: RepoLockState} }>(
-    'repoLock/lock', 
-    async (env, { getState, rejectWithValue }) => {
-        const { namespace, name } = getState().repoLock
-
-        try {
-            const locks = await _lock(namespace, name, env)
-            return locks
-        } catch (e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only write permission can lock.", 3)
-            }
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const unlock = createAsyncThunk<Lock, string, { state: {repoLock: RepoLockState} }>(
-    'repoLock/unlock', 
-    async (env, { getState, rejectWithValue }) => {
-        const { namespace, name, locks } = getState().repoLock
-
-        const lock = locks.find((lock) => lock.env === env)
-        if (!lock) {
-            throw new Error("The env is not found.")
-        }
-
-        try {
-            await _unlock(namespace, name, lock.id)
-            return lock
-        } catch (e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only write permission can unlock.", 3)
-            }
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const setAutoUnlock = createAsyncThunk<Lock, {env: string, expiredAt: Date}, { state: {repoLock: RepoLockState} }>(
-    'repoLock/setAutoUnlock', 
-    async ({env, expiredAt}, { getState, rejectWithValue }) => {
-        const { namespace, name, locks } = getState().repoLock
-
-        const lock = locks.find((lock) => lock.env === env)
-        if (!lock) {
-            throw new Error("The env is not found.")
-        }
+  display: false,
+  namespace: '',
+  name: '',
+  locks: [],
+};
+
+export const fetchConfig = createAsyncThunk<
+  Config,
+  void,
+  { state: { repoLock: RepoLockState } }
+>('repoLock/fetchConfig', async (_, { getState, rejectWithValue }) => {
+  const { namespace, name } = getState().repoLock;
+
+  try {
+    const config = await getConfig(namespace, name);
+    return config;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const listLocks = createAsyncThunk<
+  Lock[],
+  void,
+  { state: { repoLock: RepoLockState } }
+>('repoLock/listLocks', async (_, { getState, rejectWithValue }) => {
+  const { namespace, name } = getState().repoLock;
+
+  try {
+    const locks = await _listLocks(namespace, name);
+    return locks;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const lock = createAsyncThunk<
+  Lock,
+  string,
+  { state: { repoLock: RepoLockState } }
+>('repoLock/lock', async (env, { getState, rejectWithValue }) => {
+  const { namespace, name } = getState().repoLock;
+
+  try {
+    const locks = await _lock(namespace, name, env);
+    return locks;
+  } catch (e) {
+    if (e instanceof HttpForbiddenError) {
+      message.warn('Only write permission can lock.', 3);
+    }
+    return rejectWithValue(e);
+  }
+});
+
+export const unlock = createAsyncThunk<
+  Lock,
+  string,
+  { state: { repoLock: RepoLockState } }
+>('repoLock/unlock', async (env, { getState, rejectWithValue }) => {
+  const { namespace, name, locks } = getState().repoLock;
+
+  const lock = locks.find((lock) => lock.env === env);
+  if (!lock) {
+    throw new Error('The env is not found.');
+  }
+
+  try {
+    await _unlock(namespace, name, lock.id);
+    return lock;
+  } catch (e) {
+    if (e instanceof HttpForbiddenError) {
+      message.warn('Only write permission can unlock.', 3);
+    }
+    return rejectWithValue(e);
+  }
+});
+
+export const setAutoUnlock = createAsyncThunk<
+  Lock,
+  { env: string; expiredAt: Date },
+  { state: { repoLock: RepoLockState } }
+>(
+  'repoLock/setAutoUnlock',
+  async ({ env, expiredAt }, { getState, rejectWithValue }) => {
+    const { namespace, name, locks } = getState().repoLock;
+
+    const lock = locks.find((lock) => lock.env === env);
+    if (!lock) {
+      throw new Error('The env is not found.');
+    }
 
-        try {
-            const ret = await updateLock(namespace, name, lock.id, {expiredAt})
-            message.info(`Setting auto-unlock.`)
+    try {
+      const ret = await updateLock(namespace, name, lock.id, { expiredAt });
+      message.info(`Setting auto-unlock.`);
 
-            return ret
-        } catch (e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only write permission can enable auto unlock.", 3)
-            }
+      return ret;
+    } catch (e) {
+      if (e instanceof HttpForbiddenError) {
+        message.warn('Only write permission can enable auto unlock.', 3);
+      }
 
-            if (e instanceof HttpNotFoundError) {
-                message.warn("Lock is not found.")
-            }
-            return rejectWithValue(e)
-        }
-    },
-)
+      if (e instanceof HttpNotFoundError) {
+        message.warn('Lock is not found.');
+      }
+      return rejectWithValue(e);
+    }
+  }
+);
 
 export const repoLockSlice = createSlice({
-    name: "repoLock",
-    initialState,
-    reducers: {
-        init: (state, action: PayloadAction<{namespace: string, name: string}>) => {
-            state.namespace = action.payload.namespace
-            state.name = action.payload.name
-        },
-        setDisplay: (state, action: PayloadAction<boolean>) => {
-            state.display = action.payload
-        },
+  name: 'repoLock',
+  initialState,
+  reducers: {
+    init: (
+      state,
+      action: PayloadAction<{ namespace: string; name: string }>
+    ) => {
+      state.namespace = action.payload.namespace;
+      state.name = action.payload.name;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(fetchConfig.fulfilled, (state, action) => {
-                state.config = action.payload
-            })
-            .addCase(listLocks.fulfilled, (state, action) => {
-                state.locks = action.payload
-            })
-            .addCase(lock.fulfilled, (state, action) => {
-                state.locks.push(action.payload)
-            })
-            .addCase(unlock.fulfilled, (state, action) => {
-                const idx = state.locks.findIndex((lock) => lock.id === action.payload.id)
-
-                if (idx !== -1) {
-                    state.locks.splice(idx, 1)
-                }
-            })
-            .addCase(setAutoUnlock.fulfilled, (state, action) => {
-                state.locks = state.locks.map((lock) => {
-                    return (lock.id !== action.payload.id)? lock : action.payload
-                })
-            })
-    }
-})
\ No newline at end of file
+    setDisplay: (state, action: PayloadAction<boolean>) => {
+      state.display = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchConfig.fulfilled, (state, action) => {
+        state.config = action.payload;
+      })
+      .addCase(listLocks.fulfilled, (state, action) => {
+        state.locks = action.payload;
+      })
+      .addCase(lock.fulfilled, (state, action) => {
+        state.locks.push(action.payload);
+      })
+      .addCase(unlock.fulfilled, (state, action) => {
+        const idx = state.locks.findIndex(
+          (lock) => lock.id === action.payload.id
+        );
+
+        if (idx !== -1) {
+          state.locks.splice(idx, 1);
+        }
+      })
+      .addCase(setAutoUnlock.fulfilled, (state, action) => {
+        state.locks = state.locks.map((lock) => {
+          return lock.id !== action.payload.id ? lock : action.payload;
+        });
+      });
+  },
+});
diff --git a/ui/src/redux/repoRollback.tsx b/ui/src/redux/repoRollback.tsx
index 2aa128f8..caeff531 100644
--- a/ui/src/redux/repoRollback.tsx
+++ b/ui/src/redux/repoRollback.tsx
@@ -1,195 +1,237 @@
-import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'
-import { message } from "antd"
-
-import { 
-    getConfig, 
-    listDeployments, 
-    rollbackDeployment,
-    listPerms,
-    getMe
-} from "../apis"
-import { 
-    User,
-    Deployment, 
-    DeploymentStatusEnum, 
-    Config,
-    Env,
-    RequestStatus, 
-    HttpForbiddenError,
-    HttpUnprocessableEntityError,
-    HttpConflictError
-} from "../models"
-
-const page = 1
-const perPage = 100
+import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
+import { message } from 'antd';
+
+import {
+  getConfig,
+  listDeployments,
+  rollbackDeployment,
+  listPerms,
+  getMe,
+} from '../apis';
+import {
+  User,
+  Deployment,
+  DeploymentStatusEnum,
+  Config,
+  Env,
+  RequestStatus,
+  HttpForbiddenError,
+  HttpUnprocessableEntityError,
+  HttpConflictError,
+} from '../models';
+
+const page = 1;
+const perPage = 100;
 
 interface RepoRollbackState {
-    display: boolean
-    namespace: string
-    name: string
-    config?: Config 
-    env?: Env
-    envs: Env[]
-    deployment?: Deployment 
-    deployments: Deployment[]
-    deployId: string
-    deploying: RequestStatus
+  display: boolean;
+  namespace: string;
+  name: string;
+  config?: Config;
+  env?: Env;
+  envs: Env[];
+  deployment?: Deployment;
+  deployments: Deployment[];
+  deployId: string;
+  deploying: RequestStatus;
 }
 
 const initialState: RepoRollbackState = {
-    display: false,
-    namespace: "",
-    name: "",
-    envs: [],
-    deployments: [],
-    deployId: "",
-    deploying: RequestStatus.Idle
-}
-
-export const fetchConfig = createAsyncThunk<Config, void, { state: {repoRollback: RepoRollbackState} }>(
-    "repoRollback/fetchEnvs", 
-    async (_, { getState, rejectWithValue } ) => {
-        const { namespace, name } = getState().repoRollback
-
-        try {
-            const config = await getConfig(namespace, name)
-            return config
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    },
-)
-
-export const fetchDeployments = createAsyncThunk<Deployment[], void, { state: {repoRollback: RepoRollbackState }}>(
-    "repoRollback/fetchDeployments",
-    async (_, { getState }) => {
-        const { namespace, name, env } = getState().repoRollback
-
-        if (!env) {
-            throw new Error("The env is not selected.")
-        } 
-
-        // Return the deployment history except the latest one.
-        const deployments = await listDeployments(namespace, name, env.name, DeploymentStatusEnum.Success, page, perPage)
-        return deployments.slice(1)
+  display: false,
+  namespace: '',
+  name: '',
+  envs: [],
+  deployments: [],
+  deployId: '',
+  deploying: RequestStatus.Idle,
+};
+
+export const fetchConfig = createAsyncThunk<
+  Config,
+  void,
+  { state: { repoRollback: RepoRollbackState } }
+>('repoRollback/fetchEnvs', async (_, { getState, rejectWithValue }) => {
+  const { namespace, name } = getState().repoRollback;
+
+  try {
+    const config = await getConfig(namespace, name);
+    return config;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const fetchDeployments = createAsyncThunk<
+  Deployment[],
+  void,
+  { state: { repoRollback: RepoRollbackState } }
+>('repoRollback/fetchDeployments', async (_, { getState }) => {
+  const { namespace, name, env } = getState().repoRollback;
+
+  if (!env) {
+    throw new Error('The env is not selected.');
+  }
+
+  // Return the deployment history except the latest one.
+  const deployments = await listDeployments(
+    namespace,
+    name,
+    env.name,
+    DeploymentStatusEnum.Success,
+    page,
+    perPage
+  );
+  return deployments.slice(1);
+});
+
+export const searchCandidates = createAsyncThunk<
+  User[],
+  string,
+  { state: { repoRollback: RepoRollbackState } }
+>('repoRollback/searchCandidates', async (q, { getState, rejectWithValue }) => {
+  const { namespace, name } = getState().repoRollback;
+
+  try {
+    const perms = await listPerms(namespace, name, q);
+    const candidates = perms.map((p) => {
+      return p.user;
+    });
+    return candidates;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const fetchUser = createAsyncThunk<
+  User,
+  void,
+  { state: { repoRollback: RepoRollbackState } }
+>('repoRollback/fetchUser', async (_, { rejectWithValue }) => {
+  try {
+    const user = await getMe();
+    return user;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
+
+export const rollback = createAsyncThunk<
+  void,
+  void,
+  { state: { repoRollback: RepoRollbackState } }
+>(
+  'repoRollback/deploy',
+  async (_, { getState, rejectWithValue, requestId }) => {
+    const { namespace, name, deployment, env, deployId, deploying } =
+      getState().repoRollback;
+    if (!deployment) {
+      throw new Error('The deployment is undefined.');
     }
-)
-
-export const searchCandidates = createAsyncThunk<User[], string, { state: {repoRollback: RepoRollbackState }}>(
-    "repoRollback/searchCandidates",
-    async (q, { getState, rejectWithValue }) => {
-        const { namespace, name } = getState().repoRollback
-
-        try {
-            const perms = await listPerms(namespace, name, q)
-            const candidates = perms.map((p) => {
-                return p.user
-            })
-            return candidates
-        } catch(e) {
-            return rejectWithValue(e)
-        }
-    }
-)
-
-export const fetchUser = createAsyncThunk<User, void, { state: {repoRollback: RepoRollbackState }}>(
-    "repoRollback/fetchUser",
-    async (_, { rejectWithValue }) => {
-        try {
-            const user = await getMe()
-            return user
-        } catch(e) {
-            return rejectWithValue(e)
-        }
+    if (!(deploying === RequestStatus.Pending && requestId === deployId)) {
+      return;
     }
-)
-
-export const rollback = createAsyncThunk<void, void, { state: {repoRollback: RepoRollbackState}}> (
-    "repoRollback/deploy",
-    async (_ , { getState, rejectWithValue, requestId }) => {
-        const { namespace, name, deployment, env, deployId, deploying } = getState().repoRollback
-        if (!deployment) {
-            throw new Error("The deployment is undefined.")
-        }
-        if (!(deploying === RequestStatus.Pending && requestId === deployId )) {
-            return
-        }
 
-        try {
-            const rollback = await rollbackDeployment(namespace, name, deployment.number)
-
-            if (!env?.review?.enabled) {
-                const msg = <span>
-                    Starts to rollback. <a href={`/${namespace}/${name}/deployments/${rollback.number}`}>#{rollback.number}</a>
-                </span>
-                message.success(msg, 3)
-                return
-            }
-
-            const msg = <span>
-                Request a review to reviewers  <a href={`/${namespace}/${name}/deployments/${rollback.number}`}>#{rollback.number}</a>
-            </span>
-            message.success(msg, 3)
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only write permission can deploy.", 3)
-            } else if (e instanceof HttpUnprocessableEntityError)  {
-                const msg = <span> 
-                    <span>It is unprocesable entity.</span><br/>
-                    <span className="gitploy-quote">{e.message}</span>
-                </span>
-                message.error(msg, 3)
-            } else if (e instanceof HttpConflictError) {
-                message.error("It has conflicted, please retry it.", 3)
-            }
-            return rejectWithValue(e)
-        }
+    try {
+      const rollback = await rollbackDeployment(
+        namespace,
+        name,
+        deployment.number
+      );
+
+      if (!env?.review?.enabled) {
+        const msg = (
+          <span>
+            Starts to rollback.{' '}
+            <a href={`/${namespace}/${name}/deployments/${rollback.number}`}>
+              #{rollback.number}
+            </a>
+          </span>
+        );
+        message.success(msg, 3);
+        return;
+      }
+
+      const msg = (
+        <span>
+          Request a review to reviewers{' '}
+          <a href={`/${namespace}/${name}/deployments/${rollback.number}`}>
+            #{rollback.number}
+          </a>
+        </span>
+      );
+      message.success(msg, 3);
+    } catch (e) {
+      if (e instanceof HttpForbiddenError) {
+        message.warn('Only write permission can deploy.', 3);
+      } else if (e instanceof HttpUnprocessableEntityError) {
+        const msg = (
+          <span>
+            <span>It is unprocesable entity.</span>
+            <br />
+            <span className="gitploy-quote">{e.message}</span>
+          </span>
+        );
+        message.error(msg, 3);
+      } else if (e instanceof HttpConflictError) {
+        message.error('It has conflicted, please retry it.', 3);
+      }
+      return rejectWithValue(e);
     }
-)
+  }
+);
 
 export const repoRollbackSlice = createSlice({
-    name: "repoRollback",
-    initialState,
-    reducers: {
-        init: (state, action: PayloadAction<{namespace: string, name: string}>) => {
-            state.namespace = action.payload.namespace
-            state.name = action.payload.name
-        },
-        setDisplay: (state, action: PayloadAction<boolean>) => {
-            state.display = action.payload
-        },
-        setEnv: (state, action: PayloadAction<Env>) => {
-            state.env = action.payload
-        },
-        setDeployment: (state, action: PayloadAction<Deployment>) => {
-            state.deployment = action.payload
-        },
+  name: 'repoRollback',
+  initialState,
+  reducers: {
+    init: (
+      state,
+      action: PayloadAction<{ namespace: string; name: string }>
+    ) => {
+      state.namespace = action.payload.namespace;
+      state.name = action.payload.name;
     },
-    extraReducers: builder => {
-        builder
-            .addCase(fetchConfig.fulfilled, (state, action) => {
-                const config = action.payload
-                state.envs = config.envs.map(e => e)
-                state.config = config
-            })
-            .addCase(fetchDeployments.fulfilled, (state, action) => {
-                state.deployments = action.payload
-            })
-            .addCase(rollback.pending, (state, action) => {
-                if (state.deploying === RequestStatus.Idle) {
-                    state.deploying = RequestStatus.Pending
-                    state.deployId = action.meta.requestId
-                }
-            })
-            .addCase(rollback.fulfilled, (state, action) => {
-                if (state.deploying === RequestStatus.Pending && state.deployId === action.meta.requestId) {
-                    state.deploying = RequestStatus.Idle
-                }
-            })
-            .addCase(rollback.rejected, (state, action) => {
-                if (state.deploying === RequestStatus.Pending && state.deployId === action.meta.requestId) {
-                    state.deploying = RequestStatus.Idle
-                }
-            })
-    }
-})
\ No newline at end of file
+    setDisplay: (state, action: PayloadAction<boolean>) => {
+      state.display = action.payload;
+    },
+    setEnv: (state, action: PayloadAction<Env>) => {
+      state.env = action.payload;
+    },
+    setDeployment: (state, action: PayloadAction<Deployment>) => {
+      state.deployment = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchConfig.fulfilled, (state, action) => {
+        const config = action.payload;
+        state.envs = config.envs.map((e) => e);
+        state.config = config;
+      })
+      .addCase(fetchDeployments.fulfilled, (state, action) => {
+        state.deployments = action.payload;
+      })
+      .addCase(rollback.pending, (state, action) => {
+        if (state.deploying === RequestStatus.Idle) {
+          state.deploying = RequestStatus.Pending;
+          state.deployId = action.meta.requestId;
+        }
+      })
+      .addCase(rollback.fulfilled, (state, action) => {
+        if (
+          state.deploying === RequestStatus.Pending &&
+          state.deployId === action.meta.requestId
+        ) {
+          state.deploying = RequestStatus.Idle;
+        }
+      })
+      .addCase(rollback.rejected, (state, action) => {
+        if (
+          state.deploying === RequestStatus.Pending &&
+          state.deployId === action.meta.requestId
+        ) {
+          state.deploying = RequestStatus.Idle;
+        }
+      });
+  },
+});
diff --git a/ui/src/redux/repoSettings.tsx b/ui/src/redux/repoSettings.tsx
index a16d22a8..62b71675 100644
--- a/ui/src/redux/repoSettings.tsx
+++ b/ui/src/redux/repoSettings.tsx
@@ -1,122 +1,138 @@
-import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
-import { message } from "antd"
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import { message } from 'antd';
 
-import { getRepo, updateRepo, deactivateRepo } from "../apis"
-import { Repo, RequestStatus, HttpForbiddenError, HttpUnprocessableEntityError  } from "../models"
+import { getRepo, updateRepo, deactivateRepo } from '../apis';
+import {
+  Repo,
+  RequestStatus,
+  HttpForbiddenError,
+  HttpUnprocessableEntityError,
+} from '../models';
 
 interface RepoSettingsState {
-    repo?: Repo
-    saveId: string,
-    saving: RequestStatus
-    deactivating: RequestStatus
+  repo?: Repo;
+  saveId: string;
+  saving: RequestStatus;
+  deactivating: RequestStatus;
 }
 
 const initialState: RepoSettingsState = {
-    saveId: "",
-    saving: RequestStatus.Idle,
-    deactivating: RequestStatus.Idle,
-}
+  saveId: '',
+  saving: RequestStatus.Idle,
+  deactivating: RequestStatus.Idle,
+};
 
-export const init = createAsyncThunk<Repo, {namespace: string, name: string}, { state: {repoSettings: RepoSettingsState} }>(
-    'repoSettings/init', 
-    async (params) => {
-        const repo = await getRepo(params.namespace, params.name)
-        return repo
-    },
-)
+export const init = createAsyncThunk<
+  Repo,
+  { namespace: string; name: string },
+  { state: { repoSettings: RepoSettingsState } }
+>('repoSettings/init', async (params) => {
+  const repo = await getRepo(params.namespace, params.name);
+  return repo;
+});
 
 export const save = createAsyncThunk<
-    Repo, 
-    {
-        name: string,
-        config_path: string
-    },
-    { state: {repoSettings: RepoSettingsState} }
+  Repo,
+  {
+    name: string;
+    config_path: string;
+  },
+  { state: { repoSettings: RepoSettingsState } }
 >(
-    'repoSettings/save', 
-    async (values, { getState, rejectWithValue, requestId } ) => {
-        const { repo, saveId, saving } = getState().repoSettings
-        if (!repo) {
-            throw new Error("There is no repo.")
-        }
-
-        if (!(saving === RequestStatus.Pending || saveId === requestId)) {
-            return repo
-        }
+  'repoSettings/save',
+  async (values, { getState, rejectWithValue, requestId }) => {
+    const { repo, saveId, saving } = getState().repoSettings;
+    if (!repo) {
+      throw new Error('There is no repo.');
+    }
 
-        try {
-            const nr = await updateRepo(repo.namespace, repo.name, values)
-            message.success("Success to save.", 3)
-            return nr
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only admin permission can update.", 3)
-            } else if (e instanceof HttpUnprocessableEntityError) {
-                message.error(<> 
-                    <span>It is unprocesable entity.</span><br/>
-                    <span className="gitploy-quote">{e.message}</span>
-                </>, 3)
-            }
+    if (!(saving === RequestStatus.Pending || saveId === requestId)) {
+      return repo;
+    }
 
+    try {
+      const nr = await updateRepo(repo.namespace, repo.name, values);
+      message.success('Success to save.', 3);
+      return nr;
+    } catch (e) {
+      if (e instanceof HttpForbiddenError) {
+        message.warn('Only admin permission can update.', 3);
+      } else if (e instanceof HttpUnprocessableEntityError) {
+        message.error(
+          <>
+            <span>It is unprocesable entity.</span>
+            <br />
+            <span className="gitploy-quote">{e.message}</span>
+          </>,
+          3
+        );
+      }
 
-            return rejectWithValue(e)
-        }
-    },
-)
+      return rejectWithValue(e);
+    }
+  }
+);
 
-export const deactivate = createAsyncThunk<Repo, void, { state: {repoSettings: RepoSettingsState} }>(
-    'repoSettings/deactivate', 
-    async (_, { getState, rejectWithValue } ) => {
-        const { repo } = getState().repoSettings
-        if (!repo) throw new Error("There is no repo.")
+export const deactivate = createAsyncThunk<
+  Repo,
+  void,
+  { state: { repoSettings: RepoSettingsState } }
+>('repoSettings/deactivate', async (_, { getState, rejectWithValue }) => {
+  const { repo } = getState().repoSettings;
+  if (!repo) throw new Error('There is no repo.');
 
-        try {
-            const nr = await deactivateRepo(repo.namespace, repo.name)
-            window.location.reload()
-            return nr
-        } catch(e) {
-            if (e instanceof HttpForbiddenError) {
-                message.warn("Only admin permission can deactivate.", 3)
-            } 
-            return rejectWithValue(e)
-        }
-    },
-)
+  try {
+    const nr = await deactivateRepo(repo.namespace, repo.name);
+    window.location.reload();
+    return nr;
+  } catch (e) {
+    if (e instanceof HttpForbiddenError) {
+      message.warn('Only admin permission can deactivate.', 3);
+    }
+    return rejectWithValue(e);
+  }
+});
 
 export const repoSettingsSlice = createSlice({
-    name: "repoSettings",
-    initialState,
-    reducers: {},
-    extraReducers: builder => {
-        builder
-            .addCase(init.fulfilled, (state, action) => {
-                state.repo = action.payload
-            })
-            .addCase(save.pending, (state, action) => {
-                if (state.saving === RequestStatus.Idle) {
-                    state.saving = RequestStatus.Pending
-                    state.saveId = action.meta.requestId
-                }
-            })
-            .addCase(save.fulfilled, (state, action) => {
-                if (state.saving === RequestStatus.Pending && state.saveId === action.meta.requestId) {
-                    state.repo = action.payload
-                    state.saving = RequestStatus.Idle
-                }
-            })
-            .addCase(save.rejected, (state, action) => {
-                if (state.saving === RequestStatus.Pending && state.saveId === action.meta.requestId) {
-                    state.saving = RequestStatus.Idle
-                }
-            })
-            .addCase(deactivate.pending, (state) => {
-                state.deactivating = RequestStatus.Pending
-            })
-            .addCase(deactivate.fulfilled, (state) => {
-                state.deactivating = RequestStatus.Idle
-            })
-            .addCase(deactivate.rejected, (state) => {
-                state.deactivating = RequestStatus.Idle
-            })
-    }
-})
\ No newline at end of file
+  name: 'repoSettings',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(init.fulfilled, (state, action) => {
+        state.repo = action.payload;
+      })
+      .addCase(save.pending, (state, action) => {
+        if (state.saving === RequestStatus.Idle) {
+          state.saving = RequestStatus.Pending;
+          state.saveId = action.meta.requestId;
+        }
+      })
+      .addCase(save.fulfilled, (state, action) => {
+        if (
+          state.saving === RequestStatus.Pending &&
+          state.saveId === action.meta.requestId
+        ) {
+          state.repo = action.payload;
+          state.saving = RequestStatus.Idle;
+        }
+      })
+      .addCase(save.rejected, (state, action) => {
+        if (
+          state.saving === RequestStatus.Pending &&
+          state.saveId === action.meta.requestId
+        ) {
+          state.saving = RequestStatus.Idle;
+        }
+      })
+      .addCase(deactivate.pending, (state) => {
+        state.deactivating = RequestStatus.Pending;
+      })
+      .addCase(deactivate.fulfilled, (state) => {
+        state.deactivating = RequestStatus.Idle;
+      })
+      .addCase(deactivate.rejected, (state) => {
+        state.deactivating = RequestStatus.Idle;
+      });
+  },
+});
diff --git a/ui/src/redux/settings.ts b/ui/src/redux/settings.ts
index 37efbedc..87457a35 100644
--- a/ui/src/redux/settings.ts
+++ b/ui/src/redux/settings.ts
@@ -1,69 +1,72 @@
-import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
-import { User, RateLimit } from "../models"
-import { getMe, getRateLimit, checkSlack as _checkSlack } from "../apis"
+import { User, RateLimit } from '../models';
+import { getMe, getRateLimit, checkSlack as _checkSlack } from '../apis';
 
 interface SettingsState {
-    user?: User
-    rateLimit?: RateLimit
-    isSlackEnabled: boolean
+  user?: User;
+  rateLimit?: RateLimit;
+  isSlackEnabled: boolean;
 }
 
 const initialState: SettingsState = {
-    isSlackEnabled: false
-}
+  isSlackEnabled: false,
+};
 
-export const fetchMe = createAsyncThunk<User, void, { state: { settings: SettingsState } }>(
-    "settings/fetchMe",
-    async (_, { rejectWithValue }) => {
-        try {
-            const user = await getMe()
-            return user
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+export const fetchMe = createAsyncThunk<
+  User,
+  void,
+  { state: { settings: SettingsState } }
+>('settings/fetchMe', async (_, { rejectWithValue }) => {
+  try {
+    const user = await getMe();
+    return user;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
-export const fetchRateLimit = createAsyncThunk<RateLimit, void, { state: { settings: SettingsState } }>(
-    "settings/fetchRateLimit",
-    async (_, { rejectWithValue }) => {
-        try {
-            const rateLimit = await getRateLimit()
-            return rateLimit
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+export const fetchRateLimit = createAsyncThunk<
+  RateLimit,
+  void,
+  { state: { settings: SettingsState } }
+>('settings/fetchRateLimit', async (_, { rejectWithValue }) => {
+  try {
+    const rateLimit = await getRateLimit();
+    return rateLimit;
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
-export const checkSlack = createAsyncThunk<boolean, void, { state: { settings: SettingsState } }>(
-    "settings/checkSlack",
-    async (_, { rejectWithValue }) => {
-        try {
-            return await _checkSlack()
-        } catch (e) {
-            return rejectWithValue(e)
-        }
-    }
-)
+export const checkSlack = createAsyncThunk<
+  boolean,
+  void,
+  { state: { settings: SettingsState } }
+>('settings/checkSlack', async (_, { rejectWithValue }) => {
+  try {
+    return await _checkSlack();
+  } catch (e) {
+    return rejectWithValue(e);
+  }
+});
 
 export const settingsSlice = createSlice({
-    name: "settings",
-    initialState,
-    reducers: {},
-    extraReducers: builder => {
-        builder
-            .addCase(fetchMe.fulfilled, (state, action) => {
-                state.user = action.payload
-            }) 
+  name: 'settings',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchMe.fulfilled, (state, action) => {
+        state.user = action.payload;
+      })
 
-            .addCase(fetchRateLimit.fulfilled, (state, action) => {
-                state.rateLimit = action.payload
-            })
+      .addCase(fetchRateLimit.fulfilled, (state, action) => {
+        state.rateLimit = action.payload;
+      })
 
-            .addCase(checkSlack.fulfilled, (state, action) => {
-                state.isSlackEnabled = action.payload
-            }) 
-    }
-})
+      .addCase(checkSlack.fulfilled, (state, action) => {
+        state.isSlackEnabled = action.payload;
+      });
+  },
+});
diff --git a/ui/src/redux/store.ts b/ui/src/redux/store.ts
index 4dcc745d..1702c6cc 100644
--- a/ui/src/redux/store.ts
+++ b/ui/src/redux/store.ts
@@ -1,19 +1,19 @@
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit';
 
-import { mainSlice, apiMiddleware } from "./main"
-import { homeSlice } from "./home"
-import { repoSlice } from "./repo"
-import { repoHomeSlice } from "./repoHome"
-import { repoDeploySlice } from "./repoDeploy"
-import { repoLockSlice } from "./repoLock"
-import { repoRollbackSlice } from "./repoRollback"
-import { repoSettingsSlice } from "./repoSettings"
-import { settingsSlice } from "./settings"
-import { deploymentSlice } from "./deployment"
-import { membersSlice } from "./members"
-import { activitiesSlice } from './activities'
+import { mainSlice, apiMiddleware } from './main';
+import { homeSlice } from './home';
+import { repoSlice } from './repo';
+import { repoHomeSlice } from './repoHome';
+import { repoDeploySlice } from './repoDeploy';
+import { repoLockSlice } from './repoLock';
+import { repoRollbackSlice } from './repoRollback';
+import { repoSettingsSlice } from './repoSettings';
+import { settingsSlice } from './settings';
+import { deploymentSlice } from './deployment';
+import { membersSlice } from './members';
+import { activitiesSlice } from './activities';
 
-export const store =  configureStore({
+export const store = configureStore({
   reducer: {
     main: mainSlice.reducer,
     home: homeSlice.reducer,
@@ -28,13 +28,13 @@ export const store =  configureStore({
     members: membersSlice.reducer,
     activities: activitiesSlice.reducer,
   },
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
-    serializableCheck: false
-  })
-    .concat(apiMiddleware),
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }).concat(apiMiddleware),
   devTools: true,
-})
+});
 
-export type RootState = ReturnType<typeof store.getState>
+export type RootState = ReturnType<typeof store.getState>;
 
-export type AppDispatch = typeof store.dispatch
+export type AppDispatch = typeof store.dispatch;
diff --git a/ui/src/views/activities/ActivityHistory.tsx b/ui/src/views/activities/ActivityHistory.tsx
index 838c5360..cdd59c79 100644
--- a/ui/src/views/activities/ActivityHistory.tsx
+++ b/ui/src/views/activities/ActivityHistory.tsx
@@ -1,38 +1,44 @@
-import { Timeline, Typography } from 'antd'
-import moment from "moment"
+import { Timeline, Typography } from 'antd';
+import moment from 'moment';
 
-import { Deployment } from "../../models"
-import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
-import UserAvatar from '../../components/UserAvatar'
-import DeploymentRefCode from '../../components/DeploymentRefCode'
-import { getStatusColor } from "../../components/partials"
+import { Deployment } from '../../models';
+import DeploymentStatusBadge from '../../components/DeploymentStatusBadge';
+import UserAvatar from '../../components/UserAvatar';
+import DeploymentRefCode from '../../components/DeploymentRefCode';
+import { getStatusColor } from '../../components/partials';
 
-const { Text } = Typography
+const { Text } = Typography;
 
 export interface ActivityHistoryProps {
-    deployments: Deployment[]
+  deployments: Deployment[];
 }
 
-export default function ActivityHistory(props: ActivityHistoryProps): JSX.Element {
-    return (
-        <Timeline>
-            {props.deployments.map((d, idx) => {
-                return (
-                    <Timeline.Item key={idx} color={getStatusColor(d.status)}>
-                        <p>
-                            <Text strong>
-                                {`${d.repo?.namespace} / ${d.repo?.name}`}
-                            </Text>&nbsp;
-                            <a href={`/${d.repo?.namespace}/${d.repo?.name}/deployments/${d.number}`}>
-                                #{d.number}
-                            </a>
-                        </p>
-                        <p>
-                            <UserAvatar user={d.deployer} /> deployed <DeploymentRefCode deployment={d}/> to <Text strong>{d.env}</Text> on {moment(d.createdAt).format("LLL")} <DeploymentStatusBadge deployment={d}/>
-                        </p>
-                    </Timeline.Item>
-                )
-            })}
-        </Timeline>
-    )
+export default function ActivityHistory(
+  props: ActivityHistoryProps
+): JSX.Element {
+  return (
+    <Timeline>
+      {props.deployments.map((d, idx) => {
+        return (
+          <Timeline.Item key={idx} color={getStatusColor(d.status)}>
+            <p>
+              <Text strong>{`${d.repo?.namespace} / ${d.repo?.name}`}</Text>
+              &nbsp;
+              <a
+                href={`/${d.repo?.namespace}/${d.repo?.name}/deployments/${d.number}`}
+              >
+                #{d.number}
+              </a>
+            </p>
+            <p>
+              <UserAvatar user={d.deployer} /> deployed{' '}
+              <DeploymentRefCode deployment={d} /> to{' '}
+              <Text strong>{d.env}</Text> on {moment(d.createdAt).format('LLL')}{' '}
+              <DeploymentStatusBadge deployment={d} />
+            </p>
+          </Timeline.Item>
+        );
+      })}
+    </Timeline>
+  );
 }
diff --git a/ui/src/views/activities/SearchActivities.tsx b/ui/src/views/activities/SearchActivities.tsx
index 7f64391e..ffecdc51 100644
--- a/ui/src/views/activities/SearchActivities.tsx
+++ b/ui/src/views/activities/SearchActivities.tsx
@@ -1,63 +1,69 @@
-import { Row, Col, Form, DatePicker, Button, Switch } from "antd"
-import moment, { Moment } from "moment"
+import { Row, Col, Form, DatePicker, Button, Switch } from 'antd';
+import moment, { Moment } from 'moment';
 
 export interface SearchActivitiesValues {
-    period?: [Moment, Moment]
-    productionOnly?: boolean
+  period?: [Moment, Moment];
+  productionOnly?: boolean;
 }
 
 export interface SearchActivitiesProps {
-    initialValues?: SearchActivitiesValues 
-    onClickSearch(values: SearchActivitiesValues): void
+  initialValues?: SearchActivitiesValues;
+  onClickSearch(values: SearchActivitiesValues): void;
 }
 
-export default function SearchActivities(props: SearchActivitiesProps): JSX.Element {
-    const content = (
-        <>
-            <Form.Item label="Period" name="period">
-                <DatePicker.RangePicker 
-                    format="YYYY-MM-DD HH:mm"
-                    showTime={{
-                        showSecond: false, 
-                        defaultValue: [moment().hour(0).minute(0), moment().hour(23).minute(59)],
-                    }}
-                />
-            </Form.Item>
-            <Form.Item label="Production" name="productionOnly" valuePropName="checked">
-                <Switch size="small" />
-            </Form.Item>
-            <Form.Item >
-                <Button 
-                    htmlType="submit" 
-                    type="primary" 
-                >
-                    Search
-                </Button>
-            </Form.Item>
-        </>
-    )
-    return (
-        <Row>
-            {/* Mobile view */}
-            <Col span={24} lg={0}>
-                <Form 
-                    layout="horizontal" 
-                    initialValues={props.initialValues}
-                    onFinish={props.onClickSearch}
-                >
-                    {content}
-                </Form>
-            </Col>
-            {/* Laptop */}
-            <Col span={0} lg={24}>
-                <Form 
-                    layout="inline" 
-                    initialValues={props.initialValues}
-                    onFinish={props.onClickSearch}
-                >
-                    {content}
-                </Form>
-            </Col>
-        </Row>
-    )
-}
\ No newline at end of file
+export default function SearchActivities(
+  props: SearchActivitiesProps
+): JSX.Element {
+  const content = (
+    <>
+      <Form.Item label="Period" name="period">
+        <DatePicker.RangePicker
+          format="YYYY-MM-DD HH:mm"
+          showTime={{
+            showSecond: false,
+            defaultValue: [
+              moment().hour(0).minute(0),
+              moment().hour(23).minute(59),
+            ],
+          }}
+        />
+      </Form.Item>
+      <Form.Item
+        label="Production"
+        name="productionOnly"
+        valuePropName="checked"
+      >
+        <Switch size="small" />
+      </Form.Item>
+      <Form.Item>
+        <Button htmlType="submit" type="primary">
+          Search
+        </Button>
+      </Form.Item>
+    </>
+  );
+  return (
+    <Row>
+      {/* Mobile view */}
+      <Col span={24} lg={0}>
+        <Form
+          layout="horizontal"
+          initialValues={props.initialValues}
+          onFinish={props.onClickSearch}
+        >
+          {content}
+        </Form>
+      </Col>
+      {/* Laptop */}
+      <Col span={0} lg={24}>
+        <Form
+          layout="inline"
+          initialValues={props.initialValues}
+          onFinish={props.onClickSearch}
+        >
+          {content}
+        </Form>
+      </Col>
+    </Row>
+  );
+}
diff --git a/ui/src/views/activities/index.tsx b/ui/src/views/activities/index.tsx
index c084fd47..cb351d80 100644
--- a/ui/src/views/activities/index.tsx
+++ b/ui/src/views/activities/index.tsx
@@ -1,110 +1,125 @@
-import { useEffect } from "react"
-import { shallowEqual } from 'react-redux'
-import { Helmet } from "react-helmet"
+import { useEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { Helmet } from 'react-helmet';
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { perPage, activitiesSlice, searchDeployments } from "../../redux/activities"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import {
+  perPage,
+  activitiesSlice,
+  searchDeployments,
+} from '../../redux/activities';
 
-import Main from "../main"
-import SearchActivities, { SearchActivitiesProps, SearchActivitiesValues } from "./SearchActivities"
-import ActivityHistory, { ActivityHistoryProps } from "./ActivityHistory"
-import Pagination, { PaginationProps } from "../../components/Pagination"
-import Spin from "../../components/Spin"
+import Main from '../main';
+import SearchActivities, {
+  SearchActivitiesProps,
+  SearchActivitiesValues,
+} from './SearchActivities';
+import ActivityHistory, { ActivityHistoryProps } from './ActivityHistory';
+import Pagination, { PaginationProps } from '../../components/Pagination';
+import Spin from '../../components/Spin';
 
-const { actions } = activitiesSlice
+const { actions } = activitiesSlice;
 
-export default ():JSX.Element => {
-    const { 
-        loading,
-        deployments,
-        page,
-    } = useAppSelector(state => state.activities, shallowEqual)
+export default (): JSX.Element => {
+  const { loading, deployments, page } = useAppSelector(
+    (state) => state.activities,
+    shallowEqual
+  );
 
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        dispatch(searchDeployments({
-            productionOnly: false
-        }))
+  useEffect(() => {
+    dispatch(
+      searchDeployments({
+        productionOnly: false,
+      })
+    );
 
-        // eslint-disable-next-line 
-    }, [dispatch])
+    // eslint-disable-next-line
+  }, [dispatch]);
 
-    const onClickSearch = (values: SearchActivitiesValues) => {
-        dispatch(searchDeployments({
-            start: values.period? values.period[0].toDate() : undefined,
-            end: values.period? values.period[1].toDate() : undefined,
-            productionOnly: values.productionOnly? values.productionOnly : false
-        }))
-    }
+  const onClickSearch = (values: SearchActivitiesValues) => {
+    dispatch(
+      searchDeployments({
+        start: values.period ? values.period[0].toDate() : undefined,
+        end: values.period ? values.period[1].toDate() : undefined,
+        productionOnly: values.productionOnly ? values.productionOnly : false,
+      })
+    );
+  };
 
-    const onClickPrev = () => dispatch(actions.decreasePage())
+  const onClickPrev = () => dispatch(actions.decreasePage());
 
-    const onClickNext = () => dispatch(actions.increasePage())
+  const onClickNext = () => dispatch(actions.increasePage());
 
-    return (
-        <Main>
-            <Activities 
-                onClickSearch={onClickSearch}
-                loading={loading}
-                deployments={deployments}
-                disabledPrev={page <= 1}
-                disabledNext={deployments.length != perPage}
-                onClickPrev={onClickPrev}
-                onClickNext={onClickNext}
-            />
-        </Main>
-    )
-}
+  return (
+    <Main>
+      <Activities
+        onClickSearch={onClickSearch}
+        loading={loading}
+        deployments={deployments}
+        disabledPrev={page <= 1}
+        disabledNext={deployments.length != perPage}
+        onClickPrev={onClickPrev}
+        onClickNext={onClickNext}
+      />
+    </Main>
+  );
+};
 
-interface ActivitiesProps extends SearchActivitiesProps, ActivityHistoryProps, PaginationProps  {
-    loading: boolean
+interface ActivitiesProps
+  extends SearchActivitiesProps,
+    ActivityHistoryProps,
+    PaginationProps {
+  loading: boolean;
 }
 
 function Activities({
-    // Properties to search.
-    initialValues,
-    onClickSearch,
-    // Properties for the deployment history.
-    loading,
-    deployments,
-    // Pagination for the pagination.
-    disabledPrev,
-    disabledNext,
-    onClickPrev,
-    onClickNext
+  // Properties to search.
+  initialValues,
+  onClickSearch,
+  // Properties for the deployment history.
+  loading,
+  deployments,
+  // Pagination for the pagination.
+  disabledPrev,
+  disabledNext,
+  onClickPrev,
+  onClickNext,
 }: ActivitiesProps): JSX.Element {
-    return (
-        <>
-            <Helmet>
-                <title>Activities</title>
-            </Helmet>
-            <h1>Activities</h1>
-            <div style={{marginTop: 30}}>
-                <h2>Search</h2>
-                <SearchActivities 
-                    initialValues={initialValues}
-                    onClickSearch={onClickSearch}
-                />
-            </div>
-            <div style={{marginTop: 50}}>
-                <h2>History</h2>
-                <div style={{marginTop: 30}}>
-                    {(loading)? 
-                        <div style={{textAlign: "center"}}>
-                            <Spin />
-                        </div> 
-                        :
-                        <ActivityHistory deployments={deployments}/>}
-                </div>
-            </div>
-            <div style={{marginTop: 30, textAlign: "center"}}>
-                <Pagination 
-                    disabledPrev={disabledPrev}
-                    disabledNext={disabledNext}
-                    onClickPrev={onClickPrev} 
-                    onClickNext={onClickNext} />
+  return (
+    <>
+      <Helmet>
+        <title>Activities</title>
+      </Helmet>
+      <h1>Activities</h1>
+      <div style={{ marginTop: 30 }}>
+        <h2>Search</h2>
+        <SearchActivities
+          initialValues={initialValues}
+          onClickSearch={onClickSearch}
+        />
+      </div>
+      <div style={{ marginTop: 50 }}>
+        <h2>History</h2>
+        <div style={{ marginTop: 30 }}>
+          {loading ? (
+            <div style={{ textAlign: 'center' }}>
+              <Spin />
             </div>
-        </>
-    )
+          ) : (
+            <ActivityHistory deployments={deployments} />
+          )}
+        </div>
+      </div>
+      <div style={{ marginTop: 30, textAlign: 'center' }}>
+        <Pagination
+          disabledPrev={disabledPrev}
+          disabledNext={disabledNext}
+          onClickPrev={onClickPrev}
+          onClickNext={onClickNext}
+        />
+      </div>
+    </>
+  );
 }
diff --git a/ui/src/views/deployment/CommitChanges.tsx b/ui/src/views/deployment/CommitChanges.tsx
index 97c5c1eb..cbc8a2ce 100644
--- a/ui/src/views/deployment/CommitChanges.tsx
+++ b/ui/src/views/deployment/CommitChanges.tsx
@@ -1,81 +1,88 @@
-import { useState } from "react"
-import { Button, Typography, List, Avatar } from "antd"
-import moment from "moment"
+import { useState } from 'react';
+import { Button, Typography, List, Avatar } from 'antd';
+import moment from 'moment';
 
-import { Commit } from "../../models"
+import { Commit } from '../../models';
 
 interface CommitChangesProps {
-    changes:Commit[]
+  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}/>
-                )
-            }}
-        />
-    )
+  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)
+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 [hide, setHide] = useState(true);
 
-    const onClickHide = () => {
-        setHide(!hide)
-    }
+  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>
-    )
-}
\ No newline at end of file
+  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>
+  );
+}
diff --git a/ui/src/views/deployment/DeploymentDescriptor.tsx b/ui/src/views/deployment/DeploymentDescriptor.tsx
index 21dbb7fe..72c51475 100644
--- a/ui/src/views/deployment/DeploymentDescriptor.tsx
+++ b/ui/src/views/deployment/DeploymentDescriptor.tsx
@@ -1,72 +1,74 @@
-import { useState } from "react"
-import { Button, Descriptions, Modal, Typography } from "antd"
-import moment from "moment"
+import { useState } from 'react';
+import { Button, Descriptions, Modal, Typography } from 'antd';
+import moment from 'moment';
 
-import CommitChanges from "./CommitChanges"
-import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
-import UserAvatar from "../../components/UserAvatar"
+import CommitChanges from './CommitChanges';
+import DeploymentStatusBadge from '../../components/DeploymentStatusBadge';
+import UserAvatar from '../../components/UserAvatar';
 
-import { Commit, Deployment } from "../../models"
-import { getShortRef } from "../../libs"
+import { Commit, Deployment } from '../../models';
+import { getShortRef } from '../../libs';
 
-const { Text } = Typography
+const { Text } = Typography;
 
 export interface DeploymentDescriptorProps {
-    deployment: Deployment
-    changes: Commit[]
+  deployment: Deployment;
+  changes: Commit[];
 }
 
 export default function DeploymentDescriptor({
-    deployment, 
-    changes
+  deployment,
+  changes,
 }: DeploymentDescriptorProps): JSX.Element {
-    const [visible, setVisible] = useState<boolean>(false)
+  const [visible, setVisible] = useState<boolean>(false);
 
-    const showModal = () => {
-      setVisible(true)
-    }
-  
-    const hideModal = () => {
-      setVisible(false)
-    }
+  const showModal = () => {
+    setVisible(true);
+  };
 
-    return (
-        <Descriptions title="Information" bordered column={1}>
-            <Descriptions.Item label="Environment">
-                {deployment.env}
-            </Descriptions.Item>
-            <Descriptions.Item label="Ref">
-                <Text className="gitploy-code" code>{getShortRef(deployment)}</Text>
-            </Descriptions.Item>
-            <Descriptions.Item label="Status">
-                <DeploymentStatusBadge deployment={deployment}/>
-            </Descriptions.Item>
-            <Descriptions.Item label="Deployer">
-                <UserAvatar user={deployment.deployer} boldName={false}/>
-            </Descriptions.Item>
-            <Descriptions.Item label="Deploy Time">
-                {moment(deployment.createdAt).format("YYYY-MM-DD HH:mm:ss")}
-            </Descriptions.Item>
-            <Descriptions.Item label="Changes">
-                <Button 
-                    type="link"
-                    style={{padding: 0, height: 20}}
-                    onClick={showModal}
-                >
-                    View 
-                </Button>
-                <Modal 
-                    title="Changes" 
-                    visible={visible}
-                    width={800}
-                    // Hide OK Button
-                    okButtonProps={{style: {display: "none"}}}
-                    cancelText="Close"
-                    onCancel={hideModal}
-                >
-                    <CommitChanges changes={changes}/>
-                </Modal>
-            </Descriptions.Item>
-        </Descriptions>
-    )
-}
\ No newline at end of file
+  const hideModal = () => {
+    setVisible(false);
+  };
+
+  return (
+    <Descriptions title="Information" bordered column={1}>
+      <Descriptions.Item label="Environment">
+        {deployment.env}
+      </Descriptions.Item>
+      <Descriptions.Item label="Ref">
+        <Text className="gitploy-code" code>
+          {getShortRef(deployment)}
+        </Text>
+      </Descriptions.Item>
+      <Descriptions.Item label="Status">
+        <DeploymentStatusBadge deployment={deployment} />
+      </Descriptions.Item>
+      <Descriptions.Item label="Deployer">
+        <UserAvatar user={deployment.deployer} boldName={false} />
+      </Descriptions.Item>
+      <Descriptions.Item label="Deploy Time">
+        {moment(deployment.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+      </Descriptions.Item>
+      <Descriptions.Item label="Changes">
+        <Button
+          type="link"
+          style={{ padding: 0, height: 20 }}
+          onClick={showModal}
+        >
+          View
+        </Button>
+        <Modal
+          title="Changes"
+          visible={visible}
+          width={800}
+          // Hide OK Button
+          okButtonProps={{ style: { display: 'none' } }}
+          cancelText="Close"
+          onCancel={hideModal}
+        >
+          <CommitChanges changes={changes} />
+        </Modal>
+      </Descriptions.Item>
+    </Descriptions>
+  );
+}
diff --git a/ui/src/views/deployment/DeploymentStatusSteps.tsx b/ui/src/views/deployment/DeploymentStatusSteps.tsx
index b42289d8..f09d0fba 100644
--- a/ui/src/views/deployment/DeploymentStatusSteps.tsx
+++ b/ui/src/views/deployment/DeploymentStatusSteps.tsx
@@ -1,45 +1,54 @@
-import { Timeline, Typography } from "antd"
-import { ClockCircleOutlined } from "@ant-design/icons"
-import moment from "moment"
+import { Timeline, Typography } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
+import moment from 'moment';
 
-import { DeploymentStatus } from "../../models"
+import { DeploymentStatus } from '../../models';
 
-const { Text, Link } = Typography
+const { Text, Link } = Typography;
 
 export interface DeploymentStatusStepsProps {
-    statuses: DeploymentStatus[]
+  statuses: DeploymentStatus[];
 }
 
-export default function DeploymentStatusSteps(props: DeploymentStatusStepsProps): JSX.Element {
-    return  (
-        <Timeline>
-            {props.statuses.map((status, idx) => {
-                return (
-                    <Timeline.Item 
-                        key={idx}
-                        color={getStatusColor(status.status)}
-                    >
-                        <ClockCircleOutlined /> {moment(status.createdAt).format("YYYY-MM-DD HH:mm:ss")}<br/>
-                        <b>{status.description}</b>&nbsp;&nbsp;
-                        {(status.logUrl !== "")? 
-                            <Link href={status.logUrl} target="_blank">View Detail</Link> 
-                            : 
-                            <></>}<br />
-                        Updated <Text className="gitploy-code" code>{status.status}</Text> {moment(status.createdAt).fromNow()}
-                    </Timeline.Item>
-                )
-            })}
-        </Timeline>
-    )
+export default function DeploymentStatusSteps(
+  props: DeploymentStatusStepsProps
+): JSX.Element {
+  return (
+    <Timeline>
+      {props.statuses.map((status, idx) => {
+        return (
+          <Timeline.Item key={idx} color={getStatusColor(status.status)}>
+            <ClockCircleOutlined />{' '}
+            {moment(status.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+            <br />
+            <b>{status.description}</b>&nbsp;&nbsp;
+            {status.logUrl !== '' ? (
+              <Link href={status.logUrl} target="_blank">
+                View Detail
+              </Link>
+            ) : (
+              <></>
+            )}
+            <br />
+            Updated{' '}
+            <Text className="gitploy-code" code>
+              {status.status}
+            </Text>{' '}
+            {moment(status.createdAt).fromNow()}
+          </Timeline.Item>
+        );
+      })}
+    </Timeline>
+  );
 }
 
 const getStatusColor = (status: string) => {
-    switch (status) {
-        case "success":
-            return "green"
-        case "failure":
-            return "red"
-        default:
-            return "purple"
-    }
-}
\ No newline at end of file
+  switch (status) {
+    case 'success':
+      return 'green';
+    case 'failure':
+      return 'red';
+    default:
+      return 'purple';
+  }
+};
diff --git a/ui/src/views/deployment/HeaderBreadcrumb.tsx b/ui/src/views/deployment/HeaderBreadcrumb.tsx
index 5d1ec03c..e24e86d6 100644
--- a/ui/src/views/deployment/HeaderBreadcrumb.tsx
+++ b/ui/src/views/deployment/HeaderBreadcrumb.tsx
@@ -1,34 +1,27 @@
-import { Breadcrumb } from "antd"
+import { Breadcrumb } from 'antd';
 
 export interface HeaderBreadcrumbProps {
-    namespace: string
-    name: string
-    number: string
+  namespace: string;
+  name: string;
+  number: string;
 }
 
 export default function HeaderBreadcrumb({
-    namespace,
-    name,
-    number
+  namespace,
+  name,
+  number,
 }: HeaderBreadcrumbProps): JSX.Element {
-
-    return (
-        <Breadcrumb>
-            <Breadcrumb.Item>
-                <a href="/">Repositories</a>
-            </Breadcrumb.Item>
-            <Breadcrumb.Item>
-                {namespace}
-            </Breadcrumb.Item>
-            <Breadcrumb.Item>
-                <a href={`/${namespace}/${name}`}>{name}</a>
-            </Breadcrumb.Item>
-            <Breadcrumb.Item>
-                Deployments
-            </Breadcrumb.Item>
-            <Breadcrumb.Item>
-                {number}
-            </Breadcrumb.Item>
-        </Breadcrumb>
-    )
-}
\ No newline at end of file
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Item>
+        <a href="/">Repositories</a>
+      </Breadcrumb.Item>
+      <Breadcrumb.Item>{namespace}</Breadcrumb.Item>
+      <Breadcrumb.Item>
+        <a href={`/${namespace}/${name}`}>{name}</a>
+      </Breadcrumb.Item>
+      <Breadcrumb.Item>Deployments</Breadcrumb.Item>
+      <Breadcrumb.Item>{number}</Breadcrumb.Item>
+    </Breadcrumb>
+  );
+}
diff --git a/ui/src/views/deployment/ReviewButton.tsx b/ui/src/views/deployment/ReviewButton.tsx
index 97d470b2..018cbd0f 100644
--- a/ui/src/views/deployment/ReviewButton.tsx
+++ b/ui/src/views/deployment/ReviewButton.tsx
@@ -1,80 +1,84 @@
-import { useState } from "react"
-import { Button, Modal, Space, Input } from "antd"
+import { useState } from 'react';
+import { Button, Modal, Space, Input } from 'antd';
 
-import { Review, ReviewStatusEnum,  } from "../../models"
+import { Review, ReviewStatusEnum } from '../../models';
 
 export interface ReviewButtonProps {
-    review?: Review
-    onClickApprove(comment: string): void
-    onClickApproveAndDeploy(comment: string): void
-    onClickReject(comment: string): void
+  review?: Review;
+  onClickApprove(comment: string): void;
+  onClickApproveAndDeploy(comment: string): void;
+  onClickReject(comment: string): void;
 }
 
 export default function ReviewButton(props: ReviewButtonProps): JSX.Element {
-    const { review } = props
+  const { review } = props;
 
-    // If no review has been assigned, an empty value is returned.
-    if (!review) {
-        return <></>
-    }
+  // If no review has been assigned, an empty value is returned.
+  if (!review) {
+    return <></>;
+  }
 
-    // Stores the review comment state and passes it as a parameter when updating.
-    const [comment, setComment] = useState(review.comment)
+  // Stores the review comment state and passes it as a parameter when updating.
+  const [comment, setComment] = useState(review.comment);
 
-    const onChangeComment = (e: any) => {
-        setComment(e.target.value)
-    }
+  const onChangeComment = (e: any) => {
+    setComment(e.target.value);
+  };
 
-    const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
 
-    const showModal = () => {
-        setIsModalVisible(true);
-    }
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
 
-    const onClickCancel = () => {
-        setIsModalVisible(false)
-    }
-  
-    const onClickApprove = () => {
-        props.onClickApprove(comment)
-        setIsModalVisible(false)
-    }
+  const onClickCancel = () => {
+    setIsModalVisible(false);
+  };
 
-    const onClickApproveAndDeploy = () => {
-        props.onClickApproveAndDeploy(comment)
-        setIsModalVisible(false)
-    }
+  const onClickApprove = () => {
+    props.onClickApprove(comment);
+    setIsModalVisible(false);
+  };
 
-    const onClickReject = () => {
-        props.onClickReject(comment)
-        setIsModalVisible(false)
-    }
-  
-    return (
-        <>
-            {(review.status === ReviewStatusEnum.Pending)? 
-                <Button type="primary" onClick={showModal}>
-                    Review
-                </Button> 
-                :
-                <Button onClick={showModal}>
-                    Reviewed
-                </Button>}
-            <Modal 
-                title="Review" 
-                visible={isModalVisible} 
-                onCancel={onClickCancel}
-                footer={(
-                    <Space>
-                        <Button type="primary" danger onClick={onClickReject}>Reject</Button>
-                        <Button type="primary" onClick={onClickApproveAndDeploy}>Approve and Deploy</Button>
-                        <Button type="primary" onClick={onClickApprove}>Approve</Button>
-                    </Space>
-                )}
-            >
-                <Input.TextArea rows={3} onChange={onChangeComment} value={comment}/>
-            </Modal>
-        </>
-    )
+  const onClickApproveAndDeploy = () => {
+    props.onClickApproveAndDeploy(comment);
+    setIsModalVisible(false);
+  };
 
-}
\ No newline at end of file
+  const onClickReject = () => {
+    props.onClickReject(comment);
+    setIsModalVisible(false);
+  };
+
+  return (
+    <>
+      {review.status === ReviewStatusEnum.Pending ? (
+        <Button type="primary" onClick={showModal}>
+          Review
+        </Button>
+      ) : (
+        <Button onClick={showModal}>Reviewed</Button>
+      )}
+      <Modal
+        title="Review"
+        visible={isModalVisible}
+        onCancel={onClickCancel}
+        footer={
+          <Space>
+            <Button type="primary" danger onClick={onClickReject}>
+              Reject
+            </Button>
+            <Button type="primary" onClick={onClickApproveAndDeploy}>
+              Approve and Deploy
+            </Button>
+            <Button type="primary" onClick={onClickApprove}>
+              Approve
+            </Button>
+          </Space>
+        }
+      >
+        <Input.TextArea rows={3} onChange={onChangeComment} value={comment} />
+      </Modal>
+    </>
+  );
+}
diff --git a/ui/src/views/deployment/ReviewList.tsx b/ui/src/views/deployment/ReviewList.tsx
index 20f93a8f..85f0da5f 100644
--- a/ui/src/views/deployment/ReviewList.tsx
+++ b/ui/src/views/deployment/ReviewList.tsx
@@ -1,73 +1,75 @@
-import { Popover, Button, Descriptions, Typography } from "antd"
-import { CheckOutlined, CloseOutlined, CommentOutlined, ClockCircleOutlined } from "@ant-design/icons"
+import { Popover, Button, Descriptions, Typography } from 'antd';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  CommentOutlined,
+  ClockCircleOutlined,
+} from '@ant-design/icons';
 
-import { Review, ReviewStatusEnum } from "../../models"
-import UserAvatar from "../../components/UserAvatar"
+import { Review, ReviewStatusEnum } from '../../models';
+import UserAvatar from '../../components/UserAvatar';
 
-const { Text } = Typography
+const { Text } = Typography;
 
 export interface ReviewListProps {
-    reviews: Review[]
+  reviews: Review[];
 }
 
 export default function ReviewList({ reviews }: ReviewListProps): JSX.Element {
-    if (reviews.length === 0) {
-        return (
-            <Descriptions title="Reviewers" >
-                <Descriptions.Item>
-                    <Text type="secondary">No reviewers</Text>
-                </Descriptions.Item>
-            </Descriptions>
-        )
-    }
-
+  if (reviews.length === 0) {
     return (
-        <Descriptions title="Reviewers" size="small" column={1}>
-            {reviews.map((review, idx) => {
-                return (
-                    <Descriptions.Item key={idx}>
-                        <ReviewStatusIcon review={review} />&nbsp;
-                        <UserAvatar user={review.user} boldName={false} />&nbsp;
-                        <ReviewCommentIcon review={review}/>
-                    </Descriptions.Item>
-                )
-            })}
-        </Descriptions>
-    )
+      <Descriptions title="Reviewers">
+        <Descriptions.Item>
+          <Text type="secondary">No reviewers</Text>
+        </Descriptions.Item>
+      </Descriptions>
+    );
+  }
+
+  return (
+    <Descriptions title="Reviewers" size="small" column={1}>
+      {reviews.map((review, idx) => {
+        return (
+          <Descriptions.Item key={idx}>
+            <ReviewStatusIcon review={review} />
+            &nbsp;
+            <UserAvatar user={review.user} boldName={false} />
+            &nbsp;
+            <ReviewCommentIcon review={review} />
+          </Descriptions.Item>
+        );
+      })}
+    </Descriptions>
+  );
 }
 
-function ReviewStatusIcon(props: {review: Review}): JSX.Element {
-    switch (props.review.status) {
-        case ReviewStatusEnum.Pending:
-            return <ClockCircleOutlined />
-        case ReviewStatusEnum.Approved:
-            return <CheckOutlined style={{color: "green"}} />
-        case ReviewStatusEnum.Rejected:
-            return <CloseOutlined style={{color: "red"}} />
-        default:
-            return <ClockCircleOutlined />
-    }
+function ReviewStatusIcon(props: { review: Review }): JSX.Element {
+  switch (props.review.status) {
+    case ReviewStatusEnum.Pending:
+      return <ClockCircleOutlined />;
+    case ReviewStatusEnum.Approved:
+      return <CheckOutlined style={{ color: 'green' }} />;
+    case ReviewStatusEnum.Rejected:
+      return <CloseOutlined style={{ color: 'red' }} />;
+    default:
+      return <ClockCircleOutlined />;
+  }
 }
 
-function ReviewCommentIcon(props: {review: Review}): JSX.Element {
-    const comment = props.review.comment
+function ReviewCommentIcon(props: { review: Review }): JSX.Element {
+  const comment = props.review.comment;
 
-    return (
-        (comment)? 
-            <Popover
-                title="Comment"
-                trigger="click"
-                content={<div style={{whiteSpace: "pre"}}>{comment}</div>}
-            >
-                <Button 
-                    type="text" 
-                    style={{padding: 0}}
-                >
-                    <CommentOutlined />
-                </Button>
-            </Popover>
-            :
-            <></>
-    )
+  return comment ? (
+    <Popover
+      title="Comment"
+      trigger="click"
+      content={<div style={{ whiteSpace: 'pre' }}>{comment}</div>}
+    >
+      <Button type="text" style={{ padding: 0 }}>
+        <CommentOutlined />
+      </Button>
+    </Popover>
+  ) : (
+    <></>
+  );
 }
-
diff --git a/ui/src/views/deployment/index.tsx b/ui/src/views/deployment/index.tsx
index d4119a6d..558c8915 100644
--- a/ui/src/views/deployment/index.tsx
+++ b/ui/src/views/deployment/index.tsx
@@ -1,258 +1,260 @@
-import { useEffect } from "react"
-import { shallowEqual } from 'react-redux'
-import { useParams } from "react-router-dom"
-import { Helmet } from "react-helmet"
-import { Button, PageHeader, Result, Row, Col } from "antd"
+import { useEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+import { Button, PageHeader, Result, Row, Col } from 'antd';
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { 
-    deploymentSlice as slice, 
-    fetchDeployment, 
-    fetchDeploymentChanges,
-    deployToSCM,
-    fetchReviews,
-    fetchUserReview,
-    approve,
-    reject,
-    handleDeploymentStatusEvent
-} from "../../redux/deployment"
-import { 
-    Deployment, 
-    DeploymentStatusEnum, 
-    Review,
-    ReviewStatusEnum,
-    RequestStatus
-} from "../../models"
-import { 
-    subscribeDeploymentStatusEvents,
-    subscribeReviewEvents
-} from "../../apis"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import {
+  deploymentSlice as slice,
+  fetchDeployment,
+  fetchDeploymentChanges,
+  deployToSCM,
+  fetchReviews,
+  fetchUserReview,
+  approve,
+  reject,
+  handleDeploymentStatusEvent,
+} from '../../redux/deployment';
+import {
+  Deployment,
+  DeploymentStatusEnum,
+  Review,
+  ReviewStatusEnum,
+  RequestStatus,
+} from '../../models';
+import {
+  subscribeDeploymentStatusEvents,
+  subscribeReviewEvents,
+} from '../../apis';
 
-import Main from "../main"
-import HeaderBreadcrumb, { HeaderBreadcrumbProps } from "./HeaderBreadcrumb"
-import ReviewButton, { ReviewButtonProps } from "./ReviewButton"
-import ReviewerList, { ReviewListProps } from "./ReviewList"
-import DeploymentDescriptor, { DeploymentDescriptorProps } from "./DeploymentDescriptor"
-import DeploymentStatusSteps from "./DeploymentStatusSteps"
-import Spin from "../../components/Spin"
+import Main from '../main';
+import HeaderBreadcrumb, { HeaderBreadcrumbProps } from './HeaderBreadcrumb';
+import ReviewButton, { ReviewButtonProps } from './ReviewButton';
+import ReviewerList, { ReviewListProps } from './ReviewList';
+import DeploymentDescriptor, {
+  DeploymentDescriptorProps,
+} from './DeploymentDescriptor';
+import DeploymentStatusSteps from './DeploymentStatusSteps';
+import Spin from '../../components/Spin';
 
 // It makes the view by binding the state to the deployment page.
 export default (): JSX.Element => {
-    const { namespace, name, number } = useParams<{
-        namespace: string,
-        name: string,
-        number: string,
-    }>()
+  const { namespace, name, number } = useParams<{
+    namespace: string;
+    name: string;
+    number: string;
+  }>();
 
-    const { 
-        display,
-        deployment, 
-        changes,
-        deploying,
-        reviews,
-        userReview: review,
-    } = useAppSelector(state => state.deployment, shallowEqual )
-    const dispatch = useAppDispatch()
+  const {
+    display,
+    deployment,
+    changes,
+    deploying,
+    reviews,
+    userReview: review,
+  } = useAppSelector((state) => state.deployment, shallowEqual);
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(slice.actions.init({namespace, name, number: parseInt(number, 10)}))
-            await dispatch(fetchDeployment())
-            await dispatch(fetchReviews())
-            await dispatch(fetchUserReview())
-            await dispatch(slice.actions.setDisplay(true))
-            await dispatch(fetchDeploymentChanges())
-        }
-        f()
+  useEffect(() => {
+    const f = async () => {
+      await dispatch(
+        slice.actions.init({ namespace, name, number: parseInt(number, 10) })
+      );
+      await dispatch(fetchDeployment());
+      await dispatch(fetchReviews());
+      await dispatch(fetchUserReview());
+      await dispatch(slice.actions.setDisplay(true));
+      await dispatch(fetchDeploymentChanges());
+    };
+    f();
 
-        const deploymentStatusEvent = subscribeDeploymentStatusEvents((deploymentStatus) => {
-            dispatch(handleDeploymentStatusEvent(deploymentStatus))
-        })
+    const deploymentStatusEvent = subscribeDeploymentStatusEvents(
+      (deploymentStatus) => {
+        dispatch(handleDeploymentStatusEvent(deploymentStatus));
+      }
+    );
 
-        const reviewEvent = subscribeReviewEvents((review) => {
-            dispatch(slice.actions.handleReviewEvent(review))
-        })
+    const reviewEvent = subscribeReviewEvents((review) => {
+      dispatch(slice.actions.handleReviewEvent(review));
+    });
 
-        return () => {
-            deploymentStatusEvent.close()
-            reviewEvent.close()
-        }
-        // eslint-disable-next-line 
-    }, [dispatch])
+    return () => {
+      deploymentStatusEvent.close();
+      reviewEvent.close();
+    };
+    // eslint-disable-next-line
+  }, [dispatch]);
 
-    const onClickApprove = (comment: string) => {
-        dispatch(approve(comment))
-    }
+  const onClickApprove = (comment: string) => {
+    dispatch(approve(comment));
+  };
 
-    const onClickApproveAndDeploy = (comment: string) => {
-        const f = async () => {
-            await dispatch(approve(comment))
-            if (deployment?.status === DeploymentStatusEnum.Waiting) {
-                await dispatch(deployToSCM())
-            }
-        }
-        f()
-    }
+  const onClickApproveAndDeploy = (comment: string) => {
+    const f = async () => {
+      await dispatch(approve(comment));
+      if (deployment?.status === DeploymentStatusEnum.Waiting) {
+        await dispatch(deployToSCM());
+      }
+    };
+    f();
+  };
 
-    const onClickReject = (comment: string) => {
-        dispatch(reject(comment))
-    }
+  const onClickReject = (comment: string) => {
+    dispatch(reject(comment));
+  };
 
-    const onClickDeploy = () => {
-        dispatch(deployToSCM())
-    }
-
-    if (!display) {
-        return (
-            <Main>
-                <div style={{textAlign: "center", marginTop: "100px"}}>
-                    <Spin />
-                </div>
-            </Main>
-        )
-    }
+  const onClickDeploy = () => {
+    dispatch(deployToSCM());
+  };
 
-    if (!deployment) {
-        return (
-            <Main>
-                <Result
-                    status="warning"
-                    title="The deployment is not found."
-                />
-            </Main>
-        )
-    }
+  if (!display) {
+    return (
+      <Main>
+        <div style={{ textAlign: 'center', marginTop: '100px' }}>
+          <Spin />
+        </div>
+      </Main>
+    );
+  }
 
+  if (!deployment) {
     return (
-        <Main>
-            <DeploymentPage 
-                namespace={namespace}
-                name={name}
-                number={number}
-                deploying={deploying}
-                deployment={deployment}
-                changes={changes}
-                reviews={reviews}
-                review={review}
-                onClickApprove={onClickApprove}
-                onClickApproveAndDeploy={onClickApproveAndDeploy}
-                onClickReject={onClickReject}
-                onClickDeploy={onClickDeploy}
-            />
-        </Main>
-    )
-}
+      <Main>
+        <Result status="warning" title="The deployment is not found." />
+      </Main>
+    );
+  }
+
+  return (
+    <Main>
+      <DeploymentPage
+        namespace={namespace}
+        name={name}
+        number={number}
+        deploying={deploying}
+        deployment={deployment}
+        changes={changes}
+        reviews={reviews}
+        review={review}
+        onClickApprove={onClickApprove}
+        onClickApproveAndDeploy={onClickApproveAndDeploy}
+        onClickReject={onClickReject}
+        onClickDeploy={onClickDeploy}
+      />
+    </Main>
+  );
+};
 
-interface DeploymentPageProps extends HeaderBreadcrumbProps, ReviewButtonProps, ReviewListProps, DeploymentDescriptorProps {
-    deploying: RequestStatus
-    onClickDeploy(): void
+interface DeploymentPageProps
+  extends HeaderBreadcrumbProps,
+    ReviewButtonProps,
+    ReviewListProps,
+    DeploymentDescriptorProps {
+  deploying: RequestStatus;
+  onClickDeploy(): void;
 }
 
 function DeploymentPage({
-    namespace,
-    name,
-    number,
-    deploying,
-    deployment,
-    changes,
-    reviews,
-    review,
-    onClickApprove,
-    onClickApproveAndDeploy,
-    onClickReject,
-    onClickDeploy,
+  namespace,
+  name,
+  number,
+  deploying,
+  deployment,
+  changes,
+  reviews,
+  review,
+  onClickApprove,
+  onClickApproveAndDeploy,
+  onClickReject,
+  onClickDeploy,
 }: DeploymentPageProps): JSX.Element {
+  const onBack = () => {
+    window.location.href = `/${namespace}/${name}`;
+  };
 
-    const onBack = () => {
-        window.location.href = `/${namespace}/${name}`
-    }
-
-    return (
-        <>
-            <Helmet>
-                <title>Deployment #{number} - {namespace}/{name}</title>
-            </Helmet>
-            <div>
-                <PageHeader
-                    title={`Deployment #${number}`}
-                    breadcrumb={
-                        <HeaderBreadcrumb 
-                            namespace={namespace} 
-                            name={name} 
-                            number={number} 
-                        />
-                    }
-                    extra={
-                        <ReviewButton 
-                            review={review} 
-                            onClickApprove={onClickApprove}
-                            onClickApproveAndDeploy={onClickApproveAndDeploy}
-                            onClickReject={onClickReject}
-                        />
-                    }
-                    onBack={onBack} 
-                />
-            </div>
-            <Row>
-                <Col  span={23} offset={1} lg={{span: 13, offset: 1}}>
-                    <DeploymentDescriptor 
-                        changes={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={1} span={22} md={{offset: 2}}>
-                    {deployment.statuses?
-                        <DeploymentStatusSteps statuses={deployment.statuses}/>
-                        :
-                        <></>}
-                </Col>
-            </Row>
-            <Row style={{marginTop: 20}}>
-                <Col offset={16}>
-                    {isDeployable(deployment, reviews)?
-                        <Button 
-                            loading={RequestStatus.Pending === deploying} 
-                            type="primary" 
-                            onClick={onClickDeploy}
-                        >
-                            Deploy
-                        </Button>
-                        :
-                        <Button 
-                            type="primary" 
-                            disabled
-                        >
-                          Deploy
-                        </Button>}
-                </Col>
-            </Row>
-        </>
-    )
+  return (
+    <>
+      <Helmet>
+        <title>
+          Deployment #{number} - {namespace}/{name}
+        </title>
+      </Helmet>
+      <div>
+        <PageHeader
+          title={`Deployment #${number}`}
+          breadcrumb={
+            <HeaderBreadcrumb
+              namespace={namespace}
+              name={name}
+              number={number}
+            />
+          }
+          extra={
+            <ReviewButton
+              review={review}
+              onClickApprove={onClickApprove}
+              onClickApproveAndDeploy={onClickApproveAndDeploy}
+              onClickReject={onClickReject}
+            />
+          }
+          onBack={onBack}
+        />
+      </div>
+      <Row>
+        <Col span={23} offset={1} lg={{ span: 13, offset: 1 }}>
+          <DeploymentDescriptor changes={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={1} span={22} md={{ offset: 2 }}>
+          {deployment.statuses ? (
+            <DeploymentStatusSteps statuses={deployment.statuses} />
+          ) : (
+            <></>
+          )}
+        </Col>
+      </Row>
+      <Row style={{ marginTop: 20 }}>
+        <Col offset={16}>
+          {isDeployable(deployment, reviews) ? (
+            <Button
+              loading={RequestStatus.Pending === deploying}
+              type="primary"
+              onClick={onClickDeploy}
+            >
+              Deploy
+            </Button>
+          ) : (
+            <Button type="primary" disabled>
+              Deploy
+            </Button>
+          )}
+        </Col>
+      </Row>
+    </>
+  );
 }
 
 function isDeployable(deployment: Deployment, reviews: Review[]): boolean {
-    if (deployment.status !== DeploymentStatusEnum.Waiting) {
-        return false
-    }
+  if (deployment.status !== DeploymentStatusEnum.Waiting) {
+    return false;
+  }
 
-    for (let i = 0; i < reviews.length; i++) {
-        if (reviews[i].status === ReviewStatusEnum.Rejected) {
-            return false
-        }
+  for (let i = 0; i < reviews.length; i++) {
+    if (reviews[i].status === ReviewStatusEnum.Rejected) {
+      return false;
     }
+  }
 
-    for (let i = 0; i < reviews.length; i++) {
-        if (reviews[i].status === ReviewStatusEnum.Approved) {
-            return true
-        }
+  for (let i = 0; i < reviews.length; i++) {
+    if (reviews[i].status === ReviewStatusEnum.Approved) {
+      return true;
     }
+  }
 
-    return false
+  return false;
 }
diff --git a/ui/src/views/home/RepoList.tsx b/ui/src/views/home/RepoList.tsx
index 49aaa34a..8a82e047 100644
--- a/ui/src/views/home/RepoList.tsx
+++ b/ui/src/views/home/RepoList.tsx
@@ -1,50 +1,58 @@
-import { List, Typography } from 'antd'
-import moment from "moment"
+import { List, Typography } from 'antd';
+import moment from 'moment';
 
-import { Repo, Deployment } from '../../models'
-import UserAvatar from '../../components/UserAvatar'
-import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
-import DeploymentRefCode from "../../components/DeploymentRefCode"
+import { Repo, Deployment } from '../../models';
+import UserAvatar from '../../components/UserAvatar';
+import DeploymentStatusBadge from '../../components/DeploymentStatusBadge';
+import DeploymentRefCode from '../../components/DeploymentRefCode';
 
-const { Text, Paragraph } = Typography
+const { Text, Paragraph } = Typography;
 
 export interface RepoListProps {
-    repos: Repo[]
+  repos: Repo[];
 }
 
-export default function RepoList({repos}: RepoListProps): JSX.Element {
-    return (
-        <List
-            dataSource={repos}
-            renderItem={repo => { 
-                // deployments is undeinfed if there is no deployments of the repository.
-                const deployment = (repo.deployments)? repo.deployments[0] : null
-
-                return (
-                    <List.Item>
-                      <List.Item.Meta
-                            title={<a href={`/${repo.namespace}/${repo.name}`}>{repo.namespace} / {repo.name}</a>}
-                            description={<Description deployment={deployment}/>}
-                      />
-                    </List.Item>
-                )
-            }}
-        />
-    )
+export default function RepoList({ repos }: RepoListProps): JSX.Element {
+  return (
+    <List
+      dataSource={repos}
+      renderItem={(repo) => {
+        // deployments is undeinfed if there is no deployments of the repository.
+        const deployment = repo.deployments ? repo.deployments[0] : null;
+
+        return (
+          <List.Item>
+            <List.Item.Meta
+              title={
+                <a href={`/${repo.namespace}/${repo.name}`}>
+                  {repo.namespace} / {repo.name}
+                </a>
+              }
+              description={<Description deployment={deployment} />}
+            />
+          </List.Item>
+        );
+      }}
+    />
+  );
 }
 
 interface DescriptionProps {
-    deployment: Deployment | null
+  deployment: Deployment | null;
 }
 
 function Description(props: DescriptionProps): JSX.Element {
-    if (!props.deployment) {
-        return <></>
-    }
-
-    return (
-        <Paragraph style={{marginTop: "10px", marginBottom: 0}}>
-            <UserAvatar user={props.deployment.deployer} /> deployed <DeploymentRefCode deployment={props.deployment}/> to the <Text strong>{props.deployment.env}</Text> environment {moment(props.deployment.createdAt).fromNow()} <DeploymentStatusBadge deployment={props.deployment}/>
-        </Paragraph>
-    )
-}
\ No newline at end of file
+  if (!props.deployment) {
+    return <></>;
+  }
+
+  return (
+    <Paragraph style={{ marginTop: '10px', marginBottom: 0 }}>
+      <UserAvatar user={props.deployment.deployer} /> deployed{' '}
+      <DeploymentRefCode deployment={props.deployment} /> to the{' '}
+      <Text strong>{props.deployment.env}</Text> environment{' '}
+      {moment(props.deployment.createdAt).fromNow()}{' '}
+      <DeploymentStatusBadge deployment={props.deployment} />
+    </Paragraph>
+  );
+}
diff --git a/ui/src/views/home/index.tsx b/ui/src/views/home/index.tsx
index 0dc66d8f..f566beb9 100644
--- a/ui/src/views/home/index.tsx
+++ b/ui/src/views/home/index.tsx
@@ -1,132 +1,140 @@
-import { useEffect } from 'react'
-import { shallowEqual } from 'react-redux'
-import { Helmet } from "react-helmet"
-import { Input, Breadcrumb, Button } from 'antd'
-import { RedoOutlined } from "@ant-design/icons"
+import { useEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { Helmet } from 'react-helmet';
+import { Input, Breadcrumb, Button } from 'antd';
+import { RedoOutlined } from '@ant-design/icons';
 
-import { useAppSelector, useAppDispatch } from '../../redux/hooks'
-import { homeSlice, listRepos, perPage, sync } from '../../redux/home'
-import { RequestStatus } from '../../models'
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import { homeSlice, listRepos, perPage, sync } from '../../redux/home';
+import { RequestStatus } from '../../models';
 
-import Main from '../main'
-import RepoList, { RepoListProps } from './RepoList'
-import Pagination from '../../components/Pagination'
-import Spin from '../../components/Spin'
+import Main from '../main';
+import RepoList, { RepoListProps } from './RepoList';
+import Pagination from '../../components/Pagination';
+import Spin from '../../components/Spin';
 
-const { Search } = Input
-const { actions } = homeSlice
+const { Search } = Input;
+const { actions } = homeSlice;
 
 // Binding the state to the deployment page.
-export default ():JSX.Element => {
-    const { loading, repos, page, syncing } = useAppSelector(state => state.home, shallowEqual)
-    const dispatch = useAppDispatch()
+export default (): JSX.Element => {
+  const { loading, repos, page, syncing } = useAppSelector(
+    (state) => state.home,
+    shallowEqual
+  );
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        dispatch(listRepos())
-    }, [dispatch])
+  useEffect(() => {
+    dispatch(listRepos());
+  }, [dispatch]);
 
-    const search = (q: string) => {
-        dispatch(actions.setQ(q))
-        dispatch(actions.setFirstPage())
-        dispatch(listRepos())
-    }
+  const search = (q: string) => {
+    dispatch(actions.setQ(q));
+    dispatch(actions.setFirstPage());
+    dispatch(listRepos());
+  };
 
-    const onClickPrev = () => {
-        dispatch(actions.decreasePage())
-        dispatch(listRepos())
-    }
+  const onClickPrev = () => {
+    dispatch(actions.decreasePage());
+    dispatch(listRepos());
+  };
 
-    const onClickNext = () => {
-        dispatch(actions.increasePage())
-        dispatch(listRepos())
-    }
+  const onClickNext = () => {
+    dispatch(actions.increasePage());
+    dispatch(listRepos());
+  };
 
-    const onClickSync = () => {
-        const f = async () => {
-            await dispatch(sync())
-            await dispatch(actions.setFirstPage())
-            await dispatch(listRepos())
-        }
-        f()
-    }
+  const onClickSync = () => {
+    const f = async () => {
+      await dispatch(sync());
+      await dispatch(actions.setFirstPage());
+      await dispatch(listRepos());
+    };
+    f();
+  };
 
-    return (
-        <Main>
-            <Home
-                loading={loading}
-                syncing={syncing}
-                page={page}
-                repos={repos}
-                search={search}
-                onClickSync={onClickSync}
-                onClickPrev={onClickPrev}
-                onClickNext={onClickNext}
-            />
-        </Main>
-    )
-}
+  return (
+    <Main>
+      <Home
+        loading={loading}
+        syncing={syncing}
+        page={page}
+        repos={repos}
+        search={search}
+        onClickSync={onClickSync}
+        onClickPrev={onClickPrev}
+        onClickNext={onClickNext}
+      />
+    </Main>
+  );
+};
 
 interface HomeProps extends RepoListProps {
-    loading: boolean
-    syncing: RequestStatus
-    page: number
-    search(q: string): void
-    onClickSync(): void
-    onClickPrev(): void
-    onClickNext(): void
+  loading: boolean;
+  syncing: RequestStatus;
+  page: number;
+  search(q: string): void;
+  onClickSync(): void;
+  onClickPrev(): void;
+  onClickNext(): void;
 }
 
 function Home({
-    loading,
-    page,
-    syncing,
-    repos,
-    search,
-    onClickSync,
-    onClickPrev,
-    onClickNext,
+  loading,
+  page,
+  syncing,
+  repos,
+  search,
+  onClickSync,
+  onClickPrev,
+  onClickNext,
 }: HomeProps): JSX.Element {
-
-    return (
-        <>
-            <Helmet>
-                <title>Home</title>
-            </Helmet>
-            <div >
-                <Breadcrumb>
-                    <Breadcrumb.Item>
-                        <a href="/">Repositories</a>
-                    </Breadcrumb.Item>
-                </Breadcrumb>
-            </div>
-            <div style={{textAlign: "right"}}>
-                <Button
-                    loading={syncing === RequestStatus.Pending}
-                    icon={<RedoOutlined />}
-                    onClick={onClickSync}
-                >
-                    Sync
-                </Button>
-            </div>
-            <div style={{"marginTop": "20px"}}>
-                <Search placeholder="Search repository ..." onSearch={search} size="large" enterButton />
-            </div>
-            <div style={{"marginTop": "20px"}}>
-                {(loading)? 
-                    <div style={{textAlign: "center"}}>
-                        <Spin />
-                    </div>
-                    :
-                    <RepoList repos={repos} />}
-            </div>
-            <div style={{marginTop: "20px", textAlign: "center"}}>
-                <Pagination 
-                    disabledPrev={page <= 1} 
-                    disabledNext={repos.length < perPage} 
-                    onClickPrev={onClickPrev} 
-                    onClickNext={onClickNext} 
-                />
-            </div>
-        </>
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      <Helmet>
+        <title>Home</title>
+      </Helmet>
+      <div>
+        <Breadcrumb>
+          <Breadcrumb.Item>
+            <a href="/">Repositories</a>
+          </Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+      <div style={{ textAlign: 'right' }}>
+        <Button
+          loading={syncing === RequestStatus.Pending}
+          icon={<RedoOutlined />}
+          onClick={onClickSync}
+        >
+          Sync
+        </Button>
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        <Search
+          placeholder="Search repository ..."
+          onSearch={search}
+          size="large"
+          enterButton
+        />
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        {loading ? (
+          <div style={{ textAlign: 'center' }}>
+            <Spin />
+          </div>
+        ) : (
+          <RepoList repos={repos} />
+        )}
+      </div>
+      <div style={{ marginTop: '20px', textAlign: 'center' }}>
+        <Pagination
+          disabledPrev={page <= 1}
+          disabledNext={repos.length < perPage}
+          onClickPrev={onClickPrev}
+          onClickNext={onClickNext}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/ui/src/views/main/Content.tsx b/ui/src/views/main/Content.tsx
index 1e2378a8..238e700e 100644
--- a/ui/src/views/main/Content.tsx
+++ b/ui/src/views/main/Content.tsx
@@ -1,63 +1,79 @@
-import { Row, Col, Result, Button} from "antd"
+import { Row, Col, Result, Button } from 'antd';
 
-import React from "react"
+import React from 'react';
 
 export interface ContentProps {
-    available: boolean 
-    authorized: boolean
-    expired: boolean
-    onClickRetry(): void
+  available: boolean;
+  authorized: boolean;
+  expired: boolean;
+  onClickRetry(): void;
 }
 
 export default function Content({
-    available,
-    authorized,
-    expired,
-    children,
-    onClickRetry,
+  available,
+  authorized,
+  expired,
+  children,
+  onClickRetry,
 }: React.PropsWithChildren<ContentProps>): JSX.Element {
+  let content: React.ReactNode;
+  if (!available) {
+    content = (
+      <Result
+        style={{ paddingTop: '120px' }}
+        status="error"
+        title="Server Internal Error"
+        subTitle="Sorry, something went wrong. Contact administrator."
+        extra={[
+          <Button key="console" type="primary" onClick={onClickRetry}>
+            Retry
+          </Button>,
+        ]}
+      />
+    );
+  } else if (!authorized) {
+    content = (
+      <Result
+        style={{ paddingTop: '120px' }}
+        status="warning"
+        title="Unauthorized Error"
+        subTitle="Sorry, you are not authorized."
+        extra={[
+          <Button key="console" type="primary" href="/">
+            Sign in
+          </Button>,
+        ]}
+      />
+    );
+  } else if (expired) {
+    content = (
+      <Result
+        style={{ paddingTop: '120px' }}
+        status="warning"
+        title="License Expired"
+        subTitle="Sorry, the license is expired."
+        extra={[
+          <Button key="console" type="primary" onClick={onClickRetry}>
+            Retry
+          </Button>,
+        ]}
+      />
+    );
+  } else {
+    content = children;
+  }
 
-
-    let content: React.ReactNode
-    if (!available) {
-        content = <Result
-            style={{paddingTop: '120px'}}
-            status="error"
-            title="Server Internal Error"
-            subTitle="Sorry, something went wrong. Contact administrator."
-            extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
-        />
-    } else if (!authorized) {
-        content = <Result
-            style={{paddingTop: '120px'}}
-            status="warning"
-            title="Unauthorized Error"
-            subTitle="Sorry, you are not authorized."
-            extra={[<Button key="console" type="primary" href="/">Sign in</Button>]}
-        />
-    } else if (expired) {
-        content = <Result
-            style={{paddingTop: '120px'}}
-            status="warning"
-            title="License Expired"
-            subTitle="Sorry, the license is expired."
-            extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
-        />
-    } else {
-        content = children
-    }
-
-    return (
-        <Row>
-            <Col 
-                span={22}
-                offset={1}
-                md={{span: 14, offset: 5}} 
-                lg={{span: 12, offset: 6}} 
-                xxl={{span: 10, offset: 7}}
-            >
-                {content}
-            </Col>
+  return (
+    <Row>
+      <Col
+        span={22}
+        offset={1}
+        md={{ span: 14, offset: 5 }}
+        lg={{ span: 12, offset: 6 }}
+        xxl={{ span: 10, offset: 7 }}
+      >
+        {content}
+      </Col>
     </Row>
-    )
-}
\ No newline at end of file
+  );
+}
diff --git a/ui/src/views/main/Header.tsx b/ui/src/views/main/Header.tsx
index a54cff0b..19de2490 100644
--- a/ui/src/views/main/Header.tsx
+++ b/ui/src/views/main/Header.tsx
@@ -1,94 +1,109 @@
-import { useState } from "react"
-import { Menu, Row, Col, Button, Drawer, Avatar, Dropdown, Badge, Space} from "antd"
-import { SettingFilled } from "@ant-design/icons"
+import { useState } from 'react';
+import {
+  Menu,
+  Row,
+  Col,
+  Button,
+  Drawer,
+  Avatar,
+  Dropdown,
+  Badge,
+  Space,
+} from 'antd';
+import { SettingFilled } from '@ant-design/icons';
 
-import { Deployment, User, Review } from "../../models"
-import RecentActivities from "../../components/RecentActivities"
+import { Deployment, User, Review } from '../../models';
+import RecentActivities from '../../components/RecentActivities';
 
-import Logo from "../../logo.svg"
+import Logo from '../../logo.svg';
 
 export interface HeaderProps {
-    user: User | undefined
-    deployments: Deployment[]
-    reviews: Review[]
+  user: User | undefined;
+  deployments: Deployment[];
+  reviews: Review[];
 }
 
 export default function Header({
-    user,
-    deployments,
-    reviews,
+  user,
+  deployments,
+  reviews,
 }: HeaderProps): JSX.Element {
-    const activitiesCount = deployments.length + reviews.length
+  const activitiesCount = deployments.length + reviews.length;
 
-    const [ isRecentActivitiesVisible, setRecentActivitiesVisible ] = useState(false)
+  const [isRecentActivitiesVisible, setRecentActivitiesVisible] =
+    useState(false);
 
-    return (
-        <Row>
-            <Col span="16">
-                <Menu theme="dark" mode="horizontal" >
-                    <Menu.Item key={0}>
-                        <a href="/"><img src={Logo} style={{width: 62}}/></a>
-                    </Menu.Item>
-                    <Menu.Item key={1}>
-                        <a href="/">Home</a>
-                    </Menu.Item>
-                    <Menu.Item key={2}>
-                        <a href="/activities">Activities</a>
-                    </Menu.Item>
-                    {(user?.admin)? 
-                        <Menu.Item key={3}>
-                            <a href="/members">Members</a>
-                        </Menu.Item>
-                        : 
-                        <></>}
+  return (
+    <Row>
+      <Col span="16">
+        <Menu theme="dark" mode="horizontal">
+          <Menu.Item key={0}>
+            <a href="/">
+              <img src={Logo} style={{ width: 62 }} />
+            </a>
+          </Menu.Item>
+          <Menu.Item key={1}>
+            <a href="/">Home</a>
+          </Menu.Item>
+          <Menu.Item key={2}>
+            <a href="/activities">Activities</a>
+          </Menu.Item>
+          {user?.admin ? (
+            <Menu.Item key={3}>
+              <a href="/members">Members</a>
+            </Menu.Item>
+          ) : (
+            <></>
+          )}
+        </Menu>
+      </Col>
+      <Col span="8" style={{ textAlign: 'right' }}>
+        <Space>
+          <Badge size="small" count={activitiesCount}>
+            <Button
+              type="primary"
+              shape="circle"
+              icon={<SettingFilled spin={activitiesCount !== 0} />}
+              onClick={() => setRecentActivitiesVisible(true)}
+            />
+          </Badge>
+          <Drawer
+            title="Recent Activities"
+            placement="right"
+            width={400}
+            visible={isRecentActivitiesVisible}
+            onClose={() => setRecentActivitiesVisible(false)}
+          >
+            <RecentActivities deployments={deployments} reviews={reviews} />
+          </Drawer>
+          {user ? (
+            <Dropdown
+              overlay={
+                <Menu>
+                  <Menu.Item key="0">
+                    <a href="/settings">Settings</a>
+                  </Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item key="1">
+                    <a href="https://www.gitploy.io/docs/" target="_blank">
+                      Read Docs
+                    </a>
+                  </Menu.Item>
+                  <Menu.Item key="2">
+                    <a href="/signout">Sign out</a>
+                  </Menu.Item>
                 </Menu>
-            </Col>
-            <Col span="8" style={{textAlign: "right"}}>
-                <Space>
-                <Badge 
-                    size="small" 
-                    count={activitiesCount}
-                >
-                    <Button 
-                        type="primary" 
-                        shape="circle" 
-                        icon={<SettingFilled spin={activitiesCount !== 0 }/>}
-                        onClick={() => setRecentActivitiesVisible(true)}
-                    />
-                </Badge>
-                <Drawer title="Recent Activities"
-                    placement="right"
-                    width={400}
-                    visible={isRecentActivitiesVisible}
-                    onClose={() => setRecentActivitiesVisible(false)}
-                >
-                    <RecentActivities 
-                        deployments={deployments}
-                        reviews={reviews}
-                    />
-                </Drawer>
-                {(user) ? 
-                    <Dropdown 
-                        overlay={(
-                            <Menu>
-                                <Menu.Item key="0">
-                                    <a href="/settings">Settings</a>
-                                </Menu.Item>
-                                <Menu.Divider />
-                                <Menu.Item key="1">
-                                    <a href="https://www.gitploy.io/docs/" target="_blank">Read Docs</a>
-                                </Menu.Item>
-                                <Menu.Item key="2">
-                                    <a href="/signout">Sign out</a>
-                                </Menu.Item>
-                            </Menu>
-                        )}>
-                        <Avatar  src={user?.avatar}/>
-                    </ Dropdown>
-                    :
-                    <a href="/" style={{color: "white"}}>Sign in</a>}
-                </Space>
-            </Col>
-        </Row>
-    )
-}
\ No newline at end of file
+              }
+            >
+              <Avatar src={user?.avatar} />
+            </Dropdown>
+          ) : (
+            <a href="/" style={{ color: 'white' }}>
+              Sign in
+            </a>
+          )}
+        </Space>
+      </Col>
+    </Row>
+  );
+}
diff --git a/ui/src/views/main/LicenseWarningFooter.tsx b/ui/src/views/main/LicenseWarningFooter.tsx
index 2eb5944d..bfd1f75c 100644
--- a/ui/src/views/main/LicenseWarningFooter.tsx
+++ b/ui/src/views/main/LicenseWarningFooter.tsx
@@ -1,50 +1,51 @@
-import moment from "moment"
+import moment from 'moment';
 
-import { License } from "../../models"
+import { License } from '../../models';
 
 export interface LicenseWarningFooterProps {
-    license?: License
+  license?: License;
 }
 
 export default function LicenseWarningFooter({
-    license
+  license,
 }: LicenseWarningFooterProps): JSX.Element {
-    if (!license) {
-        return <></>
-    }
+  if (!license) {
+    return <></>;
+  }
+
+  let expired = false;
+  let message = '';
 
-    let expired = false
-    let message = ""
-    
-    if (license.kind === "trial") {
-        expired = license.memberCount >= license.memberLimit
-        message = "There is no more seats. You need to purchase the license."
-    } else if (license.kind === "standard") {
-        if (license.memberCount >= license.memberLimit) {
-            expired = true
-            message = "There is no more seats. You need to purchase more seats."
-        } else if (moment(license.expiredAt).isBefore(new Date())) {
-            expired = true
-            message = "The license is expired. You need to renew the license."
-        }
+  if (license.kind === 'trial') {
+    expired = license.memberCount >= license.memberLimit;
+    message = 'There is no more seats. You need to purchase the license.';
+  } else if (license.kind === 'standard') {
+    if (license.memberCount >= license.memberLimit) {
+      expired = true;
+      message = 'There is no more seats. You need to purchase more seats.';
+    } else if (moment(license.expiredAt).isBefore(new Date())) {
+      expired = true;
+      message = 'The license is expired. You need to renew the license.';
     }
+  }
 
-    return (
-        <>
-            {(expired)? 
-                <p 
-                    style={{
-                        textAlign: "center",
-                        backgroundColor: "#fff1f0",
-                        color: "#ff7875",
-                        fontSize: "17px",
-                        padding: "20px",
-                    }}>
-                    {message}
-                </p>
-                : 
-                <></>
-            }
-        </>
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      {expired ? (
+        <p
+          style={{
+            textAlign: 'center',
+            backgroundColor: '#fff1f0',
+            color: '#ff7875',
+            fontSize: '17px',
+            padding: '20px',
+          }}
+        >
+          {message}
+        </p>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}
diff --git a/ui/src/views/main/index.tsx b/ui/src/views/main/index.tsx
index e6af2ae4..c8b0654a 100644
--- a/ui/src/views/main/index.tsx
+++ b/ui/src/views/main/index.tsx
@@ -1,133 +1,127 @@
-import { useEffect } from "react"
-import { shallowEqual } from "react-redux"
-import { Layout } from "antd"
-import { Helmet } from "react-helmet"
-import moment from "moment"
+import { useEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { Layout } from 'antd';
+import { Helmet } from 'react-helmet';
+import moment from 'moment';
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { 
-    subscribeDeploymentStatusEvents,
-    subscribeReviewEvents 
-} from "../../apis"
-import { 
-    init, 
-    searchDeployments, 
-    searchReviews, 
-    fetchLicense, 
-    notifyDeploymentStatusEvent,
-    notifyReviewmentEvent, 
-    handleDeploymentStatusEvent,
-    mainSlice as slice 
-} from "../../redux/main"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import {
+  subscribeDeploymentStatusEvents,
+  subscribeReviewEvents,
+} from '../../apis';
+import {
+  init,
+  searchDeployments,
+  searchReviews,
+  fetchLicense,
+  notifyDeploymentStatusEvent,
+  notifyReviewmentEvent,
+  handleDeploymentStatusEvent,
+  mainSlice as slice,
+} from '../../redux/main';
 
-import MainHeader, { HeaderProps } from "./Header"
-import MainContent, { ContentProps } from "./Content"
-import LicenseWarning, { LicenseWarningFooterProps } from "./LicenseWarningFooter"
+import MainHeader, { HeaderProps } from './Header';
+import MainContent, { ContentProps } from './Content';
+import LicenseWarning, {
+  LicenseWarningFooterProps,
+} from './LicenseWarningFooter';
 
-const { Header, Content, Footer } = Layout
+const { Header, Content, Footer } = Layout;
 
-export default (props: React.PropsWithChildren<any>): JSX.Element => { 
-    const { 
-        authorized,
-        available,
-        expired,
-        user,
-        deployments,
-        reviews,
-    } = useAppSelector(state => state.main, shallowEqual)
+export default (props: React.PropsWithChildren<any>): JSX.Element => {
+  const { authorized, available, expired, user, deployments, reviews } =
+    useAppSelector((state) => state.main, shallowEqual);
 
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        dispatch(init())
-        dispatch(searchDeployments())
-        dispatch(searchReviews())
-        dispatch(fetchLicense())
+  useEffect(() => {
+    dispatch(init());
+    dispatch(searchDeployments());
+    dispatch(searchReviews());
+    dispatch(fetchLicense());
 
-        const deploymentStatusEvents = subscribeDeploymentStatusEvents((deploymentStatus) => {
-            dispatch(handleDeploymentStatusEvent(deploymentStatus))
-            dispatch(notifyDeploymentStatusEvent(deploymentStatus))
-        })
+    const deploymentStatusEvents = subscribeDeploymentStatusEvents(
+      (deploymentStatus) => {
+        dispatch(handleDeploymentStatusEvent(deploymentStatus));
+        dispatch(notifyDeploymentStatusEvent(deploymentStatus));
+      }
+    );
 
-        const reviewEvents = subscribeReviewEvents((review) => {
-            dispatch(slice.actions.handleReviewEvent(review))
-            dispatch(notifyReviewmentEvent(review))
-        })
+    const reviewEvents = subscribeReviewEvents((review) => {
+      dispatch(slice.actions.handleReviewEvent(review));
+      dispatch(notifyReviewmentEvent(review));
+    });
 
-        return () => {
-            deploymentStatusEvents.close()
-            reviewEvents.close()
-        }
-    }, [dispatch])
+    return () => {
+      deploymentStatusEvents.close();
+      reviewEvents.close();
+    };
+  }, [dispatch]);
 
-    const onClickRetry = () => {
-        dispatch(slice.actions.setAvailable(true))
-        dispatch(slice.actions.setExpired(false))
-    }
+  const onClickRetry = () => {
+    dispatch(slice.actions.setAvailable(true));
+    dispatch(slice.actions.setExpired(false));
+  };
 
-    return (
-        <Main 
-            authorized={authorized}
-            available={available}
-            expired={expired}
-            user={user}
-            deployments={deployments}
-            reviews={reviews}
-            onClickRetry={onClickRetry}
-            children={props.children}
-        />
-    )
-}
+  return (
+    <Main
+      authorized={authorized}
+      available={available}
+      expired={expired}
+      user={user}
+      deployments={deployments}
+      reviews={reviews}
+      onClickRetry={onClickRetry}
+      children={props.children}
+    />
+  );
+};
 
-interface MainProps extends HeaderProps, ContentProps, LicenseWarningFooterProps {}
+interface MainProps
+  extends HeaderProps,
+    ContentProps,
+    LicenseWarningFooterProps {}
 
 function Main({
-    authorized,
-    available,
-    expired,
-    user,
-    deployments,
-    reviews,
-    license,
-    children,
-    onClickRetry
-}: React.PropsWithChildren<MainProps>) { 
-    return (
-        <Layout className="layout">
-            <Helmet>
-                <title>Gitploy</title>
-                {(deployments.length + reviews.length > 0)?
-                    <link rel="icon" href="/spinner.ico" />
-                    :
-                    <link rel="icon" href="/favicon.ico" />}
-            </Helmet>
-            <Header>
-                <MainHeader 
-                    user={user}
-                    deployments={deployments}
-                    reviews={reviews}
-                />
-            </Header>
-            <Content style={{ padding: "50px 50px" }}>
-                <MainContent
-                    authorized={authorized}
-                    available={available}
-                    expired={expired}
-                    onClickRetry={onClickRetry}
-                >
-                    {children}
-                </MainContent>
-            </Content>
-            <Footer style={{ textAlign: "center" }}>
-                <div>
-                    <LicenseWarning 
-                        license={license}
-                    />
-                </div>
-                <div>
-                    Gitploy ©{moment().format("YYYY")} Created by Gitploy.IO 
-                </div>
-            </Footer>
-        </Layout>
-    )
+  authorized,
+  available,
+  expired,
+  user,
+  deployments,
+  reviews,
+  license,
+  children,
+  onClickRetry,
+}: React.PropsWithChildren<MainProps>) {
+  return (
+    <Layout className="layout">
+      <Helmet>
+        <title>Gitploy</title>
+        {deployments.length + reviews.length > 0 ? (
+          <link rel="icon" href="/spinner.ico" />
+        ) : (
+          <link rel="icon" href="/favicon.ico" />
+        )}
+      </Helmet>
+      <Header>
+        <MainHeader user={user} deployments={deployments} reviews={reviews} />
+      </Header>
+      <Content style={{ padding: '50px 50px' }}>
+        <MainContent
+          authorized={authorized}
+          available={available}
+          expired={expired}
+          onClickRetry={onClickRetry}
+        >
+          {children}
+        </MainContent>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>
+        <div>
+          <LicenseWarning license={license} />
+        </div>
+        <div>Gitploy ©{moment().format('YYYY')} Created by Gitploy.IO</div>
+      </Footer>
+    </Layout>
+  );
 }
diff --git a/ui/src/views/members/MemberList.tsx b/ui/src/views/members/MemberList.tsx
index ec3d8bbc..e7aebed1 100644
--- a/ui/src/views/members/MemberList.tsx
+++ b/ui/src/views/members/MemberList.tsx
@@ -1,42 +1,46 @@
-import { List, Switch, Button, Avatar } from "antd"
+import { List, Switch, Button, Avatar } from 'antd';
 
-import { User } from "../../models"
+import { User } from '../../models';
 
 export interface MemberListProps {
-    users: User[]
-    onChangeSwitch(user: User, checked: boolean): void
-    onClickDelete(user: User): void
+  users: User[];
+  onChangeSwitch(user: User, checked: boolean): void;
+  onClickDelete(user: User): void;
 }
 
 export default function MemberList(props: MemberListProps): JSX.Element {
-    return (
-        <List
-            itemLayout="horizontal"
-            dataSource={props.users}
-            renderItem={(user) => (
-                <List.Item
-                    actions={[
-                        <Switch 
-                            checkedChildren="Adm"  
-                            unCheckedChildren="Mem"
-                            checked={user.admin}
-                            onChange={(checked) => {props.onChangeSwitch(user, checked)}}
-                        />,
-                        <Button
-                            type="primary"
-                            danger
-                            onClick={() => {props.onClickDelete(user)}}
-                        >
-                            Delete
-                        </Button>
-                    ]}
-                >
-                    <List.Item.Meta 
-                        avatar={<Avatar src={user.avatar} />}
-                        title={user.login}
-                    />
-                </List.Item>
-            )}
-        />
-    )
-}
\ No newline at end of file
+  return (
+    <List
+      itemLayout="horizontal"
+      dataSource={props.users}
+      renderItem={(user) => (
+        <List.Item
+          actions={[
+            <Switch
+              checkedChildren="Adm"
+              unCheckedChildren="Mem"
+              checked={user.admin}
+              onChange={(checked) => {
+                props.onChangeSwitch(user, checked);
+              }}
+            />,
+            <Button
+              type="primary"
+              danger
+              onClick={() => {
+                props.onClickDelete(user);
+              }}
+            >
+              Delete
+            </Button>,
+          ]}
+        >
+          <List.Item.Meta
+            avatar={<Avatar src={user.avatar} />}
+            title={user.login}
+          />
+        </List.Item>
+      )}
+    />
+  );
+}
diff --git a/ui/src/views/members/index.tsx b/ui/src/views/members/index.tsx
index 86292613..c251ab6d 100644
--- a/ui/src/views/members/index.tsx
+++ b/ui/src/views/members/index.tsx
@@ -1,106 +1,115 @@
-import { useEffect } from "react"
-import { shallowEqual } from "react-redux"
-import { Input } from "antd"
-import { Helmet } from "react-helmet"
+import { useEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { Input } from 'antd';
+import { Helmet } from 'react-helmet';
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { membersSlice as slice, fetchUsers, perPage, updateUser, deleteUser } from "../../redux/members"
-import { User } from "../../models"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import {
+  membersSlice as slice,
+  fetchUsers,
+  perPage,
+  updateUser,
+  deleteUser,
+} from '../../redux/members';
+import { User } from '../../models';
 
-import Main from '../main'
-import MemberList, { MemberListProps } from "./MemberList"
-import Pagination from "../../components/Pagination"
+import Main from '../main';
+import MemberList, { MemberListProps } from './MemberList';
+import Pagination from '../../components/Pagination';
 
-const { Search } = Input
+const { Search } = Input;
 
 export default (): JSX.Element => {
-    const { users, page } = useAppSelector(state => state.members, shallowEqual)
-    const dispatch = useAppDispatch()
+  const { users, page } = useAppSelector(
+    (state) => state.members,
+    shallowEqual
+  );
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        dispatch(fetchUsers())
-    }, [dispatch])
+  useEffect(() => {
+    dispatch(fetchUsers());
+  }, [dispatch]);
 
-    const onChangeSwitch = (user: User, checked: boolean) => {
-        dispatch(updateUser({user, admin: checked}))
-    }
+  const onChangeSwitch = (user: User, checked: boolean) => {
+    dispatch(updateUser({ user, admin: checked }));
+  };
 
-    const onClickDelete = (user: User) => {
-        dispatch(deleteUser(user))
-    }
+  const onClickDelete = (user: User) => {
+    dispatch(deleteUser(user));
+  };
 
-    const onSearch = (value: string) => {
-        dispatch(slice.actions.setQuery(value))
-        dispatch(fetchUsers())
-    }
+  const onSearch = (value: string) => {
+    dispatch(slice.actions.setQuery(value));
+    dispatch(fetchUsers());
+  };
 
-    const onClickPrev = () => {
-        dispatch(slice.actions.decreasePage())
-        dispatch(fetchUsers())
-    }
+  const onClickPrev = () => {
+    dispatch(slice.actions.decreasePage());
+    dispatch(fetchUsers());
+  };
 
-    const onClickNext = () => {
-        dispatch(slice.actions.increasePage())
-        dispatch(fetchUsers())
-    }
+  const onClickNext = () => {
+    dispatch(slice.actions.increasePage());
+    dispatch(fetchUsers());
+  };
 
-    return (
-        <Main>
-            <Members 
-                users={users}
-                page={page}
-                onChangeSwitch={onChangeSwitch}
-                onClickDelete={onClickDelete}
-                onClickPrev={onClickPrev}
-                onClickNext={onClickNext}
-                onSearch={onSearch}
-            />
-        </Main>
-    )
-}
+  return (
+    <Main>
+      <Members
+        users={users}
+        page={page}
+        onChangeSwitch={onChangeSwitch}
+        onClickDelete={onClickDelete}
+        onClickPrev={onClickPrev}
+        onClickNext={onClickNext}
+        onSearch={onSearch}
+      />
+    </Main>
+  );
+};
 
 interface MembersProps extends MemberListProps {
-    page: number
-    onClickPrev(): void
-    onClickNext(): void
-    onSearch(value: string): void
+  page: number;
+  onClickPrev(): void;
+  onClickNext(): void;
+  onSearch(value: string): void;
 }
 
 function Members({
-    users,
-    page,
-    onChangeSwitch,
-    onClickDelete,
-    onClickNext,
-    onClickPrev,
-    onSearch,
+  users,
+  page,
+  onChangeSwitch,
+  onClickDelete,
+  onClickNext,
+  onClickPrev,
+  onSearch,
 }: MembersProps): JSX.Element {
-    return (
-        <>
-            <Helmet>
-                <title>Members</title>
-            </Helmet>
-            <div>
-                <h1>Members</h1>
-            </div>
-            <div style={{marginTop: "40px", paddingRight: "20px"}}>
-                <Search placeholder="Search user ..." onSearch={onSearch} enterButton />
-            </div>
-            <div style={{marginTop: "40px"}}>
-                <MemberList 
-                    users={users}
-                    onChangeSwitch={onChangeSwitch}
-                    onClickDelete={onClickDelete}
-                />
-            </div>
-            <div style={{marginTop: "40px", textAlign: "center"}}>
-                <Pagination 
-                    disabledPrev={page <= 1}
-                    disabledNext={users.length < perPage}
-                    onClickPrev={onClickPrev}
-                    onClickNext={onClickNext}
-                />    
-            </div>
-        </>
-    )
-}
\ No newline at end of file
+  return (
+    <>
+      <Helmet>
+        <title>Members</title>
+      </Helmet>
+      <div>
+        <h1>Members</h1>
+      </div>
+      <div style={{ marginTop: '40px', paddingRight: '20px' }}>
+        <Search placeholder="Search user ..." onSearch={onSearch} enterButton />
+      </div>
+      <div style={{ marginTop: '40px' }}>
+        <MemberList
+          users={users}
+          onChangeSwitch={onChangeSwitch}
+          onClickDelete={onClickDelete}
+        />
+      </div>
+      <div style={{ marginTop: '40px', textAlign: 'center' }}>
+        <Pagination
+          disabledPrev={page <= 1}
+          disabledNext={users.length < perPage}
+          onClickPrev={onClickPrev}
+          onClickNext={onClickNext}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/ui/src/views/repo/index.tsx b/ui/src/views/repo/index.tsx
index 9bf16afe..d4f0d7cb 100644
--- a/ui/src/views/repo/index.tsx
+++ b/ui/src/views/repo/index.tsx
@@ -1,155 +1,147 @@
-import { useParams } from "react-router-dom";
-import { Menu, Breadcrumb, Result, } from 'antd'
-import { shallowEqual } from "react-redux";
-import { useEffect } from "react";
-import { Helmet } from "react-helmet"
+import { useParams } from 'react-router-dom';
+import { Menu, Breadcrumb, Result } from 'antd';
+import { shallowEqual } from 'react-redux';
+import { useEffect } from 'react';
+import { Helmet } from 'react-helmet';
 
-import { useAppSelector, useAppDispatch } from '../../redux/hooks'
-import { init, activate, repoSlice as slice } from '../../redux/repo'
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import { init, activate, repoSlice as slice } from '../../redux/repo';
 
-import ActivateButton from "../../components/ActivateButton"
-import Main from '../main'
-import RepoHome from '../repoHome'
-import RepoLock from "../repoLock"
-import RepoDeploy from '../repoDeploy'
-import RepoRollabck from '../repoRollback'
-import RepoSettings from "../repoSettings"
+import ActivateButton from '../../components/ActivateButton';
+import Main from '../main';
+import RepoHome from '../repoHome';
+import RepoLock from '../repoLock';
+import RepoDeploy from '../repoDeploy';
+import RepoRollabck from '../repoRollback';
+import RepoSettings from '../repoSettings';
 
 interface Params {
-    namespace: string
-    name: string
-    tab: string
+  namespace: string;
+  name: string;
+  tab: string;
 }
 
 export default (): JSX.Element => {
-    const { namespace, name, tab } = useParams<Params>()
-    const { display, repo } = useAppSelector(state => state.repo, shallowEqual)
-    const dispatch = useAppDispatch()
+  const { namespace, name, tab } = useParams<Params>();
+  const { display, repo } = useAppSelector((state) => state.repo, shallowEqual);
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(init({namespace, name}))
-            await dispatch(slice.actions.setDisplay(true))
-        }
-        f()
-        // eslint-disable-next-line
-    }, [dispatch])
+  useEffect(() => {
+    const f = async () => {
+      await dispatch(init({ namespace, name }));
+      await dispatch(slice.actions.setDisplay(true));
+    };
+    f();
+    // eslint-disable-next-line
+  }, [dispatch]);
 
-    const onClickActivate = () => {
-        dispatch(activate())
-    }
-
-    if (!display) {
-        return (
-            <Main>
-                <div />
-            </Main>
-        )
-    } else if (display && !repo) {
-        return (
-            <Main>
-                <Result
-                    style={{paddingTop: '120px'}}
-                    status="warning"
-                    title="The page is not found."
-                    subTitle="Please check the URL."
-                />
-            </Main>
-        )
-    }
+  const onClickActivate = () => {
+    dispatch(activate());
+  };
 
+  if (!display) {
+    return (
+      <Main>
+        <div />
+      </Main>
+    );
+  } else if (display && !repo) {
     return (
-        <Repo 
-            namespace={namespace}
-            name={name}
-            tab={tab}
-            active={(repo?.active)? true : false}
-            onClickActivate={onClickActivate}
+      <Main>
+        <Result
+          style={{ paddingTop: '120px' }}
+          status="warning"
+          title="The page is not found."
+          subTitle="Please check the URL."
         />
-    )
-}
+      </Main>
+    );
+  }
+
+  return (
+    <Repo
+      namespace={namespace}
+      name={name}
+      tab={tab}
+      active={repo?.active ? true : false}
+      onClickActivate={onClickActivate}
+    />
+  );
+};
 
 interface RepoProps {
-    namespace: string
-    name: string
-    tab: string
-    active: boolean
-    onClickActivate(): void
+  namespace: string;
+  name: string;
+  tab: string;
+  active: boolean;
+  onClickActivate(): void;
 }
 
 function Repo({
-    namespace,
-    name,
-    tab,
-    active,
-    onClickActivate
+  namespace,
+  name,
+  tab,
+  active,
+  onClickActivate,
 }: RepoProps): JSX.Element {
-    const styleActivateButton: React.CSSProperties = {
-        display: (!active)? "" : "none",
-        marginTop: "20px", 
-        textAlign: "center"
-    }
+  const styleActivateButton: React.CSSProperties = {
+    display: !active ? '' : 'none',
+    marginTop: '20px',
+    textAlign: 'center',
+  };
 
-    const styleContent: React.CSSProperties = {
-        display: (active)? "" : "none",
-        marginTop: "20px", 
-    }
+  const styleContent: React.CSSProperties = {
+    display: active ? '' : 'none',
+    marginTop: '20px',
+  };
 
-    return (
-        <Main>
-            <Helmet>
-                <title>{namespace}/{name}</title>
-            </Helmet>
-            <div >
-                <Breadcrumb>
-                    <Breadcrumb.Item>
-                        <a href="/">Repositories</a>
-                    </Breadcrumb.Item>
-                    <Breadcrumb.Item>{namespace}</Breadcrumb.Item>
-                    <Breadcrumb.Item>
-                        <a href={`/${namespace}/${name}`}>{name}</a>
-                    </Breadcrumb.Item>
-                </Breadcrumb>
-            </div>
-            <div style={{"marginTop": "20px"}}>
-                <Menu mode="horizontal" selectedKeys={[(tab)? tab : "home"]}>
-                    <Menu.Item key="home">
-                        <a href={`/${namespace}/${name}`}>Home</a>
-                    </Menu.Item>
-                    <Menu.Item key="deploy">
-                        <a href={`/${namespace}/${name}/deploy`}>Deploy</a>
-                    </Menu.Item>
-                    <Menu.Item key="rollback">
-                        <a href={`/${namespace}/${name}/rollback`}>Rollback</a>
-                    </Menu.Item>
-                    <Menu.Item key="lock">
-                        <a href={`/${namespace}/${name}/lock`}>Lock</a>
-                    </Menu.Item>
-                    <Menu.Item key="settings">
-                        <a href={`/${namespace}/${name}/settings`}>Settings</a>
-                    </Menu.Item>
-                </Menu>
-            </div>
-            <div style={styleActivateButton}>
-                <ActivateButton onClickActivate={onClickActivate}/>
-            </div>
-            <div style={styleContent}>
-                <div>
-                    {(!tab || tab === "home") ? <RepoHome /> : null}
-                </div>
-                <div>
-                    {(tab === "deploy") ? <RepoDeploy /> : null}
-                </div> 
-                <div>
-                    {(tab === "rollback")? <RepoRollabck /> : null}
-                </div> 
-                <div>
-                    {(tab === "lock")? <RepoLock /> : null}
-                </div> 
-                <div>
-                    {(tab === "settings")? <RepoSettings /> : null}
-                </div> 
-            </div>
-        </Main>
-    )
+  return (
+    <Main>
+      <Helmet>
+        <title>
+          {namespace}/{name}
+        </title>
+      </Helmet>
+      <div>
+        <Breadcrumb>
+          <Breadcrumb.Item>
+            <a href="/">Repositories</a>
+          </Breadcrumb.Item>
+          <Breadcrumb.Item>{namespace}</Breadcrumb.Item>
+          <Breadcrumb.Item>
+            <a href={`/${namespace}/${name}`}>{name}</a>
+          </Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        <Menu mode="horizontal" selectedKeys={[tab ? tab : 'home']}>
+          <Menu.Item key="home">
+            <a href={`/${namespace}/${name}`}>Home</a>
+          </Menu.Item>
+          <Menu.Item key="deploy">
+            <a href={`/${namespace}/${name}/deploy`}>Deploy</a>
+          </Menu.Item>
+          <Menu.Item key="rollback">
+            <a href={`/${namespace}/${name}/rollback`}>Rollback</a>
+          </Menu.Item>
+          <Menu.Item key="lock">
+            <a href={`/${namespace}/${name}/lock`}>Lock</a>
+          </Menu.Item>
+          <Menu.Item key="settings">
+            <a href={`/${namespace}/${name}/settings`}>Settings</a>
+          </Menu.Item>
+        </Menu>
+      </div>
+      <div style={styleActivateButton}>
+        <ActivateButton onClickActivate={onClickActivate} />
+      </div>
+      <div style={styleContent}>
+        <div>{!tab || tab === 'home' ? <RepoHome /> : null}</div>
+        <div>{tab === 'deploy' ? <RepoDeploy /> : null}</div>
+        <div>{tab === 'rollback' ? <RepoRollabck /> : null}</div>
+        <div>{tab === 'lock' ? <RepoLock /> : null}</div>
+        <div>{tab === 'settings' ? <RepoSettings /> : null}</div>
+      </div>
+    </Main>
+  );
 }
diff --git a/ui/src/views/repoDeploy/DeployForm.tsx b/ui/src/views/repoDeploy/DeployForm.tsx
index 27c6341b..638ff306 100644
--- a/ui/src/views/repoDeploy/DeployForm.tsx
+++ b/ui/src/views/repoDeploy/DeployForm.tsx
@@ -1,308 +1,357 @@
-import { useState } from "react"
-import { Form, Select, Radio, Button, Typography, Avatar, Tag as AntdTag } from "antd"
-
-import { Branch, Commit, Tag, Deployment, DeploymentType, Status, Env } from "../../models"
-
-import CreatableSelect, {Option as Op} from "../../components/CreatableSelect"
-import StatusStateIcon from "./StatusStateIcon"
-import moment from "moment"
-
-export type Option = Op
-
-const { Text } = Typography
+import { useState } from 'react';
+import {
+  Form,
+  Select,
+  Radio,
+  Button,
+  Typography,
+  Avatar,
+  Tag as AntdTag,
+} from 'antd';
+
+import {
+  Branch,
+  Commit,
+  Tag,
+  Deployment,
+  DeploymentType,
+  Status,
+  Env,
+} from '../../models';
+
+import CreatableSelect, {
+  Option as Op,
+} from '../../components/CreatableSelect';
+import StatusStateIcon from './StatusStateIcon';
+import moment from 'moment';
+
+export type Option = Op;
+
+const { Text } = Typography;
 
 // TODO: Remove the set functions and
 // change it so that the component returns a value when submitting.
 export interface DeployFormProps {
-    envs: Env[]
-    onSelectEnv(env: Env): void
-    onChangeType(type: DeploymentType): void
-    currentDeployment?: Deployment
-    branches: Branch[]
-    onSelectBranch(branch: Branch): void
-    onClickAddBranch(option: Option): void
-    branchStatuses: Status[]
-    commits: Commit[]
-    onSelectCommit(commit: Commit): void
-    onClickAddCommit(option: Option): void
-    commitStatuses: Status[]
-    tags: Tag[]
-    onSelectTag(tag: Tag): void
-    onClickAddTag(option: Option): void
-    tagStatuses: Status[]
-    deploying: boolean
-    onClickDeploy(): void
+  envs: Env[];
+  onSelectEnv(env: Env): void;
+  onChangeType(type: DeploymentType): void;
+  currentDeployment?: Deployment;
+  branches: Branch[];
+  onSelectBranch(branch: Branch): void;
+  onClickAddBranch(option: Option): void;
+  branchStatuses: Status[];
+  commits: Commit[];
+  onSelectCommit(commit: Commit): void;
+  onClickAddCommit(option: Option): void;
+  commitStatuses: Status[];
+  tags: Tag[];
+  onSelectTag(tag: Tag): void;
+  onClickAddTag(option: Option): void;
+  tagStatuses: Status[];
+  deploying: boolean;
+  onClickDeploy(): void;
 }
 
 export default function DeployForm(props: DeployFormProps): JSX.Element {
-    const [ deploymentType, setDeploymentType ] = useState<DeploymentType | null>(null) 
-
-    const layout = {
-      labelCol: { span: 5},
-      wrapperCol: { span: 16 },
-    };
-
-    const selectLayout = {
-        ...layout,
-        wrapperCol: {span: 10}
-    }
-
-    const submitLayout = {
-      wrapperCol: { offset: 5, span: 16 },
-    };
-
-    const styleHide: React.CSSProperties = {
-        display: "none"
-    }
-
-    const styleWidthForCheck: React.CSSProperties = {
-        width: "90%"
-    }
-
-    const isBranchVisible = (type: DeploymentType | null) => {
-        if (type === null) return false
-        return type === DeploymentType.Commit || type === DeploymentType.Branch
+  const [deploymentType, setDeploymentType] = useState<DeploymentType | null>(
+    null
+  );
+
+  const layout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 16 },
+  };
+
+  const selectLayout = {
+    ...layout,
+    wrapperCol: { span: 10 },
+  };
+
+  const submitLayout = {
+    wrapperCol: { offset: 5, span: 16 },
+  };
+
+  const styleHide: React.CSSProperties = {
+    display: 'none',
+  };
+
+  const styleWidthForCheck: React.CSSProperties = {
+    width: '90%',
+  };
+
+  const isBranchVisible = (type: DeploymentType | null) => {
+    if (type === null) return false;
+    return type === DeploymentType.Commit || type === DeploymentType.Branch;
+  };
+
+  const isBranchCheckVisible = (type: DeploymentType | null) => {
+    if (type === null) return false;
+    return type === DeploymentType.Branch;
+  };
+
+  const isCommitVisible = (type: DeploymentType | null) => {
+    if (type === null) return false;
+    return type === DeploymentType.Commit;
+  };
+
+  const isCommitCheckVisible = (type: DeploymentType | null) => {
+    if (type === null) return false;
+    return type === DeploymentType.Commit;
+  };
+
+  const isTagVisible = (type: DeploymentType | null) => {
+    if (type === null) return false;
+    return type === DeploymentType.Tag;
+  };
+
+  const isTagCheckVisible = (type: DeploymentType | null) => {
+    if (type === null) return false;
+    return type === DeploymentType.Tag;
+  };
+
+  const onChangeType = (e: any) => {
+    let type: DeploymentType;
+
+    switch (e.target.value) {
+      case 'commit':
+        type = DeploymentType.Commit;
+        break;
+      case 'branch':
+        type = DeploymentType.Branch;
+        break;
+      case 'tag':
+        type = DeploymentType.Tag;
+        break;
+      default:
+        type = DeploymentType.Commit;
     }
 
-    const isBranchCheckVisible = (type: DeploymentType | null) => {
-        if (type === null) return false
-        return type === DeploymentType.Branch
-    }
-
-    const isCommitVisible = (type: DeploymentType | null) => {
-        if (type === null) return false
-        return type === DeploymentType.Commit 
-    }
+    setDeploymentType(type);
+    props.onChangeType(type);
+  };
 
-    const isCommitCheckVisible = (type: DeploymentType | null) => {
-        if (type === null) return false
-        return type === DeploymentType.Commit 
-    }
+  const onSelectEnv = (value: string) => {
+    const env = props.envs.find((env) => env.name === value);
+    if (env === undefined) throw new Error("The env doesn't exist.");
 
-    const isTagVisible = (type: DeploymentType | null) => {
-        if (type === null) return false
-        return type === DeploymentType.Tag 
-    }
-
-    const isTagCheckVisible = (type: DeploymentType | null) => {
-        if (type === null) return false
-        return type === DeploymentType.Tag
-    }
+    props.onSelectEnv(env);
+  };
 
-    const onChangeType = (e: any) => {
-        let type: DeploymentType
-
-        switch (e.target.value) {
-            case "commit":
-                type = DeploymentType.Commit
-                break
-            case "branch":
-                type = DeploymentType.Branch
-                break
-            case "tag":
-                type = DeploymentType.Tag
-                break
-            default:
-                type = DeploymentType.Commit
-        }
-
-        setDeploymentType(type)
-        props.onChangeType(type)
-    }
-
-    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 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;
 
-    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.")
-
-        props.onSelectBranch(branch)
-    }
-
-    const mapCommitToOption = (commit: Commit) => {
-        return {
-            label: <CommitDecorator commit={commit} currentDeployment={props.currentDeployment}/>,
-            value: commit.sha,
-        } as Option
-    }
-
-    const onSelectCommit = (option: Option) => {
-        const commit = props.commits.find(c => c.sha === option.value)
-        if (commit === undefined) throw new Error("The commit doesn't exist.")
-
-        props.onSelectCommit(commit)
-    }
-
-    const mapTagToOption = (tag: Tag) => {
-        const deploymentTag = (tag.commitSha === props.currentDeployment?.sha) ?
-            <AntdTag color="success">{props.currentDeployment.env}</AntdTag> : 
-            null
-
-        return {
-            label: (
-                <span>
-                    <Text className="gitploy-code" code>{tag.name}</Text>{deploymentTag}
-                </span>
-            ),
-            value: tag.name
-        } as Option
-    }
-
-    const onSelectTag = (option: Option) => {
-        const tag = props.tags.find(t => t.name === option.value)
-        if (tag === undefined) throw new Error("The tag doesn't exist.")
-
-        props.onSelectTag(tag)
-    }
-
-    const onClickFinish = () => {
-        props.onClickDeploy()
-    }
-
-    return (
-        <Form
-            onFinish={onClickFinish}
-            name="deploy"
+    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.");
+
+    props.onSelectBranch(branch);
+  };
+
+  const mapCommitToOption = (commit: Commit) => {
+    return {
+      label: (
+        <CommitDecorator
+          commit={commit}
+          currentDeployment={props.currentDeployment}
+        />
+      ),
+      value: commit.sha,
+    } as Option;
+  };
+
+  const onSelectCommit = (option: Option) => {
+    const commit = props.commits.find((c) => c.sha === option.value);
+    if (commit === undefined) throw new Error("The commit doesn't exist.");
+
+    props.onSelectCommit(commit);
+  };
+
+  const mapTagToOption = (tag: Tag) => {
+    const deploymentTag =
+      tag.commitSha === props.currentDeployment?.sha ? (
+        <AntdTag color="success">{props.currentDeployment.env}</AntdTag>
+      ) : null;
+
+    return {
+      label: (
+        <span>
+          <Text className="gitploy-code" code>
+            {tag.name}
+          </Text>
+          {deploymentTag}
+        </span>
+      ),
+      value: tag.name,
+    } as Option;
+  };
+
+  const onSelectTag = (option: Option) => {
+    const tag = props.tags.find((t) => t.name === option.value);
+    if (tag === undefined) throw new Error("The tag doesn't exist.");
+
+    props.onSelectTag(tag);
+  };
+
+  const onClickFinish = () => {
+    props.onClickDeploy();
+  };
+
+  return (
+    <Form onFinish={onClickFinish} name="deploy">
+      <Form.Item
+        {...selectLayout}
+        rules={[{ required: true }]}
+        label="Environment"
+        name="environment"
+      >
+        <Select onSelect={onSelectEnv} placeholder="Select target environment">
+          {props.envs.map((env, idx) => {
+            return (
+              <Select.Option key={idx} value={env.name}>
+                {env.name}
+              </Select.Option>
+            );
+          })}
+        </Select>
+      </Form.Item>
+      <Form.Item
+        {...layout}
+        rules={[{ required: true }]}
+        label="Type"
+        name="type"
+      >
+        <Radio.Group onChange={onChangeType}>
+          <Radio.Button value={DeploymentType.Commit}>Commit</Radio.Button>
+          <Radio.Button value={DeploymentType.Branch}>Branch</Radio.Button>
+          <Radio.Button value={DeploymentType.Tag}>Tag</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      {/* https://ant.design/components/form/#components-form-demo-complex-form-control */}
+      <Form.Item
+        label="Branch"
+        {...selectLayout}
+        style={isBranchVisible(deploymentType) ? {} : styleHide}
+      >
+        <Form.Item
+          name="branch"
+          rules={[{ required: isBranchVisible(deploymentType) }]}
+          noStyle
         >
-            <Form.Item
-                {...selectLayout}
-                rules={[{required: true}]}
-                label="Environment"
-                name="environment">
-                <Select 
-                    onSelect={onSelectEnv}
-                    placeholder="Select target environment">
-                    {props.envs.map((env, idx) => {
-                        return <Select.Option key={idx} value={env.name}>{env.name}</Select.Option>
-                    })}
-                </Select>
-            </Form.Item>
-            <Form.Item
-                {...layout}
-                rules={[{required: true}]}
-                label="Type"
-                name="type">
-                <Radio.Group 
-                    onChange={onChangeType}>
-                    <Radio.Button value={DeploymentType.Commit}>Commit</Radio.Button>
-                    <Radio.Button value={DeploymentType.Branch}>Branch</Radio.Button>
-                    <Radio.Button value={DeploymentType.Tag}>Tag</Radio.Button>
-                </Radio.Group>
-            </Form.Item>
-            {/* https://ant.design/components/form/#components-form-demo-complex-form-control */}
-            <Form.Item
-                label="Branch"
-                {...selectLayout}
-                style={(isBranchVisible(deploymentType)? {}: styleHide)}>
-                <Form.Item
-                    name="branch"
-                    rules={[{required: isBranchVisible(deploymentType)}]}
-                    noStyle>
-                        <CreatableSelect 
-                            options={props.branches.map(branch => mapBranchToOption(branch))}
-                            onSelectOption={onSelectBranch}
-                            onClickAddItem={props.onClickAddBranch}
-                            showSearch
-                            placeholder="Select branch"
-                            style={styleWidthForCheck}/>
-                </Form.Item>
-                <span style={(isBranchCheckVisible(deploymentType)? {}: styleHide)}>
-                    &nbsp; <StatusStateIcon statuses={props.branchStatuses} /> 
-                </span>
-            </Form.Item>
-            <Form.Item
-                label="Commit"
-                {...layout}
-                style={(isCommitVisible(deploymentType)? {}: styleHide)}>
-                <Form.Item
-                    name="commit"
-                    rules={[{required: isCommitVisible(deploymentType)}]}
-                    noStyle>
-                        <CreatableSelect 
-                            options={props.commits.map(commit => mapCommitToOption(commit))}
-                            onSelectOption={onSelectCommit}
-                            onClickAddItem={props.onClickAddCommit}
-                            showSearch
-                            placeholder="Select commit"
-                            style={styleWidthForCheck}/>
-                </Form.Item>
-                <span style={(isCommitCheckVisible(deploymentType)? {}: styleHide)}>
-                    &nbsp; <StatusStateIcon statuses={props.commitStatuses} /> 
-                </span>
-            </Form.Item>
-            <Form.Item
-                label="Tag"
-                {...selectLayout}
-                style={(isTagVisible(deploymentType)? {}: styleHide)}>
-                <Form.Item
-                    name="tag"
-                    rules={[{required: isTagVisible(deploymentType)}]}
-                    noStyle>
-                        <CreatableSelect 
-                            options={props.tags.map(tag => mapTagToOption(tag))}
-                            onSelectOption={onSelectTag}
-                            onClickAddItem={props.onClickAddTag}
-                            showSearch
-                            placeholder="Select commit"
-                            style={styleWidthForCheck}/>
-                </Form.Item>
-                <span style={(isTagCheckVisible(deploymentType)? {}: styleHide)}>
-                    &nbsp; <StatusStateIcon statuses={props.tagStatuses} /> 
-                </span>
-            </Form.Item>
-            <Form.Item {...submitLayout}>
-                <Button 
-                    loading={props.deploying}
-                    type="primary" 
-                    htmlType="submit">
-                  Submit
-                </Button>
-            </Form.Item>
-        </Form>
-    )
+          <CreatableSelect
+            options={props.branches.map((branch) => mapBranchToOption(branch))}
+            onSelectOption={onSelectBranch}
+            onClickAddItem={props.onClickAddBranch}
+            showSearch
+            placeholder="Select branch"
+            style={styleWidthForCheck}
+          />
+        </Form.Item>
+        <span style={isBranchCheckVisible(deploymentType) ? {} : styleHide}>
+          &nbsp; <StatusStateIcon statuses={props.branchStatuses} />
+        </span>
+      </Form.Item>
+      <Form.Item
+        label="Commit"
+        {...layout}
+        style={isCommitVisible(deploymentType) ? {} : styleHide}
+      >
+        <Form.Item
+          name="commit"
+          rules={[{ required: isCommitVisible(deploymentType) }]}
+          noStyle
+        >
+          <CreatableSelect
+            options={props.commits.map((commit) => mapCommitToOption(commit))}
+            onSelectOption={onSelectCommit}
+            onClickAddItem={props.onClickAddCommit}
+            showSearch
+            placeholder="Select commit"
+            style={styleWidthForCheck}
+          />
+        </Form.Item>
+        <span style={isCommitCheckVisible(deploymentType) ? {} : styleHide}>
+          &nbsp; <StatusStateIcon statuses={props.commitStatuses} />
+        </span>
+      </Form.Item>
+      <Form.Item
+        label="Tag"
+        {...selectLayout}
+        style={isTagVisible(deploymentType) ? {} : styleHide}
+      >
+        <Form.Item
+          name="tag"
+          rules={[{ required: isTagVisible(deploymentType) }]}
+          noStyle
+        >
+          <CreatableSelect
+            options={props.tags.map((tag) => mapTagToOption(tag))}
+            onSelectOption={onSelectTag}
+            onClickAddItem={props.onClickAddTag}
+            showSearch
+            placeholder="Select commit"
+            style={styleWidthForCheck}
+          />
+        </Form.Item>
+        <span style={isTagCheckVisible(deploymentType) ? {} : styleHide}>
+          &nbsp; <StatusStateIcon statuses={props.tagStatuses} />
+        </span>
+      </Form.Item>
+      <Form.Item {...submitLayout}>
+        <Button loading={props.deploying} type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
 }
 
 interface CommitDecoratorProps {
-    commit: Commit
-    currentDeployment?: Deployment
+  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
-
-    const [line] = props.commit.message.split(/(\r\n|\n|\r)/g, 1)
-    
-    return (
+  const tag =
+    props.commit.sha === props.currentDeployment?.sha ? (
+      <AntdTag color="success">{props.currentDeployment.env}</AntdTag>
+    ) : null;
+
+  const [line] = props.commit.message.split(/(\r\n|\n|\r)/g, 1);
+
+  return (
+    <span>
+      <Text className="gitploy-code" code>
+        {props.commit.sha.substring(0, 7)}
+      </Text>
+      {tag}- <Text strong>{line}</Text> <br />
+      {props.commit?.author ? (
         <span>
-            <Text className="gitploy-code" code>{props.commit.sha.substring(0, 7)}</Text>{tag}- <Text strong>{line}</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} 
+          &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>
+  );
 }
diff --git a/ui/src/views/repoDeploy/DynamicPayloadModal.tsx b/ui/src/views/repoDeploy/DynamicPayloadModal.tsx
index d4c4a733..6397424e 100644
--- a/ui/src/views/repoDeploy/DynamicPayloadModal.tsx
+++ b/ui/src/views/repoDeploy/DynamicPayloadModal.tsx
@@ -1,127 +1,132 @@
-import { Modal, Form, Select, Input, InputNumber, Checkbox } from "antd"
+import { Modal, Form, Select, Input, InputNumber, Checkbox } from 'antd';
 
-import { Env, DynamicPayloadInput, DynamicPayloadInputTypeEnum } from "../../models"
+import {
+  Env,
+  DynamicPayloadInput,
+  DynamicPayloadInputTypeEnum,
+} from '../../models';
 
 export interface DynamicPayloadModalProps {
-    visible: boolean
-    env: Env
-    onClickOk(values: any): void
-    onClickCancel(): void
+  visible: boolean;
+  env: Env;
+  onClickOk(values: any): void;
+  onClickCancel(): void;
 }
 
-export default function DynamicPayloadModal(props: DynamicPayloadModalProps): JSX.Element {
-    const [ form ] = Form.useForm()
+export default function DynamicPayloadModal(
+  props: DynamicPayloadModalProps
+): JSX.Element {
+  const [form] = Form.useForm();
 
-    const onClickOk = () => {
-        form.validateFields()
-            .then(values => {
-                props.onClickOk(values)
-            })
-            .catch(info => {
-                console.log(info)
-            })
-    }
+  const onClickOk = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        props.onClickOk(values);
+      })
+      .catch((info) => {
+        console.log(info);
+      });
+  };
 
-    const onClickCancel = () => {
-        props.onClickCancel()
-    }
+  const onClickCancel = () => {
+    props.onClickCancel();
+  };
 
-    // Build items dynamically
-    const items = new Array<JSX.Element>()
-    if (props.env.dynamicPayload) {
-        // Object.entries(props.env.dynamicPayload.inputs).forEach()
-        Object.entries(props.env.dynamicPayload.inputs).forEach((entry) => {
-            const [name, input] = entry
-            items.push(<DynamicItem key={name} name={name} input={input}/>)
-        })
-    }
+  // Build items dynamically
+  const items = new Array<JSX.Element>();
+  if (props.env.dynamicPayload) {
+    // Object.entries(props.env.dynamicPayload.inputs).forEach()
+    Object.entries(props.env.dynamicPayload.inputs).forEach((entry) => {
+      const [name, input] = entry;
+      items.push(<DynamicItem key={name} name={name} input={input} />);
+    });
+  }
 
-    // Build the initialValues
-    const initialValues: any = {}
-    if (props.env.dynamicPayload) {
-        Object.entries(props.env.dynamicPayload.inputs).forEach((entry) => {
-            const [name, input] = entry
-            initialValues[name] = input.default
-        })
-    }
+  // Build the initialValues
+  const initialValues: any = {};
+  if (props.env.dynamicPayload) {
+    Object.entries(props.env.dynamicPayload.inputs).forEach((entry) => {
+      const [name, input] = entry;
+      initialValues[name] = input.default;
+    });
+  }
 
-    return (
-        <Modal
-            visible={props.visible}
-            onOk={onClickOk}
-            onCancel={onClickCancel}
-        >
-            <Form 
-                form={form} 
-                layout="vertical" 
-                name="dynamic_payload"
-                initialValues={initialValues}
-            >
-                {items.map(item => item)}
-            </Form>
-        </Modal>
-    )
+  return (
+    <Modal visible={props.visible} onOk={onClickOk} onCancel={onClickCancel}>
+      <Form
+        form={form}
+        layout="vertical"
+        name="dynamic_payload"
+        initialValues={initialValues}
+      >
+        {items.map((item) => item)}
+      </Form>
+    </Modal>
+  );
 }
 
 interface DynamicItemProps {
-    name: string
-    input: DynamicPayloadInput
+  name: string;
+  input: DynamicPayloadInput;
 }
 
-function DynamicItem({name, input}: DynamicItemProps): JSX.Element {
-    // Capitalize the first character.
-    const label = name.charAt(0).toUpperCase() + name.slice(1)
-    const description = input.description
-    const rules = (input.required)? [{required: true}] : []
+function DynamicItem({ name, input }: DynamicItemProps): JSX.Element {
+  // Capitalize the first character.
+  const label = name.charAt(0).toUpperCase() + name.slice(1);
+  const description = input.description;
+  const rules = input.required ? [{ required: true }] : [];
 
-    switch (input.type) {
-        case DynamicPayloadInputTypeEnum.Select:
-            return (
-                <Form.Item
-                    label={label}
-                    name={name}
-                    tooltip={description}
-                    rules={rules}
-                >
-                    <Select >
-                        {input.options?.map((option: any, idx: any) => 
-                            <Select.Option key={idx} value={option}>{option}</Select.Option>
-                        )}
-                    </Select>
-                </Form.Item>
-            )
-        case DynamicPayloadInputTypeEnum.String:
-            return  (
-                <Form.Item
-                    label={label}
-                    name={name}
-                    tooltip={description}
-                    rules={rules}
-                >
-                    <Input />
-                </Form.Item>
-            )
-        case DynamicPayloadInputTypeEnum.Number:
-            return (
-                <Form.Item
-                    label={label}
-                    name={name}
-                    tooltip={description}
-                    rules={rules}
-                >
-                    <InputNumber />
-                </Form.Item>
-            )
-        case DynamicPayloadInputTypeEnum.Boolean:
-            return (
-                <Form.Item
-                    label={label}
-                    name={name}
-                    tooltip={description}
-                    rules={rules}
-                >
-                    <Checkbox />
-                </Form.Item>
-            )
-    }
+  switch (input.type) {
+    case DynamicPayloadInputTypeEnum.Select:
+      return (
+        <Form.Item
+          label={label}
+          name={name}
+          tooltip={description}
+          rules={rules}
+        >
+          <Select>
+            {input.options?.map((option: any, idx: any) => (
+              <Select.Option key={idx} value={option}>
+                {option}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      );
+    case DynamicPayloadInputTypeEnum.String:
+      return (
+        <Form.Item
+          label={label}
+          name={name}
+          tooltip={description}
+          rules={rules}
+        >
+          <Input />
+        </Form.Item>
+      );
+    case DynamicPayloadInputTypeEnum.Number:
+      return (
+        <Form.Item
+          label={label}
+          name={name}
+          tooltip={description}
+          rules={rules}
+        >
+          <InputNumber />
+        </Form.Item>
+      );
+    case DynamicPayloadInputTypeEnum.Boolean:
+      return (
+        <Form.Item
+          label={label}
+          name={name}
+          tooltip={description}
+          rules={rules}
+        >
+          <Checkbox />
+        </Form.Item>
+      );
+  }
 }
diff --git a/ui/src/views/repoDeploy/StatusStateIcon.tsx b/ui/src/views/repoDeploy/StatusStateIcon.tsx
index 050f5dfa..81e6c202 100644
--- a/ui/src/views/repoDeploy/StatusStateIcon.tsx
+++ b/ui/src/views/repoDeploy/StatusStateIcon.tsx
@@ -1,103 +1,113 @@
-import { Popover, Avatar, Typography, Row, Col, Divider, Space } from "antd"
-import { CheckOutlined, CloseOutlined, StopOutlined, ExclamationCircleOutlined, ClockCircleOutlined } from "@ant-design/icons"
+import { Popover, Avatar, Typography, Row, Col, Divider, Space } from 'antd';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  StopOutlined,
+  ExclamationCircleOutlined,
+  ClockCircleOutlined,
+} from '@ant-design/icons';
 
-import { Status, StatusState } from "../../models"
+import { Status, StatusState } from '../../models';
 
-const colorSuccess = "#1a7f37"
-const colorFailure = "#cf222e"
+const colorSuccess = '#1a7f37';
+const colorFailure = '#cf222e';
 
-const { Text, Link } = Typography
+const { Text, Link } = Typography;
 
 interface StatusStateIconProps {
-	statuses: Status[]
+  statuses: Status[];
 }
 
-export default function StatusStateIcon(props: StatusStateIconProps): JSX.Element {
-	const states = props.statuses.map((status) => status.state)
-	const content: JSX.Element = (
-		<div style={{
-				width: "350px",
-				maxHeight: "200px",
-				overflow: "scroll"
-			}}
-		>
-			{props.statuses.map((status, idx) => {
-				return (
-					<Row key={idx}>
-						<Col span="12">
-							<Space>
-								{mapStateToIcon(status.state)}
-								<Avatar size="small" src={status.avatarUrl} shape="square"/>
-								<Text 
-									strong 
-									ellipsis
-									style={{
-										width: 100,
-									}}
-								>
-									{status.context}
-								</Text>
-							</Space>
-						</Col>
-						<Col span="11" style={{textAlign: "right"}}>
-							<Link href={status.targetUrl} target="_blank">Details</Link>
-						</Col>
-						{(idx !== props.statuses.length - 1)? 
-							<Divider style={{margin: "5px 0px"}}/> : null}
-					</Row>
-				)
-			})}
-		</div>
-	)
+export default function StatusStateIcon(
+  props: StatusStateIconProps
+): JSX.Element {
+  const states = props.statuses.map((status) => status.state);
+  const content: JSX.Element = (
+    <div
+      style={{
+        width: '350px',
+        maxHeight: '200px',
+        overflow: 'scroll',
+      }}
+    >
+      {props.statuses.map((status, idx) => {
+        return (
+          <Row key={idx}>
+            <Col span="12">
+              <Space>
+                {mapStateToIcon(status.state)}
+                <Avatar size="small" src={status.avatarUrl} shape="square" />
+                <Text
+                  strong
+                  ellipsis
+                  style={{
+                    width: 100,
+                  }}
+                >
+                  {status.context}
+                </Text>
+              </Space>
+            </Col>
+            <Col span="11" style={{ textAlign: 'right' }}>
+              <Link href={status.targetUrl} target="_blank">
+                Details
+              </Link>
+            </Col>
+            {idx !== props.statuses.length - 1 ? (
+              <Divider style={{ margin: '5px 0px' }} />
+            ) : null}
+          </Row>
+        );
+      })}
+    </div>
+  );
 
-	return (
-		<Popover 
-			title="Statuses" 
-			trigger="click"
-			content={content} 
-		>
-			{mapStateToIcon(mergeStatusStates(states))}
-		</Popover>
-	)
+  return (
+    <Popover title="Statuses" trigger="click" content={content}>
+      {mapStateToIcon(mergeStatusStates(states))}
+    </Popover>
+  );
 }
 
 function mapStateToIcon(state: StatusState): JSX.Element {
-	switch (state) {
-		case StatusState.Null:
-			return <></>
-		case StatusState.Pending:
-			return <ClockCircleOutlined />
-		case StatusState.Success:
-			return <CheckOutlined style={{color: colorSuccess}}/>
-		case StatusState.Failure:
-			return <CloseOutlined style={{color: colorFailure}}/>
-		case StatusState.Cancelled:
-			return <ExclamationCircleOutlined />
-		case StatusState.Skipped:
-			return <StopOutlined />
-		default:
-			return <ClockCircleOutlined />
-	}
+  switch (state) {
+    case StatusState.Null:
+      return <></>;
+    case StatusState.Pending:
+      return <ClockCircleOutlined />;
+    case StatusState.Success:
+      return <CheckOutlined style={{ color: colorSuccess }} />;
+    case StatusState.Failure:
+      return <CloseOutlined style={{ color: colorFailure }} />;
+    case StatusState.Cancelled:
+      return <ExclamationCircleOutlined />;
+    case StatusState.Skipped:
+      return <StopOutlined />;
+    default:
+      return <ClockCircleOutlined />;
+  }
 }
 
 function mergeStatusStates(states: StatusState[]): StatusState {
-	if (states.length === 0) {
-		return StatusState.Null
-	}
+  if (states.length === 0) {
+    return StatusState.Null;
+  }
 
-	// The state is failure if one of them is failure.
-	for (let idx = 0; idx < states.length; idx++) {
-		if (states[idx] === StatusState.Failure 
-			|| states[idx] === StatusState.Cancelled) {
-			return StatusState.Failure
-		}
-	}
+  // The state is failure if one of them is failure.
+  for (let idx = 0; idx < states.length; idx++) {
+    if (
+      states[idx] === StatusState.Failure ||
+      states[idx] === StatusState.Cancelled
+    ) {
+      return StatusState.Failure;
+    }
+  }
 
-	for (let idx = 0; idx < states.length; idx++) {
-		if (states[idx] === StatusState.Pending) {
-			return StatusState.Pending
-		}
-	}
+  for (let idx = 0; idx < states.length; idx++) {
+    if (states[idx] === StatusState.Pending) {
+      return StatusState.Pending;
+    }
+  }
 
-	return StatusState.Success
-}
\ No newline at end of file
+  return StatusState.Success;
+}
diff --git a/ui/src/views/repoDeploy/index.tsx b/ui/src/views/repoDeploy/index.tsx
index 467e1421..8937d609 100644
--- a/ui/src/views/repoDeploy/index.tsx
+++ b/ui/src/views/repoDeploy/index.tsx
@@ -1,248 +1,265 @@
-import { useEffect, useState } from "react";
-import { shallowEqual } from "react-redux";
-import { useParams } from "react-router-dom";
-import { PageHeader, Result, Button } from "antd";
-
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { DeploymentType, Branch, Commit, Tag, RequestStatus, Env } from "../../models";
-import { 
-    fetchConfig, 
-    repoDeploySlice, 
-    fetchCurrentDeploymentOfEnv,
-    fetchBranches, 
-    checkBranch,
-    addBranchManually, 
-    fetchCommits, 
-    checkCommit,
-    addCommitManually, 
-    fetchTags, 
-    checkTag,
-    addTagManually, 
-    searchCandidates,
-    fetchUser,
-    deploy
-} from "../../redux/repoDeploy"
-import DeployForm, { DeployFormProps,  Option} from "./DeployForm"
-import DynamicPayloadModal, { DynamicPayloadModalProps } from "./DynamicPayloadModal"
-
-const { actions } = repoDeploySlice
+import { useEffect, useState } from 'react';
+import { shallowEqual } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { PageHeader, Result, Button } from 'antd';
+
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import {
+  DeploymentType,
+  Branch,
+  Commit,
+  Tag,
+  RequestStatus,
+  Env,
+} from '../../models';
+import {
+  fetchConfig,
+  repoDeploySlice,
+  fetchCurrentDeploymentOfEnv,
+  fetchBranches,
+  checkBranch,
+  addBranchManually,
+  fetchCommits,
+  checkCommit,
+  addCommitManually,
+  fetchTags,
+  checkTag,
+  addTagManually,
+  searchCandidates,
+  fetchUser,
+  deploy,
+} from '../../redux/repoDeploy';
+import DeployForm, { DeployFormProps, Option } from './DeployForm';
+import DynamicPayloadModal, {
+  DynamicPayloadModalProps,
+} from './DynamicPayloadModal';
+
+const { actions } = repoDeploySlice;
 
 export default (): JSX.Element => {
-    const { namespace, name } = useParams<{
-        namespace: string
-        name: string
-    }>()
-
-    const { 
-        display,
-        config, 
-        envs, 
-        env,
-        currentDeployment,
-        branches, 
-        branchStatuses,
-        commits, 
-        commitStatuses,
-        tags, 
-        tagStatuses,
-        deploying } = useAppSelector(state => state.repoDeploy, shallowEqual)
-
-    const dispatch = useAppDispatch()
-
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(actions.init({namespace, name}))
-            await dispatch(fetchConfig())
-            await dispatch(actions.setDisplay(true))
-            await dispatch(fetchBranches())
-            await dispatch(fetchTags())
-            await dispatch(fetchUser())
-            await dispatch(searchCandidates(""))
-        }
-        f()
-        // eslint-disable-next-line 
-    }, [dispatch])
-
-    const onSelectEnv = (env: Env) => {
-        dispatch(actions.setEnv(env))
-        dispatch(fetchCurrentDeploymentOfEnv(env))
-    }
+  const { namespace, name } = useParams<{
+    namespace: string;
+    name: string;
+  }>();
 
-    const onChangeType = (type: DeploymentType) => {
-        dispatch(actions.setType(type))
-    }
+  const {
+    display,
+    config,
+    envs,
+    env,
+    currentDeployment,
+    branches,
+    branchStatuses,
+    commits,
+    commitStatuses,
+    tags,
+    tagStatuses,
+    deploying,
+  } = useAppSelector((state) => state.repoDeploy, shallowEqual);
 
-    const onSelectBranch = (branch: Branch) => {
-        dispatch(actions.setBranch(branch))
-        dispatch(checkBranch())
-        dispatch(fetchCommits())
-    }
+  const dispatch = useAppDispatch();
 
-    const onClickAddBranch = (option: Option) => {
-        dispatch(addBranchManually(option.value))
-    }
+  useEffect(() => {
+    const f = async () => {
+      await dispatch(actions.init({ namespace, name }));
+      await dispatch(fetchConfig());
+      await dispatch(actions.setDisplay(true));
+      await dispatch(fetchBranches());
+      await dispatch(fetchTags());
+      await dispatch(fetchUser());
+      await dispatch(searchCandidates(''));
+    };
+    f();
+    // eslint-disable-next-line
+  }, [dispatch]);
 
-    const onSelectCommit = (commit: Commit) => {
-        dispatch(actions.setCommit(commit))
-        dispatch(checkCommit())
-    }
+  const onSelectEnv = (env: Env) => {
+    dispatch(actions.setEnv(env));
+    dispatch(fetchCurrentDeploymentOfEnv(env));
+  };
 
-    const onClickAddCommit = (option: Option) => {
-        dispatch(addCommitManually(option.value))
-    }
+  const onChangeType = (type: DeploymentType) => {
+    dispatch(actions.setType(type));
+  };
 
-    const onSelectTag = (tag: Tag) => {
-        dispatch(actions.setTag(tag))
-        dispatch(checkTag())
-    }
+  const onSelectBranch = (branch: Branch) => {
+    dispatch(actions.setBranch(branch));
+    dispatch(checkBranch());
+    dispatch(fetchCommits());
+  };
 
-    const onClickAddTag = (option: Option) => {
-        dispatch(addTagManually(option.value))
-    }
+  const onClickAddBranch = (option: Option) => {
+    dispatch(addBranchManually(option.value));
+  };
 
-    const onClickDeploy = () => {
-        dispatch(deploy(null))
-    }
+  const onSelectCommit = (commit: Commit) => {
+    dispatch(actions.setCommit(commit));
+    dispatch(checkCommit());
+  };
 
-    const onClickDeployWithPayload = (values: any) => {
-        dispatch(deploy(values))
-    }
+  const onClickAddCommit = (option: Option) => {
+    dispatch(addCommitManually(option.value));
+  };
 
-    if (!display) {
-        return <div />
-    } 
-
-    if (!config) {
-        return (
-            <Result
-                status="warning"
-                title="There is no configuration file."
-                extra={[
-                    <Button type="primary" key="console" target="_blank" href="https://www.gitploy.io/docs/concepts/deploy.yml">
-                      Read Document
-                    </Button>,
-                    <Button type="link" key="link" target="_blank" href={`/link/${namespace}/${name}/config/new`}>
-                      New Configuration
-                    </Button>
-                ]}
-            />
-        )
-    }
+  const onSelectTag = (tag: Tag) => {
+    dispatch(actions.setTag(tag));
+    dispatch(checkTag());
+  };
+
+  const onClickAddTag = (option: Option) => {
+    dispatch(addTagManually(option.value));
+  };
+
+  const onClickDeploy = () => {
+    dispatch(deploy(null));
+  };
+
+  const onClickDeployWithPayload = (values: any) => {
+    dispatch(deploy(values));
+  };
+
+  if (!display) {
+    return <div />;
+  }
+
+  if (!config) {
     return (
-        <RepoDeploy 
-            envs={envs}
-            onSelectEnv={onSelectEnv}
-            onChangeType={onChangeType}
-            currentDeployment={currentDeployment}
-            branches={branches}
-            onSelectBranch={onSelectBranch}
-            onClickAddBranch={onClickAddBranch}
-            branchStatuses={branchStatuses}
-            commits={commits}
-            onSelectCommit={onSelectCommit}
-            onClickAddCommit={onClickAddCommit}
-            commitStatuses={commitStatuses}
-            tags={tags}
-            onSelectTag={onSelectTag}
-            onClickAddTag={onClickAddTag}
-            tagStatuses={tagStatuses}
-            deploying={deploying === RequestStatus.Pending}
-            onClickDeploy={onClickDeploy}
-            env={env}
-            onClickOk={onClickDeployWithPayload}
-        />
-    )
-}
+      <Result
+        status="warning"
+        title="There is no configuration file."
+        extra={[
+          <Button
+            type="primary"
+            key="console"
+            target="_blank"
+            href="https://www.gitploy.io/docs/concepts/deploy.yml"
+          >
+            Read Document
+          </Button>,
+          <Button
+            type="link"
+            key="link"
+            target="_blank"
+            href={`/link/${namespace}/${name}/config/new`}
+          >
+            New Configuration
+          </Button>,
+        ]}
+      />
+    );
+  }
+  return (
+    <RepoDeploy
+      envs={envs}
+      onSelectEnv={onSelectEnv}
+      onChangeType={onChangeType}
+      currentDeployment={currentDeployment}
+      branches={branches}
+      onSelectBranch={onSelectBranch}
+      onClickAddBranch={onClickAddBranch}
+      branchStatuses={branchStatuses}
+      commits={commits}
+      onSelectCommit={onSelectCommit}
+      onClickAddCommit={onClickAddCommit}
+      commitStatuses={commitStatuses}
+      tags={tags}
+      onSelectTag={onSelectTag}
+      onClickAddTag={onClickAddTag}
+      tagStatuses={tagStatuses}
+      deploying={deploying === RequestStatus.Pending}
+      onClickDeploy={onClickDeploy}
+      env={env}
+      onClickOk={onClickDeployWithPayload}
+    />
+  );
+};
 
-interface RepoDeployProps extends 
-    DeployFormProps,
-    Omit<DynamicPayloadModalProps, "visible" | "env" | "onClickCancel"> {
-    env?: Env
+interface RepoDeployProps
+  extends DeployFormProps,
+    Omit<DynamicPayloadModalProps, 'visible' | 'env' | 'onClickCancel'> {
+  env?: Env;
 }
 
 function RepoDeploy({
-    // Properities for the DeployForm component.
-    envs, 
-    onSelectEnv,
-    onChangeType,
-    currentDeployment,
-    branches,
-    onSelectBranch,
-    onClickAddBranch,
-    branchStatuses,
-    commits,
-    onSelectCommit,
-    onClickAddCommit,
-    commitStatuses,
-    tags,
-    onSelectTag,
-    onClickAddTag,
-    tagStatuses,
-    deploying,
-    onClickDeploy,
-    // Properties for the DynamicPayloadModal component.
-    env,
-    onClickOk,
+  // Properities for the DeployForm component.
+  envs,
+  onSelectEnv,
+  onChangeType,
+  currentDeployment,
+  branches,
+  onSelectBranch,
+  onClickAddBranch,
+  branchStatuses,
+  commits,
+  onSelectCommit,
+  onClickAddCommit,
+  commitStatuses,
+  tags,
+  onSelectTag,
+  onClickAddTag,
+  tagStatuses,
+  deploying,
+  onClickDeploy,
+  // Properties for the DynamicPayloadModal component.
+  env,
+  onClickOk,
 }: RepoDeployProps): JSX.Element {
+  const [payloadModalVisible, setPayloadModalVisible] = useState(false);
 
-    const [payloadModalVisible, setPayloadModalVisible] = useState(false);
-
-    const _onClickDeploy = () => {
-        if (env?.dynamicPayload?.enabled) {
-            setPayloadModalVisible(true)
-        } else {
-            onClickDeploy()
-        }
+  const _onClickDeploy = () => {
+    if (env?.dynamicPayload?.enabled) {
+      setPayloadModalVisible(true);
+    } else {
+      onClickDeploy();
     }
+  };
 
-    const _onClickOk = (values: any) => {
-        onClickOk(values)
-        setPayloadModalVisible(false)
-    }
+  const _onClickOk = (values: any) => {
+    onClickOk(values);
+    setPayloadModalVisible(false);
+  };
 
-    const onClickCancel = () => {
-        setPayloadModalVisible(false)
-    }
+  const onClickCancel = () => {
+    setPayloadModalVisible(false);
+  };
 
-    return (
-        <div>
-            <div>
-                <PageHeader
-                    title="Deploy"
-                />
-            </div>
-            <div style={{padding: "16px 0px"}}>
-                <DeployForm 
-                    envs={envs}
-                    onSelectEnv={onSelectEnv}
-                    onChangeType={onChangeType}
-                    currentDeployment={currentDeployment}
-                    branches={branches}
-                    onSelectBranch={onSelectBranch}
-                    onClickAddBranch={onClickAddBranch}
-                    branchStatuses={branchStatuses}
-                    commits={commits}
-                    onSelectCommit={onSelectCommit}
-                    onClickAddCommit={onClickAddCommit}
-                    commitStatuses={commitStatuses}
-                    tags={tags}
-                    onSelectTag={onSelectTag}
-                    onClickAddTag={onClickAddTag}
-                    tagStatuses={tagStatuses}
-                    deploying={deploying}
-                    onClickDeploy={_onClickDeploy} 
-                />
-                {(env)? 
-                    <DynamicPayloadModal
-                        visible={payloadModalVisible}
-                        env={env}
-                        onClickOk={_onClickOk}
-                        onClickCancel={onClickCancel}
-                    />
-                    :
-                    <></>
-                }
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div>
+      <div>
+        <PageHeader title="Deploy" />
+      </div>
+      <div style={{ padding: '16px 0px' }}>
+        <DeployForm
+          envs={envs}
+          onSelectEnv={onSelectEnv}
+          onChangeType={onChangeType}
+          currentDeployment={currentDeployment}
+          branches={branches}
+          onSelectBranch={onSelectBranch}
+          onClickAddBranch={onClickAddBranch}
+          branchStatuses={branchStatuses}
+          commits={commits}
+          onSelectCommit={onSelectCommit}
+          onClickAddCommit={onClickAddCommit}
+          commitStatuses={commitStatuses}
+          tags={tags}
+          onSelectTag={onSelectTag}
+          onClickAddTag={onClickAddTag}
+          tagStatuses={tagStatuses}
+          deploying={deploying}
+          onClickDeploy={_onClickDeploy}
+        />
+        {env ? (
+          <DynamicPayloadModal
+            visible={payloadModalVisible}
+            env={env}
+            onClickOk={_onClickOk}
+            onClickCancel={onClickCancel}
+          />
+        ) : (
+          <></>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/views/repoHome/ActivityLogs.tsx b/ui/src/views/repoHome/ActivityLogs.tsx
index 7c7d2117..87ca0ffe 100644
--- a/ui/src/views/repoHome/ActivityLogs.tsx
+++ b/ui/src/views/repoHome/ActivityLogs.tsx
@@ -1,40 +1,48 @@
-import { Timeline, Typography } from 'antd'
-import { SyncOutlined } from '@ant-design/icons'
-import moment from "moment"
+import { Timeline, Typography } from 'antd';
+import { SyncOutlined } from '@ant-design/icons';
+import moment from 'moment';
 
-import { Deployment, DeploymentStatusEnum } from "../../models"
-import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
-import UserAvatar from '../../components/UserAvatar'
-import DeploymentRefCode from '../../components/DeploymentRefCode'
-import { getStatusColor } from "../../components/partials"
+import { Deployment, DeploymentStatusEnum } from '../../models';
+import DeploymentStatusBadge from '../../components/DeploymentStatusBadge';
+import UserAvatar from '../../components/UserAvatar';
+import DeploymentRefCode from '../../components/DeploymentRefCode';
+import { getStatusColor } from '../../components/partials';
 
-const { Text } = Typography
+const { Text } = Typography;
 
 export interface ActivityLogsProps {
-    deployments: Deployment[]
+  deployments: Deployment[];
 }
 
-export default function ActivityLogs({ deployments }: ActivityLogsProps): JSX.Element {
-    return (
-        <Timeline>
-            {deployments.map((d, idx) => {
-                const dot = (d.status === DeploymentStatusEnum.Running)? 
-                    <SyncOutlined style={{color: "purple"}} spin />
-                    : 
-                    null
-                const avatar = <UserAvatar user={d.deployer} />
+export default function ActivityLogs({
+  deployments,
+}: ActivityLogsProps): JSX.Element {
+  return (
+    <Timeline>
+      {deployments.map((d, idx) => {
+        const dot =
+          d.status === DeploymentStatusEnum.Running ? (
+            <SyncOutlined style={{ color: 'purple' }} spin />
+          ) : null;
+        const avatar = <UserAvatar user={d.deployer} />;
 
-                return (
-                    <Timeline.Item key={idx} color={getStatusColor(d.status)} dot={dot}>
-                        <p>
-                            <Text strong>{d.env}</Text> <DeploymentRefCode deployment={d}/> <a href={`/${d.repo?.namespace}/${d.repo?.name}/deployments/${d.number}`}>• View detail #{d.number}</a>
-                        </p>
-                        <p>
-                            Deployed by {avatar} {moment(d.createdAt).fromNow()} <DeploymentStatusBadge deployment={d}/>
-                        </p>
-                    </Timeline.Item>
-                )
-            })}
-        </Timeline>
-    )
+        return (
+          <Timeline.Item key={idx} color={getStatusColor(d.status)} dot={dot}>
+            <p>
+              <Text strong>{d.env}</Text> <DeploymentRefCode deployment={d} />{' '}
+              <a
+                href={`/${d.repo?.namespace}/${d.repo?.name}/deployments/${d.number}`}
+              >
+                • View detail #{d.number}
+              </a>
+            </p>
+            <p>
+              Deployed by {avatar} {moment(d.createdAt).fromNow()}{' '}
+              <DeploymentStatusBadge deployment={d} />
+            </p>
+          </Timeline.Item>
+        );
+      })}
+    </Timeline>
+  );
 }
diff --git a/ui/src/views/repoHome/index.tsx b/ui/src/views/repoHome/index.tsx
index cec47a12..1fa99a73 100644
--- a/ui/src/views/repoHome/index.tsx
+++ b/ui/src/views/repoHome/index.tsx
@@ -1,122 +1,132 @@
-import { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { shallowEqual } from "react-redux";
-import { PageHeader, Select } from 'antd'
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { shallowEqual } from 'react-redux';
+import { PageHeader, Select } from 'antd';
 
-import { useAppSelector, useAppDispatch } from '../../redux/hooks'
-import { repoHomeSlice as slice, fetchEnvs, fetchDeployments, perPage } from '../../redux/repoHome'
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import {
+  repoHomeSlice as slice,
+  fetchEnvs,
+  fetchDeployments,
+  perPage,
+} from '../../redux/repoHome';
 
-import ActivityLogs, { ActivityLogsProps } from './ActivityLogs'
-import Spin from '../../components/Spin'
-import Pagination, { PaginationProps } from '../../components/Pagination'
+import ActivityLogs, { ActivityLogsProps } from './ActivityLogs';
+import Spin from '../../components/Spin';
+import Pagination, { PaginationProps } from '../../components/Pagination';
 
-const { Option } = Select
+const { Option } = Select;
 
 export default (): JSX.Element => {
-    const { namespace, name } = useParams<{
-        namespace: string,
-        name: string
-    }>()
+  const { namespace, name } = useParams<{
+    namespace: string;
+    name: string;
+  }>();
 
-    const {
-        loading,
-        deployments,
-        envs,
-        page,
-    } = useAppSelector(state => state.repoHome, shallowEqual)
+  const { loading, deployments, envs, page } = useAppSelector(
+    (state) => state.repoHome,
+    shallowEqual
+  );
 
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(slice.actions.init({namespace, name}))
-            await dispatch(fetchEnvs())
-            await dispatch(fetchDeployments())
-        }
-        f()
+  useEffect(() => {
+    const f = async () => {
+      await dispatch(slice.actions.init({ namespace, name }));
+      await dispatch(fetchEnvs());
+      await dispatch(fetchDeployments());
+    };
+    f();
+  }, [dispatch]);
 
-    }, [dispatch])
+  const onChangeEnv = (env: string) => {
+    dispatch(slice.actions.setEnv(env));
+    dispatch(fetchDeployments());
+  };
 
-    const onChangeEnv = (env: string) => {
-        dispatch(slice.actions.setEnv(env))
-        dispatch(fetchDeployments())
-    }
+  const onClickPrev = () => {
+    dispatch(slice.actions.decreasePage());
+    dispatch(fetchDeployments());
+  };
 
-    const onClickPrev = () => {
-        dispatch(slice.actions.decreasePage())
-        dispatch(fetchDeployments())
-    }
+  const onClickNext = () => {
+    dispatch(slice.actions.increasePage());
+    dispatch(fetchDeployments());
+  };
+  return (
+    <RepoHome
+      loading={loading}
+      deployments={deployments}
+      envs={envs}
+      onChangeEnv={onChangeEnv}
+      disabledPrev={page <= 1}
+      disabledNext={deployments.length < perPage}
+      onClickPrev={onClickPrev}
+      onClickNext={onClickNext}
+    />
+  );
+};
 
-    const onClickNext = () => {
-        dispatch(slice.actions.increasePage())
-        dispatch(fetchDeployments())
-    }
-    return (
-        <RepoHome
-            loading={loading}
-            deployments={deployments}
-            envs={envs}
-            onChangeEnv={onChangeEnv}
-            disabledPrev={page <= 1}
-            disabledNext={deployments.length < perPage}
-            onClickPrev={onClickPrev}
-            onClickNext={onClickNext}
-        />
-    )
-}
-
-interface RepoHomeProps extends ActivityLogsProps, PaginationProps{
-    loading: boolean
-    envs: string[]
-    onChangeEnv(env: string): void
+interface RepoHomeProps extends ActivityLogsProps, PaginationProps {
+  loading: boolean;
+  envs: string[];
+  onChangeEnv(env: string): void;
 }
 
 export function RepoHome({
-    // Deployments
-    loading,
-    deployments,
-    // Environment Selector
-    envs,
-    onChangeEnv,
-    // Pagination
-    disabledPrev,
-    disabledNext,
-    onClickNext,
-    onClickPrev,
+  // Deployments
+  loading,
+  deployments,
+  // Environment Selector
+  envs,
+  onChangeEnv,
+  // Pagination
+  disabledPrev,
+  disabledNext,
+  onClickNext,
+  onClickPrev,
 }: RepoHomeProps): JSX.Element {
-
-    return (
-        <div>
-            <div>
-                <PageHeader
-                    title="Activity Log"
-                    extra={[
-                        <Select key="1" style={{ width: 150}} defaultValue="" onChange={onChangeEnv}>
-                            <Option value="">All Environments</Option>
-                            {envs.map((env, idx) => {
-                                return <Option key={idx} value={env}>{env}</Option>
-                            })}
-                        </Select>,
-                    ]}
-                />
-            </div>
-            <div style={{marginTop: "30px", padding: "16px 24px"}}>
-                {(loading)? 
-                    <div style={{textAlign: "center"}}><Spin /></div> 
-                    :
-                    <ActivityLogs 
-                        deployments={deployments}
-                    />
-                }
-            </div>
-            <div style={{marginTop: "20px", textAlign: "center"}}>
-                <Pagination 
-                    disabledPrev={disabledPrev} 
-                    disabledNext={disabledNext} 
-                    onClickPrev={onClickPrev} 
-                    onClickNext={onClickNext} 
-                />
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div>
+      <div>
+        <PageHeader
+          title="Activity Log"
+          extra={[
+            <Select
+              key="1"
+              style={{ width: 150 }}
+              defaultValue=""
+              onChange={onChangeEnv}
+            >
+              <Option value="">All Environments</Option>
+              {envs.map((env, idx) => {
+                return (
+                  <Option key={idx} value={env}>
+                    {env}
+                  </Option>
+                );
+              })}
+            </Select>,
+          ]}
+        />
+      </div>
+      <div style={{ marginTop: '30px', padding: '16px 24px' }}>
+        {loading ? (
+          <div style={{ textAlign: 'center' }}>
+            <Spin />
+          </div>
+        ) : (
+          <ActivityLogs deployments={deployments} />
+        )}
+      </div>
+      <div style={{ marginTop: '20px', textAlign: 'center' }}>
+        <Pagination
+          disabledPrev={disabledPrev}
+          disabledNext={disabledNext}
+          onClickPrev={onClickPrev}
+          onClickNext={onClickNext}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/views/repoLock/LockList.tsx b/ui/src/views/repoLock/LockList.tsx
index 1bd6a7fc..bb11aa14 100644
--- a/ui/src/views/repoLock/LockList.tsx
+++ b/ui/src/views/repoLock/LockList.tsx
@@ -1,87 +1,100 @@
-import { 
-    List, 
-    Button,
-    DatePicker,
-} from "antd"
-import { LockOutlined, UnlockOutlined } from "@ant-design/icons"
-import moment from 'moment'
+import { List, Button, DatePicker } from 'antd';
+import { LockOutlined, UnlockOutlined } from '@ant-design/icons';
+import moment from 'moment';
 
-import { Env, Lock } from "../../models"
-import UserAvatar from '../../components/UserAvatar'
+import { Env, Lock } from '../../models';
+import UserAvatar from '../../components/UserAvatar';
 
 export interface LockListProps {
-    envs: Env[]
-    locks: Lock[]
-    onClickLock(env: string): void
-    onClickUnlock(env: string): void
-    onChangeExpiredAt(env: string, expiredAt: Date): void
+  envs: Env[];
+  locks: Lock[];
+  onClickLock(env: string): void;
+  onClickUnlock(env: string): void;
+  onChangeExpiredAt(env: string, expiredAt: Date): void;
 }
 
 export default function LockList(props: LockListProps): JSX.Element {
-    return (
-        <List
-            dataSource={props.envs}
-            renderItem={(env) => {
-                const lock = props.locks.find((lock) => lock.env === env.name)
+  return (
+    <List
+      dataSource={props.envs}
+      renderItem={(env) => {
+        const lock = props.locks.find((lock) => lock.env === env.name);
 
-                return (lock)? 
-                    <List.Item
-                        actions={[
-                            <DatePicker 
-                                placeholder="Set up auto unlock"
-                                allowClear={false}
-                                showNow={false}
-                                showTime={{defaultValue: moment("00:00:00", "HH:mm:ss")}}
-                                value={(lock.expiredAt)? moment(lock.expiredAt) : null}
-                                onChange={(date) => {
-                                    if (date) {
-                                        props.onChangeExpiredAt(env.name, new Date(date.format()))
-                                    }
-                                }}
-                                style={{width: 170}}
-                            />
-                            ,
-                            <Button danger
-                                onClick={() => {props.onClickUnlock(env.name)}}
-                            >
-                                UNLOCK
-                            </Button>
-                        ]}
-                    >
-                        <List.Item.Meta 
-                            title={<span>{env.name.toUpperCase()} <LockOutlined /></span>}
-                            description={<LockDescription lock={lock}/>}
-                        />
-                    </List.Item>:
-                    <List.Item
-                        actions={[
-                            <Button danger
-                                type="primary"
-                                onClick={() => {props.onClickLock(env.name)}}
-                            >
-                                LOCK
-                            </Button>,
-                        ]}
-                    >
-                        <List.Item.Meta 
-                            title={<span>{env.name.toUpperCase()} <UnlockOutlined /></span>}
-                            description={<LockDescription lock={lock}/>}
-                        />
-                    </List.Item>
-            }}
-        />
-    )
+        return lock ? (
+          <List.Item
+            actions={[
+              <DatePicker
+                placeholder="Set up auto unlock"
+                allowClear={false}
+                showNow={false}
+                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
+                value={lock.expiredAt ? moment(lock.expiredAt) : null}
+                onChange={(date) => {
+                  if (date) {
+                    props.onChangeExpiredAt(env.name, new Date(date.format()));
+                  }
+                }}
+                style={{ width: 170 }}
+              />,
+              <Button
+                danger
+                onClick={() => {
+                  props.onClickUnlock(env.name);
+                }}
+              >
+                UNLOCK
+              </Button>,
+            ]}
+          >
+            <List.Item.Meta
+              title={
+                <span>
+                  {env.name.toUpperCase()} <LockOutlined />
+                </span>
+              }
+              description={<LockDescription lock={lock} />}
+            />
+          </List.Item>
+        ) : (
+          <List.Item
+            actions={[
+              <Button
+                danger
+                type="primary"
+                onClick={() => {
+                  props.onClickLock(env.name);
+                }}
+              >
+                LOCK
+              </Button>,
+            ]}
+          >
+            <List.Item.Meta
+              title={
+                <span>
+                  {env.name.toUpperCase()} <UnlockOutlined />
+                </span>
+              }
+              description={<LockDescription lock={lock} />}
+            />
+          </List.Item>
+        );
+      }}
+    />
+  );
 }
 
 interface LockDescriptionProps {
-    lock?: Lock
+  lock?: Lock;
 }
 
 function LockDescription(props: LockDescriptionProps) {
-
-    return (
-        (props.lock)?
-            <span style={{color: "black"}}>Locked by <UserAvatar user={props.lock.user} />  {moment(props.lock.createdAt).fromNow()}</span>:
-            <></>
-    )
-}
\ No newline at end of file
+  return props.lock ? (
+    <span style={{ color: 'black' }}>
+      Locked by <UserAvatar user={props.lock.user} />{' '}
+      {moment(props.lock.createdAt).fromNow()}
+    </span>
+  ) : (
+    <></>
+  );
+}
diff --git a/ui/src/views/repoLock/index.tsx b/ui/src/views/repoLock/index.tsx
index 40fa0b05..6373f736 100644
--- a/ui/src/views/repoLock/index.tsx
+++ b/ui/src/views/repoLock/index.tsx
@@ -1,100 +1,121 @@
-import { useEffect } from "react";
-import { shallowEqual } from "react-redux";
-import { useParams } from "react-router-dom";
-import { PageHeader, Button } from 'antd'
-import { Result } from "antd"
+import { useEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { PageHeader, Button } from 'antd';
+import { Result } from 'antd';
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { fetchConfig, listLocks, lock, unlock, repoLockSlice as slice, setAutoUnlock} from "../../redux/repoLock"
-import LockList, { LockListProps } from "./LockList"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import {
+  fetchConfig,
+  listLocks,
+  lock,
+  unlock,
+  repoLockSlice as slice,
+  setAutoUnlock,
+} from '../../redux/repoLock';
+import LockList, { LockListProps } from './LockList';
 
 export default (): JSX.Element => {
-    const { namespace, name } = useParams<{
-        namespace: string
-        name: string
-    }>()
+  const { namespace, name } = useParams<{
+    namespace: string;
+    name: string;
+  }>();
 
-    const { display, config, locks } = useAppSelector(state => state.repoLock, shallowEqual)
+  const { display, config, locks } = useAppSelector(
+    (state) => state.repoLock,
+    shallowEqual
+  );
 
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(slice.actions.init({namespace, name}))
-            await dispatch(fetchConfig())
-            await dispatch(listLocks())
-            await dispatch(slice.actions.setDisplay(true))
-        }
-        f()
-        // eslint-disable-next-line 
-    }, [dispatch])
+  useEffect(() => {
+    const f = async () => {
+      await dispatch(slice.actions.init({ namespace, name }));
+      await dispatch(fetchConfig());
+      await dispatch(listLocks());
+      await dispatch(slice.actions.setDisplay(true));
+    };
+    f();
+    // eslint-disable-next-line
+  }, [dispatch]);
 
-    const onClickLock = (env: string) => {
-        dispatch(lock(env))
-    }
+  const onClickLock = (env: string) => {
+    dispatch(lock(env));
+  };
 
-    const onClickUnlock = (env: string) => {
-        dispatch(unlock(env))
-    }
+  const onClickUnlock = (env: string) => {
+    dispatch(unlock(env));
+  };
 
-    const onChangeExpiredAt = (env: string, expiredAt: Date) => {
-        dispatch(setAutoUnlock({env, expiredAt}))
-    }
+  const onChangeExpiredAt = (env: string, expiredAt: Date) => {
+    dispatch(setAutoUnlock({ env, expiredAt }));
+  };
 
-    if (!display) {
-        return <></>
-    } 
-
-    if (!config) {
-        return (
-            <Result
-                status="warning"
-                title="There is no configuration file."
-                extra={[
-                    <Button type="primary" key="console" target="_blank" href="https://www.gitploy.io/docs/concepts/deploy.yml">
-                      Read Document
-                    </Button>,
-                    <Button type="link" key="link" target="_blank" href={`/link/${namespace}/${name}/config/new`}>
-                      New Configuration
-                    </Button>
-                ]}
-            />
-        )
-    }
+  if (!display) {
+    return <></>;
+  }
 
+  if (!config) {
     return (
-        <RepoLock 
-            envs={(config)? config.envs : []}
-            locks={locks}
-            onClickLock={onClickLock}
-            onClickUnlock={onClickUnlock}
-            onChangeExpiredAt={onChangeExpiredAt}
-        />
-    )
-}
+      <Result
+        status="warning"
+        title="There is no configuration file."
+        extra={[
+          <Button
+            type="primary"
+            key="console"
+            target="_blank"
+            href="https://www.gitploy.io/docs/concepts/deploy.yml"
+          >
+            Read Document
+          </Button>,
+          <Button
+            type="link"
+            key="link"
+            target="_blank"
+            href={`/link/${namespace}/${name}/config/new`}
+          >
+            New Configuration
+          </Button>,
+        ]}
+      />
+    );
+  }
+
+  return (
+    <RepoLock
+      envs={config ? config.envs : []}
+      locks={locks}
+      onClickLock={onClickLock}
+      onClickUnlock={onClickUnlock}
+      onChangeExpiredAt={onChangeExpiredAt}
+    />
+  );
+};
 
 interface RepoLockProps extends LockListProps {}
 
 function RepoLock({
-    envs,
-    locks,
-    onChangeExpiredAt,
-    onClickLock,
-    onClickUnlock
+  envs,
+  locks,
+  onChangeExpiredAt,
+  onClickLock,
+  onClickUnlock,
 }: RepoLockProps): JSX.Element {
-
-    return <div>
-        <div>
-            <PageHeader title="Lock" subTitle="Lock the environment."/>
-        </div>
-        <div style={{padding: "16px 24px"}}>
-            <LockList
-                envs={envs}
-                locks={locks}
-                onClickLock={onClickLock}
-                onClickUnlock={onClickUnlock}
-                onChangeExpiredAt={onChangeExpiredAt}
-            />
-        </div>
+  return (
+    <div>
+      <div>
+        <PageHeader title="Lock" subTitle="Lock the environment." />
+      </div>
+      <div style={{ padding: '16px 24px' }}>
+        <LockList
+          envs={envs}
+          locks={locks}
+          onClickLock={onClickLock}
+          onClickUnlock={onClickUnlock}
+          onChangeExpiredAt={onChangeExpiredAt}
+        />
+      </div>
     </div>
-}
\ No newline at end of file
+  );
+}
diff --git a/ui/src/views/repoRollback/RollbackForm.tsx b/ui/src/views/repoRollback/RollbackForm.tsx
index 95269d01..a3578185 100644
--- a/ui/src/views/repoRollback/RollbackForm.tsx
+++ b/ui/src/views/repoRollback/RollbackForm.tsx
@@ -1,102 +1,110 @@
-import { Form, Select, Button, Avatar } from 'antd'
-import moment from 'moment'
+import { Form, Select, Button, Avatar } from 'antd';
+import moment from 'moment';
 
-import { Deployment, Env } from "../../models"
-import DeploymentRefCode from '../../components/DeploymentRefCode'
+import { Deployment, Env } from '../../models';
+import DeploymentRefCode from '../../components/DeploymentRefCode';
 
 // TODO: Remove the set functions and
 // change it so that the component returns a value when submitting.
 export interface RollbackFormProps {
-    envs: Env[]
-    onSelectEnv(env: Env): void
-    deployments: Deployment[]
-    onSelectDeployment(deployment: Deployment): void
-    onClickRollback(): void
-    deploying: boolean
+  envs: Env[];
+  onSelectEnv(env: Env): void;
+  deployments: Deployment[];
+  onSelectDeployment(deployment: Deployment): void;
+  onClickRollback(): void;
+  deploying: boolean;
 }
 
 export default function RollbackForm(props: RollbackFormProps): JSX.Element {
-    const layout = {
-      labelCol: { span: 5},
-      wrapperCol: { span: 16 },
-    };
+  const layout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 16 },
+  };
 
-    const selectLayout = {
-        ...layout,
-        wrapperCol: {span: 10}
-    }
+  const selectLayout = {
+    ...layout,
+    wrapperCol: { span: 10 },
+  };
 
-    const submitLayout = {
-      wrapperCol: { offset: 5, span: 16 },
-    };
+  const submitLayout = {
+    wrapperCol: { offset: 5, span: 16 },
+  };
 
-    const onSelectEnv = (value: string) => {
-        const env = props.envs.find((e) => e.name === value)
-        if (env === undefined) throw new Error("The deployment doesn't exist.")
+  const onSelectEnv = (value: string) => {
+    const env = props.envs.find((e) => e.name === value);
+    if (env === undefined) throw new Error("The deployment doesn't exist.");
 
-        props.onSelectEnv(env)
-    }
+    props.onSelectEnv(env);
+  };
 
-    const onSelectDeployment = (id: number) => {
-        const deployment = props.deployments.find((d) => (d.id === id))
-        if (deployment === undefined) throw new Error("The deployment doesn't exist.")
+  const onSelectDeployment = (id: number) => {
+    const deployment = props.deployments.find((d) => d.id === id);
+    if (deployment === undefined)
+      throw new Error("The deployment doesn't exist.");
 
-        props.onSelectDeployment(deployment)
-    }
-    
-    const onFinish = () => {
-        props.onClickRollback()
-    }
+    props.onSelectDeployment(deployment);
+  };
 
-    return (
-        <Form
-            name="rollback"
-            onFinish={onFinish} >
-            <Form.Item
-                label="Environment"
-                name="environment"
-                {...selectLayout}
-                rules={[{required: true}]} >
-                <Select 
-                    onSelect={onSelectEnv}
-                    placeholder="Select target environment">
-                        {props.envs.map((env, idx) => {
-                            return <Select.Option key={idx} value={env.name}>{env.name}</Select.Option>
-                        })}
-                </Select>
-            </Form.Item>
-            <Form.Item
-                label="Deployment"
-                name="deployment"
-                {...layout} 
-                rules={[{required: true}]} >
-                <Select 
-                    onSelect={onSelectDeployment}
-                    placeholder="Select the deployment">
-                        {props.deployments.map((d, idx) => {
-                            let option: React.ReactElement
+  const onFinish = () => {
+    props.onClickRollback();
+  };
 
-                            if (d.deployer) {
-                                option = <Select.Option key={idx} value={d.id}>
-                                   #{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}>
-                                   #{d.number} - <DeploymentRefCode deployment={d}/> deployed {moment(d.createdAt).fromNow()}
-                                </Select.Option>
-                            }
-                            return option
-                        })}
-                </Select>
-            </Form.Item>
-            <Form.Item {...submitLayout}>
-                <Button 
-                    loading={props.deploying}
-                    type="primary" 
-                    htmlType="submit">
-                  Submit
-                </Button>
-            </Form.Item>
-        </Form>
-    )
-}
\ No newline at end of file
+  return (
+    <Form name="rollback" onFinish={onFinish}>
+      <Form.Item
+        label="Environment"
+        name="environment"
+        {...selectLayout}
+        rules={[{ required: true }]}
+      >
+        <Select onSelect={onSelectEnv} placeholder="Select target environment">
+          {props.envs.map((env, idx) => {
+            return (
+              <Select.Option key={idx} value={env.name}>
+                {env.name}
+              </Select.Option>
+            );
+          })}
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label="Deployment"
+        name="deployment"
+        {...layout}
+        rules={[{ required: true }]}
+      >
+        <Select
+          onSelect={onSelectDeployment}
+          placeholder="Select the deployment"
+        >
+          {props.deployments.map((d, idx) => {
+            let option: React.ReactElement;
+
+            if (d.deployer) {
+              option = (
+                <Select.Option key={idx} value={d.id}>
+                  #{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}>
+                  #{d.number} - <DeploymentRefCode deployment={d} /> deployed{' '}
+                  {moment(d.createdAt).fromNow()}
+                </Select.Option>
+              );
+            }
+            return option;
+          })}
+        </Select>
+      </Form.Item>
+      <Form.Item {...submitLayout}>
+        <Button loading={props.deploying} type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
diff --git a/ui/src/views/repoRollback/index.tsx b/ui/src/views/repoRollback/index.tsx
index 99ebdbee..e026e793 100644
--- a/ui/src/views/repoRollback/index.tsx
+++ b/ui/src/views/repoRollback/index.tsx
@@ -1,127 +1,134 @@
-import { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { PageHeader, Result, Button } from 'antd'
-import { shallowEqual } from "react-redux";
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { PageHeader, Result, Button } from 'antd';
+import { shallowEqual } from 'react-redux';
 
-import { useAppDispatch, useAppSelector } from "../../redux/hooks"
-import { 
-    repoRollbackSlice, 
-    fetchConfig, 
-    fetchDeployments, 
-    searchCandidates, 
-    fetchUser,
-    rollback,
-} from "../../redux/repoRollback"
-import { Deployment, RequestStatus, Env } from "../../models"
-import RollbackForm, { RollbackFormProps } from "./RollbackForm"
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import {
+  repoRollbackSlice,
+  fetchConfig,
+  fetchDeployments,
+  searchCandidates,
+  fetchUser,
+  rollback,
+} from '../../redux/repoRollback';
+import { Deployment, RequestStatus, Env } from '../../models';
+import RollbackForm, { RollbackFormProps } from './RollbackForm';
 
-const { actions } = repoRollbackSlice
+const { actions } = repoRollbackSlice;
 
-export default ():JSX.Element => {
-    const { namespace, name } = useParams<{
-        namespace: string
-        name: string
-    }>()
+export default (): JSX.Element => {
+  const { namespace, name } = useParams<{
+    namespace: string;
+    name: string;
+  }>();
 
-    const {
-        display,
-        config,
-        envs,
-        deployments, 
-        deploying 
-    } = useAppSelector(state => state.repoRollback, shallowEqual)
+  const { display, config, envs, deployments, deploying } = useAppSelector(
+    (state) => state.repoRollback,
+    shallowEqual
+  );
 
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(actions.init({namespace, name}))
-            await dispatch(fetchConfig())
-            await dispatch(actions.setDisplay(true))
-            await dispatch(fetchUser())
-            await dispatch(searchCandidates(""))
-        }
-        f()
-        // eslint-disable-next-line
-    }, [dispatch])
+  useEffect(() => {
+    const f = async () => {
+      await dispatch(actions.init({ namespace, name }));
+      await dispatch(fetchConfig());
+      await dispatch(actions.setDisplay(true));
+      await dispatch(fetchUser());
+      await dispatch(searchCandidates(''));
+    };
+    f();
+    // eslint-disable-next-line
+  }, [dispatch]);
 
-    const onSelectEnv = (env: Env) => {
-        dispatch(actions.setEnv(env))
-        dispatch(fetchDeployments())
-    }
+  const onSelectEnv = (env: Env) => {
+    dispatch(actions.setEnv(env));
+    dispatch(fetchDeployments());
+  };
 
-    const onSelectDeployment = (deployment: Deployment) => {
-        dispatch(actions.setDeployment(deployment))
-    }
+  const onSelectDeployment = (deployment: Deployment) => {
+    dispatch(actions.setDeployment(deployment));
+  };
 
-    const onClickRollback = () => {
-        const f = async () => {
-            await dispatch(rollback())
-        }
-        f()
-    }
+  const onClickRollback = () => {
+    const f = async () => {
+      await dispatch(rollback());
+    };
+    f();
+  };
 
-    if (!display) {
-        return <></>
-    } 
-    
-    if (!config) {
-        return (
-            <Result
-                status="warning"
-                title="There is no configuration file."
-                extra={[
-                    <Button type="primary" key="console" target="_blank" href="https://www.gitploy.io/docs/concepts/deploy.yml">
-                      Read Document
-                    </Button>,
-                    <Button type="link" key="link" target="_blank" href={`/link/${namespace}/${name}/config/new`}>
-                      New Configuration
-                    </Button>
-                ]}
-            />
-        )
-    }
+  if (!display) {
+    return <></>;
+  }
 
+  if (!config) {
     return (
-        <RepoRollback 
-            envs={envs}
-            onSelectEnv={onSelectEnv}
-            deployments={deployments}
-            onSelectDeployment={onSelectDeployment}
-            onClickRollback={onClickRollback}
-            deploying={deploying === RequestStatus.Pending}
-        />
-    )
-}
+      <Result
+        status="warning"
+        title="There is no configuration file."
+        extra={[
+          <Button
+            type="primary"
+            key="console"
+            target="_blank"
+            href="https://www.gitploy.io/docs/concepts/deploy.yml"
+          >
+            Read Document
+          </Button>,
+          <Button
+            type="link"
+            key="link"
+            target="_blank"
+            href={`/link/${namespace}/${name}/config/new`}
+          >
+            New Configuration
+          </Button>,
+        ]}
+      />
+    );
+  }
+
+  return (
+    <RepoRollback
+      envs={envs}
+      onSelectEnv={onSelectEnv}
+      deployments={deployments}
+      onSelectDeployment={onSelectDeployment}
+      onClickRollback={onClickRollback}
+      deploying={deploying === RequestStatus.Pending}
+    />
+  );
+};
 
 interface RepoRollbackProps extends RollbackFormProps {}
 
 function RepoRollback({
-    envs,
-    onSelectEnv,
-    deployments,
-    onSelectDeployment,
-    onClickRollback,
-    deploying
+  envs,
+  onSelectEnv,
+  deployments,
+  onSelectDeployment,
+  onClickRollback,
+  deploying,
 }: RepoRollbackProps): JSX.Element {
-
-    return (
-        <div>
-            <div>
-                <PageHeader
-                    title="Rollback"
-                    subTitle="Restore to a previous deployment."/>
-            </div>
-            <div style={{padding: "16px 0px"}}>
-                <RollbackForm 
-                    envs={envs}
-                    onSelectEnv={onSelectEnv}
-                    deployments={deployments}
-                    onSelectDeployment={onSelectDeployment}
-                    onClickRollback={onClickRollback}
-                    deploying={deploying} 
-                />
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div>
+      <div>
+        <PageHeader
+          title="Rollback"
+          subTitle="Restore to a previous deployment."
+        />
+      </div>
+      <div style={{ padding: '16px 0px' }}>
+        <RollbackForm
+          envs={envs}
+          onSelectEnv={onSelectEnv}
+          deployments={deployments}
+          onSelectDeployment={onSelectDeployment}
+          onClickRollback={onClickRollback}
+          deploying={deploying}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/views/repoSettings/SettingsForm.tsx b/ui/src/views/repoSettings/SettingsForm.tsx
index 7460e70b..815a546f 100644
--- a/ui/src/views/repoSettings/SettingsForm.tsx
+++ b/ui/src/views/repoSettings/SettingsForm.tsx
@@ -1,96 +1,77 @@
-import { Form, Input, Button, Space, Typography } from "antd"
-import { useState } from "react"
+import { Form, Input, Button, Space, Typography } from 'antd';
+import { useState } from 'react';
 
 export interface SettingFormProps {
-    configLink: string
-    initialValues?: SettingFormValues
-    onClickFinish(values: SettingFormValues): void
-    onClickDeactivate(): void
+  configLink: string;
+  initialValues?: SettingFormValues;
+  onClickFinish(values: SettingFormValues): void;
+  onClickDeactivate(): void;
 }
 
 export interface SettingFormValues {
-    name: string
-    config_path: string
+  name: string;
+  config_path: string;
 }
 
 export default function SettingForm({
-    configLink,
-    initialValues,
-    onClickFinish,
-    onClickDeactivate,
+  configLink,
+  initialValues,
+  onClickFinish,
+  onClickDeactivate,
 }: SettingFormProps): JSX.Element {
-    const [saving, setSaving] = useState(false) 
+  const [saving, setSaving] = useState(false);
 
-    const layout = {
-      labelCol: { span: 5},
-      wrapperCol: { span: 12 },
-    }
+  const layout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 12 },
+  };
 
-    const submitLayout = {
-      wrapperCol: { offset: 5, span: 12 },
-    }
+  const submitLayout = {
+    wrapperCol: { offset: 5, span: 12 },
+  };
 
-    const onFinish = (values: any) => {
-        setSaving(true)
-        onClickFinish(values)
-        setSaving(false)
-    }
+  const onFinish = (values: any) => {
+    setSaving(true);
+    onClickFinish(values);
+    setSaving(false);
+  };
 
-    return (
-        <Form
-            name="setting"
-            initialValues={initialValues}
-            onFinish={onFinish}
-        >
-            <Form.Item
-                label="Name"
-                name="name"
-                {...layout}
-                rules={[{required: true}]}
-            >
-                <Input />
-            </Form.Item>
-            <Form.Item
-                label="Config"
-                {...layout}
-            >
-                <Space>
-                    <Form.Item
-                        name="config_path"
-                        rules={[{required: true}]}
-                        noStyle
-                    >
-                        <Input />
-                    </Form.Item>
-                    <Typography.Link target="_blank" href={configLink}>
-                        Link
-                    </Typography.Link>
-                </Space>
-            </Form.Item>
-            <Form.Item {...submitLayout}>
-                <Form.Item noStyle>
-                    <Button 
-                        loading={saving}
-                        type="primary" 
-                        htmlType="submit"
-                    >
-                        Submit
-                    </Button>
-                </Form.Item>
-            </Form.Item>
-            <Form.Item {...submitLayout}>
-                <Form.Item noStyle>
-                    <Space>
-                        <Button
-                            danger
-                            type="primary"
-                            onClick={onClickDeactivate}
-                        >
-                            DEACTIVATE
-                        </Button>
-                    </Space>
-                </Form.Item>
-            </Form.Item>
-        </Form>
-    )
-}
\ No newline at end of file
+  return (
+    <Form name="setting" initialValues={initialValues} onFinish={onFinish}>
+      <Form.Item
+        label="Name"
+        name="name"
+        {...layout}
+        rules={[{ required: true }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item label="Config" {...layout}>
+        <Space>
+          <Form.Item name="config_path" rules={[{ required: true }]} noStyle>
+            <Input />
+          </Form.Item>
+          <Typography.Link target="_blank" href={configLink}>
+            Link
+          </Typography.Link>
+        </Space>
+      </Form.Item>
+      <Form.Item {...submitLayout}>
+        <Form.Item noStyle>
+          <Button loading={saving} type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form.Item>
+      <Form.Item {...submitLayout}>
+        <Form.Item noStyle>
+          <Space>
+            <Button danger type="primary" onClick={onClickDeactivate}>
+              DEACTIVATE
+            </Button>
+          </Space>
+        </Form.Item>
+      </Form.Item>
+    </Form>
+  );
+}
diff --git a/ui/src/views/repoSettings/index.tsx b/ui/src/views/repoSettings/index.tsx
index 17676b67..2eb8f2a0 100644
--- a/ui/src/views/repoSettings/index.tsx
+++ b/ui/src/views/repoSettings/index.tsx
@@ -1,81 +1,84 @@
-import { useEffect  } from "react";
-import { useParams } from "react-router-dom";
-import { shallowEqual } from "react-redux";
-import { PageHeader } from "antd"
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { shallowEqual } from 'react-redux';
+import { PageHeader } from 'antd';
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { save, deactivate } from "../../redux/repoSettings"
-import { init } from "../../redux/repoSettings"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import { save, deactivate } from '../../redux/repoSettings';
+import { init } from '../../redux/repoSettings';
 
-import SettingsForm, { SettingFormProps, SettingFormValues } from "./SettingsForm"
+import SettingsForm, {
+  SettingFormProps,
+  SettingFormValues,
+} from './SettingsForm';
 
 export default (): JSX.Element => {
-    const { namespace, name } = useParams<{
-        namespace: string
-        name: string
-    }>()
+  const { namespace, name } = useParams<{
+    namespace: string;
+    name: string;
+  }>();
 
-    const { 
-        repo 
-    } = useAppSelector(state => state.repoSettings, shallowEqual)
+  const { repo } = useAppSelector((state) => state.repoSettings, shallowEqual);
 
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-    useEffect(() => {
-        const f = async () => {
-            await dispatch(init({namespace, name}))
-        }
-        f()
-        // eslint-disable-next-line
-    }, [dispatch])
+  useEffect(() => {
+    const f = async () => {
+      await dispatch(init({ namespace, name }));
+    };
+    f();
+    // eslint-disable-next-line
+  }, [dispatch]);
 
-    const onClickFinish = (values: SettingFormValues) => {
-        const f = async () => { await dispatch(save(values)) }
-        f()
-    }
+  const onClickFinish = (values: SettingFormValues) => {
+    const f = async () => {
+      await dispatch(save(values));
+    };
+    f();
+  };
 
-    const onClickDeactivate = () => {
-        dispatch(deactivate())
-    }
+  const onClickDeactivate = () => {
+    dispatch(deactivate());
+  };
 
-    if (!repo) {
-        return (<></>)
-    }
+  if (!repo) {
+    return <></>;
+  }
 
-    return (
-        <RepoSettings 
-            configLink={`/link/${repo.namespace}/${repo.name}/config`}
-            initialValues={{
-                name: repo.name,
-                config_path: repo.configPath,
-            }}
-            onClickFinish={onClickFinish}
-            onClickDeactivate={onClickDeactivate}
-        />
-    )
-}
+  return (
+    <RepoSettings
+      configLink={`/link/${repo.namespace}/${repo.name}/config`}
+      initialValues={{
+        name: repo.name,
+        config_path: repo.configPath,
+      }}
+      onClickFinish={onClickFinish}
+      onClickDeactivate={onClickDeactivate}
+    />
+  );
+};
 
 interface RepoSettingsProps extends SettingFormProps {}
 
 function RepoSettings({
-    configLink,
-    initialValues,
-    onClickFinish,
-    onClickDeactivate,
+  configLink,
+  initialValues,
+  onClickFinish,
+  onClickDeactivate,
 }: RepoSettingsProps): JSX.Element {
-    return (
-        <div>
-            <div>
-                <PageHeader title="Settings"/>
-            </div>
-            <div>
-                <SettingsForm 
-                    configLink={configLink}
-                    initialValues={initialValues}
-                    onClickFinish={onClickFinish}
-                    onClickDeactivate={onClickDeactivate}
-                />
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div>
+      <div>
+        <PageHeader title="Settings" />
+      </div>
+      <div>
+        <SettingsForm
+          configLink={configLink}
+          initialValues={initialValues}
+          onClickFinish={onClickFinish}
+          onClickDeactivate={onClickDeactivate}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/views/settings/SlackDescriptions.tsx b/ui/src/views/settings/SlackDescriptions.tsx
index ccc14d7d..52bbb4ff 100644
--- a/ui/src/views/settings/SlackDescriptions.tsx
+++ b/ui/src/views/settings/SlackDescriptions.tsx
@@ -1,23 +1,29 @@
-import { Button, Descriptions } from "antd"
+import { Button, Descriptions } from 'antd';
 
-import { User } from "../../models"
+import { User } from '../../models';
 
 export interface SlackDescriptionsProps {
-    user?: User
+  user?: User;
 }
 
 export default function SlackDescriptions({
-    user,
+  user,
 }: SlackDescriptionsProps): JSX.Element {
-    const connected = (user?.chatUser)? true : false
+  const connected = user?.chatUser ? true : false;
 
-    return (
-        <Descriptions title="Slack">
-            <Descriptions.Item>
-                {(connected)? 
-                    <Button href="/slack/signout" type="primary" danger>DISCONNECTED</Button>:
-                    <Button href="/slack/" type="primary">CONNECT</Button>}
-            </Descriptions.Item>
-        </Descriptions>
-    )
-}
\ No newline at end of file
+  return (
+    <Descriptions title="Slack">
+      <Descriptions.Item>
+        {connected ? (
+          <Button href="/slack/signout" type="primary" danger>
+            DISCONNECTED
+          </Button>
+        ) : (
+          <Button href="/slack/" type="primary">
+            CONNECT
+          </Button>
+        )}
+      </Descriptions.Item>
+    </Descriptions>
+  );
+}
diff --git a/ui/src/views/settings/UserDescriptions.tsx b/ui/src/views/settings/UserDescriptions.tsx
index 75657b3c..9dd7a82d 100644
--- a/ui/src/views/settings/UserDescriptions.tsx
+++ b/ui/src/views/settings/UserDescriptions.tsx
@@ -1,38 +1,37 @@
-import { Tag, Descriptions, Input } from "antd"
+import { Tag, Descriptions, Input } from 'antd';
 
-import { User } from "../../models"
+import { User } from '../../models';
 
 export interface UserDescriptionsProps {
-    user?: User
+  user?: User;
 }
 
 export default function UserDescriptions({
-    user
+  user,
 }: UserDescriptionsProps): JSX.Element {
-    return (
-        <Descriptions 
-            title="User Info" 
-            column={2} 
-            layout="vertical"
-            style={{marginTop: "40px"}} 
-        >
-            <Descriptions.Item label="Login">
-                {user?.login}
-            </Descriptions.Item>
-            <Descriptions.Item label="Role">
-                {(user?.admin)? 
-                    <Tag color="purple">Admin</Tag> 
-                    : 
-                    <Tag color="purple">Member</Tag>}
-            </Descriptions.Item>
-            <Descriptions.Item label="Token">
-                <Input.Password 
-                    value={user?.hash}
-                    style={{width: 200, padding:0 }}
-                    readOnly
-                    bordered={false}
-                />
-            </Descriptions.Item>
-        </Descriptions>
-    )
-}
\ No newline at end of file
+  return (
+    <Descriptions
+      title="User Info"
+      column={2}
+      layout="vertical"
+      style={{ marginTop: '40px' }}
+    >
+      <Descriptions.Item label="Login">{user?.login}</Descriptions.Item>
+      <Descriptions.Item label="Role">
+        {user?.admin ? (
+          <Tag color="purple">Admin</Tag>
+        ) : (
+          <Tag color="purple">Member</Tag>
+        )}
+      </Descriptions.Item>
+      <Descriptions.Item label="Token">
+        <Input.Password
+          value={user?.hash}
+          style={{ width: 200, padding: 0 }}
+          readOnly
+          bordered={false}
+        />
+      </Descriptions.Item>
+    </Descriptions>
+  );
+}
diff --git a/ui/src/views/settings/index.tsx b/ui/src/views/settings/index.tsx
index c88a88d2..46469a4a 100644
--- a/ui/src/views/settings/index.tsx
+++ b/ui/src/views/settings/index.tsx
@@ -1,57 +1,55 @@
-import { useEffect } from "react"
-import { shallowEqual } from "react-redux"
-import { Helmet } from "react-helmet"
+import { useEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { Helmet } from 'react-helmet';
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { fetchMe, checkSlack } from "../../redux/settings"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import { fetchMe, checkSlack } from '../../redux/settings';
 
-import Main from "../main"
-import UserDescription, { UserDescriptionsProps } from "./UserDescriptions"
-import SlackDescriptions from "./SlackDescriptions"
+import Main from '../main';
+import UserDescription, { UserDescriptionsProps } from './UserDescriptions';
+import SlackDescriptions from './SlackDescriptions';
 
 export default (): JSX.Element => {
-    const { user, isSlackEnabled } = useAppSelector(state => state.settings, shallowEqual)
-
-    const dispatch = useAppDispatch()
-
-    useEffect(() => {
-        dispatch(fetchMe())
-        dispatch(checkSlack())
-    }, [dispatch])
-
-    return (
-        <Main>
-            <Settings 
-                user={user}
-                isSlackEnabled={isSlackEnabled}
-            />
-        </Main>
-    )
-}
+  const { user, isSlackEnabled } = useAppSelector(
+    (state) => state.settings,
+    shallowEqual
+  );
+
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(fetchMe());
+    dispatch(checkSlack());
+  }, [dispatch]);
+
+  return (
+    <Main>
+      <Settings user={user} isSlackEnabled={isSlackEnabled} />
+    </Main>
+  );
+};
 
 interface SettingsProps extends UserDescriptionsProps {
-    isSlackEnabled: boolean
+  isSlackEnabled: boolean;
 }
 
-function Settings({
-    user,
-    isSlackEnabled
-}: SettingsProps): JSX.Element {
-    return (
-        <>
-            <Helmet>
-                <title>Settings</title>
-            </Helmet>
-            <h1>Settings</h1>
-            <div>
-                <UserDescription user={user}/>
-            </div>
-            {(isSlackEnabled)?
-                <div style={{marginTop: "40px", marginBottom: "20px"}}>
-                    <SlackDescriptions user={user}/>
-                </div>
-                :
-                <></>}
-        </>
-    )
-}
\ No newline at end of file
+function Settings({ user, isSlackEnabled }: SettingsProps): JSX.Element {
+  return (
+    <>
+      <Helmet>
+        <title>Settings</title>
+      </Helmet>
+      <h1>Settings</h1>
+      <div>
+        <UserDescription user={user} />
+      </div>
+      {isSlackEnabled ? (
+        <div style={{ marginTop: '40px', marginBottom: '20px' }}>
+          <SlackDescriptions user={user} />
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index a273b0cf..9d379a3c 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

From efbcdfc09d3f0ea8581fdd4a1c67a453868df93b Mon Sep 17 00:00:00 2001
From: noah <noah.lee@buzzvil.com>
Date: Sat, 7 May 2022 22:05:30 +0900
Subject: [PATCH 3/3] Add prettier script to package.json

---
 ui/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/package.json b/ui/package.json
index 51c898d4..839964f5 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,7 +27,8 @@
     "build": "craco build",
     "test": "craco test",
     "eject": "craco eject",
-    "lint": "npx eslint . --ext .ts,.tsx"
+    "lint": "npx eslint . --ext .ts,.tsx",
+    "prettier": "npx prettier --write ."
   },
   "eslintConfig": {
     "extends": [