Merge branch 'main' into include-teardown-time-in-autopart

morganstanley · Jul 16, 2024 · 54e33cb · 54e33cb
2 parents 7c9dae1 + 2ca59d4
commit 54e33cb
Show file tree

Hide file tree

Showing 16 changed files with 410 additions and 108 deletions.
diff --git a/doc/newsfragments/2725_new.status_icons.rst b/doc/newsfragments/2725_new.status_icons.rst
@@ -0,0 +1 @@
+Status-indicating icons have been introduced to improve accessibility for colour vision deficiency.
diff --git a/testplan/web_ui/testing/src/AssertionPane/Assertion.js b/testplan/web_ui/testing/src/AssertionPane/Assertion.js
@@ -1,8 +1,9 @@
 import PropTypes from "prop-types";
 import { Card, CardBody, Collapse } from "reactstrap";
 import { css, StyleSheet } from "aphrodite";
-import { ErrorBoundary } from "../Common/ErrorBoundary";
+import { useAtomValue } from "jotai";
 
+import { ErrorBoundary } from "../Common/ErrorBoundary";
 import BasicAssertion from "./AssertionTypes/BasicAssertion";
 import MarkdownAssertion from "./AssertionTypes/MarkdownAssertion";
 import CodeLogAssertion from "./AssertionTypes/CodeLogAssertion";
@@ -30,6 +31,7 @@ import {
 import LogfileMatchAssertion from "./AssertionTypes/LogfileMatchAssertion";
 import { EXPAND_STATUS } from "../Common/defaults";
 import XMLCheckAssertion from "./AssertionTypes/XMLCheckAssertion";
+import { showStatusIconsPreference } from "../UserSettings/UserSettings";
 
 /**
  * Component to render one assertion.
@@ -127,6 +129,7 @@ function Assertion({
       }
     }
   }
+  let showStatusIcons = useAtomValue(showStatusIconsPreference);
 
   return (
     <Card className={css(styles.card)}>
@@ -136,6 +139,7 @@ function Assertion({
         toggleExpand={toggleExpand}
         index={index}
         displayPath={displayPath}
+        showStatusIcons={showStatusIcons}
       />
       <Collapse
         isOpen={expand === EXPAND_STATUS.EXPAND}

diff --git a/testplan/web_ui/testing/src/AssertionPane/AssertionHeader.js b/testplan/web_ui/testing/src/AssertionPane/AssertionHeader.js
@@ -4,12 +4,24 @@ import { css, StyleSheet } from "aphrodite";
 import { CardHeader, Tooltip } from "reactstrap";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLayerGroup } from "@fortawesome/free-solid-svg-icons";
+import {
+  faLayerGroup,
+  faTimes,
+  faInfo,
+  faCheck,
+} from "@fortawesome/free-solid-svg-icons";
 import Button from "@material-ui/core/Button";
 import Linkify from "linkify-react";
 
 library.add(faLayerGroup);
 
+
+const STATUS_ICONS = {
+  false: faTimes,
+  true: faCheck,
+  undefined: faInfo,
+};
+
 /**
  * Header component of an assertion.
  */
@@ -18,6 +30,7 @@ function AssertionHeader({
   displayPath,
   uid,
   toggleExpand,
+  showStatusIcons,
 }) {
   const [isUTCTooltipOpen, setIsUTCTooltipOpen] = useState(false);
   const [isPathTooltipOpen, setIsPathTooltipOpen] = useState(false);
@@ -67,20 +80,27 @@ function AssertionHeader({
     ) : (
       <>
         <span
-          className={css(styles.cardHeaderAlignRight, styles.timeInfo)}
+          className={
+            css(styles.cardHeaderAlignRight, styles.timeInfo, styles.button)
+          }
+          onClick={toggleExpand}
           id={`tooltip_duration_${timeInfoArray[0]}`}
           style={{ order: 3, display: "inline-flex", alignItems: "center" }}
         >
           {timeInfoArray[2]}
         </span>
         <span
-          className={css(styles.cardHeaderAlignRight)}
+          className={css(styles.cardHeaderAlignRight, styles.button)}
+          onClick={toggleExpand}
           style={{ order: 2 }}
         >
           &nbsp;&nbsp;
         </span>
         <span
-          className={css(styles.cardHeaderAlignRight, styles.timeInfo)}
+          className={
+            css(styles.cardHeaderAlignRight, styles.timeInfo, styles.button)
+          }
+          onClick={toggleExpand}
           id={`tooltip_utc_${timeInfoArray[0]}`}
           style={{ order: 1, display: "inline-flex", alignItems: "center" }}
         >
@@ -159,6 +179,17 @@ function AssertionHeader({
     ""
   );
 
+  const statusIcon = showStatusIcons ? (
+    <span className={css(styles.statusIcon)}>
+      <FontAwesomeIcon
+        title={assertion.passed ? "passed" : "failed"}
+        size="sm"
+        icon={STATUS_ICONS[assertion.passed]}
+        className={css(styles.icon)}
+      />
+    </span>
+  ) : null;
+
   return (
     <CardHeader className={css(styles.cardHeader, cardHeaderColorStyle)}>
       <div style={{ display: "flex" }}>
@@ -172,10 +203,10 @@ function AssertionHeader({
             ...assertion.custom_style,
           }}
         >
+          {statusIcon}
           <span style={{ fontWeight: "bold" }}>{description}</span>
           <span>({assertion.type})</span>
         </span>
-
         {component}
         {pathButton}
         {/*
@@ -273,6 +304,11 @@ const styles = StyleSheet.create({
   icon: {
     margin: "0rem .25rem 0rem 0rem",
   },
+  statusIcon: {
+    display: "inline-flex",
+    width: "1rem",
+    justifyContent: "center",
+  },
 });
 
 export default AssertionHeader;
diff --git a/testplan/web_ui/testing/src/AssertionPane/__tests__/AssertionHeader.test.js b/testplan/web_ui/testing/src/AssertionPane/__tests__/AssertionHeader.test.js
@@ -1,8 +1,10 @@
 import React from "react";
 import { shallow } from "enzyme";
 import { StyleSheetTestUtils } from "aphrodite";
+import { getDefaultStore } from "jotai";
 
 import AssertionHeader from "../AssertionHeader";
+import { showStatusIconsPreference } from "../../UserSettings/UserSettings";
 
 function defaultProps() {
   return {
@@ -39,4 +41,10 @@ describe("AssertionHeader", () => {
     shallowComponent = shallow(<AssertionHeader {...props} />);
     expect(shallowComponent).toMatchSnapshot();
   });
+
+  it("shallow renders the correct HTML structure with status icons enabled", () => {
+    getDefaultStore().set(showStatusIconsPreference, true);
+    shallowComponent = shallow(<AssertionHeader {...props} />);
+    expect(shallowComponent).toMatchSnapshot();
+  });
 });
diff --git a/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/Assertion.test.js.snap b/testplan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/Assertion.test.js.snap
@@ -22,6 +22,7 @@ exports[`Assertion shallow renders the correct HTML structure 1`] = `
       }
     }
     index={0}
+    showStatusIcons={false}
   />
   <Collapse
     appear={false}

diff --git a/...lan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/AssertionHeader.test.js.snap b/...lan/web_ui/testing/src/AssertionPane/__tests__/__snapshots__/AssertionHeader.test.js.snap
@@ -41,3 +41,45 @@ exports[`AssertionHeader shallow renders the correct HTML structure 1`] = `
   </div>
 </CardHeader>
 `;
+
+exports[`AssertionHeader shallow renders the correct HTML structure with status icons enabled 1`] = `
+<CardHeader
+  className="cardHeader_1s246z6-o_O-cardHeaderColorPassed_1nxwz58"
+  tag="div"
+>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    <span
+      className="button_13xlah4"
+      style={
+        Object {
+          "flexGrow": 4,
+          "order": 4,
+          "padding": ".125rem 0.75rem",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "fontWeight": "bold",
+          }
+        }
+      />
+      <span>
+        (
+        Equal
+        )
+      </span>
+    </span>
+    <span
+      className="cardHeaderAlignRight_107ja4p"
+    />
+  </div>
+</CardHeader>
+`;
diff --git a/testplan/web_ui/testing/src/Common/Styles.js b/testplan/web_ui/testing/src/Common/Styles.js
@@ -2,7 +2,21 @@
  * Common aphrodite styles.
  */
 import { StyleSheet } from "aphrodite";
-import { RED, GREEN, ORANGE, BLACK } from "../Common/defaults";
+import {
+  faCheck,
+  faInfo,
+  faQuestionCircle,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";
+
+import {
+  RED,
+  GREEN,
+  ORANGE,
+  BLACK,
+  LIGHT_GREY,
+  MEDIUM_GREY
+} from "../Common/defaults";
 
 export const unselectable = {
   "moz-user-select": "-moz-none",
@@ -15,26 +29,33 @@ export const unselectable = {
 export const statusStyles = {
   passed: {
     color: GREEN,
+    icon: faCheck,
   },
   failed: {
     color: RED,
+    icon: faTimes,
   },
   error: {
     color: RED,
+    icon: faTimes,
   },
   skipped: {
     color: ORANGE,
+    icon: faQuestionCircle,
   },
   unstable: {
     color: ORANGE,
+    icon: faQuestionCircle,
   },
   unknown: {
     color: BLACK,
+    icon: faInfo,
   },
 };
 
 export const navStyles = StyleSheet.create({
   entryName: {
+    display: "flex",
     overflow: "hidden",
     "text-overflow": "ellipsis",
     "white-space": "nowrap",
@@ -82,6 +103,33 @@ export const navStyles = StyleSheet.create({
     flexDirection: "column",
     alignItems: "end",
   },
+  navButton: {
+    position: "relative",
+    display: "block",
+    border: "none",
+    backgroundColor: LIGHT_GREY,
+    cursor: "pointer",
+  },
+  navButtonInteract: {
+    ":hover": {
+      backgroundColor: MEDIUM_GREY,
+    },
+  },
+  navButtonInteractFocus: {
+    backgroundColor: MEDIUM_GREY,
+    outline: "none",
+  },
+  buttonList: {
+    "overflow-y": "auto",
+    height: "100%",
+  },
+  statusIcon: {
+    display: "inline-flex",
+    width: "1rem",
+    justifyContent: "center",
+    marginRight: "0.3rem",
+    alignSelf: "center",
+  },
   environmentToggle: {
     padding: "0.65em 0em 0.65em 0em",
   },

diff --git a/testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js b/testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js
@@ -11,7 +11,7 @@ import {
   faToggleOn,
   faFastBackward,
 } from "@fortawesome/free-solid-svg-icons";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 
 import {
   CATEGORY_ICONS,
@@ -23,8 +23,9 @@ import {
   NAV_ENTRY_ACTIONS,
 } from "../Common/defaults";
 import { navStyles } from "../Common/Styles";
-import { generateNavTimeInfo } from "./navUtils";
+import { generateNavTimeInfo, GetStatusIcon } from "./navUtils";
 import { pendingEnvRequestAtom } from "../Report/InteractiveReport";
+import { showStatusIconsPreference } from "../UserSettings/UserSettings";
 
 /**
  * Display interactive NavEntry information:
@@ -67,6 +68,10 @@ const InteractiveNavEntry = (props) => {
       props.teardownTime,
       props.executionTime,
     ) : null;
+
+  const statusIcon2 = useAtomValue(showStatusIconsPreference)
+    ? GetStatusIcon(props.status)
+    : null;
 
   return (
     <div
@@ -89,6 +94,7 @@ const InteractiveNavEntry = (props) => {
         }
         title={props.description || props.name}
       >
+        {statusIcon2}
         {props.name}
       </div>
       <div className={css(navStyles.entryIcons)}>

diff --git a/testplan/web_ui/testing/src/Nav/NavEntry.js b/testplan/web_ui/testing/src/Nav/NavEntry.js
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Badge } from "reactstrap";
 import { css } from "aphrodite";
+import { useAtomValue } from "jotai";
 
 import {
   CATEGORY_ICONS,
@@ -10,7 +11,8 @@ import {
   STATUS_CATEGORY,
 } from "../Common/defaults";
 import { navStyles } from "../Common/Styles";
-import { generateNavTimeInfo } from "./navUtils";
+import { generateNavTimeInfo, GetStatusIcon } from "./navUtils";
+import { showStatusIconsPreference } from "../UserSettings/UserSettings";
 
 /**
  * Display NavEntry information:
@@ -26,6 +28,9 @@ const NavEntry = (props) => {
       props.teardownTime,
       props.executionTime,
     ) : null;
+  const statusIcon =
+    useAtomValue(showStatusIconsPreference) ? GetStatusIcon(props.status)
+    : null;
 
   return (
     <div
@@ -50,6 +55,7 @@ const NavEntry = (props) => {
         }
         title={`${props.description || props.name} - ${props.status}`}
       >
+        {statusIcon}
         {props.name}
       </div>
       <div className={css(navStyles.entryIcons)}>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Status-indicating icons have been introduced to improve accessibility for colour vision deficiency.