feat(frontend): warn if notes are dirty (#11772)

* feat(frontend): warn if notes are dirty

closes https://github.com/invenhost/InvenTree/issues/301

* fix type

* fix small style issues

* add changelog entry

* stop closing tab

src/frontend/src/components/editors/NotesEditor.tsx

@@ -25,15 +25,18 @@ import { useApi } from '../../contexts/ApiContext';
 export default function NotesEditor({
   modelType,
   modelId,
-  editable
+  editable,
+  setDirtyCallback
 }: Readonly<{
   modelType: ModelType;
   modelId: number;
   editable?: boolean;
+  setDirtyCallback?: (dirty: boolean) => void;
 }>) {
   const api = useApi();
   // In addition to the editable prop, we also need to check if the user has "enabled" editing
   const [editing, setEditing] = useState<boolean>(false);
+  const [localIsDirty, setLocalIsDirty] = useState<boolean>(false);
 
   const [markdown, setMarkdown] = useState<string>('');
 
@@ -42,6 +45,10 @@ export default function NotesEditor({
     setEditing(false);
   }, [editable, modelId, modelType]);
 
+  useEffect(() => {
+    setDirtyCallback?.(localIsDirty);
+  }, [localIsDirty]);
+
   const noteUrl: string = useMemo(() => {
     const modelInfo = ModelInformationDict[modelType];
     return apiUrl(modelInfo.api_endpoint, modelId);
@@ -121,6 +128,7 @@ export default function NotesEditor({
             id: 'notes',
             autoClose: 2000
           });
+          setLocalIsDirty(false);
         })
         .catch((error) => {
           notifications.hide('notes');
@@ -222,6 +230,7 @@ export default function NotesEditor({
       getMdeInstance={(instance: SimpleMde) => setMdeInstance(instance)}
       onChange={(value: string) => {
         setMarkdown(value);
+        setLocalIsDirty(true);
       }}
       options={editorOptions}
       value={markdown}