feat(frontend) Remove "credentials" from export & import of agents (#…

…9081)

### Changes 🏗️

This is for [Credential ID Exports into Agent JSON #8919
](#8919)

I have added a new function ``removeCredentials`` into
[``utils.ts``](https://github.com/Significant-Gravitas/AutoGPT/compare/dev...bently/open-2153-credential-id-exports-into-agent-json?expand=1#diff-db26a69e6fb7546dc621634f3c8ee6efa3639e72e02837f753af18b2fdddf7be)
which will go through and look for any "credentials" that are in the
JSON during a agent export, this will then remove them and let the user
download the file.

I have also added the same function to the importing of agents for old
agents that where exported that still contain the credentials, this
means that old agents can be imported with out breaking/causing issues.

When I say it looks for credentials I dont mean actual credentials like
api keys them self, in the JSON that is exported it contains the
following, this needs removing
```
"credentials": {
  "id": "6767232a-3407-4c34-85a3-6887d4969f0c",
  "title": "Anthropic Toran",
  "provider": "anthropic",
  "type": "api_key"
},
```

If there is a better way to go about this let me know!

autogpt_platform/frontend/src/components/agent-import-form.tsx

@@ -15,7 +15,7 @@ import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { Graph, GraphCreatable } from "@/lib/autogpt-server-api";
-import { cn } from "@/lib/utils";
+import { cn, removeCredentials } from "@/lib/utils";
 import { EnterIcon } from "@radix-ui/react-icons";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 
@@ -150,6 +150,7 @@ export const AgentImportForm: React.FC<
                             );
                           }
                           const agent = obj as Graph;
+                          removeCredentials(agent);
                           updateBlockIDs(agent);
                           setAgentObject(agent);
                           form.setValue("agentName", agent.name);

autogpt_platform/frontend/src/lib/utils.ts

@@ -120,9 +120,28 @@ const applyExceptions = (str: string): string => {
   return str;
 };
 
+/** Recursively remove all "credentials" properties from exported JSON files */
+export function removeCredentials(obj: any) {
+  if (obj && typeof obj === "object") {
+    if (Array.isArray(obj)) {
+      obj.forEach((item) => removeCredentials(item));
+    } else {
+      delete obj.credentials;
+      Object.values(obj).forEach((value) => removeCredentials(value));
+    }
+  }
+  return obj;
+}
+
 export function exportAsJSONFile(obj: object, filename: string): void {
+  // Deep clone the object to avoid modifying the original
+  const sanitizedObj = JSON.parse(JSON.stringify(obj));
+
+  // Sanitize the object
+  removeCredentials(sanitizedObj);
+
   // Create downloadable blob
-  const jsonString = JSON.stringify(obj, null, 2);
+  const jsonString = JSON.stringify(sanitizedObj, null, 2);
   const blob = new Blob([jsonString], { type: "application/json" });
   const url = URL.createObjectURL(blob);