Skip to content
This repository was archived by the owner on May 30, 2024. It is now read-only.

Commit 7da4fde

Browse files
author
Noah Lee
authored
Refactoring the main view (#395)
* Move the `main` view into the `main` dir * Replace the main view * Move the `LicenseFooter` component into the view
1 parent 7e3c9ea commit 7da4fde

File tree

10 files changed

+255
-202
lines changed

10 files changed

+255
-202
lines changed

Diff for: ‎ui/src/views/Deployment.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
} from "../models"
2525
import { subscribeEvents } from "../apis"
2626

27-
import Main from "./Main"
27+
import Main from "./main"
2828
import ReviewModal from "../components/ReviewModal"
2929
import Spin from "../components/Spin"
3030
import DeploymentDescriptor from "../components/DeploymentDescriptor"

Diff for: ‎ui/src/views/Home.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { homeSlice, listRepos, perPage, sync, homeSlice as slice } from '../redu
88
import { RequestStatus } from '../models'
99
import { subscribeEvents } from "../apis"
1010

11-
import Main from './Main'
11+
import Main from './main'
1212
import SyncButton from "../components/SyncButton"
1313
import RepoList from '../components/RepoList'
1414
import Pagination from '../components/Pagination'

Diff for: ‎ui/src/views/Main.tsx

-180
This file was deleted.

Diff for: ‎ui/src/views/Repo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useAppSelector, useAppDispatch } from '../redux/hooks'
88
import { init, activate, repoSlice as slice } from '../redux/repo'
99

1010
import ActivateButton from "../components/ActivateButton"
11-
import Main from './Main'
11+
import Main from './main'
1212
import RepoHome from './RepoHome'
1313
import RepoLock from "./RepoLock";
1414
import RepoDeploy from './RepoDeploy'

Diff for: ‎ui/src/views/Settings.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Button, Tag, Descriptions, Input } from "antd"
66
import { useAppSelector, useAppDispatch } from "../redux/hooks"
77
import { fetchMe, checkSlack } from "../redux/settings"
88

9-
import Main from "./Main"
9+
import Main from "./main"
1010

1111
export default function Settings(): JSX.Element {
1212
const { user, isSlackEnabled } = useAppSelector(state => state.settings, shallowEqual)

Diff for: ‎ui/src/views/main/Content.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { shallowEqual } from "react-redux"
2+
import { Row, Col, Result, Button} from "antd"
3+
4+
import { useAppSelector, useAppDispatch } from "../../redux/hooks"
5+
import { mainSlice as slice } from "../../redux/main"
6+
import React from "react"
7+
8+
export default function Content(props: React.PropsWithChildren<any>): JSX.Element {
9+
const {
10+
available,
11+
authorized,
12+
expired,
13+
} = useAppSelector(state => state.main, shallowEqual)
14+
const dispatch = useAppDispatch()
15+
16+
const onClickRetry = () => {
17+
dispatch(slice.actions.setAvailable(true))
18+
dispatch(slice.actions.setExpired(false))
19+
}
20+
21+
let content: React.ReactNode
22+
if (!available) {
23+
content = <Result
24+
style={{paddingTop: '120px'}}
25+
status="error"
26+
title="Server Internal Error"
27+
subTitle="Sorry, something went wrong. Contact administrator."
28+
extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
29+
/>
30+
} else if (!authorized) {
31+
content = <Result
32+
style={{paddingTop: '120px'}}
33+
status="warning"
34+
title="Unauthorized Error"
35+
subTitle="Sorry, you are not authorized."
36+
extra={[<Button key="console" type="primary" href="/">Sign in</Button>]}
37+
/>
38+
} else if (expired) {
39+
content = <Result
40+
style={{paddingTop: '120px'}}
41+
status="warning"
42+
title="License Expired"
43+
subTitle="Sorry, the license is expired."
44+
extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
45+
/>
46+
} else {
47+
content = props.children
48+
}
49+
50+
return (
51+
<Row>
52+
<Col
53+
span={22}
54+
offset={1}
55+
md={{span: 14, offset: 5}}
56+
lg={{span: 12, offset: 6}}
57+
xxl={{span: 10, offset: 7}}
58+
>
59+
{content}
60+
</Col>
61+
</Row>
62+
)
63+
}

Diff for: ‎ui/src/views/main/Header.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { useState } from "react"
2+
import { shallowEqual } from "react-redux"
3+
import { Menu, Row, Col, Button, Drawer, Avatar, Dropdown, Badge, Space} from "antd"
4+
import { SettingFilled } from "@ant-design/icons"
5+
6+
import { useAppSelector } from "../../redux/hooks"
7+
8+
import RecentActivities from "../../components/RecentActivities"
9+
10+
import Logo from "../../logo.svg"
11+
12+
export default function Header(): JSX.Element {
13+
const {
14+
authorized,
15+
user,
16+
deployments,
17+
reviews,
18+
} = useAppSelector(state => state.main, shallowEqual)
19+
20+
const activitiesCount = deployments.length + reviews.length
21+
22+
const [ isRecentActivitiesVisible, setRecentActivitiesVisible ] = useState(false)
23+
24+
return (
25+
<Row>
26+
<Col span="16">
27+
<Menu theme="dark" mode="horizontal" >
28+
<Menu.Item key={0}>
29+
<a href="/"><img src={Logo} style={{width: 62}}/></a>
30+
</Menu.Item>
31+
<Menu.Item key={1}>
32+
<a href="/">Home</a>
33+
</Menu.Item>
34+
{(user?.admin)?
35+
<Menu.Item key={2}>
36+
<a href="/members">Members</a>
37+
</Menu.Item>
38+
:
39+
<></>}
40+
</Menu>
41+
</Col>
42+
<Col span="8" style={{textAlign: "right"}}>
43+
<Space>
44+
<Badge
45+
size="small"
46+
count={activitiesCount}
47+
>
48+
<Button
49+
type="primary"
50+
shape="circle"
51+
icon={<SettingFilled spin={activitiesCount !== 0 }/>}
52+
onClick={() => setRecentActivitiesVisible(true)}
53+
/>
54+
</Badge>
55+
<Drawer title="Recent Activities"
56+
placement="right"
57+
width={400}
58+
visible={isRecentActivitiesVisible}
59+
onClose={() => setRecentActivitiesVisible(false)}
60+
>
61+
<RecentActivities
62+
deployments={deployments}
63+
reviews={reviews}
64+
/>
65+
</Drawer>
66+
{(authorized) ?
67+
<Dropdown
68+
overlay={(
69+
<Menu>
70+
<Menu.Item key="0">
71+
<a href="/settings">Settings</a>
72+
</Menu.Item>
73+
<Menu.Divider />
74+
<Menu.Item key="1">
75+
<a href="https://www.gitploy.io/docs/" target="_blank">Read Docs</a>
76+
</Menu.Item>
77+
<Menu.Item key="2">
78+
<a href="/signout">Sign out</a>
79+
</Menu.Item>
80+
</Menu>
81+
)}>
82+
<Avatar src={user?.avatar}/>
83+
</ Dropdown>
84+
:
85+
<a href="/" style={{color: "white"}}>Sign in</a>}
86+
</Space>
87+
</Col>
88+
</Row>
89+
)
90+
}

0 commit comments

Comments
 (0)