Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Update node name and description UX editing #5920

Merged
merged 21 commits into from
Feb 5, 2025
Merged

Conversation

Cristhianzl
Copy link
Member

@Cristhianzl Cristhianzl commented Jan 24, 2025

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 NodeDescription and NodeName components, the addition of new hooks, and various UI adjustments.

New Features:

New Hooks:

UI Adjustments:

Styling Updates:

image

image

NEW GRAB REGION:

image

…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
@Cristhianzl Cristhianzl self-assigned this Jan 24, 2025
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. enhancement New feature or request labels Jan 24, 2025
@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Jan 24, 2025
Copy link
Contributor

@anovazzi1 anovazzi1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would suggest we have a cancel option as well
image
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 github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Jan 27, 2025
@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Jan 27, 2025
@anovazzi1
Copy link
Contributor

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
@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Jan 27, 2025
…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 dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Jan 30, 2025
@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Jan 30, 2025
…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 github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Jan 30, 2025
@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Feb 3, 2025
@Cristhianzl Cristhianzl dismissed simonfraserduncan’s stale review February 5, 2025 12:50

already reviwed on Jira

@Cristhianzl Cristhianzl added the lgtm This PR has been approved by a maintainer label Feb 5, 2025
@Cristhianzl Cristhianzl enabled auto-merge February 5, 2025 12:51
@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Feb 5, 2025
…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 github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Feb 5, 2025
@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Feb 5, 2025
@Cristhianzl Cristhianzl added this pull request to the merge queue Feb 5, 2025
Merged via the queue into main with commit 8531e1b Feb 5, 2025
22 checks passed
@Cristhianzl Cristhianzl deleted the cz/grab-node branch February 5, 2025 14:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request lgtm This PR has been approved by a maintainer size:XL This PR changes 500-999 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants