1652 client - Refactor WorkflowNodeDetailsPanel to be open when the cluster element editor is open #3489
Conversation
…luster element editor is open
|
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the WorkflowNodeDetailsPanel to remain open when the cluster element editor is opened, improving the workflow editing experience.
- Removed early return in
useNodeClickthat prevented the details panel from opening when clicking a cluster root node - Added optional
closeButtonprop to WorkflowNodeDetailsPanel to allow custom close button behavior - Modified WorkflowEditorLayout to always render WorkflowNodeDetailsPanel within the cluster elements canvas dialog
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
client/src/pages/platform/workflow-editor/hooks/useNodeClick.ts |
Removed logic that closed the details panel and cleared the current component when opening cluster editor |
client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx |
Added optional closeButton prop to allow custom close button rendering |
client/src/pages/platform/workflow-editor/WorkflowEditorLayout.tsx |
Refactored cluster elements dialog to always render WorkflowNodeDetailsPanel with custom close button that closes the entire canvas |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <DialogClose asChild> | ||
| <Button | ||
| className="absolute right-2 top-2" | ||
| size="icon" | ||
| title="Close the canvas" | ||
| variant="ghost" | ||
| > | ||
| <XIcon /> | ||
| </Button> | ||
| </DialogClose> |
There was a problem hiding this comment.
The close button's behavior is potentially confusing. It's positioned in the WorkflowNodeDetailsPanel header (where users would expect it to close just the panel), but wrapping it in DialogClose makes it close the entire cluster elements canvas dialog instead.
Consider either:
- Using a separate close button for the canvas placed outside the panel header
- Implementing custom logic to close only the panel while keeping the canvas open
- Making it clear through positioning/styling that this button closes the entire canvas, not just the panel
| <DialogClose asChild> | |
| <Button | |
| className="absolute right-2 top-2" | |
| size="icon" | |
| title="Close the canvas" | |
| variant="ghost" | |
| > | |
| <XIcon /> | |
| </Button> | |
| </DialogClose> | |
| (() => { | |
| const setPanelOpen = useWorkflowNodeDetailsPanelStore(state => state.setOpen); | |
| return ( | |
| <Button | |
| className="absolute right-2 top-2" | |
| size="icon" | |
| title="Close panel" | |
| variant="ghost" | |
| onClick={() => setPanelOpen(false)} | |
| > | |
| <XIcon /> | |
| </Button> | |
| ); | |
| })() |
| /> | ||
| <> | ||
| <WorkflowNodeDetailsPanel | ||
| className="fixed inset-y-0 right-0 rounded-l-none" |
There was a problem hiding this comment.
[nitpick] The border-none class was removed from the className prop. Since WorkflowNodeDetailsPanel has a default border (border border-stroke-neutral-secondary on line 1124), this panel will now display a border in the cluster elements canvas. If this is unintentional and you want to maintain the previous borderless appearance, add border-none back to the className: className="fixed inset-y-0 right-0 rounded-l-none border-none"
| className="fixed inset-y-0 right-0 rounded-l-none" | |
| className="fixed inset-y-0 right-0 rounded-l-none border-none" |
| updateWorkflowMutation={updateWorkflowMutation!} | ||
| workflowNodeOutputs={filteredWorkflowNodeOutputs ?? []} | ||
| /> | ||
| <> |
There was a problem hiding this comment.
Sada je ovaj fragment <> visak
| <WorkflowNodeDetailsPanel | ||
| className="fixed inset-y-0 right-0 rounded-l-none" | ||
| closeButton={ | ||
| <DialogClose asChild> |
There was a problem hiding this comment.
@ivicac je li zelimo da se NodeDetailsPanel nikako ne moze zatvoriti -> da se automatski zatvara i canvas klikom na X ?
Jer onda bi tribali dodati i logiku kada se brise vec selektirani cluster element, da se u panelu mozda otvori mainRoot (trenutno brisanje selektiranog elementa samo zatvara panel) 🤔
No description provided.