@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
127 lines • 8.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const NewFeatureSupportLevelBadge_1 = tslib_1.__importDefault(require("../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge"));
const common_1 = require("../../../common");
const formik_1 = require("formik");
const newFeatureSupportLevels_1 = require("../../../common/components/newFeatureSupportLevels");
const use_feature_1 = require("../../hooks/use-feature");
const react_redux_1 = require("react-redux");
const selectors_1 = require("../../store/slices/current-cluster/selectors");
const utils_1 = require("../clusterConfiguration/operators/utils");
const bundleSpecs_1 = require("../clusterConfiguration/operators/bundleSpecs");
const operatorSpecs_1 = require("../../../common/components/operators/operatorSpecs");
const ClusterWizardContext_1 = require("./ClusterWizardContext");
require("./OperatorsBundle.css");
const BundleLabel = ({ bundle, searchTerm }) => {
var _a;
const { byKey: opSpecs } = (0, operatorSpecs_1.useOperatorSpecs)();
const bundleSpec = bundleSpecs_1.bundleSpecs[bundle.id || ''];
return (React.createElement(React.Fragment, null,
React.createElement("span", null,
(0, operatorSpecs_1.highlightMatch)(bundle.title || '', searchTerm),
" "),
React.createElement(common_1.PopoverIcon, { component: 'a', headerContent: React.createElement("div", null, "Requirements and dependencies"), bodyContent: React.createElement(react_core_1.Stack, { hasGutter: true },
(bundleSpec === null || bundleSpec === void 0 ? void 0 : bundleSpec.Description) && (React.createElement(react_core_1.StackItem, null,
React.createElement(bundleSpec.Description, null))),
((_a = bundle.operators) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement(React.Fragment, null,
React.createElement(react_core_1.StackItem, null, "Bundle operators:"),
React.createElement(react_core_1.StackItem, null,
React.createElement(react_core_1.List, null, bundle.operators.map((op) => {
var _a;
return (React.createElement(react_core_1.ListItem, { key: op }, ((_a = opSpecs[op]) === null || _a === void 0 ? void 0 : _a.title) || op));
}))))),
(bundleSpec === null || bundleSpec === void 0 ? void 0 : bundleSpec.docsLink) && (React.createElement(react_core_1.StackItem, null,
React.createElement(common_1.ExternalLink, { href: bundleSpec.docsLink }, "Learn more")))) })));
};
const getBundleSupportLevel = (bundle, opSpecsByKey) => {
let supportLevel = undefined;
if (bundle.operators) {
for (const op of bundle.operators) {
const operatorSpec = opSpecsByKey[op];
if (operatorSpec) {
if (operatorSpec.supportLevel === 'dev-preview') {
supportLevel = 'dev-preview';
break;
}
else if (operatorSpec.supportLevel === 'tech-preview') {
supportLevel = 'tech-preview';
}
}
}
}
return supportLevel;
};
const BundleCard = ({ bundle, bundles, preflightRequirements, searchTerm, }) => {
var _a, _b, _c;
const { values, setFieldValue } = (0, formik_1.useFormikContext)();
const isSNO = (0, react_redux_1.useSelector)(selectors_1.selectIsCurrentClusterSNO);
const { isFeatureSupported } = (0, newFeatureSupportLevels_1.useNewFeatureSupportLevel)();
const { byKey: opSpecs } = (0, operatorSpecs_1.useOperatorSpecs)();
const { uiSettings } = (0, ClusterWizardContext_1.useClusterWizardContext)();
const supportLevel = getBundleSupportLevel(bundle, opSpecs);
const hasUnsupportedOperators = !!((_a = bundle.operators) === null || _a === void 0 ? void 0 : _a.some((op) => {
const operatorSpec = opSpecs[op];
if (!operatorSpec) {
return false;
}
return !isFeatureSupported(operatorSpec.featureId);
}));
const bundleSpec = bundleSpecs_1.bundleSpecs[bundle.id || ''];
const incompatibleBundle = (_b = bundleSpec === null || bundleSpec === void 0 ? void 0 : bundleSpec.incompatibleBundles) === null || _b === void 0 ? void 0 : _b.find((b) => values.selectedBundles.includes(b));
const isAssistedMigration = uiSettings === null || uiSettings === void 0 ? void 0 : uiSettings.isAssistedMigration;
const disabledReason = hasUnsupportedOperators
? 'Some operators in this bundle are not supported with the current configuration.'
: isSNO && (bundleSpec === null || bundleSpec === void 0 ? void 0 : bundleSpec.noSNO)
? 'This bundle is not available when deploying a Single Node OpenShift.'
: incompatibleBundle
? `Bundle cannot be installed together with ${((_c = bundles.find(({ id }) => id === incompatibleBundle)) === null || _c === void 0 ? void 0 : _c.title) || incompatibleBundle}`
: isAssistedMigration
? 'This bundle needs to be selected for clusters created from Migration Assessment'
: undefined;
const onSelect = (checked) => {
const newBundles = checked
? [...values.selectedBundles, bundle.id || '']
: values.selectedBundles.filter((sb) => sb !== bundle.id);
setFieldValue('selectedBundles', newBundles);
const newOperators = (0, utils_1.getNewBundleOperators)(values.selectedOperators, newBundles, bundles, bundle, preflightRequirements, checked);
setFieldValue('selectedOperators', newOperators);
};
const isSelected = values.selectedBundles.includes(bundle.id || '');
const checkboxId = `bundle-${bundle.id || ''}`;
return (React.createElement(react_core_1.Tooltip, { content: disabledReason, hidden: !disabledReason },
React.createElement(react_core_1.Card, { isDisabled: !!disabledReason, isFullHeight: true, isClickable: true, isSelectable: true, isSelected: isSelected, className: "ai-bundle-card" },
React.createElement(react_core_1.CardHeader, { selectableActions: {
selectableActionId: checkboxId,
selectableActionAriaLabelledby: checkboxId,
name: checkboxId,
onChange: (_, checked) => onSelect(checked),
isChecked: isSelected,
} },
React.createElement(react_core_1.CardTitle, null,
React.createElement(BundleLabel, { bundle: bundle, searchTerm: searchTerm }))),
React.createElement(react_core_1.CardBody, { isFilled: true },
React.createElement(react_core_1.Stack, { hasGutter: true },
React.createElement(react_core_1.StackItem, { isFilled: true },
React.createElement("div", null, (0, operatorSpecs_1.highlightMatch)(bundle.description || '', searchTerm))),
React.createElement(react_core_1.StackItem, null,
React.createElement(react_core_1.Split, null,
React.createElement(react_core_1.SplitItem, { isFilled: true }),
React.createElement(react_core_1.SplitItem, null,
React.createElement(NewFeatureSupportLevelBadge_1.default, { featureId: bundle.id || '', supportLevel: supportLevel })))))))));
};
const OperatorsBundle = ({ bundles, preflightRequirements, searchTerm, }) => {
const isSingleClusterFeatureEnabled = (0, use_feature_1.useFeature)('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
return (React.createElement(react_core_1.Stack, { hasGutter: true },
React.createElement(react_core_1.StackItem, null,
React.createElement(react_core_1.Title, { headingLevel: "h2", size: "lg" }, bundles.length > 0 ? 'Bundles' : '')),
React.createElement(react_core_1.StackItem, null,
React.createElement(react_core_1.Gallery, { hasGutter: true, minWidths: { default: '350px' } }, (isSingleClusterFeatureEnabled
? bundles.filter((b) => b.id && common_1.singleClusterBundles.includes(b.id))
: bundles).map((bundle) => (React.createElement(react_core_1.GalleryItem, { key: bundle.id },
React.createElement(BundleCard, { bundle: bundle, bundles: bundles, preflightRequirements: preflightRequirements, searchTerm: searchTerm }))))))));
};
exports.default = OperatorsBundle;
//# sourceMappingURL=OperatorsBundle.js.map