1652 client - Refactor WorkflowNodeDetailsPanel to be open when the cluster element editor is open

Author: ivicac

client/src/pages/platform/workflow-editor/WorkflowEditorLayout.tsx

@@ -177,37 +177,37 @@ const WorkflowEditorLayout = ({includeComponents, runDisabled, showWorkflowInput
                     <DialogContent className="absolute bottom-4 left-16 top-12 h-[calc(100vh-64px)] w-[calc(100vw-80px)] max-w-none translate-x-0 translate-y-0 gap-2 bg-surface-main p-0">
                         <ClusterElementsWorkflowEditor />
 
-                        {currentComponent && (
-                            <>
-                                <WorkflowNodeDetailsPanel
-                                    className="fixed inset-y-0 right-0 rounded-l-none border-none"
-                                    invalidateWorkflowQueries={invalidateWorkflowQueries!}
-                                    previousComponentDefinitions={previousComponentDefinitions}
-                                    updateWorkflowMutation={updateWorkflowMutation!}
-                                    workflowNodeOutputs={filteredWorkflowNodeOutputs ?? []}
-                                />
+                        <>
+                            <WorkflowNodeDetailsPanel
+                                className="fixed inset-y-0 right-0 rounded-l-none"
+                                closeButton={
+                                    <DialogClose asChild>
+                                        <Button
+                                            className="absolute right-2 top-2"
+                                            size="icon"
+                                            title="Close the canvas"
+                                            variant="ghost"
+                                        >
+                                            <XIcon />
+                                        </Button>
+                                    </DialogClose>
+                                }
+                                invalidateWorkflowQueries={invalidateWorkflowQueries!}
+                                previousComponentDefinitions={previousComponentDefinitions}
+                                updateWorkflowMutation={updateWorkflowMutation!}
+                                workflowNodeOutputs={filteredWorkflowNodeOutputs ?? []}
+                            />
 
-                                {dataPillPanelOpen && (
-                                    <Suspense fallback={<DataPillPanelSkeleton />}>
-                                        <DataPillPanel
-                                            className="fixed inset-y-0 right-[465px] rounded-none"
-                                            previousComponentDefinitions={previousComponentDefinitions}
-                                            workflowNodeOutputs={filteredWorkflowNodeOutputs ?? []}
-                                        />
-                                    </Suspense>
-                                )}
-                            </>
-                        )}
-
-                        <DialogClose asChild>
-                            <Button
-                                className="absolute right-2 top-2 size-10 border bg-white p-2 shadow-none [&_svg]:size-5"
-                                title="Close the canvas"
-                                variant="ghost"
-                            >
-                                <XIcon />
-                            </Button>
-                        </DialogClose>
+                            {dataPillPanelOpen && (
+                                <Suspense fallback={<DataPillPanelSkeleton />}>
+                                    <DataPillPanel
+                                        className="fixed inset-y-0 right-[465px] rounded-none"
+                                        previousComponentDefinitions={previousComponentDefinitions}
+                                        workflowNodeOutputs={filteredWorkflowNodeOutputs ?? []}
+                                    />
+                                </Suspense>
+                            )}
+                        </>
                     </DialogContent>
                 </Dialog>
             )}

client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx

@@ -64,7 +64,7 @@ import {
 import {TooltipPortal} from '@radix-ui/react-tooltip';
 import {useQueryClient} from '@tanstack/react-query';
 import {InfoIcon, XIcon} from 'lucide-react';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import isEqual from 'react-fast-compare';
 import InlineSVG from 'react-inlinesvg';
 import {twMerge} from 'tailwind-merge';
@@ -106,6 +106,7 @@ const TABS: Array<{label: string; name: TabNameType}> = [
 
 interface WorkflowNodeDetailsPanelProps {
     className?: string;
+    closeButton?: ReactNode;
     invalidateWorkflowQueries: () => void;
     previousComponentDefinitions: Array<ComponentDefinitionBasic>;
     updateWorkflowMutation: UpdateWorkflowMutationType;
@@ -114,6 +115,7 @@ interface WorkflowNodeDetailsPanelProps {
 
 const WorkflowNodeDetailsPanel = ({
     className,
+    closeButton,
     invalidateWorkflowQueries,
     previousComponentDefinitions,
     updateWorkflowMutation,
@@ -1155,13 +1157,17 @@ const WorkflowNodeDetailsPanel = ({
                             </Tooltip>
                         )}
 
-                        <button
-                            aria-label="Close the node details dialog"
-                            className="ml-auto pr-0"
-                            onClick={handlePanelClose}
-                        >
-                            <XIcon aria-hidden="true" className="size-4 cursor-pointer" />
-                        </button>
+                        {closeButton ? (
+                            closeButton
+                        ) : (
+                            <button
+                                aria-label="Close the node details dialog"
+                                className="ml-auto pr-0"
+                                onClick={handlePanelClose}
+                            >
+                                <XIcon aria-hidden="true" className="size-4 cursor-pointer" />
+                            </button>
+                        )}
                     </header>
 
                     <main className="flex h-full flex-col overflow-hidden">

client/src/pages/platform/workflow-editor/hooks/useNodeClick.ts

@@ -53,12 +53,6 @@ export default function useNodeClick(data: NodeDataType, id: NodeProps['id'], ac
 
         if (!!data.clusterRoot && !clusterElementsCanvasOpen) {
             setClusterElementsCanvasOpen(true);
-
-            setCurrentComponent(undefined);
-
-            setWorkflowNodeDetailsPanelOpen(false);
-
-            return;
         }
 
         setWorkflowNodeDetailsPanelOpen(true);