aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
blob: 27d728f2c8e12b32b32ec014353f050b7bc3b053 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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;