@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
64 lines • 4.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const Yup = tslib_1.__importStar(require("yup"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const ui_1 = require("../ui");
const utils_1 = require("./utils");
const GridGap_1 = tslib_1.__importDefault(require("../ui/GridGap"));
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
const validationSchema = (t, initialValues, usedHostnames = []) => Yup.object().shape({
hostname: (0, ui_1.richHostnameValidationSchema)(t, usedHostnames, initialValues.hostname),
});
const EditHostForm = ({ host, inventory, usedHostnames, onCancel, onSave, onHostSaveError, getEditErrorMessage, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const hostnameInputRef = react_1.default.useRef();
const [isSaveInProgress, setIsSaveInProgress] = react_1.default.useState(false);
react_1.default.useEffect(() => {
var _a, _b;
(_a = hostnameInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
(_b = hostnameInputRef.current) === null || _b === void 0 ? void 0 : _b.select();
}, []);
const { requestedHostname } = host;
const { hostname } = inventory;
const initialValues = {
hostId: host.id,
hostname: requestedHostname || '',
};
return (react_1.default.createElement(formik_1.Formik, { validateOnMount: true, initialValues: initialValues, initialStatus: { error: null }, validate: (0, ui_1.getRichTextValidation)(validationSchema(t, initialValues, usedHostnames)), onSubmit: (values, formikActions) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (values.hostname === initialValues.hostname) {
// no change to save
onCancel();
return;
}
try {
setIsSaveInProgress(true); // onSave ends closing the modal, so we can't update the status unless there is an error
yield onSave(values);
}
catch (e) {
setIsSaveInProgress(false);
const error = e;
const message = (getEditErrorMessage && getEditErrorMessage(error)) || t('ai:Host update failed.');
formikActions.setStatus({
error: {
title: t('ai:Failed to update host'),
message,
},
});
onHostSaveError && onHostSaveError(error);
}
}) }, ({ handleSubmit, status, isSubmitting, isValid, setStatus, dirty }) => (react_1.default.createElement(react_core_1.Form, { onSubmit: handleSubmit },
react_1.default.createElement(react_core_1.ModalBoxBody, null,
react_1.default.createElement(GridGap_1.default, null,
react_1.default.createElement(ui_1.AlertFormikError, { status: status, onClose: () => setStatus({ error: null }) }),
(0, utils_1.canHostnameBeChanged)(host.status) ? (react_1.default.createElement(react_core_1.Alert, { variant: react_core_1.AlertVariant.info, title: t('ai:This name will replace the original discovered hostname.'), isInline: true })) : (react_1.default.createElement(react_core_1.Alert, { variant: react_core_1.AlertVariant.warning, title: t('ai:The hostname cannot be changed.'), isInline: true })),
react_1.default.createElement(ui_1.StaticTextField, { name: "discoveredHostname", label: t('ai:Discovered hostname') }, hostname || ''),
react_1.default.createElement(ui_1.RichInputField, { label: t('ai:New hostname'), name: "hostname", ref: hostnameInputRef, isRequired: true, isDisabled: isSaveInProgress || !(0, utils_1.canHostnameBeChanged)(host.status), richValidationMessages: (0, ui_1.hostnameValidationMessages)(t) }))),
react_1.default.createElement(react_core_1.ModalBoxFooter, null,
react_1.default.createElement(react_core_1.Button, { key: "submit", "data-testid": "change-hostname-form__button-change", type: react_core_1.ButtonType.submit, isDisabled: isSubmitting || !isValid || !dirty, isLoading: isSubmitting }, t('ai:Change')),
react_1.default.createElement(react_core_1.Button, { "data-testid": "change-hostname-form__button-cancel", key: "cancel", variant: react_core_1.ButtonVariant.link, onClick: onCancel }, t('ai:Cancel')))))));
};
exports.default = EditHostForm;
//# sourceMappingURL=EditHostForm.js.map