diff --git a/.env b/.env index 8c4342ed..999fd609 100644 --- a/.env +++ b/.env @@ -1,2 +1,3 @@ REACT_APP_API_URL=http://localhost:4200 -PORT=8080 \ No newline at end of file +PORT=8080 +VRT_VERSION=4.20.0 \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index d45574c7..66955bd8 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -11,3 +11,4 @@ services: - ./secrets:/etc/nginx/secrets environment: REACT_APP_API_URL: ${REACT_APP_API_URL} + VRT_VERSION: ${VRT_VERSION} diff --git a/src/_config/env.config.ts b/src/_config/env.config.ts index ca3dba71..e30611b3 100644 --- a/src/_config/env.config.ts +++ b/src/_config/env.config.ts @@ -1,9 +1,11 @@ export const API_URL = window._env_?.REACT_APP_API_URL; +export const VRT_VERSION = window._env_?.VRT_VERSION; declare global { interface Window { _env_: { REACT_APP_API_URL: string; + VRT_VERSION: string; }; } } diff --git a/src/_test/precondition.helper.ts b/src/_test/precondition.helper.ts index 41e126e9..02141754 100644 --- a/src/_test/precondition.helper.ts +++ b/src/_test/precondition.helper.ts @@ -3,9 +3,10 @@ import { User } from "../types"; const haveUserLogged = (user: User) => localStorage.setItem("user", JSON.stringify(user)); -const haveWindowsEnvSet = (env: { REACT_APP_API_URL: string }) => { +const haveWindowsEnvSet = (env: { REACT_APP_API_URL: string, VRT_VERSION: string }) => { window._env_ = { REACT_APP_API_URL: env.REACT_APP_API_URL, + VRT_VERSION: env.VRT_VERSION, }; }; diff --git a/src/components/GuidedTour.tsx b/src/components/GuidedTour.tsx index febc74aa..bcaaa672 100644 --- a/src/components/GuidedTour.tsx +++ b/src/components/GuidedTour.tsx @@ -1,8 +1,8 @@ import React, { FunctionComponent } from "react"; import Joyride, { CallBackProps, STATUS } from "react-joyride"; -import { IconButton, Avatar } from "@material-ui/core"; -import { HelpOutline } from "@material-ui/icons"; +import { IconButton } from "@material-ui/core"; import { useHelpState } from "../contexts"; +import { LiveHelp } from "@material-ui/icons"; const GuidedTour: FunctionComponent = () => { const [run, setRun] = React.useState(false); @@ -40,28 +40,32 @@ const GuidedTour: FunctionComponent = () => { return ( - - - - - - + + + + + + Take a tour + ); }; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index cc51bc3c..7205df1d 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -13,24 +13,70 @@ import { useUserDispatch, useUserState, logout } from "../contexts"; import { routes } from "../constants"; import logo from "../static/logo.png"; import GuidedTour from "./GuidedTour"; +import { AllInbox, Face, GitHub, HelpOutline, People, SettingsPower } from "@material-ui/icons"; const Header: FunctionComponent = () => { - const [menuRef, setMenuRef] = React.useState(null); + const [avatarMenuRef, setAvatarMenuRef] = React.useState(null); + const [helpMenuRef, setHelpMenuRef] = React.useState(null); const { loggedIn, user } = useUserState(); const authDispatch = useUserDispatch(); + const styleMenuItem = { + display: "flex", + alignItems: "center", + }; + const handleMenuClose = () => { - setMenuRef(null); + setAvatarMenuRef(null); + setHelpMenuRef(null); }; - const renderMenu = ( + const closeMenuAndOpenLink = () => { + handleMenuClose(); + window.open("https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/new", "_blank"); + }; + + const getVRTVersion = (): string => { + //For cypress tests, window._env_ variable may be undefined, so return a dummy value. + return window._env_ ? window._env_.VRT_VERSION : "5.0.0"; + }; + + const renderHelpMenu = ( + + + + + + + + + Open an issue in GitHub + +
+ + VRT Version : {getVRTVersion()} + +
+ ); + + const renderAvatarMenu = ( {user?.role === "admin" && ( @@ -38,7 +84,11 @@ const Header: FunctionComponent = () => { component={Link} to={routes.USER_LIST_PAGE} onClick={handleMenuClose} + style={styleMenuItem} > + + + Users )} @@ -46,14 +96,22 @@ const Header: FunctionComponent = () => { component={Link} to={routes.PROJECT_LIST_PAGE} onClick={handleMenuClose} + style={styleMenuItem} > + + + Projects + + + Profile { }} data-testid="logoutBtn" > + + + Logout @@ -84,11 +145,17 @@ const Header: FunctionComponent = () => { justifyContent="space-between" alignItems="center" > - + ) => + setHelpMenuRef(event.currentTarget) + }> + + + + {loggedIn && ( ) => - setMenuRef(event.currentTarget) + setAvatarMenuRef(event.currentTarget) } > {`${user?.firstName[0]}${user?.lastName[0]}`} @@ -99,7 +166,8 @@ const Header: FunctionComponent = () => { - {renderMenu} + {renderAvatarMenu} + {renderHelpMenu} ); }; diff --git a/src/pages/ProfilePage.spec.tsx b/src/pages/ProfilePage.spec.tsx index 36904365..6fd394df 100644 --- a/src/pages/ProfilePage.spec.tsx +++ b/src/pages/ProfilePage.spec.tsx @@ -14,6 +14,7 @@ describe("Profile page", () => { haveUserLogged(TEST_USER); haveWindowsEnvSet({ REACT_APP_API_URL: "http://localhost:4200", + VRT_VERSION: "4.20.0", }); projectStub.getAll([TEST_PROJECT]); });