Feature/help texts (#248)

* Fixed build for Windows/Git-Bash

* Added custom tooltip component

* Switch to the new tooltip component

* Added new help texts

Co-authored-by: Roman Bäriswyl <[email protected]>

Author: Roemer

package.json

@@ -31,7 +31,7 @@
     "use-image": "^1.0.6"
   },
   "scripts": {
-    "start": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start",
+    "start": "chmod +x ./env.sh && sh ./env.sh && cp env-config.js ./public/ && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "test:cy": "cypress run-ct"

src/components/ApproveRejectButtons.tsx

@@ -1,9 +1,10 @@
-import { Grid, Tooltip, Chip, Button } from "@material-ui/core";
+import { Grid, Chip, Button } from "@material-ui/core";
 import { useSnackbar } from "notistack";
 import { useHotkeys } from "react-hotkeys-hook";
 import React from "react";
 import { testRunService } from "../services";
 import { TestRun } from "../types";
+import { Tooltip } from "./Tooltip";
 
 export const ApproveRejectButtons: React.FunctionComponent<{
   testRun: TestRun;

src/components/BuildDetails.tsx

@@ -5,12 +5,12 @@ import {
   Grid,
   Box,
   LinearProgress,
-  Tooltip,
 } from "@material-ui/core";
 import { BuildStatusChip } from "./BuildStatusChip";
 import { formatDateTime } from "../_helpers/format.helper";
 import { useBuildState } from "../contexts";
 import { LOCATOR_BUILD_DETAILS } from "../constants/help";
+import { Tooltip } from "./Tooltip";
 
 const BuildDetails: React.FunctionComponent = () => {
   const { selectedBuild } = useBuildState();

src/components/BuildList/index.tsx

@@ -15,7 +15,6 @@ import {
   Menu,
   MenuItem,
   Box,
-  Tooltip,
 } from "@material-ui/core";
 import { MoreVert } from "@material-ui/icons";
 import {
@@ -35,6 +34,7 @@ import { BaseModal } from "../BaseModal";
 import { buildsService } from "../../services";
 import { useHistory } from "react-router";
 import { buildTestRunLocation } from "../../_helpers/route.helpers";
+import { Tooltip } from "../Tooltip";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/ImageDetails.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Typography, Chip, Grid, IconButton, Tooltip } from "@material-ui/core";
+import { Typography, Chip, Grid, IconButton } from "@material-ui/core";
 import { WarningRounded } from "@material-ui/icons";
 import { staticService } from "../services";
 import useImage from "use-image";
 import { IgnoreArea } from "../types/ignoreArea";
+import { Tooltip } from "./Tooltip";
 
 interface IProps {
   type: "Baseline" | "Image" | "Diff";

src/components/ProjectForm/PixelmatchConfigForm.tsx

@@ -2,39 +2,48 @@ import { FormControlLabel, Switch } from "@material-ui/core";
 import React from "react";
 import { TextValidator } from "react-material-ui-form-validator";
 import { PixelmatchConfig } from "../../types/imageComparison";
+import { Tooltip } from "../Tooltip";
 import { useConfigHook } from "./useConfigHook";
 
 export const PixelmatchConfigForm: React.FunctionComponent = () => {
   const [config, updateConfig] = useConfigHook<PixelmatchConfig>();
 
   return (
     <React.Fragment>
-      <FormControlLabel
-        label="Allow diff dimensions"
-        control={
-          <Switch
-            checked={config.allowDiffDimensions}
-            onChange={(event, checked) =>
-              updateConfig("allowDiffDimensions", checked)
-            }
-            color="primary"
-            name="diffDimensionsFeature"
-          />
-        }
-      />
-      <FormControlLabel
-        label="Ignore anti-aliasing"
-        control={
-          <Switch
-            checked={config.ignoreAntialiasing}
-            onChange={(event, checked) =>
-              updateConfig("ignoreAntialiasing", checked)
-            }
-            color="primary"
-            name="ignoreAntialiasing"
-          />
-        }
-      />
+      <Tooltip
+        title="Enable comparison of images with different sizes."
+      >
+        <FormControlLabel
+          label="Allow diff dimensions"
+          control={
+            <Switch
+              checked={config.allowDiffDimensions}
+              onChange={(event, checked) =>
+                updateConfig("allowDiffDimensions", checked)
+              }
+              color="primary"
+              name="diffDimensionsFeature"
+            />
+          }
+        />
+      </Tooltip>
+      <Tooltip
+        title="Ignore detecting and ignoring anti-aliased pixels."
+      >
+        <FormControlLabel
+          label="Ignore anti-aliasing"
+          control={
+            <Switch
+              checked={config.ignoreAntialiasing}
+              onChange={(event, checked) =>
+                updateConfig("ignoreAntialiasing", checked)
+              }
+              color="primary"
+              name="ignoreAntialiasing"
+            />
+          }
+        />
+      </Tooltip>
       <TextValidator
         name="threshold"
         validators={["minNumber:0", "maxNumber:1"]}
@@ -43,6 +52,7 @@ export const PixelmatchConfigForm: React.FunctionComponent = () => {
         margin="dense"
         id="threshold"
         label="Pixel diff threshold"
+        helperText="The threshold of how much a pixel can deviate until it is detected as change (0-1)."
         type="number"
         fullWidth
         required

src/components/TestDetailsDialog/ArrowButtons.tsx

@@ -1,8 +1,9 @@
-import { IconButton, makeStyles, Tooltip } from "@material-ui/core";
+import { IconButton, makeStyles } from "@material-ui/core";
 import { NavigateNext, NavigateBefore } from "@material-ui/icons";
 import React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { TestRun } from "../../types";
+import { Tooltip } from "../Tooltip";
 
 const useStyles = makeStyles((theme) => ({
   button: {

src/components/TestDetailsDialog/TestDetailsModal.tsx

@@ -9,7 +9,6 @@ import {
   IconButton,
   Box,
   makeStyles,
-  Tooltip,
   Select,
   MenuItem,
   LinearProgress,
@@ -43,6 +42,7 @@ import { ApproveRejectButtons } from "../ApproveRejectButtons";
 import { head } from "lodash";
 import { invertIgnoreArea } from "../../_helpers/ignoreArea.helper";
 import { BaseModal } from "../BaseModal";
+import { Tooltip } from "../Tooltip";
 
 const defaultStagePos = {
   x: 0,

src/components/TestRunDetails.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Grid, Typography } from "@material-ui/core";
 import { TestRun } from "../types";
 import TestStatusChip from "./TestStatusChip";
+import { Tooltip } from "./Tooltip";
 
 interface IProps {
   testRun: TestRun;
@@ -37,12 +38,16 @@ export const TestRunDetails: React.FunctionComponent<IProps> = ({
         </Grid>
       )}
       <Grid item>
-        <Typography>Diff: {testRun.diffPercent}%</Typography>
+        <Tooltip title="How many percent of pixels are different according to the defined settings.">
+          <Typography>Diff: {testRun.diffPercent}%</Typography>
+        </Tooltip>
       </Grid>
       <Grid item>
-        <Typography>
-          Diff tollerance: {testRun.diffTollerancePercent}%
-        </Typography>
+        <Tooltip title="The allowed diff tolerance. Can be set with the diffTollerancePercent property in the track method.">
+          <Typography>
+            Diff tolerance: {testRun.diffTollerancePercent}%
+          </Typography>
+        </Tooltip>
       </Grid>
       <Grid item>
         <Typography display="inline">Status: </Typography>

src/components/TestRunList/BulkOperation.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   Typography,
   IconButton,
-  Tooltip,
   LinearProgress,
 } from "@material-ui/core";
 import {
@@ -17,6 +16,7 @@ import { Delete, LayersClear, ThumbDown, ThumbUp } from "@material-ui/icons";
 import { testRunService } from "../../services";
 import { TestStatus } from "../../types";
 import { head } from "lodash";
+import { Tooltip } from "../Tooltip";
 
 export const BulkOperation: React.FunctionComponent = () => {
   const props = useGridSlotComponentProps();