@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
46 lines • 3.08 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const React = tslib_1.__importStar(require("react"));
const common_1 = require("../../../../../common");
const use_translation_wrapper_1 = require("../../../../../common/hooks/use-translation-wrapper");
const ClusterDetailsFormFields_1 = require("../../../ClusterDeployment/ClusterDetailsFormFields");
const useTemptiflySync_1 = require("../../hooks/useTemptiflySync");
const DetailsForm = ({ onValuesChanged, extensionAfter, ocpVersions, allVersions, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
const { values } = (0, formik_1.useFormikContext)();
(0, useTemptiflySync_1.useTemptiflySync)({ values, onValuesChanged });
const nameInputRef = React.useRef();
React.useEffect(() => {
var _a;
(_a = nameInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, []);
const selectOptions = React.useMemo(() => ocpVersions.map((version) => ({
label: version.label,
value: version.value,
})), [ocpVersions]);
const additionalSelectOptions = React.useMemo(() => {
if (values.customOpenshiftSelect &&
!selectOptions.some((option) => { var _a; return option.value === ((_a = values.customOpenshiftSelect) === null || _a === void 0 ? void 0 : _a.value); })) {
return [
{
value: values.customOpenshiftSelect.value,
label: values.customOpenshiftSelect.label,
},
];
}
return [];
}, [selectOptions, values.customOpenshiftSelect]);
return (React.createElement(react_core_1.Form, null,
React.createElement(common_1.InputField, { ref: nameInputRef, label: t('ai:Cluster name'), name: "name", placeholder: t('ai:Enter cluster name'), isRequired: true }),
(extensionAfter === null || extensionAfter === void 0 ? void 0 : extensionAfter['name']) && extensionAfter['name'],
React.createElement(common_1.InputField, { label: t('ai:Base domain'), name: "baseDnsDomain", helperText: React.createElement(ClusterDetailsFormFields_1.BaseDnsHelperText, { name: values.name, baseDnsDomain: values.baseDnsDomain }), placeholder: "example.com", isRequired: true }),
React.createElement(common_1.OpenShiftVersionDropdown, { name: "openshiftVersion", items: selectOptions, versions: ocpVersions, showReleasesLink: false, showOpenshiftVersionModal: () => setOpenshiftVersionModalOpen(true), customItems: additionalSelectOptions }),
openshiftVersionModalOpen && (React.createElement(common_1.OpenShiftVersionModal, { allVersions: allVersions, setOpenshiftVersionModalOpen: setOpenshiftVersionModalOpen })),
React.createElement(common_1.PullSecret, null)));
};
exports.default = DetailsForm;
//# sourceMappingURL=DetailsForm.js.map