jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: node minimize/expand functionality and regression tests (#5579)

Browse source 
* ♻️ (nodeToolbarComponent/index.tsx): refactor handleSelectChange function to improve readability and maintainability by extracting switch cases into separate functions and adding dependencies to useCallback for better performance.

* ✨ (GenericNode/index.tsx): Add data-testid attribute to improve testing capabilities for showing/hiding node content
✨ (general-bugs-minimize-state-error.spec.ts): Add test case to ensure user can minimize and expand a node multiple times without errors

* 📝 (nodeToolbarComponent/index.tsx): Remove unnecessary dataTestId prop from SelectItem component
📝 (types/components/index.ts): Change dataTestId prop in toolbarSelectItemProps to be optional by adding a question mark (?)

* 📝 (general-bugs-minimize-state-error.spec.ts): refactor test case to use a reusable function for toggling node state between minimize and expand actions. This improves code readability and reduces duplication in the test script.
This commit is contained in:
Cristhian Zanforlin Lousa 2025-01-08 14:19:40 -03:00 • committed by GitHub
commit f1d14bf4b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 144 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -412,7 +412,7 @@ function GenericNode({
{renderNodeIcon()}
<div className="generic-node-tooltip-div">{renderNodeName()}</div>
</div>
<div>
<div data-testid={`${showNode ? "show" : "hide"}-node-content`}>
{!showNode && (
<>
{renderInputParameters()}

172
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -341,83 +341,104 @@ const NodeToolbarComponent = memo(
const [selectedValue, setSelectedValue] = useState(null);
const handleSelectChange = useCallback((event) => {
setSelectedValue(event);
const handleSelectChange = useCallback(
(event) => {
setSelectedValue(event);
switch (event) {
case "save":
saveComponent();
break;
case "freeze":
freezeFunction();
break;
case "freezeAll":
FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
break;
case "code":
setOpenModal(!openModal);
break;
case "advanced":
setShowModalAdvanced(true);
break;
case "show":
takeSnapshot();
handleMinimize();
break;
case "Share":
shareComponent();
break;
case "Download":
downloadNode(flowComponent!);
break;
case "SaveAll":
addFlow({
flow: flowComponent,
override: false,
});
break;
case "documentation":
openDocs();
break;
case "disabled":
break;
case "ungroup":
handleungroup();
break;
case "override":
setShowOverrideModal(true);
break;
case "delete":
deleteNode(data.id);
break;
case "update":
updateNode();
break;
case "copy":
const node = nodes.filter((node) => node.id === data.id);
setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
break;
case "duplicate":
paste(
{
nodes: [nodes.find((node) => node.id === data.id)!],
edges: [],
},
{
x: 50,
y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y,
},
);
break;
case "toolMode":
handleActivateToolMode();
break;
}
switch (event) {
case "save":
saveComponent();
break;
case "freeze":
freezeFunction();
break;
case "freezeAll":
FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
break;
case "code":
setOpenModal(!openModal);
break;
case "advanced":
setShowModalAdvanced(true);
break;
case "show":
takeSnapshot();
handleMinimize();
break;
case "Share":
shareComponent();
break;
case "Download":
downloadNode(flowComponent!);
break;
case "SaveAll":
addFlow({
flow: flowComponent,
override: false,
});
break;
case "documentation":
openDocs();
break;
case "disabled":
break;
case "ungroup":
handleungroup();
break;
case "override":
setShowOverrideModal(true);
break;
case "delete":
deleteNode(data.id);
break;
case "update":
updateNode();
break;
case "copy":
const node = nodes.filter((node) => node.id === data.id);
setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
break;
case "duplicate":
paste(
{
nodes: [nodes.find((node) => node.id === data.id)!],
edges: [],
},
{
x: 50,
y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y,
},
);
break;
case "toolMode":
handleActivateToolMode();
break;
}
setSelectedValue(null);
}, []);
setSelectedValue(null);
},
[
saveComponent,
freezeFunction,
FreezeAllVertices,
setOpenModal,
setShowModalAdvanced,
handleMinimize,
shareComponent,
downloadNode,
addFlow,
openDocs,
handleungroup,
setShowOverrideModal,
deleteNode,
updateNode,
setLastCopiedSelection,
paste,
handleActivateToolMode,
],
);
const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue({
node: data.node!,
@ -692,7 +713,6 @@ const NodeToolbarComponent = memo(
}
value={showNode ? "Minimize" : "Expand"}
icon={showNode ? "Minimize2" : "Maximize2"}
dataTestId="minimize-button-modal"
/>
</SelectItem>
)}

2
src/frontend/src/types/components/index.ts
View file

@ -784,7 +784,7 @@ export type toolbarSelectItemProps = {
value: string;
icon: string;
style?: string;
dataTestId: string;
dataTestId?: string;
ping?: boolean;
shortcut: string;
};

46
src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts Normal file
View file

@ -0,0 +1,46 @@
import { expect, Page, test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
async function toggleNodeState(page: Page, action: "minimize" | "expand") {
const expectedCount = action === "minimize" ? 0 : 1;
await page.getByTestId("more-options-modal").click();
await page.getByTestId(`${action}-button-modal`).click();
expect(await page.getByTestId("show-node-content").count()).toBe(
expectedCount,
);
}
test(
"user must be able to minimize and expand a node how many times as they want",
{ tag: ["@release", "@components"] },
async ({ page }) => {
await awaitBootstrapTest(page);
await page.getByTestId("blank-flow").click();
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
});
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("text output");
await page
.getByTestId("outputsText Output")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-text-output").click();
});
await page.waitForSelector('[data-testid="title-Text Output"]', {
timeout: 3000,
});
expect(await page.getByText("Toolset", { exact: true }).count()).toBe(0);
await page.getByTestId("title-Text Output").click();
expect(await page.getByTestId("show-node-content").count()).toBe(1);
for (let i = 0; i < 5; i++) {
await toggleNodeState(page, "minimize");
await toggleNodeState(page, "expand");
}
},
);