fix(tabsContext.tsx): remove unnecessary noticeData setting when downloading a file

feat(tabsContext.tsx): change the order of arguments in addFlow function call to improve readability
feat(exportModal/index.tsx): add alertContext and setNoticeData to display a warning when saving a file with API keys
feat(exportModal/index.tsx): add a caution message to inform users about the consequences of saving with API keys

src/frontend/src/contexts/tabsContext.tsx

@@ -260,9 +260,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
     // simulate a click on the link element to trigger the download
     link.click();
-    setNoticeData({
-      title: "Warning: Critical data, JSON file may include API keys.",
-    });
   }
 
   function downloadFlows() {
@@ -300,7 +297,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       let fileData = JSON.parse(text);
       if (fileData.flows) {
         fileData.flows.forEach((flow: FlowType) => {
-          id = addFlow(flow, newProject);
+          id = addFlow(newProject, flow);
         });
       }
       // parse the text into a JSON object

src/frontend/src/modals/exportModal/index.tsx

@@ -4,6 +4,7 @@ import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants/constants";
+import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
@@ -11,7 +12,8 @@ import BaseModal from "../baseModal";
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
     const { flows, tabId, downloadFlow } = useContext(TabsContext);
-    const [checked, setChecked] = useState(false);
+    const { setNoticeData } = useContext(alertContext);
+    const [checked, setChecked] = useState(true);
     const flow = flows.find((f) => f.id === tabId);
     useEffect(() => {
       setName(flow!.name);
@@ -44,6 +46,7 @@ const ExportModal = forwardRef(
           <div className="mt-3 flex items-center space-x-2">
             <Checkbox
               id="terms"
+              checked={checked}
               onCheckedChange={(event: boolean) => {
                 setChecked(event);
               }}
@@ -52,18 +55,26 @@ const ExportModal = forwardRef(
               Save with my API keys
             </label>
           </div>
+          <span className="text-xs text-destructive">
+            Caution: Uncheck this box only removes API keys from fields
+            specifically designated for API keys.
+          </span>
         </BaseModal.Content>
 
         <BaseModal.Footer>
           <Button
             onClick={() => {
-              if (checked)
+              if (checked) {
                 downloadFlow(
                   flows.find((flow) => flow.id === tabId)!,
                   name!,
                   description
                 );
-              else
+                setNoticeData({
+                  title:
+                    "Warning: Critical data, JSON file may include API keys.",
+                });
+              } else
                 downloadFlow(
                   removeApiKeys(flows.find((flow) => flow.id === tabId)!),
                   name!,