Skip to content

Commit 0a1591f

Browse files
Abhi1992002Abhi1992002
authored
refactor(frontend): remove old builder code and monitoring components
 (#12082) ### Changes 🏗️ This PR removes old builder code and monitoring components as part of the migration to the new flow editor: - **NewControlPanel**: Simplified component by removing unused props (`flowExecutionID`, `visualizeBeads`, `pinSavePopover`, `pinBlocksPopover`, `nodes`, `onNodeSelect`, `onNodeHover`) and cleaned up commented legacy code - **Import paths**: Updated all references from `legacy-builder/CustomNode` to `FlowEditor/nodes/CustomNode` - **GraphContent**: Fixed type safety by properly handling `customized_name` metadata and using `categoryColorMap` instead of `getPrimaryCategoryColor` - **useNewControlPanel**: Removed unused state and query parameter handling related to old builder - Removed dead code and commented-out imports throughout ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Verify NewControlPanel renders correctly - [x] Test BlockMenu functionality - [x] Test Save Control - [x] Test Undo/Redo buttons - [x] Verify graph search menu still works with updated imports <!-- greptile_comment --> <h2>Greptile Overview</h2> <details><summary><h3>Greptile Summary</h3></summary> This PR removes legacy builder components and monitoring page (~12,000 lines of code), simplifying `NewControlPanel` to focus only on the new flow editor. **Key changes:** - Removed entire `legacy-builder/` directory (36 files) containing old CustomNode, CustomEdge, Flow, and control components - Deleted `/monitoring` page and all related components (9 files) - Deleted `useAgentGraph` hook (1,043 lines) that was only used by legacy components - Simplified `NewControlPanel` by removing unused props (`flowExecutionID`, `nodes`, `onNodeSelect`, etc.) and commented-out code - Updated imports in `NewSearchGraph` components to reference new `FlowEditor/nodes/CustomNode` instead of deleted `legacy-builder/CustomNode` - Removed `/monitoring` from protected pages in `helpers.ts` - Updated test files to remove monitoring-related test helpers **Minor style issues:** - `useNewControlPanel` hook returns unused state (`blockMenuSelected`) that should be cleaned up - Unnecessary double negation (`!!`) in `GraphContent.tsx:136` </details> <details><summary><h3>Confidence Score: 4/5</h3></summary> - This PR is safe to merge with minor style improvements recommended - The refactor is a straightforward deletion of legacy code with no references remaining in the codebase. All imports have been updated correctly, tests cleaned up, and routing configuration updated. The only issues are minor unused code that could be cleaned up but won't cause runtime errors. - No files require special attention - the unused state in `useNewControlPanel.ts` is a minor style issue </details> <details><summary><h3>Sequence Diagram</h3></summary> ```mermaid sequenceDiagram participant User participant NewControlPanel participant BlockMenu participant NewSaveControl participant UndoRedoButtons participant Store as blockMenuStore (Zustand) Note over NewControlPanel: Simplified component (removed props & legacy code) User->>NewControlPanel: Render NewControlPanel->>useNewControlPanel: Call hook (unused return) NewControlPanel->>BlockMenu: Render BlockMenu->>Store: Access state via useBlockMenuStore Store-->>BlockMenu: Return search, filters, etc. NewControlPanel->>NewSaveControl: Render NewControlPanel->>UndoRedoButtons: Render Note over NewControlPanel,Store: State management moved from hook to Zustand store Note over User: Legacy components (CustomNode, Flow, etc.) completely removed ``` </details> <!-- greptile_other_comments_section --> <!-- /greptile_comment -->
1 parent 681bb7c commit 0a1591f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+47
-11803
lines changed

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

Lines changed: 18 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,30 @@
1-
// import { Separator } from "@/components/__legacy__/ui/separator";
21
import { cn } from "@/lib/utils";
32
import React, { memo } from "react";
43
import { BlockMenu } from "./NewBlockMenu/BlockMenu/BlockMenu";
54
import { useNewControlPanel } from "./useNewControlPanel";
6-
// import { NewSaveControl } from "../SaveControl/NewSaveControl";
7-
import { GraphExecutionID } from "@/lib/autogpt-server-api";
8-
// import { ControlPanelButton } from "../ControlPanelButton";
9-
// import { GraphSearchMenu } from "../GraphMenu/GraphMenu";
105
import { Separator } from "@/components/__legacy__/ui/separator";
11-
import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
12-
import { CustomNode } from "../FlowEditor/nodes/CustomNode/CustomNode";
136
import { NewSaveControl } from "./NewSaveControl/NewSaveControl";
147
import { UndoRedoButtons } from "./UndoRedoButtons";
158

16-
export type Control = {
17-
icon: React.ReactNode;
18-
label: string;
19-
disabled?: boolean;
20-
onClick: () => void;
21-
};
9+
export const NewControlPanel = memo(() => {
10+
useNewControlPanel({});
2211

23-
export type NewControlPanelProps = {
24-
flowExecutionID?: GraphExecutionID | undefined;
25-
visualizeBeads?: "no" | "static" | "animate";
26-
pinSavePopover?: boolean;
27-
pinBlocksPopover?: boolean;
28-
nodes?: CustomNode[];
29-
onNodeSelect?: (nodeId: string) => void;
30-
onNodeHover?: (nodeId: string) => void;
31-
};
32-
export const NewControlPanel = memo(
33-
({
34-
flowExecutionID: _flowExecutionID,
35-
visualizeBeads: _visualizeBeads,
36-
pinSavePopover: _pinSavePopover,
37-
pinBlocksPopover: _pinBlocksPopover,
38-
nodes: _nodes,
39-
onNodeSelect: _onNodeSelect,
40-
onNodeHover: _onNodeHover,
41-
}: NewControlPanelProps) => {
42-
const _isGraphSearchEnabled = useGetFlag(Flag.GRAPH_SEARCH);
43-
44-
const {
45-
// agentDescription,
46-
// setAgentDescription,
47-
// saveAgent,
48-
// agentName,
49-
// setAgentName,
50-
// savedAgent,
51-
// isSaving,
52-
// isRunning,
53-
// isStopping,
54-
} = useNewControlPanel({});
55-
56-
return (
57-
<section
58-
className={cn(
59-
"absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
60-
)}
61-
>
62-
<div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
63-
<BlockMenu />
64-
{/* <Separator className="text-[#E1E1E1]" />
65-
{isGraphSearchEnabled && (
66-
<>
67-
<GraphSearchMenu
68-
nodes={nodes}
69-
blockMenuSelected={blockMenuSelected}
70-
setBlockMenuSelected={setBlockMenuSelected}
71-
onNodeSelect={onNodeSelect}
72-
onNodeHover={onNodeHover}
73-
/>
74-
<Separator className="text-[#E1E1E1]" />
75-
</>
76-
)}
77-
{controls.map((control, index) => (
78-
<ControlPanelButton
79-
key={index}
80-
onClick={() => control.onClick()}
81-
data-id={`control-button-${index}`}
82-
data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
83-
disabled={control.disabled || false}
84-
className="rounded-none"
85-
>
86-
{control.icon}
87-
</ControlPanelButton>
88-
))} */}
89-
<Separator className="text-[#E1E1E1]" />
90-
<NewSaveControl />
91-
<Separator className="text-[#E1E1E1]" />
92-
<UndoRedoButtons />
93-
</div>
94-
</section>
95-
);
96-
},
97-
);
12+
return (
13+
<section
14+
className={cn(
15+
"absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
16+
)}
17+
>
18+
<div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
19+
<BlockMenu />
20+
<Separator className="text-[#E1E1E1]" />
21+
<NewSaveControl />
22+
<Separator className="text-[#E1E1E1]" />
23+
<UndoRedoButtons />
24+
</div>
25+
</section>
26+
);
27+
});
9828

9929
export default NewControlPanel;
10030

‎autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
1+
import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
22
import {
33
Popover,
44
PopoverContent,

‎autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/useGraphMenu.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useGraphSearch } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
2-
import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
2+
import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
33

44
interface UseGraphMenuProps {
55
nodes: CustomNode[];

‎autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { Separator } from "@/components/__legacy__/ui/separator";
33
import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
4-
import { beautifyString, getPrimaryCategoryColor } from "@/lib/utils";
4+
import { beautifyString, categoryColorMap } from "@/lib/utils";
55
import { SearchableNode } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
66
import { TextRenderer } from "@/components/__legacy__/ui/render";
77
import {
@@ -73,14 +73,12 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
7373
}
7474

7575
const nodeTitle =
76-
node.data?.metadata?.customized_name ||
77-
beautifyString(node.data?.blockType || "").replace(
78-
/ Block$/,
79-
"",
80-
);
81-
const nodeType = beautifyString(
82-
node.data?.blockType || "",
83-
).replace(/ Block$/, "");
76+
(node.data?.metadata?.customized_name as string) ||
77+
beautifyString(node.data?.title || "").replace(/ Block$/, "");
78+
const nodeType = beautifyString(node.data?.title || "").replace(
79+
/ Block$/,
80+
"",
81+
);
8482

8583
return (
8684
<TooltipProvider key={node.id}>
@@ -100,7 +98,13 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
10098
onMouseLeave={() => onNodeHover?.(null)}
10199
>
102100
<div
103-
className={`h-full w-3 rounded-l-[7px] ${getPrimaryCategoryColor(node.data?.categories)}`}
101+
className={`h-full w-3 rounded-l-[7px] ${
102+
(node.data?.categories?.[0]?.category &&
103+
categoryColorMap[
104+
node.data.categories[0].category
105+
]) ||
106+
"bg-gray-300 dark:bg-slate-700"
107+
}`}
104108
/>
105109
<div className="mx-3 flex flex-1 items-center justify-between">
106110
<div className="mr-2 min-w-0">
@@ -129,9 +133,10 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
129133
<div className="font-semibold">
130134
Node Type: {nodeType}
131135
</div>
132-
{node.data?.metadata?.customized_name && (
136+
{!!node.data?.metadata?.customized_name && (
133137
<div className="text-xs text-gray-500">
134-
Custom Name: {node.data.metadata.customized_name}
138+
Custom Name:{" "}
139+
{String(node.data.metadata.customized_name)}
135140
</div>
136141
)}
137142
</div>

‎autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuSearchBar/useGraphMenuSearchBar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useMemo, useDeferredValue } from "react";
2-
import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
2+
import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
33
import { beautifyString } from "@/lib/utils";
44
import jaro from "jaro-winkler";
55

@@ -67,10 +67,10 @@ function calculateNodeScore(
6767
const nodeTitle = (node.data?.title || "").toLowerCase(); // This includes the ID
6868
const nodeId = (node.id || "").toLowerCase();
6969
const nodeDescription = (node.data?.description || "").toLowerCase();
70-
const blockType = (node.data?.blockType || "").toLowerCase();
70+
const blockType = (node.data?.title || "").toLowerCase();
7171
const beautifiedBlockType = beautifyString(blockType).toLowerCase();
72-
const customizedName = (
73-
node.data?.metadata?.customized_name || ""
72+
const customizedName = String(
73+
node.data?.metadata?.customized_name || "",
7474
).toLowerCase();
7575

7676
// Get input and output names with defensive checks

‎autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/useNewControlPanel.ts‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,18 @@
1-
import { GraphID } from "@/lib/autogpt-server-api";
2-
import { useSearchParams } from "next/navigation";
31
import { useState } from "react";
42

53
export interface NewControlPanelProps {
6-
// flowExecutionID: GraphExecutionID | undefined;
74
visualizeBeads?: "no" | "static" | "animate";
85
}
96

107
export const useNewControlPanel = ({
11-
// flowExecutionID,
128
visualizeBeads: _visualizeBeads,
139
}: NewControlPanelProps) => {
1410
const [blockMenuSelected, setBlockMenuSelected] = useState<
1511
"save" | "block" | "search" | ""
1612
>("");
17-
const query = useSearchParams();
18-
const _graphVersion = query.get("flowVersion");
19-
const _graphVersionParsed = _graphVersion
20-
? parseInt(_graphVersion)
21-
: undefined;
22-
23-
const _flowID = (query.get("flowID") as GraphID | null) ?? undefined;
24-
// const {
25-
// agentDescription,
26-
// setAgentDescription,
27-
// saveAgent,
28-
// agentName,
29-
// setAgentName,
30-
// savedAgent,
31-
// isSaving,
32-
// isRunning,
33-
// isStopping,
34-
// } = useAgentGraph(
35-
// flowID,
36-
// graphVersion,
37-
// flowExecutionID,
38-
// visualizeBeads !== "no",
39-
// );
4013

4114
return {
4215
blockMenuSelected,
4316
setBlockMenuSelected,
44-
// agentDescription,
45-
// setAgentDescription,
46-
// saveAgent,
47-
// agentName,
48-
// setAgentName,
49-
// savedAgent,
50-
// isSaving,
51-
// isRunning,
52-
// isStopping,
5317
};
5418
};

0 commit comments

Comments
 (0)