Refactoring the main view

ui/src/views/Deployment.tsx

@@ -24,7 +24,7 @@ import {
 } from "../models"
 import { subscribeEvents } from "../apis"
 
-import Main from "./Main"
+import Main from "./main"
 import ReviewModal from "../components/ReviewModal"
 import Spin from "../components/Spin"
 import DeploymentDescriptor from "../components/DeploymentDescriptor"

ui/src/views/Home.tsx

@@ -8,7 +8,7 @@ import { homeSlice, listRepos, perPage, sync, homeSlice as slice } from '../redu
 import { RequestStatus } from '../models'
 import { subscribeEvents } from "../apis"
 
-import Main from './Main'
+import Main from './main'
 import SyncButton from "../components/SyncButton"
 import RepoList from '../components/RepoList'
 import Pagination from '../components/Pagination'

ui/src/views/Repo.tsx

@@ -8,7 +8,7 @@ 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 Main from './main'
 import RepoHome from './RepoHome'
 import RepoLock from "./RepoLock";
 import RepoDeploy from './RepoDeploy'

ui/src/views/Settings.tsx

@@ -6,7 +6,7 @@ import { Button, Tag, Descriptions, Input } from "antd"
 import { useAppSelector, useAppDispatch } from "../redux/hooks"
 import { fetchMe, checkSlack } from "../redux/settings"
 
-import Main from "./Main"
+import Main from "./main"
 
 export default function Settings(): JSX.Element {
     const { user, isSlackEnabled } = useAppSelector(state => state.settings, shallowEqual)

ui/src/views/main/Content.tsx

@@ -0,0 +1,63 @@
+import { shallowEqual } from "react-redux"
+import { Row, Col, Result, Button} from "antd"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { mainSlice as slice } from "../../redux/main"
+import React from "react"
+
+export default function Content(props: React.PropsWithChildren<any>): JSX.Element {
+    const { 
+        available, 
+        authorized, 
+        expired,
+    } = useAppSelector(state => state.main, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    const onClickRetry = () => {
+        dispatch(slice.actions.setAvailable(true))
+        dispatch(slice.actions.setExpired(false))
+    }
+
+    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 = props.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>
+    </Row>
+    )
+}

ui/src/views/main/Header.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react"
+import { shallowEqual } from "react-redux"
+import { Menu, Row, Col, Button, Drawer, Avatar, Dropdown, Badge, Space} from "antd"
+import { SettingFilled } from "@ant-design/icons"
+
+import { useAppSelector } from "../../redux/hooks"
+
+import RecentActivities from "../../components/RecentActivities"
+
+import Logo from "../../logo.svg"
+
+export default function Header(): JSX.Element {
+    const { 
+        authorized, 
+        user,
+        deployments,
+        reviews,
+    } = useAppSelector(state => state.main, shallowEqual)
+
+    const activitiesCount = deployments.length + reviews.length
+
+    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>
+                    {(user?.admin)? 
+                        <Menu.Item key={2}>
+                            <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>
+                {(authorized) ? 
+                    <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>
+    )
+}