import React from 'react'; import { SVGIcon } from 'onap-ui-react'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; function tooltip(msg) { return ( <Tooltip className="select-action-table-error-tooltip" id="error-tooltip"> {msg} </Tooltip> ); } const IconWithOverlay = ({ overlayMsg }) => ( <OverlayTrigger placement="bottom" overlay={tooltip(overlayMsg)}> <SVGIcon name="errorCircle" color="negative" /> </OverlayTrigger> ); function renderErrorOrCheck({ hasError, overlayMsg }) { if (hasError === undefined) { return <SVGIcon name="angleRight" className="dummy-icon" />; } if (hasError) { return overlayMsg ? ( <IconWithOverlay overlayMsg={overlayMsg} /> ) : ( <SVGIcon color="negative" name="errorCircle" /> ); } return <SVGIcon name="checkCircle" color="positive" />; } const SelectActionTableRow = ({ children, actionIcon, onAction, showAction, hasError, hasErrorIndication, overlayMsg }) => ( <div className="select-action-table-row-wrapper"> <div className={`select-action-table-row ${ hasError ? 'has-error' : '' }`}> {children} </div> {onAction && ( <SVGIcon color="secondary" name={actionIcon} data-test-id={`select-action-table-${actionIcon}`} onClick={onAction} iconClassName={showAction ? '' : 'hideDelete'} /> )} {hasErrorIndication && renderErrorOrCheck({ hasError, overlayMsg })} </div> ); export default SelectActionTableRow;