3262 - make workflow node handles visible

Author: kresimir-coko

client/src/pages/platform/workflow-editor/edges/WorkflowEdge.tsx

@@ -151,7 +151,7 @@ export default function WorkflowEdge({
                                 'flex cursor-pointer items-center justify-center rounded transition-all',
                                 isDropzoneActive
                                     ? 'size-16 border-2 border-blue-100 bg-blue-100'
-                                    : 'size-6 border-2 border-gray-300 bg-white hover:scale-110 hover:border-gray-400'
+                                    : 'size-6 border-2 border-stroke-neutral-tertiary bg-white hover:scale-110 hover:border-stroke-brand-secondary-hover'
                             )}
                             id={`${id}-button`}
                             onDragEnter={() => setDropzoneActive(true)}

client/src/pages/platform/workflow-editor/nodes/NodeTypes.module.css

@@ -5,3 +5,12 @@
 .handle {
     @apply invisible;
 }
+
+.handleVisible {
+    @apply left-node-handle-placement;
+    @apply -z-10;
+    @apply h-2;
+    @apply w-2;
+    @apply border-0;
+    @apply bg-stroke-neutral-tertiary;
+}

client/src/pages/platform/workflow-editor/nodes/WorkflowNode.tsx

@@ -280,7 +280,7 @@ const WorkflowNode = ({data, id}: {data: NodeDataType; id: string}) => {
                     <Button
                         aria-label={`${data.workflowNodeName} node`}
                         className={twMerge(
-                            'size-18 rounded-md border-2 border-stroke-neutral-tertiary bg-surface-neutral-primary p-4 text-primary shadow hover:border-stroke-brand-secondary-hover hover:bg-surface-neutral-primary hover:shadow-none focus-visible:ring-stroke-brand-focus active:bg-surface-neutral-primary [&_svg]:size-9',
+                            'size-18 rounded-md border-2 border-stroke-neutral-tertiary bg-surface-neutral-primary p-4 text-primary hover:border-stroke-brand-secondary-hover hover:bg-surface-neutral-primary focus-visible:ring-stroke-brand-focus active:bg-surface-neutral-primary [&_svg]:size-9',
                             isSelected &&
                                 workflowNodeDetailsPanelOpen &&
                                 !isMainRootClusterElement &&
@@ -366,7 +366,7 @@ const WorkflowNode = ({data, id}: {data: NodeDataType; id: string}) => {
                     {!isMainRootClusterElement && (
                         <Handle
                             className={twMerge(`left-${nodeWidth / 2}px`, styles.handle)}
-                            isConnectable={false}
+                            // isConnectable={false}
                             position={Position.Top}
                             type="target"
                         />
@@ -394,14 +394,18 @@ const WorkflowNode = ({data, id}: {data: NodeDataType; id: string}) => {
             ) : (
                 <>
                     <Handle
-                        className={twMerge('left-node-handle-placement', styles.handle)}
+                        className={twMerge(
+                            '-top-[1px] rounded-b-none rounded-t-xs',
+                            styles.handleVisible,
+                            data.trigger && 'hidden'
+                        )}
                         isConnectable={false}
                         position={Position.Top}
                         type="target"
                     />
 
                     <Handle
-                        className={twMerge('left-node-handle-placement', styles.handle)}
+                        className={twMerge('rounded-b-xs rounded-t-none', styles.handleVisible)}
                         isConnectable={false}
                         position={Position.Bottom}
                         type="source"