Abstract away tooltip overlay trigger

mxcube · Sep 26, 2024 · 0d14192 · 0d14192
1 parent a5313cd
commit 0d14192
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 128 deletions.
diff --git a/ui/src/components/Equipment/PlateManipulator.jsx b/ui/src/components/Equipment/PlateManipulator.jsx
@@ -6,12 +6,12 @@ import {
   ButtonToolbar,
   OverlayTrigger,
   Popover,
-  Tooltip,
 } from 'react-bootstrap';
 import { contextMenu, Menu, Item, Separator } from 'react-contexify';
 
 import { MdSync } from 'react-icons/md';
 import styles from './equipment.module.css';
+import TooltipTrigger from '../TooltipTrigger';
 
 const strokeColor = 'rgb(136, 136, 136)';
 
@@ -634,33 +634,23 @@ export default function PlateManipulator(props) {
     >
       <Col className="ms-3">
         <ButtonToolbar className="ms-4">
-          {!inPopover ? (
+          {!inPopover && (
             <div className="me-4">
               <b>{cplate_label}</b>
             </div>
-          ) : null}
-          <OverlayTrigger
-            variant="outline-success"
-            placement="bottom"
-            overlay={
-              <Tooltip id="select-samples">
-                Refresh if Plate Location not Updated
-              </Tooltip>
-            }
+          )}
+          <TooltipTrigger
+            id="refresh-tooltip"
+            tooltipContent="Refresh if plate location not updated"
           >
             <Button size="sm" variant="outline-info" onClick={refreshClicked}>
               <MdSync size="1.5em" /> Refresh
             </Button>
-          </OverlayTrigger>
+          </TooltipTrigger>
           <span style={{ marginLeft: '1.5em' }} />
-          <OverlayTrigger
-            variant="outline-success"
-            placement="bottom"
-            overlay={
-              <Tooltip id="select-samples">
-                Synchronise sample list with CRIMS
-              </Tooltip>
-            }
+          <TooltipTrigger
+            id="sync-samples-tooltip"
+            tooltipContent="Synchronise sample list with CRIMS"
           >
             <Button
               size="sm"
@@ -669,7 +659,7 @@ export default function PlateManipulator(props) {
             >
               <MdSync size="1.5em" /> CRIMS
             </Button>
-          </OverlayTrigger>
+          </TooltipTrigger>
         </ButtonToolbar>
       </Col>
       <div className={styles.plate_div} style={cssDisable}>

diff --git a/ui/src/components/SampleGrid/SampleGridTableItem.jsx b/ui/src/components/SampleGrid/SampleGridTableItem.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {
   ListGroup,
   OverlayTrigger,
-  Tooltip,
   Popover,
   Badge,
   Button,
@@ -17,6 +16,7 @@ import { isCollected } from '../../constants';
 import { BsSquare, BsCheck2Square } from 'react-icons/bs';
 import { MdContentCopy } from 'react-icons/md';
 import './SampleGridTable.css';
+import TooltipTrigger from '../TooltipTrigger';
 
 export class SampleGridTableItem extends React.Component {
   constructor(props) {
@@ -38,33 +38,32 @@ export class SampleGridTableItem extends React.Component {
   }
 
   itemControls() {
-    let icon = <BsSquare size="0.9em" />;
-
-    if (this.props.picked) {
-      icon = <BsCheck2Square size="1em" />;
-    }
-
-    const pickButton = (
-      <OverlayTrigger
-        placement="auto"
-        overlay={
-          <Tooltip id="pick-sample">Pick/Unpick sample for collect</Tooltip>
-        }
-      >
-        <Button
-          variant="link"
-          disabled={this.props.current && this.props.picked}
-          className="samples-grid-table-item-button"
-          onClick={(e) => {
-            this.pickButtonOnClick(e);
-          }}
+    return (
+      <div className="samples-item-controls-container">
+        <TooltipTrigger
+          id="pick-sample"
+          placement="auto"
+          tooltipContent="Pick/Unpick sample for collect"
         >
-          <i>{icon}</i>
-        </Button>
-      </OverlayTrigger>
+          <Button
+            variant="link"
+            disabled={this.props.current && this.props.picked}
+            className="samples-grid-table-item-button"
+            onClick={(e) => {
+              this.pickButtonOnClick(e);
+            }}
+          >
+            <i>
+              {this.props.picked ? (
+                <BsCheck2Square size="1em" />
+              ) : (
+                <BsSquare size="0.9em" />
+              )}
+            </i>
+          </Button>
+        </TooltipTrigger>
+      </div>
     );
-
-    return <div className="samples-item-controls-container">{pickButton}</div>;
   }
 
   seqId() {

diff --git a/ui/src/components/SampleQueue/CharacterisationTaskItem.jsx b/ui/src/components/SampleQueue/CharacterisationTaskItem.jsx
@@ -6,20 +6,14 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {
-  ProgressBar,
-  Button,
-  Collapse,
-  Table,
-  OverlayTrigger,
-  Tooltip,
-} from 'react-bootstrap';
+import { ProgressBar, Button, Collapse, Table } from 'react-bootstrap';
 import {
   TASK_UNCOLLECTED,
   TASK_COLLECTED,
   TASK_COLLECT_FAILED,
   TASK_RUNNING,
 } from '../../constants';
+import TooltipTrigger from '../TooltipTrigger';
 
 export default class TaskItem extends Component {
   static propTypes = {
@@ -201,21 +195,20 @@ export default class TaskItem extends Component {
     const pathEndPart = path.slice(-40);
 
     return (
-      <OverlayTrigger
-        placement="bottom"
-        rootClose
-        overlay={
-          <Tooltip id="wedge-popover">
+      <TooltipTrigger
+        id="wedge-path-tooltip"
+        tooltipContent={
+          <>
             {path}
             {value}
-          </Tooltip>
+          </>
         }
       >
         <a style={{ flexGrow: 1 }}>
           .../{pathEndPart.slice(pathEndPart.indexOf('/') + 1)}
           {value}
         </a>
-      </OverlayTrigger>
+      </TooltipTrigger>
     );
   }
 

diff --git a/ui/src/components/SampleQueue/TaskItem.jsx b/ui/src/components/SampleQueue/TaskItem.jsx
@@ -6,20 +6,14 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {
-  ProgressBar,
-  Button,
-  Collapse,
-  Table,
-  OverlayTrigger,
-  Tooltip,
-} from 'react-bootstrap';
+import { ProgressBar, Button, Collapse, Table } from 'react-bootstrap';
 import {
   TASK_UNCOLLECTED,
   TASK_COLLECTED,
   TASK_COLLECT_FAILED,
   TASK_RUNNING,
 } from '../../constants';
+import TooltipTrigger from '../TooltipTrigger';
 
 export default class TaskItem extends Component {
   static propTypes = {
@@ -153,21 +147,20 @@ export default class TaskItem extends Component {
     const pathEndPart = path.slice(-40);
 
     return (
-      <OverlayTrigger
-        placement="bottom"
-        rootClose
-        overlay={
-          <Tooltip id="wedge-popover">
+      <TooltipTrigger
+        id="wedge-path-tooltip"
+        tooltipContent={
+          <>
             {path}
             {value}
-          </Tooltip>
+          </>
         }
       >
         <a style={{ flexGrow: 1 }}>
           .../{pathEndPart.slice(pathEndPart.indexOf('/') + 1)}
           {value}
         </a>
-      </OverlayTrigger>
+      </TooltipTrigger>
     );
   }
 

diff --git a/ui/src/components/SampleQueue/WorkflowTaskItem.jsx b/ui/src/components/SampleQueue/WorkflowTaskItem.jsx
@@ -5,19 +5,14 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {
-  ProgressBar,
-  Button,
-  Collapse,
-  OverlayTrigger,
-  Tooltip,
-} from 'react-bootstrap';
+import { ProgressBar, Button, Collapse } from 'react-bootstrap';
 import {
   TASK_UNCOLLECTED,
   TASK_COLLECTED,
   TASK_COLLECT_FAILED,
   TASK_RUNNING,
 } from '../../constants';
+import TooltipTrigger from '../TooltipTrigger';
 
 export default class WorkflowTaskItem extends Component {
   static propTypes = {
@@ -122,15 +117,11 @@ export default class WorkflowTaskItem extends Component {
     const pathEndPart = path.slice(-40);
 
     return (
-      <OverlayTrigger
-        placement="bottom"
-        rootClose
-        overlay={<Tooltip id="wedge-popover">{path}</Tooltip>}
-      >
+      <TooltipTrigger id="wedge-path-tooltip" tooltipContent={path}>
         <a style={{ flexGrow: 1 }}>
           .../{pathEndPart.slice(pathEndPart.indexOf('/') + 1)}
         </a>
-      </OverlayTrigger>
+      </TooltipTrigger>
     );
   }
 

diff --git a/ui/src/components/TooltipTrigger.jsx b/ui/src/components/TooltipTrigger.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+function TooltipTrigger(props) {
+  const { id, placement = 'bottom', tooltipContent, children } = props;
+
+  return (
+    <OverlayTrigger
+      rootClose // ensures focus is removed from child (and tooltip closed) when clicking anywhere else
+      placement={placement}
+      overlay={<Tooltip id={id}>{tooltipContent}</Tooltip>}
+    >
+      {children}
+    </OverlayTrigger>
+  );
+}
+
+export default TooltipTrigger;
diff --git a/ui/src/containers/SampleGridTableContainer.jsx b/ui/src/containers/SampleGridTableContainer.jsx
@@ -5,15 +5,7 @@ import React from 'react';
 import withNavigate from '../components/withNavigate';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import {
-  Row,
-  Col,
-  Table,
-  OverlayTrigger,
-  Tooltip,
-  Button,
-  Dropdown,
-} from 'react-bootstrap';
+import { Row, Col, Table, Button, Dropdown } from 'react-bootstrap';
 
 import LazyLoad, { forceVisible } from 'react-lazyload';
 import Collapsible from 'react-collapsible';
@@ -61,6 +53,7 @@ import SampleIsaraView from './SampleIsaraView';
 import { SampleGridTableItem } from '../components/SampleGrid/SampleGridTableItem';
 
 import { TaskItem } from '../components/SampleGrid/TaskItem';
+import TooltipTrigger from '../components/TooltipTrigger';
 
 const SETTINGS = {
   dots: false,
@@ -485,17 +478,14 @@ class SampleGridTableContainer extends React.Component {
 
     return (
       <>
-        {puck ? (
-          <span className="span-container-code"> {puckCode} </span>
-        ) : null}
-        <OverlayTrigger
+        {puck && <span className="span-container-code"> {puckCode} </span>}
+        <TooltipTrigger
+          id="pick-sample-tooltip"
           placement="auto"
-          overlay={
-            <Tooltip id="pick-sample">
-              {pickSample
-                ? 'Pick samples/ Add to Queue'
-                : 'Unpick samples / Remove from Queue'}
-            </Tooltip>
+          tooltipContent={
+            pickSample
+              ? 'Pick samples/ Add to Queue'
+              : 'Unpick samples / Remove from Queue'
           }
         >
           <Button
@@ -507,7 +497,7 @@ class SampleGridTableContainer extends React.Component {
           >
             <i>{icon}</i>
           </Button>
-        </OverlayTrigger>
+        </TooltipTrigger>
       </>
     );
   }