Issue 280 : Implement frontend help/guide in the UI

package.json

@@ -21,6 +21,7 @@
     "react-debounce-input": "^3.2.2",
     "react-dom": "^16.13.1",
     "react-hotkeys-hook": "^2.4.0",
+    "react-joyride": "^2.3.1",
     "react-konva": "^16.13.0-3",
     "react-material-ui-form-validator": "^2.1.1",
     "react-router-dom": "^5.2.0",

src/App.jsx

@@ -8,6 +8,7 @@ import {
   BuildProvider,
   TestRunProvider,
   SocketProvider,
+  HelpProvider,
 } from "./contexts";
 import Router from "./Router";
 
@@ -19,12 +20,14 @@ function App() {
           <BuildProvider>
             <TestRunProvider>
               <SocketProvider>
-                <Box height="10%">
-                  <Header />
-                </Box>
-                <Box height="90%">
-                  <Router />
-                </Box>
+                <HelpProvider>
+                  <Box height="10%">
+                    <Header />
+                  </Box>
+                  <Box height="90%">
+                    <Router />
+                  </Box>
+                </HelpProvider>
               </SocketProvider>
             </TestRunProvider>
           </BuildProvider>

src/_test/test.moun.helper.tsx

@@ -5,6 +5,7 @@ import {
   UserProvider,
   BuildProvider,
   TestRunProvider,
+  HelpProvider,
 } from "../contexts";
 import { MemoryRouter, Route } from "react-router-dom";
 import { MemoryRouterProps } from "react-router";
@@ -26,7 +27,9 @@ export const mountVrtComponent = ({
           <UserProvider>
             <ProjectProvider>
               <BuildProvider>
-                <TestRunProvider>{component}</TestRunProvider>
+                <HelpProvider>
+                  <TestRunProvider>{component}</TestRunProvider>
+                </HelpProvider>
               </BuildProvider>
             </ProjectProvider>
           </UserProvider>

src/components/BuildDetails.tsx

@@ -9,6 +9,7 @@ import {
 import { BuildStatusChip } from "./BuildStatusChip";
 import { formatDateTime } from "../_helpers/format.helper";
 import { useBuildState } from "../contexts";
+import { LOCATOR_BUILD_DETAILS } from '../constants/help';
 
 const BuildDetails: React.FunctionComponent = () => {
   const { selectedBuild } = useBuildState();
@@ -20,7 +21,7 @@ const BuildDetails: React.FunctionComponent = () => {
   const loadingAnimation = selectedBuild.isRunning && <LinearProgress />;
 
   return (
-    <Grid container direction="column">
+    <Grid container direction="column" id={LOCATOR_BUILD_DETAILS}>
       <Grid item>
         <Box m={0.5}>
           <Grid container spacing={1} alignItems="center">

src/components/Filters.tsx

@@ -10,6 +10,7 @@ import {
 } from "@material-ui/core";
 import { TestRun, TestVariation } from "../types";
 import { DebounceInput } from "react-debounce-input";
+import { LOCATOR_RESET_FILTER } from "../constants/help";
 
 interface IProps {
   items: (TestRun | TestVariation)[];
@@ -239,7 +240,7 @@ const Filters: React.FunctionComponent<IProps> = ({
       )}
       {branchNameList && branchNameList.length > 0 && (
         <Grid item xs>
-          <FormControl fullWidth>
+          <FormControl fullWidth id={LOCATOR_RESET_FILTER}>
             <InputLabel shrink id="filter_branchName">
               Branch
             </InputLabel>

src/components/GuidedTour.tsx

@@ -0,0 +1,69 @@
+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 { useHelpState } from "../contexts";
+
+const GuidedTour: FunctionComponent = () => {
+  const [run, setRun] = React.useState(false);
+  const { helpSteps } = useHelpState();
+
+  const getHelpSteps = React.useCallback(() => {
+    const firstStep = helpSteps[0];
+    //Below line is to prevent application breaking if element is not present for any reason (e.g. if the user deletes build or if there is no data.)
+    if (
+      firstStep &&
+      document.getElementById(firstStep.target.toString().slice(1))
+    ) {
+      helpSteps.forEach((e) => {
+        e.disableBeacon = true;
+        e.hideCloseButton = true;
+      });
+      return helpSteps;
+    }
+    return [];
+  }, [helpSteps]);
+
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status } = data;
+    const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
+
+    if (finishedStatuses.includes(status)) {
+      setRun(false);
+    }
+  };
+
+  const handleClickStart = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setRun(true);
+  };
+
+  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>
+    </React.Fragment>
+  );
+};
+
+export default GuidedTour;

src/components/Header.spec.tsx

@@ -1,36 +1,25 @@
 /* global cy */
 import React from "react";
-import { mount } from "@cypress/react";
 import Header from "./Header";
-import { UserProvider } from "../contexts";
-import { BrowserRouter } from "react-router-dom";
 import { haveUserLogged } from "../_test/precondition.helper";
-import { TEST_USER } from "../_test/test.data.helper";
+import { TEST_PROJECT, TEST_USER } from "../_test/test.data.helper";
+import { mountVrtComponent } from "../_test/test.moun.helper";
+import { projectStub } from "../_test/stub.helper";
 
 describe("Header", () => {
   describe("image", () => {
     it("Guest", () => {
       localStorage.clear();
-      mount(
-        <BrowserRouter>
-          <UserProvider>
-            <Header />
-          </UserProvider>
-        </BrowserRouter>
-      );
+      mountVrtComponent({ component: <Header /> });
 
       cy.get("#__cy_root").vrtTrack("Header. Guest");
     });
 
     it("Logged", () => {
       haveUserLogged(TEST_USER);
-      mount(
-        <BrowserRouter>
-          <UserProvider>
-            <Header />
-          </UserProvider>
-        </BrowserRouter>
-      );
+      projectStub.getAll([TEST_PROJECT]);
+
+      mountVrtComponent({ component: <Header /> });
 
       cy.get("#__cy_root").vrtTrack("Header. Logged");
     });