From 4c1612c96929d35d5d865cc03a8cc83710958f8b Mon Sep 17 00:00:00 2001 From: abhi1992002 Date: Thu, 12 Feb 2026 10:21:22 +0530 Subject: [PATCH] refactor(frontend): streamline BuilderPage and remove unused components ### Summary - Refactored `BuilderPage` to simplify the rendering logic by removing the conditional view switch and directly rendering the `Flow` component within a `ReactFlowProvider`. - Removed unused components and hooks, including `useBuilderView`, `BuilderViewTabs`, `BuilderContent`, and `RightSidebar`, to enhance code maintainability and reduce complexity. - Added necessary CSS imports for the `Flow` component. ### Impact This refactor improves the clarity and performance of the `BuilderPage` by eliminating unnecessary complexity and ensuring that only relevant components are included in the build. ### Testing - Verified that the `Flow` component renders correctly without the removed components. - Ensured that the application functions as expected after the refactor. --- .../BuilderViewTabs/BuilderViewTabs.tsx | 31 ------- .../build/components/FlowEditor/Flow/Flow.tsx | 3 + .../build/components/FlowEditor/Flow/flow.css | 9 ++ .../build/components/RIghtSidebar.tsx | 83 ------------------- .../src/app/(platform)/build/page.tsx | 63 ++------------ .../app/(platform)/build/useBuilderView.ts | 44 ---------- .../services/feature-flags/use-get-flag.ts | 4 - 7 files changed, 18 insertions(+), 219 deletions(-) delete mode 100644 autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx create mode 100644 autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css delete mode 100644 autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx delete mode 100644 autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx deleted file mode 100644 index 4f4237445b..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx +++ /dev/null @@ -1,31 +0,0 @@ -"use client"; - -import { Tabs, TabsList, TabsTrigger } from "@/components/__legacy__/ui/tabs"; - -export type BuilderView = "old" | "new"; - -export function BuilderViewTabs({ - value, - onChange, -}: { - value: BuilderView; - onChange: (value: BuilderView) => void; -}) { - return ( -
- onChange(v as BuilderView)} - > - - - Old - - - New - - - -
- ); -} diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx index 87ae4300b8..28bba580b4 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx @@ -23,6 +23,9 @@ import { useCopyPaste } from "./useCopyPaste"; import { useFlow } from "./useFlow"; import { useFlowRealtime } from "./useFlowRealtime"; +import "@xyflow/react/dist/style.css"; +import "./flow.css"; + export const Flow = () => { const [{ flowID, flowExecutionID }] = useQueryStates({ flowID: parseAsString, diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css new file mode 100644 index 0000000000..0f73d047a9 --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css @@ -0,0 +1,9 @@ +/* Reset default xyflow handle styles so custom Phosphor icon handles render correctly */ +.react-flow__handle { + background: transparent; + width: auto; + height: auto; + border: 0; + position: relative; + transform: none; +} diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx deleted file mode 100644 index cc0c7ff765..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { useMemo } from "react"; - -import { Link } from "@/app/api/__generated__/models/link"; -import { useEdgeStore } from "../stores/edgeStore"; -import { useNodeStore } from "../stores/nodeStore"; -import { scrollbarStyles } from "@/components/styles/scrollbars"; -import { cn } from "@/lib/utils"; -import { customEdgeToLink } from "./helper"; - -export const RightSidebar = () => { - const edges = useEdgeStore((s) => s.edges); - const nodes = useNodeStore((s) => s.nodes); - - const backendLinks: Link[] = useMemo( - () => edges.map(customEdgeToLink), - [edges], - ); - - return ( -
-
-

- Graph Debug Panel -

-
- -
-

- Nodes ({nodes.length}) -

-
- {nodes.map((n) => ( -
-
- #{n.id} {n.data?.title ? `– ${n.data.title}` : ""} -
-
- hardcodedValues -
- 
-                {JSON.stringify(n.data?.hardcodedValues ?? {}, null, 2)}
-
-
- ))} -
- -

- Links ({backendLinks.length}) -

-
- {backendLinks.map((l) => ( -
-
- {l.source_id}[{l.source_name}] → {l.sink_id}[{l.sink_name}] -
-
- edge.id: {l.id} -
-
- ))} -
- -

- Backend Links JSON -

- 
-          {JSON.stringify(backendLinks, null, 2)}
-
-
-
- ); -}; diff --git a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx b/autogpt_platform/frontend/src/app/(platform)/build/page.tsx index f1d62ee5fb..a8ed8a5e8e 100644 --- a/autogpt_platform/frontend/src/app/(platform)/build/page.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/build/page.tsx @@ -1,64 +1,13 @@ "use client"; - -import FlowEditor from "@/app/(platform)/build/components/legacy-builder/Flow/Flow"; -import { useOnboarding } from "@/providers/onboarding/onboarding-provider"; -// import LoadingBox from "@/components/__legacy__/ui/loading"; -import { GraphID } from "@/lib/autogpt-server-api/types"; import { ReactFlowProvider } from "@xyflow/react"; -import { useSearchParams } from "next/navigation"; -import { useEffect } from "react"; -import { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs"; import { Flow } from "./components/FlowEditor/Flow/Flow"; -import { useBuilderView } from "./useBuilderView"; - -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 ( - - ); -} export default function BuilderPage() { - const { - isSwitchEnabled, - selectedView, - setSelectedView, - isNewFlowEditorEnabled, - } = useBuilderView(); - - // Switch is temporary, we will remove it once our new flow editor is ready - if (isSwitchEnabled) { - return ( -
- - {selectedView === "new" ? ( - - - - ) : ( - - )} -
- ); - } - - return isNewFlowEditorEnabled ? ( - - - - ) : ( - + return ( +
+ + + +
); } diff --git a/autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts b/autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts deleted file mode 100644 index e0e524ddf8..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag"; -import { usePathname, useRouter, useSearchParams } from "next/navigation"; -import { useEffect, useMemo } from "react"; -import { BuilderView } from "./components/BuilderViewTabs/BuilderViewTabs"; - -export function useBuilderView() { - const isNewFlowEditorEnabled = useGetFlag(Flag.NEW_FLOW_EDITOR); - const isBuilderViewSwitchEnabled = useGetFlag(Flag.BUILDER_VIEW_SWITCH); - - const router = useRouter(); - const pathname = usePathname(); - const searchParams = useSearchParams(); - - const currentView = searchParams.get("view"); - const defaultView = "old"; - const selectedView = useMemo(() => { - if (currentView === "new" || currentView === "old") return currentView; - return defaultView; - }, [currentView, defaultView]); - - useEffect(() => { - if (isBuilderViewSwitchEnabled === true) { - if (currentView !== "new" && currentView !== "old") { - const params = new URLSearchParams(searchParams); - params.set("view", defaultView); - router.replace(`${pathname}?${params.toString()}`); - } - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isBuilderViewSwitchEnabled, defaultView, pathname, router, searchParams]); - - const setSelectedView = (value: BuilderView) => { - const params = new URLSearchParams(searchParams); - params.set("view", value); - router.push(`${pathname}?${params.toString()}`); - }; - - return { - isSwitchEnabled: isBuilderViewSwitchEnabled === true, - selectedView, - setSelectedView, - isNewFlowEditorEnabled: Boolean(isNewFlowEditorEnabled), - } as const; -} diff --git a/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts b/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts index c61fc9749d..3a27aa6e9b 100644 --- a/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts +++ b/autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts @@ -10,8 +10,6 @@ export enum Flag { NEW_AGENT_RUNS = "new-agent-runs", GRAPH_SEARCH = "graph-search", ENABLE_ENHANCED_OUTPUT_HANDLING = "enable-enhanced-output-handling", - NEW_FLOW_EDITOR = "new-flow-editor", - BUILDER_VIEW_SWITCH = "builder-view-switch", SHARE_EXECUTION_RESULTS = "share-execution-results", AGENT_FAVORITING = "agent-favoriting", MARKETPLACE_SEARCH_TERMS = "marketplace-search-terms", @@ -27,8 +25,6 @@ const defaultFlags = { [Flag.NEW_AGENT_RUNS]: false, [Flag.GRAPH_SEARCH]: false, [Flag.ENABLE_ENHANCED_OUTPUT_HANDLING]: false, - [Flag.NEW_FLOW_EDITOR]: false, - [Flag.BUILDER_VIEW_SWITCH]: false, [Flag.SHARE_EXECUTION_RESULTS]: false, [Flag.AGENT_FAVORITING]: false, [Flag.MARKETPLACE_SEARCH_TERMS]: DEFAULT_SEARCH_TERMS,