@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
131 lines • 8.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExternalPlatformDropdown = exports.areAllExternalPlatformIntegrationDisabled = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const common_1 = require("../../../../common");
const constants_1 = require("./constants");
const newFeatureSupportLevels_1 = require("../../../../common/components/newFeatureSupportLevels");
const NewFeatureSupportLevelBadge_1 = tslib_1.__importDefault(require("../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge"));
const use_feature_1 = require("../../../hooks/use-feature");
const INPUT_NAME = 'platform';
const fieldId = (0, common_1.getFieldId)(INPUT_NAME, 'input');
const getDisabledReasonForExternalPlatform = (isSNO, getFeatureDisabledReason, platform, featureSupportLevelData, cpuArchitecture) => {
if (isSNO && (platform === 'nutanix' || platform === 'vsphere')) {
return `${constants_1.ExternalPlatformLabels[platform]} integration is not supported for Single-Node OpenShift.`;
}
else if (isSNO &&
(cpuArchitecture === common_1.CpuArchitecture.ppc64le || cpuArchitecture === common_1.CpuArchitecture.s390x)) {
return `Plaform integration is not supported for Single-Node OpenShift with the selected CPU architecture.`;
}
else {
return getFeatureDisabledReason(constants_1.ExternalPlaformIds[platform], featureSupportLevelData !== null && featureSupportLevelData !== void 0 ? featureSupportLevelData : undefined, cpuArchitecture);
}
};
const isAvailablePlatform = (platform, isDisconnected) => {
if (isDisconnected && platform === 'nutanix') {
return false;
}
return platform !== undefined;
};
const getExternalPlatformTypes = (isSNO, getFeatureSupportLevel, getFeatureDisabledReason, featureSupportLevelData, cpuArchitecture, isDisconnected) => {
const platforms = ['none', 'nutanix', 'external', 'vsphere'];
const newPlatform = platforms
.filter((platform) => isAvailablePlatform(platform, isDisconnected))
.reduce((a, platform) => (Object.assign(Object.assign({}, a), { [platform]: {
label: constants_1.ExternalPlatformLabels[platform],
href: constants_1.ExternalPlatformLinks[platform],
disabledReason: getDisabledReasonForExternalPlatform(isSNO, getFeatureDisabledReason, platform, featureSupportLevelData !== null && featureSupportLevelData !== void 0 ? featureSupportLevelData : undefined, cpuArchitecture),
supportLevel: getFeatureSupportLevel(constants_1.ExternalPlaformIds[platform], featureSupportLevelData !== null && featureSupportLevelData !== void 0 ? featureSupportLevelData : undefined),
} })), {});
return newPlatform;
};
const areAllExternalPlatformIntegrationDisabled = (externalPlatformTypes) => {
return Object.values(externalPlatformTypes)
.filter((info) => info.label !== 'No platform integration')
.every((info) => info.disabledReason !== undefined);
};
exports.areAllExternalPlatformIntegrationDisabled = areAllExternalPlatformIntegrationDisabled;
const getReasonForDropdownDisabled = (isSNO, labelCpuArch) => {
if (!isSNO) {
return `Platform integration is not supported when ${labelCpuArch} is selected`;
}
else {
return `Platform integration is not supported for SNO clusters`;
}
};
const ExternalPlatformDropdown = ({ onChange, cpuArchitecture, featureSupportLevelData, isSNO, }) => {
const [field, , { setValue }] = (0, formik_1.useField)(INPUT_NAME);
const [isOpen, setOpen] = react_1.default.useState(false);
const [externalPlatformTypes, setExternalPlatformTypes] = react_1.default.useState({});
const isSingleClusterFeatureEnabled = (0, use_feature_1.useFeature)('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
const tooltipDropdownDisabled = getReasonForDropdownDisabled(isSNO, cpuArchitecture ? common_1.architectureData[cpuArchitecture].label : '');
const handleClick = (event, href) => {
event.stopPropagation(); // Stop event propagation here
window.open(href, '_blank');
};
const { getFeatureSupportLevel, getFeatureDisabledReason } = (0, newFeatureSupportLevels_1.useNewFeatureSupportLevel)();
react_1.default.useEffect(() => {
// Calculate updated externalPlatformTypes based on the dependencies
const updatedExternalPlatformTypes = getExternalPlatformTypes(isSNO, getFeatureSupportLevel, getFeatureDisabledReason, featureSupportLevelData, cpuArchitecture, isSingleClusterFeatureEnabled);
// Update the state with the new externalPlatformTypes
setExternalPlatformTypes(updatedExternalPlatformTypes);
}, [
featureSupportLevelData,
cpuArchitecture,
isSNO,
isSingleClusterFeatureEnabled,
getFeatureSupportLevel,
getFeatureDisabledReason,
]);
const dropdownIsDisabled = react_1.default.useMemo(() => {
return (0, exports.areAllExternalPlatformIntegrationDisabled)(externalPlatformTypes);
}, [externalPlatformTypes]);
react_1.default.useEffect(() => {
var _a;
let isCurrentValueDisabled = false;
if (field.value !== 'none') {
isCurrentValueDisabled =
((_a = externalPlatformTypes[field.value]) === null || _a === void 0 ? void 0 : _a.disabledReason) !== undefined;
}
if (dropdownIsDisabled || isCurrentValueDisabled) {
setValue('none');
onChange('none');
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dropdownIsDisabled, externalPlatformTypes]);
const enabledItems = Object.keys(externalPlatformTypes).map((platform) => {
const { label, href, disabledReason, supportLevel } = externalPlatformTypes[platform];
return (react_1.default.createElement(react_core_1.DropdownItem, { value: platform, key: platform, id: platform, isAriaDisabled: disabledReason !== undefined },
react_1.default.createElement(react_core_1.Split, null,
react_1.default.createElement(react_core_1.SplitItem, null,
react_1.default.createElement(react_core_1.Tooltip, { hidden: !disabledReason, content: disabledReason, position: "top" },
react_1.default.createElement("div", null,
label,
react_1.default.createElement("span", { onClick: (event) => event.stopPropagation() },
react_1.default.createElement(NewFeatureSupportLevelBadge_1.default, { featureId: constants_1.ExternalPlaformIds[platform], supportLevel: supportLevel }))))),
!!href && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_core_1.SplitItem, { isFilled: true }),
react_1.default.createElement(react_core_1.SplitItem, null,
react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.link, isInline: true, style: { float: 'right' }, onClick: (event) => handleClick(event, href) },
"Learn more ",
react_1.default.createElement("i", { className: "fas fa-external-link-alt" }))))))));
});
const toggle = (toggleRef) => {
var _a;
return (react_1.default.createElement(react_core_1.MenuToggle, { id: fieldId, className: "pf-v5-u-w-100", ref: toggleRef, onClick: () => setOpen(!isOpen), isDisabled: dropdownIsDisabled, isExpanded: isOpen }, (_a = externalPlatformTypes[field.value]) === null || _a === void 0 ? void 0 : _a.label));
};
return (react_1.default.createElement(react_core_1.FormGroup, { id: `form-control__${fieldId}`, fieldId: fieldId, label: 'Integrate with external partner platforms' },
react_1.default.createElement(react_core_1.Tooltip, { content: tooltipDropdownDisabled, hidden: !dropdownIsDisabled, position: "top", distance: 7 },
react_1.default.createElement(react_core_1.Dropdown, { id: `${fieldId}-dropdown`, toggle: toggle, isOpen: isOpen, onOpenChange: () => setOpen(!isOpen), onSelect: (event) => {
const selectedPlatform = event === null || event === void 0 ? void 0 : event.currentTarget.id;
setValue(selectedPlatform);
setOpen(false);
onChange(selectedPlatform);
}, shouldFocusToggleOnSelect: true },
react_1.default.createElement(react_core_1.DropdownList, null, enabledItems)))));
};
exports.ExternalPlatformDropdown = ExternalPlatformDropdown;
//# sourceMappingURL=ExternalPlatformDropdown.js.map