Add prettier to styling codes in the ui/ directory.

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"
-    },
-  };
-
+  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',
+  },
+};

ui/.prettierignore

@@ -0,0 +1,2 @@
+build
+coverage

ui/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

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,13 +17,13 @@ module.exports = {
               // Layout
               '@layout-header-background': '@purple-10',
               '@layout-body-background': '#fff',
-              // 
-              '@border-radius-base': '5px'
+              //
+              '@border-radius-base': '5px',
             },
             javascriptEnabled: true,
           },
         },
       },
     },
   ],
-};
+};

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,15 +20,15 @@
     "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",
     "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": [
@@ -58,6 +59,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"
   }
 }

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

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;
   }
 }

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;

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
-}
+  // 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;
+};