feat: Update node name and description UX editing #5920
Merged
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
… 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
dosubot
bot
added
size:XL
github-actions
bot
added
enhancement
…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
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
Cristhianzl
dismissed
simonfraserduncan’s stale review
already reviwed on Jira
github-actions
bot
added
enhancement
…rove 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
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
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: