@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
74 lines • 4.39 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_redux_1 = require("react-redux");
const react_router_dom_v5_compat_1 = require("react-router-dom-v5-compat");
const formik_1 = require("formik");
const common_1 = require("../../../common");
const ClusterWizardContext_1 = require("./ClusterWizardContext");
const ClusterWizardFooter_1 = tslib_1.__importDefault(require("../clusterWizard/ClusterWizardFooter"));
const ClusterWizardNavigation_1 = tslib_1.__importDefault(require("../clusterWizard/ClusterWizardNavigation"));
const OperatorsStep_1 = require("./OperatorsStep");
const services_1 = require("../../services");
const slice_1 = require("../../store/slices/current-cluster/slice");
const api_1 = require("../../../common/api");
const wizardTransition_1 = require("./wizardTransition");
// Balance debounce time: fast clicks should trigger a single API call,
// but making it shorter will allow us to disable navigation buttons while changes are pending
const operatorsAutoSaveDebounce = 500;
const getOperatorsInitialValues = (uiSettings, cluster) => {
return {
selectedBundles: (uiSettings === null || uiSettings === void 0 ? void 0 : uiSettings.bundlesSelected) || [],
selectedOperators: (0, common_1.selectOlmOperators)(cluster).map((o) => o.name || ''),
};
};
const OperatorsForm = ({ cluster }) => {
const { alerts } = (0, common_1.useAlerts)();
const clusterWizardContext = (0, ClusterWizardContext_1.useClusterWizardContext)();
const isAutoSaveRunning = (0, common_1.useFormikAutoSave)(operatorsAutoSaveDebounce);
const { errors, touched, isSubmitting, isValid } = (0, formik_1.useFormikContext)();
const navigate = (0, react_router_dom_v5_compat_1.useNavigate)();
const { pathname } = (0, react_router_dom_v5_compat_1.useLocation)();
const isNextDisabled = isAutoSaveRunning ||
!isValid ||
!!alerts.length ||
isSubmitting ||
!(0, wizardTransition_1.canNextOperators)({ cluster });
const handleNext = () => {
if (window.location.pathname.indexOf('assisted-installer') > -1) {
navigate(pathname, { state: undefined, replace: true });
}
clusterWizardContext.moveNext();
};
return (react_1.default.createElement(common_1.ClusterWizardStep, { navigation: react_1.default.createElement(ClusterWizardNavigation_1.default, { cluster: cluster }), footer: react_1.default.createElement(ClusterWizardFooter_1.default, { cluster: cluster, errorFields: (0, common_1.getFormikErrorFields)(errors, touched), isSubmitting: isSubmitting, isNextDisabled: isNextDisabled, onNext: handleNext, onBack: () => clusterWizardContext.moveBack(), isBackDisabled: isSubmitting || isAutoSaveRunning }) },
react_1.default.createElement(OperatorsStep_1.OperatorsStep, { cluster: cluster })));
};
const Operators = ({ cluster }) => {
const dispatch = (0, react_redux_1.useDispatch)();
const { updateUISettings, uiSettings } = (0, ClusterWizardContext_1.useClusterWizardContext)();
const { addAlert, clearAlerts } = (0, common_1.useAlerts)();
const handleSubmit = (values) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
clearAlerts();
const enabledOperators = values.selectedOperators.map((so) => ({
name: so,
}));
try {
const { data: updatedCluster } = yield services_1.ClustersService.update(cluster.id, cluster.tags, {
olmOperators: enabledOperators,
});
yield updateUISettings({ bundlesSelected: values.selectedBundles });
dispatch((0, slice_1.updateCluster)(updatedCluster));
}
catch (e) {
(0, api_1.handleApiError)(e, () => addAlert({ title: 'Failed to update the cluster', message: (0, api_1.getApiErrorMessage)(e) }));
if ((0, api_1.isUnknownServerError)(e)) {
dispatch((0, slice_1.setServerUpdateError)());
}
}
});
return (react_1.default.createElement(formik_1.Formik, { initialValues: getOperatorsInitialValues(uiSettings, cluster), onSubmit: handleSubmit },
react_1.default.createElement(OperatorsForm, { cluster: cluster })));
};
exports.default = Operators;
//# sourceMappingURL=Operators.js.map