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 = (
+
+ );
+
+ const renderAvatarMenu = (
@@ -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]);
});