Skip to content

Commit b4cb99e

Browse files
suratdassuratdas
authored
Menu item UI update and show VRT version - closes issue #323 (#249)
* Menu item UI update and show VRT version - closes issue #323 * Made VRT_VERSION check for cypress tests.
1 parent ee5b5ed commit b4cb99e

File tree

7 files changed

+113
-35
lines changed

7 files changed

+113
-35
lines changed

‎.env‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
REACT_APP_API_URL=http://localhost:4200
2-
PORT=8080
2+
PORT=8080
3+
VRT_VERSION=4.20.0

‎docker-compose.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ services:
1111
- ./secrets:/etc/nginx/secrets
1212
environment:
1313
REACT_APP_API_URL: ${REACT_APP_API_URL}
14+
VRT_VERSION: ${VRT_VERSION}

‎src/_config/env.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
export const API_URL = window._env_?.REACT_APP_API_URL;
2+
export const VRT_VERSION = window._env_?.VRT_VERSION;
23

34
declare global {
45
interface Window {
56
_env_: {
67
REACT_APP_API_URL: string;
8+
VRT_VERSION: string;
79
};
810
}
911
}

‎src/_test/precondition.helper.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { User } from "../types";
33
const haveUserLogged = (user: User) =>
44
localStorage.setItem("user", JSON.stringify(user));
55

6-
const haveWindowsEnvSet = (env: { REACT_APP_API_URL: string }) => {
6+
const haveWindowsEnvSet = (env: { REACT_APP_API_URL: string, VRT_VERSION: string }) => {
77
window._env_ = {
88
REACT_APP_API_URL: env.REACT_APP_API_URL,
9+
VRT_VERSION: env.VRT_VERSION,
910
};
1011
};
1112

‎src/components/GuidedTour.tsx‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { FunctionComponent } from "react";
22
import Joyride, { CallBackProps, STATUS } from "react-joyride";
3-
import { IconButton, Avatar } from "@material-ui/core";
4-
import { HelpOutline } from "@material-ui/icons";
3+
import { IconButton } from "@material-ui/core";
54
import { useHelpState } from "../contexts";
5+
import { LiveHelp } from "@material-ui/icons";
66

77
const GuidedTour: FunctionComponent = () => {
88
const [run, setRun] = React.useState(false);
@@ -40,28 +40,32 @@ const GuidedTour: FunctionComponent = () => {
4040

4141
return (
4242
<React.Fragment>
43-
<IconButton onClick={handleClickStart}>
44-
<Avatar>
45-
<HelpOutline />
46-
<Joyride
47-
callback={handleJoyrideCallback}
48-
continuous={true}
49-
run={run}
50-
scrollToFirstStep={true}
51-
showProgress={true}
52-
showSkipButton={true}
53-
steps={getHelpSteps()}
54-
disableCloseOnEsc={true}
55-
styles={{
56-
options: {
57-
zIndex: 10000,
58-
},
59-
buttonNext: { color: "#3f51b5", backgroundColor: "" },
60-
buttonBack: { color: "#3f51b5" },
61-
}}
62-
/>
63-
</Avatar>
64-
</IconButton>
43+
<span onClick={handleClickStart} style={{
44+
display: "flex",
45+
alignItems: "center",
46+
}}>
47+
<IconButton size="small">
48+
<LiveHelp />
49+
</IconButton>
50+
<Joyride
51+
callback={handleJoyrideCallback}
52+
continuous={true}
53+
run={run}
54+
scrollToFirstStep={true}
55+
showProgress={true}
56+
showSkipButton={true}
57+
steps={getHelpSteps()}
58+
disableCloseOnEsc={true}
59+
styles={{
60+
options: {
61+
zIndex: 10000,
62+
},
63+
buttonNext: { color: "#3f51b5", backgroundColor: "" },
64+
buttonBack: { color: "#3f51b5" },
65+
}}
66+
/>
67+
Take a tour
68+
</span>
6569
</React.Fragment>
6670
);
6771
};

‎src/components/Header.tsx‎

Lines changed: 77 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,47 +13,105 @@ import { useUserDispatch, useUserState, logout } from "../contexts";
1313
import { routes } from "../constants";
1414
import logo from "../static/logo.png";
1515
import GuidedTour from "./GuidedTour";
16+
import { AllInbox, Face, GitHub, HelpOutline, People, SettingsPower } from "@material-ui/icons";
1617

1718
const Header: FunctionComponent = () => {
18-
const [menuRef, setMenuRef] = React.useState<null | HTMLElement>(null);
19+
const [avatarMenuRef, setAvatarMenuRef] = React.useState<null | HTMLElement>(null);
20+
const [helpMenuRef, setHelpMenuRef] = React.useState<null | HTMLElement>(null);
1921
const { loggedIn, user } = useUserState();
2022
const authDispatch = useUserDispatch();
2123

24+
const styleMenuItem = {
25+
display: "flex",
26+
alignItems: "center",
27+
};
28+
2229
const handleMenuClose = () => {
23-
setMenuRef(null);
30+
setAvatarMenuRef(null);
31+
setHelpMenuRef(null);
2432
};
2533

26-
const renderMenu = (
34+
const closeMenuAndOpenLink = () => {
35+
handleMenuClose();
36+
window.open("https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/new", "_blank");
37+
};
38+
39+
const getVRTVersion = (): string => {
40+
//For cypress tests, window._env_ variable may be undefined, so return a dummy value.
41+
return window._env_ ? window._env_.VRT_VERSION : "5.0.0";
42+
};
43+
44+
const renderHelpMenu = (
45+
<Menu
46+
anchorEl={helpMenuRef}
47+
anchorOrigin={{ vertical: "top", horizontal: "right" }}
48+
id="headerHelpMenu"
49+
keepMounted
50+
transformOrigin={{ vertical: "top", horizontal: "right" }}
51+
open={!!helpMenuRef}
52+
onClose={handleMenuClose}
53+
>
54+
<MenuItem onClick={handleMenuClose} >
55+
<GuidedTour />
56+
</MenuItem>
57+
<MenuItem onClick={closeMenuAndOpenLink} style={styleMenuItem}>
58+
<IconButton size="small">
59+
<GitHub />
60+
</IconButton>
61+
Open an issue in GitHub
62+
</MenuItem>
63+
<hr />
64+
<MenuItem style={{
65+
justifyContent: "center"
66+
}}>
67+
VRT Version : {getVRTVersion()}
68+
</MenuItem>
69+
</Menu >
70+
);
71+
72+
const renderAvatarMenu = (
2773
<Menu
28-
anchorEl={menuRef}
74+
anchorEl={avatarMenuRef}
2975
anchorOrigin={{ vertical: "top", horizontal: "right" }}
30-
id="headerMenu"
76+
id="headerAvatarMenu"
3177
keepMounted
3278
transformOrigin={{ vertical: "top", horizontal: "right" }}
33-
open={!!menuRef}
79+
open={!!avatarMenuRef}
3480
onClose={handleMenuClose}
3581
>
3682
{user?.role === "admin" && (
3783
<MenuItem
3884
component={Link}
3985
to={routes.USER_LIST_PAGE}
4086
onClick={handleMenuClose}
87+
style={styleMenuItem}
4188
>
89+
<IconButton size="small">
90+
<People />
91+
</IconButton>
4292
Users
4393
</MenuItem>
4494
)}
4595
<MenuItem
4696
component={Link}
4797
to={routes.PROJECT_LIST_PAGE}
4898
onClick={handleMenuClose}
99+
style={styleMenuItem}
49100
>
101+
<IconButton size="small">
102+
<AllInbox />
103+
</IconButton>
50104
Projects
51105
</MenuItem>
52106
<MenuItem
53107
component={Link}
54108
to={routes.PROFILE_PAGE}
55109
onClick={handleMenuClose}
110+
style={styleMenuItem}
56111
>
112+
<IconButton size="small">
113+
<Face />
114+
</IconButton>
57115
Profile
58116
</MenuItem>
59117
<MenuItem
@@ -63,6 +121,9 @@ const Header: FunctionComponent = () => {
63121
}}
64122
data-testid="logoutBtn"
65123
>
124+
<IconButton size="small">
125+
<SettingsPower />
126+
</IconButton>
66127
Logout
67128
</MenuItem>
68129
</Menu>
@@ -84,11 +145,17 @@ const Header: FunctionComponent = () => {
84145
justifyContent="space-between"
85146
alignItems="center"
86147
>
87-
<GuidedTour />
148+
<IconButton onClick={(event: React.MouseEvent<HTMLElement>) =>
149+
setHelpMenuRef(event.currentTarget)
150+
}>
151+
<Avatar>
152+
<HelpOutline />
153+
</Avatar>
154+
</IconButton>
88155
{loggedIn && (
89156
<IconButton
90157
onClick={(event: React.MouseEvent<HTMLElement>) =>
91-
setMenuRef(event.currentTarget)
158+
setAvatarMenuRef(event.currentTarget)
92159
}
93160
>
94161
<Avatar>{`${user?.firstName[0]}${user?.lastName[0]}`}</Avatar>
@@ -99,7 +166,8 @@ const Header: FunctionComponent = () => {
99166
</Grid>
100167
</Toolbar>
101168
</AppBar>
102-
{renderMenu}
169+
{renderAvatarMenu}
170+
{renderHelpMenu}
103171
</React.Fragment>
104172
);
105173
};

‎src/pages/ProfilePage.spec.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ describe("Profile page", () => {
1414
haveUserLogged(TEST_USER);
1515
haveWindowsEnvSet({
1616
REACT_APP_API_URL: "http://localhost:4200",
17+
VRT_VERSION: "4.20.0",
1718
});
1819
projectStub.getAll([TEST_PROJECT]);
1920
});

0 commit comments

Comments
 (0)