@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
49 lines • 3.64 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const check_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/check-circle-icon");
const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
const pending_icon_1 = require("@patternfly/react-icons/dist/js/icons/pending-icon");
const global_danger_color_100_1 = require("@patternfly/react-tokens/dist/js/global_danger_color_100");
const global_success_color_100_1 = require("@patternfly/react-tokens/dist/js/global_success_color_100");
const ui_1 = require("../ui");
const config_1 = require("../../config");
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
const ValidationPopover = ({ validation, actions, children }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const failedValidationHint = (0, config_1.hostValidationFailureHints)(t)[validation.id];
return (react_1.default.createElement(react_core_1.Popover, { headerContent: react_1.default.createElement("div", null, (0, config_1.hostValidationLabels)(t)[validation.id]), bodyContent: react_1.default.createElement("div", null,
(0, ui_1.toSentence)(validation.message),
validation.status === 'failure' && failedValidationHint && ` ${failedValidationHint}`), footerContent: actions, zIndex: 300 },
react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.link, isInline: true }, children)));
};
const HostPropertyValidationPopover = ({ validation, failureActions, pendingActions, children, showFailure = true, showPending = false, showSuccess = false, }) => {
if (validation) {
if (showFailure && validation.status === 'failure') {
return (react_1.default.createElement(ValidationPopover, { validation: validation, actions: failureActions },
react_1.default.createElement(react_core_1.Flex, { columnGap: { default: 'columnGapSm' }, alignItems: { default: 'alignItemsCenter' } },
react_1.default.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, { color: global_danger_color_100_1.global_danger_color_100.value }),
" ",
children)));
}
if (showPending && validation.status === 'pending') {
return (react_1.default.createElement(ValidationPopover, { validation: validation, actions: pendingActions },
react_1.default.createElement(react_core_1.Flex, { columnGap: { default: 'columnGapSm' }, alignItems: { default: 'alignItemsCenter' } },
react_1.default.createElement(pending_icon_1.PendingIcon, null),
" ",
children)));
}
if (showSuccess && validation.status === 'success') {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_core_1.Flex, { columnGap: { default: 'columnGapSm' }, alignItems: { default: 'alignItemsCenter' } },
react_1.default.createElement(check_circle_icon_1.CheckCircleIcon, { color: global_success_color_100_1.global_success_color_100.value }),
" ",
children)));
}
}
return react_1.default.createElement(react_1.default.Fragment, null, children);
};
exports.default = HostPropertyValidationPopover;
//# sourceMappingURL=HostPropertyValidationPopover.js.map