fix(frontend): fix builder's page dynamic title

autogpt_platform/frontend/src/app/(platform)/build/components/MainBuilderPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
+import FlowEditor from "@/app/(platform)/build/components/legacy-builder/Flow/Flow";
+import { GraphID } from "@/lib/autogpt-server-api/types";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { Flow } from "./FlowEditor/Flow";
+import { BuilderViewTabs } from "./BuilderViewTabs/BuilderViewTabs";
+import { useBuilderView } from "./BuilderViewTabs/useBuilderViewTabs";
+
+function BuilderContent() {
+  const query = useSearchParams();
+  const { completeStep } = useOnboarding();
+
+  useEffect(() => {
+    completeStep("BUILDER_OPEN");
+  }, [completeStep]);
+
+  const _graphVersion = query.get("flowVersion");
+  const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined;
+  return (
+    <FlowEditor
+      className="flex h-full w-full"
+      flowID={(query.get("flowID") as GraphID | null) ?? undefined}
+      flowVersion={graphVersion}
+    />
+  );
+}
+
+export default function MainBuilderPage() {
+  const {
+    isSwitchEnabled,
+    selectedView,
+    setSelectedView,
+    isNewFlowEditorEnabled,
+  } = useBuilderView();
+
+  // Switch is temporary, we will remove it once our new flow editor is ready
+  if (isSwitchEnabled) {
+    return (
+      <div className="relative h-full w-full">
+        <BuilderViewTabs value={selectedView} onChange={setSelectedView} />
+        {selectedView === "new" ? <Flow /> : <BuilderContent />}
+      </div>
+    );
+  }
+
+  return isNewFlowEditorEnabled ? <Flow /> : <BuilderContent />;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/Flow.tsx

@@ -164,13 +164,6 @@ const FlowEditor: React.FC<{
   // It stores the dimension of all nodes with position as well
   const [nodeDimensions, setNodeDimensions] = useState<NodeDimension>({});
 
-  // Set page title with or without graph name
-  useEffect(() => {
-    document.title = savedAgent
-      ? `${savedAgent.name} - Builder - AutoGPT Platform`
-      : `Builder - AutoGPT Platform`;
-  }, [savedAgent]);
-
   const graphHasWebhookNodes = useMemo(
     () =>
       nodes.some((n) =>

autogpt_platform/frontend/src/app/(platform)/build/page.tsx

@@ -1,51 +1,36 @@
-"use client";
+import { Metadata } from "next";
+import MainBuilderPage from "./components/MainBuilderPage";
+import { getV1GetSpecificGraph } from "@/app/api/__generated__/endpoints/graphs/graphs";
 
-import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
-import FlowEditor from "@/app/(platform)/build/components/legacy-builder/Flow/Flow";
-// import LoadingBox from "@/components/__legacy__/ui/loading";
-import { GraphID } from "@/lib/autogpt-server-api/types";
-import { useSearchParams } from "next/navigation";
-import { useEffect } from "react";
-import { Flow } from "./components/FlowEditor/Flow";
-import { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs";
-import { useBuilderView } from "./components/BuilderViewTabs/useBuilderViewTabs";
+export async function generateMetadata({
+  searchParams,
+}: {
+  searchParams: Promise<{ flowID: string; flowVersion: string }>;
+}): Promise<Metadata> {
+  const { flowID, flowVersion } = await searchParams;
 
-function BuilderContent() {
-  const query = useSearchParams();
-  const { completeStep } = useOnboarding();
-
-  useEffect(() => {
-    completeStep("BUILDER_OPEN");
-  }, [completeStep]);
-
-  const _graphVersion = query.get("flowVersion");
-  const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined;
-  return (
-    <FlowEditor
-      className="flex h-full w-full"
-      flowID={(query.get("flowID") as GraphID | null) ?? undefined}
-      flowVersion={graphVersion}
-    />
-  );
-}
+  if (!flowID || !flowVersion) {
+    return {
+      title: `Builder - AutoGPT Platform`,
+    };
+  }
 
-export default function BuilderPage() {
-  const {
-    isSwitchEnabled,
-    selectedView,
-    setSelectedView,
-    isNewFlowEditorEnabled,
-  } = useBuilderView();
+  const { data: graph } = await getV1GetSpecificGraph(flowID, {
+    version: parseInt(flowVersion),
+  });
 
-  // Switch is temporary, we will remove it once our new flow editor is ready
-  if (isSwitchEnabled) {
-    return (
-      <div className="relative h-full w-full">
-        <BuilderViewTabs value={selectedView} onChange={setSelectedView} />
-        {selectedView === "new" ? <Flow /> : <BuilderContent />}
-      </div>
-    );
+  if (!graph || typeof graph !== "object" || !("name" in graph)) {
+    return {
+      title: `Builder - AutoGPT Platform`,
+    };
   }
 
-  return isNewFlowEditorEnabled ? <Flow /> : <BuilderContent />;
+  return {
+    title: `${graph.name} - Builder - AutoGPT Platform`,
+  };
 }
+const BuilderPage = () => {
+  return <MainBuilderPage />;
+};
+
+export default BuilderPage;