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

feat: Update node name and description UX editing (#5920)

Browse source 
* ✨ (NodeName/index.tsx): add cursor-grab class to improve user experience when dragging the node
✨ (NodeName/index.tsx): add nodrag class to prevent text selection when dragging the node
✨ (NodeStatus/index.tsx): add nodrag class to prevent text selection when dragging the node
✨ (GenericNode/index.tsx): add nopan, nodelete, nodrag, noflow classes to improve node dragging behavior

* 📝 (NodeDescription/index.tsx): Update cursor style to 'auto' for better user experience
📝 (NodeName/index.tsx): Update cursor style to 'auto' for better user experience
📝 (NodeOutputfield/index.tsx): Add cursor style 'pointer' to improve interactivity

* ✨ (NodeDescription/index.tsx): Add support for editing node description when selected and editNameDescription is true
✨ (NodeName/index.tsx): Add support for editing node name when selected and editNameDescription is true
🔧 (GenericNode/index.tsx): Introduce useAlternate hook to handle toggling editNameDescription state
📝 (use-alternate.tsx): Add custom hook useAlternate to handle toggling boolean state
🔧 (style/index.css): Add new CSS variable --zinc-foreground for styling purposes
🔧 (tailwind.config.mjs): Add new tailwind color variable "zinc-foreground" for styling purposes

* 📝 (NodeDescription/index.tsx): Remove unnecessary setInputDescription call and update useEffect dependencies for better performance
📝 (NodeDescription/index.tsx): Update className for Textarea component to improve styling and readability
📝 (NodeDescription/index.tsx): Update className for generic-node-desc-text to improve styling and cursor behavior
📝 (NodeName/index.tsx): Remove unnecessary setInputName call and update useEffect dependencies for better performance
📝 (NodeName/index.tsx): Update className for span element to improve cursor behavior and styling
📝 (GenericNode/index.tsx): Add useRef for node element and implement useChangeOnUnfocus hook for better handling of focus events
📝 (GenericNode/index.tsx): Update className for pencil icon based on editNameDescription state for better visual feedback
📝 (GenericNode/index.tsx): Add editNameDescription to dependencies of useCallback to prevent unnecessary re-renders
📝 (GenericNode/index.tsx): Add editNameDescription to dependencies of useEffect to handle changes in editNameDescription state
📝 (use-change-on-unfocus.tsx): Implement custom hook useChangeOnUnfocus for handling focus events and state changes

* Refactor NodeDescription to remove old logic and variables

* Refactor NodeName component to remove unnecessary logic and variables

* [autofix.ci] apply automated fixes

* ✨ (NodeDescription/index.tsx): Add functionality to edit node description and handle events like blur, key down, and double click for sticky notes
📝 (NoteNode/index.tsx): Introduce useAlternate hook to toggle edit mode for node description in NoteNode component

* ♻️ (NoteNode/index.tsx): refactor useAlternate hook usage to simplify code and improve readability

* 🔧 (GenericNode/index.tsx): refactor className to conditionally apply translate-x styles based on showNode state for improved UI responsiveness

* 📝 (NodeDescription/index.tsx): Refactor handleBlurFn and handleKeyDownFn to improve code readability and maintainability
📝 (NodeName/index.tsx): Refactor handleBlur and handleKeyDown functions for better code organization and readability
📝 (GenericNode/index.tsx): Update toggleEditNameDescription prop to setEditNameDescription for consistency and clarity
📝 (use-change-on-unfocus.tsx): Remove unnecessary handleEscape function and handleBlur event listener for better code simplicity and performance

* 📝 (NodeDescription/index.tsx): Update CSS class name to use 'focus-border-primary' instead of 'focus-border-black' for consistency and clarity
📝 (GenericNode/index.tsx): Add data-testid attribute to save and edit name description buttons for testing purposes
📝 (edit-name-description-node.spec.ts): Add test to verify user can edit name and description of a node in the UI

* ✨ (GenericNode/index.tsx): Add functionality to show and hide toolbar with animation based on node selection status
📝 (get-class-toolbar-transform.ts): Create helper function to determine transform classes for toolbar animation based on showToolbar and showNode status

* ✨ (NodeDescription/index.tsx): add setHasChangedNodeDescription prop to update parent component when node description changes
✨ (NodeName/index.tsx): add setHasChangedNodeDescription prop to update parent component when node name changes
✨ (GenericNode/index.tsx): add hasChangedNodeDescription state and setHasChangedNodeDescription function to track changes in node description and update parent component
📝 (edit-name-description-node.spec.ts): add wait for sidebar custom component button and timeout to improve test reliability

* ✨ (group.spec.ts): Update click event on "title-Group" element to improve user interaction
🐛 (group.spec.ts): Fix click event on "save-name-description-button" element to properly save changes
🐛 (general-bugs-save-changes-on-node.spec.ts): Increase timeout for selectors to prevent test failures due to slow loading
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix random value generation to ensure consistent length
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix click event on "add-component-button-text-output" element to add component correctly
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix timeout for selector to prevent test failures due to slow loading
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix verifyTextareaValue function to properly verify textarea values

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Cristhian Zanforlin Lousa 2025-02-05 11:02:57 -03:00 • committed by GitHub
commit 8531e1b58d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 465 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts
View file

@ -2,17 +2,25 @@ import { expect, Page, test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
async function verifyTextareaValue(page: Page, value: string) {
await page
.getByTestId("textarea_str_input_value")
.waitFor({ state: "visible" });
await page.getByTestId("textarea_str_input_value").fill(value);
await expect(page.getByTestId("textarea_str_input_value")).toHaveValue(value);
await page.getByTestId("icon-ChevronLeft").first().click();
await page.waitForSelector('[data-testid="list-card"]', {
timeout: 3000,
timeout: 5000,
state: "visible",
});
await page.getByTestId("list-card").first().click();
await page.waitForSelector('[data-testid="textarea_str_input_value"]', {
timeout: 3000,
timeout: 5000,
state: "visible",
});
const inputValue = await page
@ -26,32 +34,35 @@ test(
{ tag: ["@release", "@components"] },
async ({ page }) => {
const randomValues = Array.from({ length: 4 }, () =>
Math.random().toString(36).substring(2, 15),
Math.random().toString(36).substring(2, 8),
);
await awaitBootstrapTest(page);
await page.getByTestId("blank-flow").click();
await page.waitForSelector('[data-testid="fit_view"]', {
timeout: 100000,
timeout: 10000,
state: "visible",
});
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.getByTestId("outputsText Output").waitFor({ state: "visible" });
await page.getByTestId("add-component-button-text-output").click();
await page.waitForSelector('[data-testid="title-Text Output"]', {
timeout: 3000,
timeout: 5000,
state: "visible",
});
// Verify each random value
for (const value of randomValues) {
await verifyTextareaValue(page, value);
try {
await verifyTextareaValue(page, value);
} catch (error) {
console.error(`Failed to verify value: ${value}`, error);
throw error;
}
}
},
);