From d9560303eabe0c46ccd3568a40dbc3767c44c7e7 Mon Sep 17 00:00:00 2001 From: Surat Das Date: Wed, 17 Nov 2021 16:58:05 -0800 Subject: [PATCH 1/2] Menu item UI update and show VRT version - closes issue #323 --- .env | 3 +- docker-compose.yml | 1 + src/_config/env.config.ts | 2 + src/_test/precondition.helper.ts | 3 +- src/components/GuidedTour.tsx | 52 +++++++++++--------- src/components/Header.tsx | 84 ++++++++++++++++++++++++++++---- src/pages/ProfilePage.spec.tsx | 1 + 7 files changed, 111 insertions(+), 35 deletions(-) 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..de6debf4 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -13,24 +13,68 @@ 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 closeMenuAndOpenLink = () => { + handleMenuClose(); + window.open("https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/new", "_blank"); }; - const renderMenu = ( + const renderHelpMenu = ( + + + + + + + + + Open an issue in GitHub + +
+ + + VRT Version : {window._env_.VRT_VERSION} + + + + ); + + const renderAvatarMenu = ( {user?.role === "admin" && ( @@ -38,7 +82,11 @@ const Header: FunctionComponent = () => { component={Link} to={routes.USER_LIST_PAGE} onClick={handleMenuClose} + style={styleMenuItem} > + + + Users )} @@ -46,14 +94,22 @@ const Header: FunctionComponent = () => { component={Link} to={routes.PROJECT_LIST_PAGE} onClick={handleMenuClose} + style={styleMenuItem} > + + + Projects + + + Profile { }} data-testid="logoutBtn" > + + + Logout @@ -84,11 +143,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 +164,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]); }); From 64b9639322eb66f42471085d0f9f6c33acf41ea4 Mon Sep 17 00:00:00 2001 From: Surat Das Date: Thu, 18 Nov 2021 09:27:32 -0800 Subject: [PATCH 2/2] Made VRT_VERSION check for cypress tests. --- src/components/Header.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index de6debf4..7205df1d 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -36,6 +36,11 @@ const Header: FunctionComponent = () => { 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 : {window._env_.VRT_VERSION} - + + VRT Version : {getVRTVersion()} );