Expert api v4 and flow examples UI #6310
Merged
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
… in `Expert` component
…upport whilst supporting v3/v4 api format in mind
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6310 +/- ##
=======================================
Coverage 76.22% 76.22%
=======================================
Files 393 393
Lines 19777 19777
Branches 4741 4741
=======================================
Hits 15075 15075
Misses 4702 4702
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…owResourceCard` component
…t with `CheckIcon` in `TextCopier` component
9 tasks
Contributor
Same issue as we noticed on FlowFuse/website#4104 |
…text Global search was intercepting ArrowUp/ArrowDown keys document-wide, preventing cursor navigation in textareas and inputs across the app. Now only intercepts arrow keys when focus is within the search component.
- Add pin button to toggle drawer fixed mode (inline vs overlay) - Add close button for explicit drawer closing - Implement resize handle for pinned drawer (drag to resize width) - Update button styling to match sidebar (square 30px, hover states) - Remove shadow when drawer is pinned - Update Expert button hover to match sidebar styling - Pin button shows indigo background when active
…drawer layout - Fix RightDrawer resize handle positioning (left: 0) for full visibility when pinned - Restructure NotificationsDrawer header to match Expert drawer styling - Add close button (XIcon) to notifications drawer header - Move "Hide Read" checkbox into header actions area - Update notifications drawer sections to stretch full width - Fix optional chaining in housekeeper to prevent crash when comms is unavailable
The drawer was resetting to its responsive width constraints when pinning due to CSS flex properties overriding the explicit width. This fix: - Captures the current drawer width before toggling pin state - Applies flex-shrink: 0 to prevent flex container from shrinking the drawer - Removes min-width and max-width constraints in fixed mode - Uses provide/inject to pass togglePinWithWidth method to ExpertDrawer
The previous hover state tried to change the background gradient but was being overridden by the continuous animation. Changed to increase border width from 1px to 2px on hover with negative margin compensation to prevent button shifting.
Fixed two issues with drawer resizing: - Resizing now works in overlay mode by removing CSS width constraints during drag - Eliminated grey box at top in pinned mode by resetting top offset to 0 Changes: - Remove conditional rendering of resize handle to show in both modes - Apply custom width when drawer is open, not just when pinned - Add resizing class to disable transitions and width constraints during drag - Change position from initial to relative in fixed mode for proper resize bar positioning - Reset top offset in fixed mode to prevent unwanted gap
- Make resize handle transparent while maintaining functionality - Add width persistence across drawer close/reopen cycles in both modes - Track manual resize state to preserve custom widths - Remove visible hover/active states from resize handle - Apply width constraint removal when manually resized
Only transition specific properties (right, width, max-width, min-width, box-shadow) instead of all properties. This prevents height, top, and position from animating during unpinning, which was causing the drawer to briefly extend beyond viewport.
Adjusted box-shadow to use vertical offset and negative spread radius to prevent shadow from appearing at the top of the drawer element while maintaining left-side shadow effect.
Root cause: closeRightDrawer action had 100ms delay before removing .open class, causing drawer to stay visible as grey box when closing a pinned drawer. Fixes: - Immediately set state.rightDrawer.state = false to remove .open class - Add CSS to hide border when drawer is closed - Add CSS rules for .fixed:not(.open) to hide drawer with width: 0, opacity: 0 - Keep 100ms timeout for full cleanup to allow transitions Tested with Playwright - drawer now closes instantly with no grey box artifact.
Simplified the close action by removing the 100ms delay and direct state mutation. Now properly commits the mutation immediately, which sets both state and fixed to false, preventing the drawer from reappearing. This follows Vuex best practices and ensures clean, immediate closing.
BUG STILL PRESENT: When closing a pinned and resized Expert drawer (e.g., 600px wide), the drawer automatically reopens shortly after clicking the close button. The drawer reopens with the large resized width, suggesting something is triggering openRightDrawer/openAssistantDrawer during the 300ms closing transition. This commit attempts to fix by: - Adding a 'closing' flag to prevent drawer opens during transition - Using two-step close: immediate state=false, then delayed full cleanup - Preserving .fixed class during transition for CSS rule .fixed:not(.open) The closeRightDrawer guard should block reopens, but the bug persists in both overlay and pinned modes. Root cause of what triggers the reopen is still unknown and needs further investigation. Suspected triggers: - Route watcher in App.vue calling updateRoute - Component lifecycle hooks (unmount/mount) - Event bubbling or click handlers - Vuex subscription or plugin side effects
Contributor
|
Made changes, WIP though. Bug with closing drawer again atm thay needs to be fixed still. done's & todos
cc: @cstns |
Replace viewport-based media query with container query so hosted/remote instance sections stack when container is narrow (e.g., wide pinned sidebar), not just based on viewport width. Uses 640px breakpoint matching existing drawer patterns.
Add conditional section headers ("Related Resources", "Required Node Packages", "Example Flows")
when multiple content types are displayed together in expert resources responses.
- Fix PackageResourceCard URL path from /node/ to /package/ - Support both pkg.id and pkg.name for package identification - Update ExpertRichResources to use PackageResourceCard for node packages - Improve FlowResourceCard styling with better spacing and text truncation
Match PackageResourceCard icon alignment to StandardResourceCard by using flex-start alignment with top margin offset.
- Add missing gap styles to .guide-flows grid for consistent spacing with other sections - Remove fixed height from package cards to match content-based height of resource cards
- Use $ff-indigo-100 instead of #EEF2FF (which was indigo-50) - Use $ff-indigo-700 variable for consistency - Aligns Setup Guide badge colors with website implementation
- Add isExpertDrawerOpen computed property to detect when expert drawer is active - Use v-if to completely remove button from DOM when drawer is open - Prevents navigation divider artifact by removing element entirely
- Replace solid border with dual-background gradient technique matching website - Add horizontal gradient animation flowing left to right - Use transparent border-bottom to show animated gradient - Aligns expert drawer header styling with website modal design
- Add viewport resize listener with 300ms debounce - Hide pin button below 768px viewport width - Auto-unpin drawer when viewport becomes too small - Enforce 50% max width constraint for pinned drawer - Auto-resize pinned drawer when viewport shrinks beyond 50% - Prevent manual resize beyond 50% when drawer is pinned
Fixes issue where manually resized drawer would not respect mobile/tablet responsive CSS constraints. The hasManuallyResized flag is now reset when viewport drops below 768px, allowing CSS media queries to take control.
Apply 50% viewport max width constraint to all viewports >= 768px, regardless of pinned/unpinned state. Previously only applied when pinned.
Update media query breakpoint for all right drawers (Expert, Notifications, Snapshots, Table Schema, etc.) to use 480px instead of 400px. This gives more devices the full-width drawer experience before switching to the constrained 30vw layout.
- Remove all console.log statements from drawer components - Update closeRightDrawerImmediate to set fixed and pinned to false immediately - Remove unnecessary DOM state logging and transition tracking - Clean up event listener logging
This commit consolidates multiple drawer enhancements: - Add responsive pinning behavior (auto-unpin on viewports < 768px) - Implement smooth opening/closing animations without width conflicts - Add manual resize functionality with responsive constraints - Apply different max-width for pinned (50%) vs overlay (90%) modes - Optimize resize handle for mobile viewports - Fix resize jump issues across all viewport widths - Make minimum width responsive to prevent conflicts in small viewports - Remove debug console.log statements The drawer now provides a polished, responsive experience with: - Clean slide animations (no janky width transitions) - Proper width constraints based on mode and viewport - Smooth transitions when pinning/unpinning - No visual jumps during resize operations
Add automatic max width enforcement in overlay mode when browser is resized: - On large viewports (≥768px): constrain to min(90% viewport, viewport - 200px) - On medium viewports (480-767px): constrain to 90% viewport - On small viewports (<480px): let CSS handle width This prevents the drawer from extending beyond the maximum allowed width when the browser window is resized smaller, ensuring it always fits within the viewport constraints for a better responsive experience.
The Expert component was crashing in the immersive editor when sending messages because it expected togglePinWithWidth to be provided by a parent component. In the immersive editor, Expert is loaded directly as a route component without the RightDrawer wrapper that provides this function. Changed the inject from array to object format with a default no-op function, allowing the component to work both in the drawer context and standalone in the immersive editor.
dimitrieh
approved these changes
Nov 20, 2025
Contributor
dimitrieh
left a comment
dimitrieh
left a comment
There was a problem hiding this comment.
approving during live review. see recording at
https://flowforgeworkspace.slack.com/archives/C09QS57R8AD/p1763658016xxx133
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.
Description
This pr facilitates the transition to api v4 and exposes flows as answer types in the UI.
The answer response format is slightly different between v3/v4, the changes here should accommodate both versions for the time being, left a couple of todo's that should be addressed after the v4 switch.
The switch to v4 has to be done via a change request because it implies changing the platform
expert.service.urlsettingChanges:
nodePackageskey for all responses, not only guidesresourcesandguideresponse kindsTextCopiercomponent ui to resemble the website confirmation of copy because better UIv3 prompts:
v4 prompts:
One thing that I've noticed is that on the v4 of the API, guide type responses do not receive both resources and node packages responses simultaneously as in v4, only references to docs (resources).
Prerequisites:
Post-deployment
Related Issue(s)
closes #6276
Checklist
flowforge.yml?FlowFuse/helmto update ConfigMap TemplateFlowFuse/CloudProjectto update values for Staging/ProductionLabels
area:migrationlabel