refactor(33168) Refactor the detection of multiple combiners #1240
Conversation
This file contains hidden or 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
vanch3d
changed the title
Test Results 461 files 461 suites 4m 31s ⏱️ Results for commit 26045dd. ♻️ This comment has been updated with latest results. |
Coverage Report
|
oli-hivemq
approved these changes
Oct 27, 2025
Comment on lines
+259
to
+269
| // // Verify modal closes | ||
| // workspacePage.toast.success.should('contain.text', "We've successfully created the combiner for you.") | ||
| // workspacePage.closeToast.click() | ||
| // | ||
| // workspacePage.duplicateCombinerModal.modal.should('not.exist') | ||
| // | ||
| // // Wait for creation | ||
| // cy.wait('@postCombiner') | ||
| // cy.wait('@getCombiners') | ||
| // | ||
| // // Verify success message |
There was a problem hiding this comment.
nit: is there a reason for keeping this commented code?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Pull Request: Duplicate Combiner Detection Enhancement
Kanban Ticket: https://hivemq.kanbanize.com/ctrl_board/57/cards/33168/details/
Description
This PR enhances the user experience when attempting to create a combiner with sources that already exist in the workspace. Previously, users received a brief auto-dismissing toast notification that provided minimal context. Now, users are presented with a comprehensive modal dialog that:
User Experience Improvements
What users gain:
Technical Improvements
Code quality enhancements:
BEFORE
Previous Behavior - Toast Notification
The old implementation showed a brief, auto-dismissing toast notification:
Limitations:
AFTER
New Behavior - Modal Dialog
The new implementation presents a comprehensive modal dialog with multiple sections:
1. Modal with Empty Mappings State
When a duplicate combiner is detected that hasn't had mappings configured yet:
Test:
cypress/e2e/workspace/duplicate-combiner.spec.cy.ts- "Accessibility → should be accessible"Screenshot: 1400x916 viewport, captured via
cy.screenshot()in E2E testKey Elements:
2. Modal with Populated Mappings
When a duplicate combiner is detected that has existing mappings configured:
Test:
cypress/e2e/workspace/duplicate-combiner.spec.cy.ts- "Accessibility → should be accessible with mappings"Screenshot: 1400x916 viewport, captured via
cy.screenshot()in E2E testKey Elements:
3. Canvas Animation
When the modal opens, the canvas automatically animates to highlight the existing combiner:
The canvas uses ReactFlow's
fitView()animation to smoothly pan and zoom to the existing combiner location. This provides immediate visual context to help users understand which combiner already exists with these sources. The animation is coordinated with the modal opening for a smooth UX.Animation details:
Test Coverage
Unit Tests (29 tests)
toolbar.utils.spec.ts- Comprehensive testing of utility functionsComponent Tests (15 tests)
DuplicateCombinerModal.spec.cy.tsx(11 tests)CombinerMappingsList.spec.cy.tsx(4 tests)E2E Tests (12 tests)
duplicate-combiner.spec.cy.tsTotal: 56 tests, all passing ✅
Accessibility
Files Changed
Created (8 files)
src/modules/Workspace/utils/toolbar.utils.ts- Extracted utility functionssrc/modules/Workspace/utils/toolbar.utils.spec.ts- Unit testssrc/modules/Workspace/components/modals/DuplicateCombinerModal.tsx- Main modal componentsrc/modules/Workspace/components/modals/CombinerMappingsList.tsx- Reusable mappings listsrc/modules/Workspace/components/modals/index.ts- Module exportssrc/modules/Workspace/components/modals/DuplicateCombinerModal.spec.cy.tsx- Component testssrc/modules/Workspace/components/modals/CombinerMappingsList.spec.cy.tsx- Component testscypress/e2e/workspace/duplicate-combiner.spec.cy.ts- E2E testsModified (3 files)
src/modules/Workspace/components/nodes/ContextualToolbar.tsx- Refactored to use utilities and modalsrc/locales/en/translation.json- Added i18n translationscypress/pages/Workspace/WorkspacePage.ts- Added modal page object selectorsPercy Visual Regression
Two Percy snapshots added for visual regression protection:
Breaking Changes
None. All existing functionality preserved.
Future Enhancements (Optional)
Reviewer Notes
Focus areas for review:
Testing instructions:
pnpm test:unit toolbar.utilspnpm test:cy:component -- --spec "src/modules/Workspace/components/modals/**"pnpm test:cy:e2e -- --spec "cypress/e2e/workspace/duplicate-combiner.spec.cy.ts"