prevent navigation with unsaved code

www/src/components/SideDrawer/Form/Fields/Code.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Controller } from "react-hook-form";
 import { IFieldProps } from "../utils";
-
+import { Prompt } from "react-router-dom";
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/theme-github";
@@ -92,13 +92,21 @@ function ControlledCode({ onChange, onBlur, value }: IControlledCodeProps) {
       </div>
 
       {!autoSave && value !== localValue && (
-        <Button
-          onClick={() => onChange(localValue)}
-          className={classes.saveButton}
-          variant="contained"
-        >
-          Save Changes
-        </Button>
+        <>
+          <Prompt
+            when={true}
+            message={(location) =>
+              `You have some unsaved code changes, Are you sure you want to discard and continue?`
+            }
+          />
+          <Button
+            onClick={() => onChange(localValue)}
+            className={classes.saveButton}
+            variant="contained"
+          >
+            Save Changes
+          </Button>
+        </>
       )}
     </>
   );