Add formMeta menu in "View in Forms" and add unload protect to "Use Localized Field Labels"

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 (
     <Dialog
       buttons={commonText.close()}
       header={resourcesText.formDefinition()}
-      onClose={handleClose}
+      onClose={handleDialogClose}
     >
       <UseAutoForm table={table} />
       <UseLabels />
@@ -63,6 +83,16 @@ function FormDefinitionDialog({
           viewSetId={viewDescription.viewSetId}
         />
       )}
+      {showUnloadProtect && (
+        <UnloadProtectDialog
+          onCancel={(): void => {
+            setShowUnloadProtect(false);
+          }}
+          onConfirm={handleDialogClose}
+        >
+          {formsText.unsavedFormUnloadProtect()}
+        </UnloadProtectDialog>
+      )}
     </Dialog>
   );
 }
@@ -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 (
     <Label.Inline>
       <Input.Checkbox

specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx

@@ -365,7 +365,7 @@ export function ResourceView<SCHEMA extends AnySchema>({
       header={customTitle ?? title}
       headerButtons={
         <>
-          {headerButtons?.(specifyNetworkBadge) ?? (
+          {headerButtons?.(headerContent) ?? (
             <>
               <DataEntry.Visit resource={resource} />
               <span className="-ml-4 flex-1" />