feat: Update node name and description UX editing #5920
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nce 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
…er user experience 📝 (NodeName/index.tsx): Update cursor style to 'auto' for better user experience 📝 (NodeOutputfield/index.tsx): Add cursor style 'pointer' to improve interactivity
…on 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
… 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
dosubot
bot
added
size:L
github-actions
bot
added
enhancement
anovazzi1
requested changes
Jan 27, 2025
There was a problem hiding this comment.
would suggest we have a cancel option as well
also we need to fix the note component to work as usual after this change, the note component is totally broken.
Also user should be able to confirm and cancel editions using the enter and scape keys from the keyboard.
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
|
notice that we have a scroll logic on node description, we need to take care to keep it working with the new logic |
…tion 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
… code and improve readability
github-actions
bot
added
enhancement
…translate-x styles based on showNode state for improved UI responsiveness
github-actions
bot
added
enhancement
…nFn 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
github-actions
bot
added
enhancement
…rder-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
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
simonfraserduncan
suggested changes
Jan 29, 2025
There was a problem hiding this comment.
The design spec has the info button appearing closer to the component. At a 100% view, it should be 8px to the right, and 8px from the top. This looks too spaced out in comparison. Checkout this design for closer detail: https://www.figma.com/design/W4zLJ5kNwZzMf7XBjbo1PG/LF-Components?node-id=232-103&m=dev
Looks like it's missing a state for when you make updates to either the name or description. See this frame for details: https://www.figma.com/design/W4zLJ5kNwZzMf7XBjbo1PG/LF-Components?node-id=232-213&m=dev
You can also see that one in context of a prototype here: https://www.figma.com/proto/W4zLJ5kNwZzMf7XBjbo1PG/LF-Components?page-id=208%3A1938&node-id=232-123&viewport=242%2C154%2C0.47&t=5trmEXYri07oa5sP-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=232%3A123&show-proto-sidebar=1
The animation is missing vs the prototype, but I think it is fine to leave that out. I think that could get to be a lot on every component on the canvas.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new feature that allows users to edit the name and description of nodes directly within the UI. The most important changes include updates to the
NodeDescriptionandNodeNamecomponents, the addition of new hooks, and various UI adjustments.New Features:
src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx: AddededitNameDescriptionprop and related logic to handle editing state and UI changes. [1] [2] [3] [4] [5]src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx: AddededitNameDescriptionprop and related logic to handle editing state and UI changes. [1] [2] [3] [4]New Hooks:
src/frontend/src/shared/hooks/use-alternate.tsx: IntroduceduseAlternatehook to manage toggle states.src/frontend/src/shared/hooks/use-change-on-unfocus.tsx: IntroduceduseChangeOnUnfocushook to handle state changes when an element loses focus.UI Adjustments:
src/frontend/src/CustomNodes/GenericNode/index.tsx: IntegratededitNameDescriptionstate and logic, added new button for toggling edit mode, and made various UI adjustments. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]Styling Updates:
src/frontend/src/style/index.css: Added new CSS variables for--zinc-foregroundto support the new UI elements. [1] [2]src/frontend/tailwind.config.mjs: Updated Tailwind configuration to include the newzinc-foregroundcolor.NEW GRAB REGION: