@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
97 lines • 6.74 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 react_core_1 = require("@patternfly/react-core");
const isUndefined_js_1 = tslib_1.__importDefault(require("lodash-es/isUndefined.js"));
const formik_1 = require("formik");
const common_1 = require("../../../common");
const wizardTransition_1 = require("./wizardTransition");
const common_2 = require("../../../common");
const ClusterWizardFooter_1 = tslib_1.__importDefault(require("./ClusterWizardFooter"));
const api_1 = require("../../../common/api");
const services_1 = require("../../services");
const OcmClusterDetailsFormFields_1 = require("../clusterConfiguration/OcmClusterDetailsFormFields");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const selectors_1 = require("../../store/slices/current-cluster/selectors");
const ClusterWizardContext_1 = require("./ClusterWizardContext");
const use_feature_1 = require("../../hooks/use-feature");
const InstallDisconnectedSwitch_1 = tslib_1.__importDefault(require("./disconnected/InstallDisconnectedSwitch"));
const ClusterDetailsForm = (props) => {
const { cluster, infraEnv, pullSecret, managedDomains, ocpVersions, usedClusterNames = [], handleClusterUpdate, handleClusterCreate, navigation, } = props;
const { customManifestsStep, moveNext } = (0, ClusterWizardContext_1.useClusterWizardContext)();
const { search } = (0, react_router_dom_v5_compat_1.useLocation)();
const { isViewerMode } = (0, react_redux_1.useSelector)(selectors_1.selectCurrentClusterPermissionsState);
const { clearAlerts } = (0, common_1.useAlerts)();
const isSingleClusterFeatureEnabled = (0, use_feature_1.useFeature)('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
const handleSubmit = react_1.default.useCallback((values) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
var _a;
if (cluster) {
let resetPlatform = values.platform;
const clusterPlatform = (_a = cluster.platform) === null || _a === void 0 ? void 0 : _a.type;
if (values.platform === 'none' &&
clusterPlatform !== 'none' &&
clusterPlatform !== 'baremetal') {
resetPlatform = 'baremetal';
}
const params = services_1.ClusterDetailsService.getClusterUpdateParams(values, resetPlatform);
yield handleClusterUpdate(cluster.id, params, values.addCustomManifest);
}
else {
const params = services_1.ClusterDetailsService.getClusterCreateParams(values);
yield handleClusterCreate(params, values.addCustomManifest);
}
}), [cluster, handleClusterCreate, handleClusterUpdate]);
const handleOnNext = react_1.default.useCallback((dirty, submitForm, cluster) => {
if (isViewerMode || (!dirty && !(0, isUndefined_js_1.default)(cluster) && (0, wizardTransition_1.canNextClusterDetails)({ cluster }))) {
clearAlerts();
return moveNext;
}
return () => {
void submitForm();
};
}, [isViewerMode, moveNext, clearAlerts]);
const initialValues = react_1.default.useMemo(() => services_1.ClusterDetailsService.getClusterDetailsInitialValues({
infraEnv,
cluster,
pullSecret,
managedDomains,
ocpVersions,
urlSearchParams: search,
addCustomManifests: customManifestsStep,
}), [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search, customManifestsStep]);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const validationSchema = (0, common_1.getClusterDetailsValidationSchema)({
usedClusterNames,
pullSecretSet: cluster === null || cluster === void 0 ? void 0 : cluster.pullSecretSet,
isOcm: true,
t,
});
return (react_1.default.createElement(formik_1.Formik, { initialValues: initialValues, validate: (values) => {
clearAlerts();
return (0, common_1.getRichTextValidation)(validationSchema)(values);
}, onSubmit: handleSubmit }, ({ submitForm, isSubmitting, isValid, dirty, errors, touched }) => {
const errorFields = (0, common_2.getFormikErrorFields)(errors, touched);
const footer = (react_1.default.createElement(ClusterWizardFooter_1.default, { cluster: cluster, errorFields: errorFields, isSubmitting: isSubmitting, isNextDisabled: !(!isSubmitting &&
isValid &&
(dirty || (cluster && (0, wizardTransition_1.canNextClusterDetails)({ cluster })))), onNext: handleOnNext(dirty, submitForm, cluster) }));
return (react_1.default.createElement(common_1.ClusterWizardStep, { navigation: navigation, footer: footer },
react_1.default.createElement(react_core_1.Grid, { hasGutter: true },
react_1.default.createElement(react_core_1.GridItem, null,
react_1.default.createElement(common_1.ClusterWizardStepHeader, null, "Cluster details")),
!isSingleClusterFeatureEnabled && (react_1.default.createElement(react_core_1.GridItem, null,
react_1.default.createElement(react_core_1.Split, null,
react_1.default.createElement(react_core_1.SplitItem, null,
react_1.default.createElement(InstallDisconnectedSwitch_1.default, { isDisabled: !!cluster })),
react_1.default.createElement(react_core_1.SplitItem, null,
react_1.default.createElement(common_1.DeveloperPreview, null))))),
react_1.default.createElement(react_core_1.GridItem, { span: 12, lg: 10, xl: 9, xl2: 7 },
react_1.default.createElement(OcmClusterDetailsFormFields_1.OcmClusterDetailsFormFields, { versions: ocpVersions, forceOpenshiftVersion: isSingleClusterFeatureEnabled
? ocpVersions[0].version
: cluster === null || cluster === void 0 ? void 0 : cluster.openshiftVersion, isPullSecretSet: !!(cluster === null || cluster === void 0 ? void 0 : cluster.pullSecretSet), defaultPullSecret: pullSecret, isOcm: api_1.isInOcm, managedDomains: managedDomains, clusterExists: !!cluster, clusterCpuArchitecture: cluster === null || cluster === void 0 ? void 0 : cluster.cpuArchitecture, clusterId: cluster === null || cluster === void 0 ? void 0 : cluster.id })))));
}));
};
exports.default = ClusterDetailsForm;
//# sourceMappingURL=ClusterDetailsForm.js.map