diff --git a/src/components/dialogs/commons/modificationDialog.tsx b/src/components/dialogs/commons/modificationDialog.tsx index f47295c3dd..5e35a85583 100644 --- a/src/components/dialogs/commons/modificationDialog.tsx +++ b/src/components/dialogs/commons/modificationDialog.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { useCallback } from 'react'; +import { PropsWithChildren, useCallback } from 'react'; import { FieldErrors, FieldValues, useFormContext } from 'react-hook-form'; import { SubmitButton } from '@gridsuite/commons-ui'; import { ModificationDialogContent, ModificationDialogContentProps } from './modification-dialog-content'; @@ -16,6 +16,13 @@ import { ModificationDialogContent, ModificationDialogContentProps } from './mod * @param {CallbackEvent} onClear callback when the dialog needs to be cleared * @param {CallbackEvent} onSave callback when saving the modification * @param {Boolean} disabledSave to control disabled prop of the validate button + * @param {Boolean} readOnly when true, forces the validate button to be disabled. + * Actual form-input disabling is intentionally NOT done here: wrapping all of + * `children` (which can include tab navigation, action buttons, etc.) in a + * disabled fieldset at this generic level would also disable that navigation. + * Each dialog's content should instead read `readOnly` from + * useCustomFormContext() and scope its own fieldset around just the actual + * form fields (see LineForm for an example). * @param {CallbackEvent} onValidated callback when validation is successful * @param {CallbackEvent} onValidationError callback when validation failed * @param {Array} dialogProps props that are forwarded to the MUI Dialog component @@ -26,6 +33,7 @@ export type ModificationDialogProps = Omit< 'closeAndClear' | 'submitButton' > & { disabledSave?: boolean; + readOnly?: boolean; onClear: () => void; onClose?: () => void; onSave: (modificationData: TFieldValues) => void; @@ -35,13 +43,15 @@ export type ModificationDialogProps = Omit< export function ModificationDialog({ disabledSave = false, + readOnly = false, onClear, onClose, onSave, onValidated, onValidationError, + children, ...dialogProps -}: Readonly>) { +}: Readonly>>) { const { handleSubmit } = useFormContext(); const closeAndClear = () => { @@ -84,8 +94,13 @@ export function ModificationDialog({ data-testid="ValidateButton" onClick={handleSubmit(handleValidate, handleValidationError)} variant="outlined" - disabled={disabledSave} + disabled={disabledSave || readOnly} /> ); - return ; + + return ( + + {children} + + ); } diff --git a/src/components/dialogs/network-modifications/line/modification/line-modification-dialog.tsx b/src/components/dialogs/network-modifications/line/modification/line-modification-dialog.tsx index ee6420d893..de9ca0a9dc 100644 --- a/src/components/dialogs/network-modifications/line/modification/line-modification-dialog.tsx +++ b/src/components/dialogs/network-modifications/line/modification/line-modification-dialog.tsx @@ -54,6 +54,12 @@ interface LineModificationDtoWithId extends LineModificationDto, WithModificatio export type LineModificationDialogProps = EquipmentModificationDialogProps & { editData?: LineModificationDtoWithId; + /** + * When true, the dialog is displayed in read-only mode: all inputs + * (including those in nested sub-components) are disabled via a + * native
, so the form can only be viewed, not edited. + */ + readOnly?: boolean; }; /** @@ -66,6 +72,7 @@ export type LineModificationDialogProps = EquipmentModificationDialogProps & { * @param dialogProps props that are forwarded to the generic ModificationDialog component * @param isUpdate check if edition form * @param editDataFetchStatus indicates the status of fetching EditData + * @param readOnly if true, disables every input (including nested sub-components) to display the form in view-only mode */ const LineModificationDialog = ({ editData, @@ -75,6 +82,7 @@ const LineModificationDialog = ({ currentRootNetworkUuid, isUpdate, editDataFetchStatus, + readOnly = true, ...dialogProps }: Readonly) => { const currentNodeUuid = currentNode?.id; @@ -265,11 +273,13 @@ const LineModificationDialog = ({ {...formMethods} isNodeBuilt={isNodeBuilt(currentNode)} isUpdate={isUpdate} + readOnly={readOnly} >