diff --git a/specifyweb/frontend/js_src/lib/components/FormMeta/Definition.tsx b/specifyweb/frontend/js_src/lib/components/FormMeta/Definition.tsx index 8f29b175a42..a8cc6434812 100644 --- a/specifyweb/frontend/js_src/lib/components/FormMeta/Definition.tsx +++ b/specifyweb/frontend/js_src/lib/components/FormMeta/Definition.tsx @@ -14,6 +14,8 @@ import type { ViewDescription } from '../FormParse'; import { Dialog } from '../Molecules/Dialog'; import { ProtectedTool } from '../Permissions/PermissionDenied'; import { userPreferences } from '../Preferences/userPreferences'; +import { UnloadProtectDialog } from '../Router/UnloadProtect'; +import { UnloadProtectsContext } from '../Router/UnloadProtect'; export function Definition({ table, @@ -48,11 +50,29 @@ function FormDefinitionDialog({ readonly viewDescription: ViewDescription | undefined; readonly onClose: () => void; }): JSX.Element { + const [showUnloadProtect, setShowUnloadProtect] = React.useState(false); + const unloadProtects = React.useContext(UnloadProtectsContext)!; + + const [useFieldLabels = true] = useCachedState('forms', 'useFieldLabels'); + const initialFieldLabelsValue = React.useRef(useFieldLabels); + + const handleDialogClose = (): void => { + if (useFieldLabels === initialFieldLabelsValue.current) { + handleClose(); + } else { + if (!showUnloadProtect && unloadProtects.length > 0) { + setShowUnloadProtect(true); + return; + } + globalThis.location.reload(); + } + }; + return ( @@ -63,6 +83,16 @@ function FormDefinitionDialog({ viewSetId={viewDescription.viewSetId} /> )} + {showUnloadProtect && ( + { + setShowUnloadProtect(false); + }} + onConfirm={handleDialogClose} + > + {formsText.unsavedFormUnloadProtect()} + + )} ); } @@ -95,21 +125,6 @@ function UseLabels(): JSX.Element { 'useFieldLabels' ); - const initialValue = React.useRef(useFieldLabels); - const isChanged = React.useRef(false); - React.useEffect(() => { - isChanged.current = useFieldLabels !== initialValue.current; - }, [useFieldLabels]); - - React.useEffect( - () => () => { - if (isChanged.current) { - globalThis.location.reload(); - } - }, - [] - ); - return ( ({ header={customTitle ?? title} headerButtons={ <> - {headerButtons?.(specifyNetworkBadge) ?? ( + {headerButtons?.(headerContent) ?? ( <>