Menu item UI update and show VRT version - closes issue #323

.env

@@ -1,2 +1,3 @@
 REACT_APP_API_URL=http://localhost:4200
-PORT=8080
+PORT=8080
+VRT_VERSION=4.20.0

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}

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;
     };
   }
 }

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,
   };
 };
 

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 (
     <React.Fragment>
-      <IconButton onClick={handleClickStart}>
-        <Avatar>
-          <HelpOutline />
-          <Joyride
-            callback={handleJoyrideCallback}
-            continuous={true}
-            run={run}
-            scrollToFirstStep={true}
-            showProgress={true}
-            showSkipButton={true}
-            steps={getHelpSteps()}
-            disableCloseOnEsc={true}
-            styles={{
-              options: {
-                zIndex: 10000,
-              },
-              buttonNext: { color: "#3f51b5", backgroundColor: "" },
-              buttonBack: { color: "#3f51b5" },
-            }}
-          />
-        </Avatar>
-      </IconButton>
+      <span onClick={handleClickStart} style={{
+        display: "flex",
+        alignItems: "center",
+      }}>
+        <IconButton size="small">
+          <LiveHelp />
+        </IconButton>
+        <Joyride
+          callback={handleJoyrideCallback}
+          continuous={true}
+          run={run}
+          scrollToFirstStep={true}
+          showProgress={true}
+          showSkipButton={true}
+          steps={getHelpSteps()}
+          disableCloseOnEsc={true}
+          styles={{
+            options: {
+              zIndex: 10000,
+            },
+            buttonNext: { color: "#3f51b5", backgroundColor: "" },
+            buttonBack: { color: "#3f51b5" },
+          }}
+        />
+        Take a tour
+      </span>
     </React.Fragment>
   );
 };

src/components/Header.tsx

@@ -13,47 +13,105 @@ 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 | HTMLElement>(null);
+  const [avatarMenuRef, setAvatarMenuRef] = React.useState<null | HTMLElement>(null);
+  const [helpMenuRef, setHelpMenuRef] = React.useState<null | HTMLElement>(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 = (
+    <Menu
+      anchorEl={helpMenuRef}
+      anchorOrigin={{ vertical: "top", horizontal: "right" }}
+      id="headerHelpMenu"
+      keepMounted
+      transformOrigin={{ vertical: "top", horizontal: "right" }}
+      open={!!helpMenuRef}
+      onClose={handleMenuClose}
+    >
+      <MenuItem onClick={handleMenuClose} >
+        <GuidedTour />
+      </MenuItem>
+      <MenuItem onClick={closeMenuAndOpenLink} style={styleMenuItem}>
+        <IconButton size="small">
+          <GitHub />
+        </IconButton>
+        Open an issue in GitHub
+      </MenuItem>
+      <hr />
+      <MenuItem style={{
+        justifyContent: "center"
+      }}>
+        VRT Version : {getVRTVersion()}
+      </MenuItem>
+    </Menu >
+  );
+
+  const renderAvatarMenu = (
     <Menu
-      anchorEl={menuRef}
+      anchorEl={avatarMenuRef}
       anchorOrigin={{ vertical: "top", horizontal: "right" }}
-      id="headerMenu"
+      id="headerAvatarMenu"
       keepMounted
       transformOrigin={{ vertical: "top", horizontal: "right" }}
-      open={!!menuRef}
+      open={!!avatarMenuRef}
       onClose={handleMenuClose}
     >
       {user?.role === "admin" && (
         <MenuItem
           component={Link}
           to={routes.USER_LIST_PAGE}
           onClick={handleMenuClose}
+          style={styleMenuItem}
         >
+          <IconButton size="small">
+            <People />
+          </IconButton>
           Users
         </MenuItem>
       )}
       <MenuItem
         component={Link}
         to={routes.PROJECT_LIST_PAGE}
         onClick={handleMenuClose}
+        style={styleMenuItem}
       >
+        <IconButton size="small">
+          <AllInbox />
+        </IconButton>
         Projects
       </MenuItem>
       <MenuItem
         component={Link}
         to={routes.PROFILE_PAGE}
         onClick={handleMenuClose}
+        style={styleMenuItem}
       >
+        <IconButton size="small">
+          <Face />
+        </IconButton>
         Profile
       </MenuItem>
       <MenuItem
@@ -63,6 +121,9 @@ const Header: FunctionComponent = () => {
         }}
         data-testid="logoutBtn"
       >
+        <IconButton size="small">
+          <SettingsPower />
+        </IconButton>
         Logout
       </MenuItem>
     </Menu>
@@ -84,11 +145,17 @@ const Header: FunctionComponent = () => {
                 justifyContent="space-between"
                 alignItems="center"
               >
-                <GuidedTour />
+                <IconButton onClick={(event: React.MouseEvent<HTMLElement>) =>
+                  setHelpMenuRef(event.currentTarget)
+                }>
+                  <Avatar>
+                    <HelpOutline />
+                  </Avatar>
+                </IconButton>
                 {loggedIn && (
                   <IconButton
                     onClick={(event: React.MouseEvent<HTMLElement>) =>
-                      setMenuRef(event.currentTarget)
+                      setAvatarMenuRef(event.currentTarget)
                     }
                   >
                     <Avatar>{`${user?.firstName[0]}${user?.lastName[0]}`}</Avatar>
@@ -99,7 +166,8 @@ const Header: FunctionComponent = () => {
           </Grid>
         </Toolbar>
       </AppBar>
-      {renderMenu}
+      {renderAvatarMenu}
+      {renderHelpMenu}
     </React.Fragment>
   );
 };

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]);
   });