gitploy-io · noahingh · Nov 22, 2021 · Nov 21, 2021 · Nov 21, 2021 · Nov 21, 2021
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -20,6 +20,7 @@
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
@@ -51,6 +52,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-helmet": "^6.1.4",
     "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",

diff --git a/ui/public/index.html b/ui/public/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +23,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Gitploy</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/ui/public/spinner.ico b/ui/public/spinner.ico
diff --git a/ui/src/views/Deployment.tsx b/ui/src/views/Deployment.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react"
 import { Breadcrumb, PageHeader, Result } from "antd"
 import { shallowEqual } from 'react-redux'
 import { useParams } from "react-router-dom"
+import { Helmet } from "react-helmet"
 
 import { useAppSelector, useAppDispatch } from "../redux/hooks"
 import { 
@@ -127,6 +128,9 @@ export default function DeploymentView(): JSX.Element {
 
     return (
         <Main>
+            <Helmet>
+                <title>Deployment #{number} - {namespace}/{name}</title>
+            </Helmet>
             <div>
                 <PageHeader
                     title={`Deployment #${number}`}

diff --git a/ui/src/views/Home.tsx b/ui/src/views/Home.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { shallowEqual } from 'react-redux'
 import { Input, Breadcrumb } from 'antd'
+import { Helmet } from "react-helmet"
 
 import { useAppSelector, useAppDispatch } from '../redux/hooks'
 import { homeSlice, listRepos, perPage, sync, homeSlice as slice } from '../redux/home'
@@ -74,6 +75,9 @@ export default function Home(): JSX.Element {
 
     return (
         <Main>
+            <Helmet>
+                <title>Home</title>
+            </Helmet>
             <div >
                 <Breadcrumb>
                     <Breadcrumb.Item>

diff --git a/ui/src/views/Main.tsx b/ui/src/views/Main.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react"
 import { shallowEqual } from "react-redux"
 import { Layout, Menu, Row, Col, Result, Button, Drawer, Avatar, Dropdown, Badge} from "antd"
 import { SettingFilled } from "@ant-design/icons"
+import { Helmet } from "react-helmet"
 
 import { useAppSelector, useAppDispatch } from "../redux/hooks"
 import { init, searchDeployments, searchReviews, fetchLicense, mainSlice as slice } from "../redux/main"
@@ -92,6 +93,12 @@ export default function Main(props: any) {
 
     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>
                 <Row>
                     <Col span="16">
@@ -135,7 +142,7 @@ export default function Main(props: any) {
                                     </Menu.Item>
                                     <Menu.Divider />
                                     <Menu.Item key="1">
-                                        <a href="https://docs.gitploy.io/" target="_blank">Read Doc</a>
+                                        <a href="https://docs.gitploy.io/" target="_blank">Read Docs</a>
                                     </Menu.Item>
                                     <Menu.Item key="2">
                                         <a href="/signout">Sign out</a>

diff --git a/ui/src/views/Members.tsx b/ui/src/views/Members.tsx
@@ -1,6 +1,7 @@
 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, updateUser, deleteUser, perPage } from "../redux/members"
@@ -44,27 +45,32 @@ export default function Member(): JSX.Element {
         dispatch(fetchUsers())
     }
 
-    return <Main>
-        <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 
-                page={page}
-                isLast={users.length !== perPage}
-                onClickPrev={onClickPrev}
-                onClickNext={onClickNext}
-            />    
-        </div>
-    </Main>
+    return (
+        <Main>
+            <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 
+                    page={page}
+                    isLast={users.length !== perPage}
+                    onClickPrev={onClickPrev}
+                    onClickNext={onClickNext}
+                />    
+            </div>
+        </Main>
+    )
 }
diff --git a/ui/src/views/Repo.tsx b/ui/src/views/Repo.tsx
@@ -2,6 +2,7 @@ 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'
@@ -68,6 +69,9 @@ export default function Repo(): JSX.Element {
 
     return (
         <Main>
+            <Helmet>
+                <title>{namespace}/{name}</title>
+            </Helmet>
             <div >
                 <Breadcrumb>
                     <Breadcrumb.Item>

diff --git a/ui/src/views/Settings.tsx b/ui/src/views/Settings.tsx
@@ -2,6 +2,7 @@ import { Avatar, Button, Tag } from "antd"
 import moment from "moment"
 import { useEffect } from "react"
 import { shallowEqual } from "react-redux"
+import { Helmet } from "react-helmet"
 
 import { useAppSelector, useAppDispatch } from "../redux/hooks"
 import { fetchMe, fetchRateLimit,checkSlack } from "../redux/settings"
@@ -23,6 +24,9 @@ export default function Settings(): JSX.Element {
 
     return (
         <Main>
+            <Helmet>
+                <title>Settings</title>
+            </Helmet>
             <div >
                 <h1>Settings</h1>
             </div>