@flowuent-org/diagramming-core 1.3.9 → 1.4.0

package/packages/diagrams/src/lib/components/automation/AutomationNavigationNode.tsx

@@ -1,596 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import { Handle, Position, useNodeId } from '@xyflow/react';
-import { Box, Typography, Chip, IconButton, Card, CardContent, Tooltip } from '@mui/material';
-import {
-    AccessTime as AccessTimeIcon,
-    ContentCopy as ContentCopyIcon,
-} from '@mui/icons-material';
-import { RiCloseLine } from 'react-icons/ri';
-import ReactJson from 'react-json-view';
-import { useTranslation } from 'react-i18next';
-import { useDiagram } from '../../contexts/DiagramProvider';
-import { NodeActionButtons } from './NodeActionButtons';
-import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
-import { useSearch } from '../../contexts/SearchContext';
-import { getStatusColor } from './statusColors';
-import { NavigationIcon } from '../../../../../molecules/src/lib/SvgIcons/icons';
-
-interface AutomationNavigationNodeProps {
-    data: {
-        label: string;
-        description: string;
-        status: 'Ready' | 'Running' | 'Completed' | 'Error';
-        navigationType: 'navigate' | 'click' | 'scroll' | 'wait' | 'extract';
-        url?: string;
-        selector?: string;
-        action?: string;
-        waitTime?: number;
-        scrollDirection?: 'up' | 'down' | 'to-element';
-        extractSelector?: string;
-        lastRun: string;
-        backgroundColor: string;
-        textColor: string;
-        borderColor: string;
-        iconName?: string;
-        formData?: {
-            navigationType?: 'navigate' | 'click' | 'scroll' | 'wait' | 'extract';
-            url?: string;
-            selector?: string;
-            action?: string;
-            waitTime?: number;
-            scrollDirection?: 'up' | 'down' | 'to-element';
-            extractSelector?: string;
-            outputVariable?: string;
-            timeout?: number;
-            retryCount?: number;
-            [key: string]: any;
-        };
-    };
-    selected?: boolean;
-}
-
-export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> = ({ data, selected }) => {
-    const { t } = useTranslation();
-    const { highlightText } = useSearch();
-    const [isJsonOpen, setIsJsonOpen] = useState(false);
-    const rootRef = useRef<any>(null);
-    const portalRef = useRef<HTMLDivElement | null>(null);
-    const nodeRef = useRef<HTMLDivElement | null>(null);
-    const nodeId = useNodeId();
-    const setSelectedNode = useDiagram((state) => state.setSelectedNode);
-    const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
-    const onNodesChange = useDiagram((state) => state.onNodesChange);
-    const nodes = useDiagram((state) => state.nodes);
-    const setNodes = useDiagram((state) => state.setNodes);
-
-    const handleJsonClick = () => {
-        if (nodeId) setSelectedNode(nodeId);
-        if (!enableJson) return;
-        setIsJsonOpen(!isJsonOpen);
-    };
-
-    const handleClose = () => {
-        setIsJsonOpen(false);
-        if (rootRef.current) {
-            rootRef.current.unmount();
-            rootRef.current = null;
-        }
-        if (portalRef.current) {
-            document.body.removeChild(portalRef.current);
-            portalRef.current = null;
-        }
-    };
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
-                handleClose();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isJsonOpen]);
-
-    useEffect(() => {
-        if (nodeRef.current) {
-            const rect = nodeRef.current.getBoundingClientRect();
-            const computedStyle = window.getComputedStyle(nodeRef.current);
-        }
-    }, [data.label]);
-
-    useEffect(() => {
-        if (isJsonOpen) {
-            const portalRoot = document.createElement('div');
-            document.body.appendChild(portalRoot);
-            portalRef.current = portalRoot;
-
-            const root = createRoot(portalRoot);
-            rootRef.current = root;
-
-            root.render(
-                <Card
-                    id="automation-json-popover"
-                    sx={{
-                        position: 'fixed',
-                        top: 0,
-                        right: 0,
-                        zIndex: 9999,
-                        width: '400px',
-                        height: '100vh',
-                        overflow: 'auto',
-                        bgcolor: '#242424',
-                        color: '#fff',
-                        border: '1px solid #333',
-                        '&::-webkit-scrollbar': {
-                            width: '6px',
-                        },
-                        '&::-webkit-scrollbar-track': {
-                            background: 'transparent',
-                        },
-                        '&::-webkit-scrollbar-thumb': {
-                            background: '#444',
-                            borderRadius: '3px',
-                            '&:hover': {
-                                background: '#666',
-                            },
-                        },
-                    }}
-                >
-                    <CardContent sx={{ bgcolor: '#242424', color: '#fff' }}>
-                        <IconButton
-                            aria-label="close"
-                            onClick={handleClose}
-                            sx={{
-                                color: '#999',
-                                '&:hover': {
-                                    color: '#fff',
-                                    bgcolor: 'rgba(255, 255, 255, 0.1)',
-                                },
-                            }}
-                        >
-                            <RiCloseLine />
-                        </IconButton>
-                        {data.formData?.executionResult && (
-                            <Box sx={{ mb: 2 }}>
-                                <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
-                                    {t('automation.common.executionResult')}
-                                </Typography>
-                                <Box sx={{
-                                    bgcolor: data.formData.executionResult.success ? '#1e3a8a' : '#dc2626',
-                                    p: 1,
-                                    borderRadius: 1,
-                                    mb: 1
-                                }}>
-                                    <Typography variant="body2" sx={{ color: '#fff' }}>
-                                        {t('automation.common.status')}: {data.formData.executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
-                                    </Typography>
-                                    <Typography variant="body2" sx={{ color: '#fff' }}>
-                                        {t('automation.common.timestamp')}: {new Date(data.formData.executionResult.timestamp).toLocaleString()}
-                                    </Typography>
-                                    {data.formData.executionResult.error && (
-                                        <Typography variant="body2" sx={{ color: '#fff' }}>
-                                            {t('automation.common.error')}: {data.formData.executionResult.error}
-                                        </Typography>
-                                    )}
-                                </Box>
-                            </Box>
-                        )}
-                        <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
-                            {t('automation.common.fullNodeData')}
-                        </Typography>
-                        <ReactJson theme={'monokai'} src={data.formData || data} collapsed={false} />
-                    </CardContent>
-                </Card>
-            );
-        } else {
-            if (rootRef.current) {
-                rootRef.current.unmount();
-                rootRef.current = null;
-            }
-            if (portalRef.current) {
-                document.body.removeChild(portalRef.current);
-                portalRef.current = null;
-            }
-        }
-    }, [isJsonOpen, data]);
-
-    
-
-    const getNavigationTypeLabel = () => {
-        const navType = data.formData?.navigationType || data.navigationType || 'navigate';
-        switch (navType) {
-            case 'navigate':
-                return 'Navigate to URL';
-            case 'click':
-                return 'Click Element';
-            case 'scroll':
-                return 'Scroll Page';
-            case 'wait':
-                return 'Wait';
-            case 'extract':
-                return 'Extract Data';
-            default:
-                return 'Navigation';
-        }
-    };
-
-    const getNavigationDetails = () => {
-        const navType = data.formData?.navigationType || data.navigationType || 'navigate';
-        const formData = data.formData || {};
-        
-        switch (navType) {
-            case 'navigate':
-                return formData.url || data.url || 'No URL specified';
-            case 'click':
-                return formData.selector || data.selector || 'No selector specified';
-            case 'scroll':
-                return formData.scrollDirection || data.scrollDirection || 'down';
-            case 'wait':
-                return `${formData.waitTime || data.waitTime || 1000}ms`;
-            case 'extract':
-                return formData.extractSelector || data.extractSelector || 'No selector specified';
-            default:
-                return 'No details';
-        }
-    };
-
-    return (
-        <Box
-            sx={{
-                position: 'relative',
-                width: '336px',
-                overflow: 'visible',
-            }}
-        >
-            <Box
-                ref={nodeRef}
-                sx={{
-                    width: '336px',
-                    minHeight: '150px',
-                    backgroundColor: '#181C25',
-                    border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
-                    borderRadius: '12px',
-                    color: '#ffffff',
-                    position: 'relative',
-                    boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
-                    transition: 'all 0.2s ease',
-                    cursor: 'pointer',
-                    overflow: 'hidden',
-                    ...(data.status === 'Running' && {
-                        animation: 'pulse-glow 2s ease-in-out infinite',
-                        '@keyframes pulse-glow': {
-                            '0%, 100%': {
-                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
-                                borderColor: 'rgba(59, 130, 246, 0.6)',
-                            },
-                            '50%': {
-                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
-                                borderColor: 'rgba(59, 130, 246, 0.9)',
-                            },
-                        },
-                    }),
-                }}
-                onClick={handleJsonClick}
-            >
-                {/* Top Header Section */}
-                <Box sx={{
-                    backgroundColor: "rgba(67, 93, 132, 0.1)",
-                    padding: '8px 16px',
-                    borderRadius: '12px 12px 0 0'
-                }}>
-                    <Typography variant="body2" sx={{
-                        color: '#ffffff',
-                        fontSize: '12px',
-                        fontWeight: 500
-                    }}>
-                        {data.formData?.description || data.description || 'Web navigation action'}
-                    </Typography>
-                </Box>
-
-                {/* Main Content */}
-                <Box sx={{ padding: '16px' }}>
-                    {/* Title Section */}
-                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                            <Box
-                                sx={{
-                                    width: '32px',
-                                    height: '32px',
-                                    minWidth: '32px',
-                                    backgroundColor: '#8b5cf6',
-                                    borderRadius: '50%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    flexShrink: 0,
-                                }}
-                            >
-                                <NavigationIcon />
-                            </Box>
-                            <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                                {highlightText(data.label)}
-                            </Typography>
-                        </Box>
-                        <Chip
-                            label={data.status || 'Ready'}
-                            size="small"
-                            sx={{
-                                backgroundColor: getStatusColor(data.status || 'Ready').bgColor,
-                                color: getStatusColor(data.status || 'Ready').color,
-                                fontWeight: 500,
-                                fontSize: '12px',
-                                height: '24px',
-                                borderRadius: '12px',
-                            }}
-                        />
-                    </Box>
-
-                    {/* Navigation Type */}
-                    <Box sx={{
-                        backgroundColor: '#1F2937',
-                        borderRadius: '8px',
-                        padding: '12px',
-                        mb: 2,
-                        border: '1px solid #374151'
-                    }}>
-                        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
-                            <Typography variant="body2" sx={{
-                                color: '#9CA3AF',
-                                fontSize: '11px',
-                            }}>
-                                {getNavigationTypeLabel()}
-                            </Typography>
-                            {getNavigationTypeLabel() === 'Navigate to URL' && getNavigationDetails() !== 'No URL specified' && (
-                                <Tooltip title="Copy URL" placement="top">
-                                    <IconButton
-                                        size="small"
-                                        onClick={(e) => {
-                                            e.stopPropagation();
-                                            const url = getNavigationDetails();
-                                            navigator.clipboard.writeText(url);
-                                        }}
-                                        sx={{
-                                            color: '#9CA3AF',
-                                            padding: '2px',
-                                            '&:hover': {
-                                                color: '#ffffff',
-                                                backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                                            },
-                                        }}
-                                    >
-                                        <ContentCopyIcon sx={{ fontSize: '14px' }} />
-                                    </IconButton>
-                                </Tooltip>
-                            )}
-                        </Box>
-                        <Tooltip 
-                            title={getNavigationDetails()} 
-                            placement="top"
-                            arrow
-                            enterDelay={500}
-                        >
-                            <Typography 
-                                variant="body2" 
-                                sx={{
-                                    color: '#ffffff',
-                                    fontSize: '12px',
-                                    fontWeight: 500,
-                                    wordBreak: 'break-all',
-                                    wordWrap: 'break-word',
-                                    overflowWrap: 'break-word',
-                                    maxWidth: '100%',
-                                    display: '-webkit-box',
-                                    WebkitLineClamp: 3,
-                                    WebkitBoxOrient: 'vertical',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    lineHeight: 1.4,
-                                }}
-                            >
-                                {getNavigationDetails()}
-                            </Typography>
-                        </Tooltip>
-                    </Box>
-
-                    {/* Description Box */}
-                    <Box sx={{
-                        backgroundColor: '#1F2937',
-                        borderRadius: '8px',
-                        padding: '12px',
-                        mb: 2,
-                        border: '1px solid #374151'
-                    }}>
-                        <Box sx={{
-                            backgroundColor: 'transparent',
-                            borderRadius: '4px',
-                            padding: '8px',
-                            border: '1px solid #4B5563',
-                            minHeight: '40px',
-                            display: 'flex',
-                            alignItems: 'center'
-                        }}>
-                            <Typography variant="body2" sx={{
-                                color: '#9CA3AF',
-                                fontSize: '12px',
-                                lineHeight: 1.4,
-                                margin: 0
-                            }}>
-                                {highlightText(data.description)}
-                            </Typography>
-                        </Box>
-                    </Box>
-
-                    {/* Last Run Info */}
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>
-                        <AccessTimeIcon sx={{ fontSize: '14px', color: '#9CA3AF' }} />
-                        <Typography variant="body2" sx={{ color: '#9CA3AF', fontSize: '11px' }}>
-                            {t('automation.common.lastRan')}: {data.lastRun}
-                        </Typography>
-                    </Box>
-                </Box>
-
-                {/* Connection Handles */}
-                <Handle
-                    type="source"
-                    position={Position.Top}
-                    id="top-source"
-                    className="connection-handle"
-                    style={{
-                        background: selected ? '#10B981' : '#1a1a2e',
-                        width: '14px',
-                        height: '14px',
-                        border: '3px solid #10B981',
-                        top: '-8px',
-                        opacity: selected ? 1 : 0,
-                        transition: 'all 0.2s ease-in-out',
-                        cursor: 'crosshair',
-                        zIndex: 10,
-                    }}
-                />
-                <Handle
-                    type="target"
-                    position={Position.Top}
-                    id="top-target"
-                    style={{
-                        background: 'transparent',
-                        width: '14px',
-                        height: '14px',
-                        border: 'none',
-                        top: '-8px',
-                        opacity: 0,
-                        pointerEvents: selected ? 'all' : 'none',
-                    }}
-                />
-                <Handle
-                    type="source"
-                    position={Position.Bottom}
-                    id="bottom-source"
-                    className="connection-handle"
-                    style={{
-                        background: selected ? '#10B981' : '#1a1a2e',
-                        width: '14px',
-                        height: '14px',
-                        border: '3px solid #10B981',
-                        bottom: '-8px',
-                        opacity: selected ? 1 : 0,
-                        transition: 'all 0.2s ease-in-out',
-                        cursor: 'crosshair',
-                        zIndex: 10,
-                    }}
-                />
-                <Handle
-                    type="target"
-                    position={Position.Bottom}
-                    id="bottom-target"
-                    style={{
-                        background: 'transparent',
-                        width: '14px',
-                        height: '14px',
-                        border: 'none',
-                        bottom: '-8px',
-                        opacity: 0,
-                        pointerEvents: selected ? 'all' : 'none',
-                    }}
-                />
-                <Handle
-                    type="source"
-                    position={Position.Left}
-                    id="left-source"
-                    className="connection-handle"
-                    style={{
-                        background: selected ? '#10B981' : '#1a1a2e',
-                        width: '14px',
-                        height: '14px',
-                        border: '3px solid #10B981',
-                        left: '-8px',
-                        opacity: selected ? 1 : 0,
-                        transition: 'all 0.2s ease-in-out',
-                        cursor: 'crosshair',
-                        zIndex: 10,
-                    }}
-                />
-                <Handle
-                    type="target"
-                    position={Position.Left}
-                    id="left-target"
-                    style={{
-                        background: 'transparent',
-                        width: '14px',
-                        height: '14px',
-                        border: 'none',
-                        left: '-8px',
-                        opacity: 0,
-                        pointerEvents: selected ? 'all' : 'none',
-                    }}
-                />
-                <Handle
-                    type="source"
-                    position={Position.Right}
-                    id="right-source"
-                    className="connection-handle"
-                    style={{
-                        background: selected ? '#10B981' : '#1a1a2e',
-                        width: '14px',
-                        height: '14px',
-                        border: '3px solid #10B981',
-                        right: '-8px',
-                        opacity: selected ? 1 : 0,
-                        transition: 'all 0.2s ease-in-out',
-                        cursor: 'crosshair',
-                        zIndex: 10,
-                    }}
-                />
-                <Handle
-                    type="target"
-                    position={Position.Right}
-                    id="right-target"
-                    style={{
-                        background: 'transparent',
-                        width: '14px',
-                        height: '14px',
-                        border: 'none',
-                        right: '-8px',
-                        opacity: 0,
-                        pointerEvents: selected ? 'all' : 'none',
-                    }}
-                />
-            </Box>
-
-            {/* Node Action Buttons */}
-            <NodeActionButtons
-                selected={selected}
-                onOpenAIAssistant={(buttonElement) => {
-                    if (nodeId) {
-                        showNodeAIAssistantPopup(nodeId, 'Navigation Node', buttonElement);
-                    }
-                }}
-                onDelete={() => {
-                    if (nodeId && onNodesChange) {
-                        onNodesChange([{ id: nodeId, type: 'remove' }]);
-                    }
-                }}
-                onDuplicate={() => {
-                    if (nodeId) {
-                        const currentNode = nodes.find(n => n.id === nodeId);
-                        if (currentNode) {
-                            const newNode = {
-                                ...currentNode,
-                                id: `${currentNode.id}-copy-${Date.now()}`,
-                                position: {
-                                    x: currentNode.position.x + 50,
-                                    y: currentNode.position.y + 50,
-                                },
-                                selected: false,
-                            };
-                            setNodes([...nodes, newNode]);
-                        }
-                    }
-                }}
-            />
-        </Box>
-    );
-};
-