testeranto 0.203.0 → 0.205.0

package/dist/module/src/app/frontend/components/pure/ModalContent.test/implementation.js

@@ -0,0 +1,32 @@
+import { assert } from "chai";
+export const implementation = {
+    suites: {
+        Default: "Modal Content Tests",
+    },
+    givens: {
+        Default: () => ({
+            theme: "light",
+            handleThemeChange: () => { },
+        }),
+    },
+    whens: {},
+    thens: {
+        hasModalHeader: () => (state) => {
+            var _a;
+            const header = (_a = state.htmlElement) === null || _a === void 0 ? void 0 : _a.querySelector('.modal-header');
+            assert.exists(header, 'Should have Modal.Header');
+            return state;
+        },
+        hasThemeCards: () => (state) => {
+            var _a;
+            const themeCards = (_a = state.htmlElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.theme-card');
+            assert.isAtLeast(themeCards === null || themeCards === void 0 ? void 0 : themeCards.length, 1, 'Should render ThemeCard components');
+            return state;
+        },
+        takeScreenshot: (name) => async (state, pm) => {
+            // For web tests, we can use the PM's screenshot capability
+            // The actual implementation will be handled by the test runner
+            return state;
+        },
+    },
+};

package/dist/module/src/app/frontend/components/pure/ModalContent.test/index.js

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { ModalContent } from "../ModalContent";
+import React from "react";
+import ReactDOM from "react-dom/client";
+// import { ITestInterface } from "../../../CoreTypes";
+// import { IPM } from "../../../lib/types";
+const testAdapter = {
+    beforeAll: async (input, testResource, pm) => {
+        // The subject is the component itself, which we'll use to create instances
+        return ModalContent;
+    },
+    beforeEach: async (subject, initializer, testResource, initialValues, pm) => {
+        // Create a container and mount the component
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const props = initializer();
+        const root = ReactDOM.createRoot(container);
+        const reactElement = React.createElement(subject, props);
+        root.render(reactElement);
+        // Wait for the component to render
+        await new Promise(resolve => setTimeout(resolve, 0));
+        return {
+            htmlElement: container,
+            reactElement: reactElement,
+            domRoot: root
+        };
+    },
+    andWhen: async (store, whenCB, testResource, pm) => {
+        return whenCB(store, pm);
+    },
+    butThen: async (store, thenCB, testResource, pm) => {
+        return thenCB(store, pm);
+    },
+    afterEach: async (store, key, pm) => {
+        // Cleanup
+        if (store.domRoot) {
+            store.domRoot.unmount();
+        }
+        if (store.htmlElement && store.htmlElement.parentNode) {
+            store.htmlElement.parentNode.removeChild(store.htmlElement);
+        }
+        return store;
+    },
+    afterAll: async (store, pm) => {
+        // No-op for now
+    },
+    assertThis: (assertion) => {
+        // The assertions are handled in the then implementations
+        // This can be a no-op or can wrap the assertion if needed
+        return assertion;
+    }
+};
+export default Testeranto(ModalContent, specification, implementation, testAdapter);

package/dist/module/src/app/frontend/components/pure/ModalContent.test/specification.js

@@ -0,0 +1,15 @@
+export const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("ModalContent Component Tests", {
+            basicRender: Given.Default([
+                "ModalContent should render",
+                "It should contain a Modal.Header",
+                "It should render the ThemeCard components",
+            ], [], [
+                Then.hasModalHeader(undefined),
+                Then.hasThemeCards(undefined),
+                Then.takeScreenshot("modal-content.png"),
+            ]),
+        }),
+    ];
+};

package/dist/module/src/app/frontend/components/pure/ModalContent.test/types.js

@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export {};

package/dist/module/src/app/frontend/components/pure/NavBar.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import { Navbar, Container, Nav, Badge } from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
+export const NavBar = ({ title, backLink, navItems = [], rightContent, }) => {
+    const location = useLocation();
+    return (React.createElement(Navbar, { bg: "light", expand: "lg", className: "mb-2", sticky: "top", expanded: false },
+        React.createElement(Container, { fluid: true },
+            backLink && (React.createElement(Nav.Link, { as: Link, to: backLink, className: "me-2 fs-3 text-primary", style: {
+                    padding: '0.25rem 0.75rem',
+                    border: '2px solid var(--bs-primary)',
+                    borderRadius: '50%',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '2.5rem',
+                    height: '2.5rem'
+                }, title: "Go up one level" }, "\u2191")),
+            React.createElement(Navbar.Brand, { className: backLink ? 'ms-2' : '' }, title),
+            React.createElement(Navbar.Toggle, { "aria-controls": "basic-navbar-nav", style: { display: 'none' } }),
+            React.createElement(Navbar.Collapse, { id: "basic-navbar-nav" },
+                navItems.length > 0 && (React.createElement(Nav, { className: "me-auto" }, navItems.map((item, i) => {
+                    const className = [
+                        item.className,
+                        item.active ? 'text-primary fw-bold border-bottom border-2 border-primary' : '',
+                        typeof item.label === 'string' && item.label.includes('❌') ? 'text-danger fw-bold' : '',
+                        typeof item.label === 'string' && item.label.includes('✅') ? 'text-success fw-bold' : '',
+                        !item.active && typeof item.label !== 'string' ? 'text-secondary' : ''
+                    ].filter(Boolean).join(' ');
+                    return (React.createElement(Nav.Link, { key: i, as: item.to ? Link : 'div', to: item.to, active: item.active, className: className, title: typeof item.label === 'string' ? item.label : undefined },
+                        item.icon && React.createElement("span", { className: "me-2" }, item.icon),
+                        item.label,
+                        item.badge && (React.createElement(Badge, { bg: item.badge.variant, className: "ms-2" }, item.badge.text))));
+                }))),
+                rightContent && (React.createElement(Nav, null, React.Children.map(rightContent, (child) => {
+                    return child;
+                })))))));
+};

package/dist/module/src/app/frontend/components/pure/ProcessDetails.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Badge, Button, Alert } from 'react-bootstrap';
+const getStatusBadge = (process) => {
+    switch (process.status) {
+        case "running":
+            return React.createElement(Badge, { bg: "success" }, "Running");
+        case "exited":
+            return React.createElement(Badge, { bg: "secondary" },
+                "Exited (",
+                process.exitCode,
+                ")");
+        case "error":
+            return React.createElement(Badge, { bg: "danger" }, "Error");
+        default:
+            return React.createElement(Badge, { bg: "warning" }, "Unknown");
+    }
+};
+export const ProcessDetails = ({ selectedProcess, onKillProcess, }) => {
+    if (!selectedProcess) {
+        return (React.createElement("div", { className: "text-center text-muted mt-5" },
+            React.createElement("i", null, "Select a process to view details")));
+    }
+    return (React.createElement("div", { className: "flex-grow-1 d-flex flex-column" },
+        React.createElement("div", { className: "d-flex align-items-center gap-2 mb-3 flex-wrap" },
+            React.createElement("div", null, getStatusBadge(selectedProcess)),
+            React.createElement("div", { className: "text-muted" }, selectedProcess.pid || "N/A"),
+            React.createElement("div", { className: "text-muted" }, new Date(selectedProcess.timestamp).toLocaleString()),
+            selectedProcess.status === "running" && onKillProcess && (React.createElement(Button, { variant: "danger", size: "sm", onClick: () => onKillProcess(selectedProcess.processId), className: "flex-grow-0 ms-auto" }, "\u23F9\uFE0F Stop")),
+            selectedProcess.exitCode !== undefined && (React.createElement("div", { className: "text-muted" }, selectedProcess.exitCode))),
+        selectedProcess.error && (React.createElement(Alert, { variant: "danger", className: "py-2 mb-3" }, selectedProcess.error)),
+        React.createElement("div", null,
+            React.createElement("div", { className: "mb-1 small text-muted" }, "Command:"),
+            React.createElement("div", { className: "bg-dark text-light p-2 rounded", style: {
+                    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                    fontSize: "14px",
+                    lineHeight: "1.4",
+                    overflow: "auto",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                    maxHeight: "200px"
+                } }, selectedProcess.command))));
+};

package/dist/module/src/app/frontend/components/pure/ProcessInput.js

@@ -0,0 +1,25 @@
+import React, { useRef, useCallback } from 'react';
+export const ProcessInput = ({ inputValue, webSocketStatus, onInputChange, onKeyPress, onSubmit, }) => {
+    const inputRef = useRef(null);
+    const isConnected = webSocketStatus === 'connected';
+    const handleButtonClick = useCallback((e) => {
+        e.stopPropagation();
+        onSubmit();
+        // Focus the input using ref
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [onSubmit]);
+    return (React.createElement("div", { className: "border-top bg-white p-3", style: { flexShrink: 0 } },
+        React.createElement("div", { className: "input-group" },
+            React.createElement("input", { ref: inputRef, type: "text", className: "form-control", placeholder: "Type input and press Enter...", value: inputValue, onChange: onInputChange, onKeyPress: onKeyPress, autoFocus: true, onClick: (e) => {
+                    e.stopPropagation();
+                    e.currentTarget.focus();
+                }, onFocus: (e) => {
+                    e.target.select();
+                }, style: { cursor: 'text' }, disabled: !isConnected }),
+            React.createElement("button", { className: "btn btn-primary", type: "button", onClick: handleButtonClick, disabled: !isConnected || !inputValue.trim() }, "Send")),
+        React.createElement("small", { className: "text-muted" },
+            "\uD83D\uDCA1 Press Enter to send input to the process",
+            !isConnected && ` (WebSocket is ${webSocketStatus})`)));
+};

package/dist/module/src/app/frontend/components/pure/ProcessList.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Badge } from 'react-bootstrap';
+const getStatusBadge = (process) => {
+    switch (process.status) {
+        case "running":
+            return React.createElement(Badge, { bg: "success" }, "Running");
+        case "exited":
+            return React.createElement(Badge, { bg: "secondary" },
+                "Exited (",
+                process.exitCode,
+                ")");
+        case "error":
+            return React.createElement(Badge, { bg: "danger" }, "Error");
+        default:
+            return React.createElement(Badge, { bg: "warning" }, "Unknown");
+    }
+};
+export const ProcessList = ({ processes, selectedProcess, onSelectProcess, loading, }) => {
+    return (React.createElement("div", { className: "p-1" },
+        [...processes].reverse().map((process) => (React.createElement("div", { key: process.processId, className: `p-2 mb-1 rounded ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
+                ? "bg-primary text-white"
+                : "bg-white border"}`, style: { cursor: "pointer" }, onClick: () => onSelectProcess(process), title: process.command },
+            React.createElement("div", { className: "d-flex justify-content-between align-items-start" },
+                React.createElement("div", { className: "flex-grow-1", style: { minWidth: 0 } },
+                    React.createElement("div", { className: "fw-bold text-truncate small" }, process.command.split(" ")[0]),
+                    React.createElement("div", { className: `text-truncate ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
+                            ? "text-white-50"
+                            : "text-muted"}`, style: { fontSize: "0.7rem" } },
+                        "PID: ",
+                        process.pid || "N/A",
+                        " |",
+                        " ",
+                        new Date(process.timestamp).toLocaleTimeString())),
+                React.createElement("div", { className: "ms-2" }, getStatusBadge(process))),
+            process.error && (React.createElement("div", { className: `mt-1 ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
+                    ? "text-warning"
+                    : "text-danger"}`, style: { fontSize: "0.7rem" } },
+                React.createElement("div", { className: "text-truncate" },
+                    "Error: ",
+                    process.error)))))),
+        processes.length === 0 && !loading && (React.createElement("div", { className: "p-2 text-center text-muted small" }, "No active processes")),
+        loading && processes.length === 0 && (React.createElement("div", { className: "p-2 text-center small" },
+            React.createElement("div", { className: "spinner-border spinner-border-sm", role: "status" },
+                React.createElement("span", { className: "visually-hidden" }, "Loading..."))))));
+};

package/dist/module/src/app/frontend/components/pure/ProcessLogs.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+export const ProcessLogs = ({ logs }) => {
+    const logsEndRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        // Auto-scroll to bottom when logs update
+        (_a = logsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, [logs]);
+    return (React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } },
+        React.createElement("div", { className: "d-flex justify-content-between align-items-center p-3 border-bottom bg-white", style: { flexShrink: 0 } },
+            React.createElement("small", { className: "text-muted" },
+                (logs === null || logs === void 0 ? void 0 : logs.length) || 0,
+                " lines")),
+        React.createElement("div", { className: "bg-dark text-light flex-grow-1", style: {
+                overflowY: 'auto',
+                fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                fontSize: '14px',
+                lineHeight: '1.4',
+                padding: '1rem'
+            } },
+            logs && logs.length > 0 ? (React.createElement("pre", { className: "mb-0", style: {
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    color: 'inherit'
+                } }, logs.join(''))) : (React.createElement("div", { className: "text-muted text-center py-4" },
+                React.createElement("i", null, "No output yet"))),
+            React.createElement("div", { ref: logsEndRef }))));
+};

package/dist/module/src/app/frontend/components/pure/ProcessManager.js

@@ -0,0 +1,76 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal, Button, ListGroup, Badge } from 'react-bootstrap';
+export const ProcessManager = ({ show, onHide, ws }) => {
+    const [processes, setProcesses] = useState([]);
+    // Handle WebSocket messages
+    const handleMessage = useCallback((event) => {
+        try {
+            const data = JSON.parse(event.data);
+            if (data.type === 'runningProcesses') {
+                setProcesses(data.processes.map((p) => (Object.assign(Object.assign({}, p), { status: 'running' }))));
+            }
+            else if (data.type === 'processStarted') {
+                setProcesses(prev => [...prev, Object.assign(Object.assign({}, data), { status: 'running' })]);
+            }
+            else if (data.type === 'processExited') {
+                setProcesses(prev => prev.map(p => p.processId === data.processId
+                    ? Object.assign(Object.assign({}, p), { status: 'exited', exitCode: data.exitCode }) : p));
+            }
+            else if (data.type === 'processError') {
+                setProcesses(prev => prev.map(p => p.processId === data.processId
+                    ? Object.assign(Object.assign({}, p), { status: 'error', error: data.error }) : p));
+            }
+        }
+        catch (error) {
+            console.error('Error parsing process message:', error);
+        }
+    }, []);
+    useEffect(() => {
+        if (show && ws) {
+            // Request current processes when modal is shown
+            ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+        }
+    }, [show, ws]);
+    useEffect(() => {
+        if (!ws)
+            return;
+        ws.addEventListener('message', handleMessage);
+        return () => ws.removeEventListener('message', handleMessage);
+    }, [ws, handleMessage]);
+    const getStatusBadge = useCallback((process) => {
+        switch (process.status) {
+            case 'running':
+                return React.createElement(Badge, { bg: "success" }, "Running");
+            case 'exited':
+                return React.createElement(Badge, { bg: "secondary" },
+                    "Exited (",
+                    process.exitCode,
+                    ")");
+            case 'error':
+                return React.createElement(Badge, { bg: "danger" }, "Error");
+            default:
+                return React.createElement(Badge, { bg: "warning" }, "Unknown");
+        }
+    }, []);
+    return (React.createElement(Modal, { show: show, onHide: onHide, size: "lg" },
+        React.createElement(Modal.Header, { closeButton: true },
+            React.createElement(Modal.Title, null, "Running Aider Processes")),
+        React.createElement(Modal.Body, null,
+            React.createElement(ListGroup, null,
+                processes.map(process => (React.createElement(ListGroup.Item, { key: process.processId, className: "d-flex justify-content-between align-items-start" },
+                    React.createElement("div", { className: "ms-2 me-auto" },
+                        React.createElement("div", { className: "fw-bold" }, process.command),
+                        React.createElement("small", { className: "text-muted" },
+                            "PID: ",
+                            process.pid || 'N/A',
+                            " | Started: ",
+                            new Date(process.timestamp).toLocaleString()),
+                        process.error && (React.createElement("div", { className: "text-danger mt-1" },
+                            React.createElement("small", null,
+                                "Error: ",
+                                process.error)))),
+                    getStatusBadge(process)))),
+                processes.length === 0 && (React.createElement(ListGroup.Item, null, "No active processes")))),
+        React.createElement(Modal.Footer, null,
+            React.createElement(Button, { variant: "secondary", onClick: onHide }, "Close"))));
+};

package/dist/module/src/app/frontend/components/pure/ProcessManagerView.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import { ProcessList } from './ProcessList';
+import { ProcessDetails } from './ProcessDetails';
+import { ProcessTerminal } from './ProcessTerminal';
+import { useWebSocket } from "../../useWebSocket";
+export const ProcessManagerView = ({ processes, 
+// onRefresh,
+// onBack,
+loading, onKillProcess, }) => {
+    const [selectedProcess, setSelectedProcess] = useState(null);
+    const { ws } = useWebSocket();
+    // Handle process selection
+    const handleSelectProcess = useCallback((process) => {
+        setSelectedProcess(process);
+    }, []);
+    // Request process data when selected
+    useEffect(() => {
+        if (selectedProcess && ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: "getProcess",
+                processId: selectedProcess.processId,
+            }));
+        }
+    }, [selectedProcess, ws]);
+    return (React.createElement(Container, { fluid: true, className: "px-0 h-100" },
+        React.createElement(Row, { className: "g-0", style: { height: "calc(100vh - 56px)" } },
+            React.createElement(Col, { sm: 2, className: "border-end", style: {
+                    height: "100%",
+                    overflow: "auto",
+                    backgroundColor: "#f8f9fa",
+                } },
+                React.createElement(ProcessList, { processes: processes, selectedProcess: selectedProcess, onSelectProcess: handleSelectProcess, loading: loading })),
+            React.createElement(Col, { sm: 5, className: "border-end p-3 d-flex flex-column", style: {
+                    height: "100%",
+                    overflow: "hidden"
+                } },
+                React.createElement(ProcessDetails, { selectedProcess: selectedProcess, onKillProcess: onKillProcess })),
+            React.createElement(Col, { sm: 5, className: "p-3 d-flex flex-column", style: {
+                    height: "100%",
+                    overflow: "hidden"
+                } },
+                React.createElement(ProcessTerminal, { selectedProcess: selectedProcess, ws: ws })))));
+};
+// export { Process };

package/dist/module/src/app/frontend/components/pure/ProcessManagerViewTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/module/src/app/frontend/components/pure/ProcessSidebar.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Badge } from 'react-bootstrap';
+const getStatusBadge = (process) => {
+    switch (process.status) {
+        case 'running':
+            return React.createElement(Badge, { bg: "success" }, "Running");
+        case 'exited':
+            return React.createElement(Badge, { bg: "secondary" },
+                "Exited (",
+                process.exitCode,
+                ")");
+        case 'error':
+            return React.createElement(Badge, { bg: "danger" }, "Error");
+        default:
+            return React.createElement(Badge, { bg: "warning" }, "Unknown");
+    }
+};
+export const ProcessSidebar = ({ process, webSocketStatus, }) => {
+    return (React.createElement("div", { className: "border-end", style: {
+            width: '300px',
+            minWidth: '300px',
+            flexShrink: 0,
+            overflowY: 'auto'
+        } },
+        React.createElement("div", { className: "p-3" },
+            React.createElement("div", { className: "mb-3" },
+                React.createElement("strong", null, "Command:"),
+                React.createElement("code", { className: "bg-white p-2 rounded d-block mt-1", style: { fontSize: '0.8rem' } }, process.command)),
+            React.createElement("div", { className: "mb-2" },
+                React.createElement("strong", null, "Status:"),
+                React.createElement("div", { className: "mt-1" }, getStatusBadge(process))),
+            React.createElement("div", { className: "mb-2" },
+                React.createElement("strong", null, "WebSocket:"),
+                React.createElement("div", { className: "mt-1" },
+                    React.createElement(Badge, { bg: webSocketStatus === 'connected' ? 'success' :
+                            webSocketStatus === 'connecting' ? 'warning' : 'danger' }, webSocketStatus))),
+            React.createElement("div", { className: "mb-2" },
+                React.createElement("strong", null, "PID:"),
+                React.createElement("div", { className: "text-muted" }, process.pid || 'N/A')),
+            React.createElement("div", { className: "mb-2" },
+                React.createElement("strong", null, "Started:"),
+                React.createElement("div", { className: "text-muted" }, new Date(process.timestamp).toLocaleString())),
+            process.exitCode !== undefined && (React.createElement("div", { className: "mb-2" },
+                React.createElement("strong", null, "Exit Code:"),
+                React.createElement("div", { className: "text-muted" }, process.exitCode))),
+            process.error && (React.createElement("div", { className: "mt-3" },
+                React.createElement("strong", { className: "text-danger" }, "Error:"),
+                React.createElement("div", { className: "text-danger small mt-1" }, process.error))))));
+};

package/dist/module/src/app/frontend/components/pure/ProcessTerminal.js

@@ -0,0 +1,25 @@
+import React, { useCallback } from "react";
+import { useTerminalWebSocket } from "../../useTerminalWebSocket";
+import { TerminalLogs } from "./TerminalLogs";
+import { TerminalInput } from "./TerminalInput";
+export const ProcessTerminal = ({ selectedProcess, ws, }) => {
+    const { processLogs } = useTerminalWebSocket(ws, selectedProcess);
+    const handleInput = useCallback((data) => {
+        if (ws &&
+            ws.readyState === WebSocket.OPEN &&
+            (selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.status) === "running") {
+            ws.send(JSON.stringify({
+                type: "stdin",
+                processId: selectedProcess.processId,
+                data: data,
+            }));
+        }
+    }, [ws, selectedProcess]);
+    if (!selectedProcess) {
+        return (React.createElement("div", { className: "text-center text-muted mt-5" },
+            React.createElement("i", null, "Terminal will appear here when a process is selected")));
+    }
+    return (React.createElement("div", { className: "flex-grow-1 d-flex flex-column", style: { minHeight: 0 } },
+        React.createElement(TerminalLogs, { logs: processLogs }),
+        selectedProcess.status === "running" && (React.createElement(TerminalInput, { onInput: handleInput }))));
+};

package/dist/module/src/app/frontend/components/pure/ProjectPageView.js

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { Container, Alert, Badge, Nav, Col, Row } from "react-bootstrap";
+import { TestTable } from "./TestTable";
+import { BuildLogViewer } from "./BuildLogViewer";
+import { NavBar } from "./NavBar";
+import "./../../app.scss";
+export const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading, error, projectName, activeTab, setActiveTab, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (loading)
+        return React.createElement("div", null, "Loading project data...");
+    if (error)
+        return React.createElement(Alert, { variant: "danger" },
+            "Error: ",
+            error);
+    if (!summary)
+        return React.createElement(Alert, { variant: "warning" }, "No data found for project");
+    const testStatuses = Object.entries(summary).map(([testName, testData]) => {
+        var _a, _b;
+        const runTime = ((_b = (_a = config.tests) === null || _a === void 0 ? void 0 : _a.find((t) => t[0] === testName)) === null || _b === void 0 ? void 0 : _b[1]) ||
+            "node";
+        return {
+            testName,
+            testsExist: testData.testsExist !== false,
+            runTimeErrors: Number(testData.runTimeErrors) || 0,
+            typeErrors: Number(testData.typeErrors) || 0,
+            staticErrors: Number(testData.staticErrors) || 0,
+            runTimeTests: Number(testData.runTimeTests) || 0,
+            runTime,
+        };
+    });
+    return (React.createElement(Container, { fluid: true },
+        React.createElement(NavBar, { title: projectName, backLink: "/" }),
+        React.createElement(Row, { className: "g-0" },
+            React.createElement(Col, { sm: 3, className: "border-end" },
+                React.createElement(Nav, { variant: "pills", className: "flex-column" },
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === "tests", onClick: () => setActiveTab("tests"), className: "d-flex flex-column align-items-start" },
+                            React.createElement("div", { className: "d-flex justify-content-between w-100" },
+                                React.createElement("span", null, "Tests"),
+                                testStatuses.some((t) => t.runTimeErrors > 0) ? (React.createElement(Badge, { bg: "danger" }, "\u274C")) : testStatuses.some((t) => t.typeErrors > 0 || t.staticErrors > 0) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : (React.createElement(Badge, { bg: "success" }, "\u2713"))))),
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === "node", onClick: () => setActiveTab("node"), className: "d-flex justify-content-between align-items-center" },
+                            "Node build logs",
+                            ((_a = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.errors) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(Badge, { bg: "danger" },
+                                "\u274C ",
+                                nodeLogs.errors.length)) : ((_b = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.warnings) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)),
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === "web", onClick: () => setActiveTab("web"), className: "d-flex justify-content-between align-items-center" },
+                            "Web build logs",
+                            ((_c = webLogs === null || webLogs === void 0 ? void 0 : webLogs.errors) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(Badge, { bg: "danger" },
+                                "\u274C ",
+                                webLogs.errors.length)) : ((_d = webLogs === null || webLogs === void 0 ? void 0 : webLogs.warnings) === null || _d === void 0 ? void 0 : _d.length) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)),
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === "pure", onClick: () => setActiveTab("pure"), className: "d-flex justify-content-between align-items-center" },
+                            "Pure build logs",
+                            ((_e = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.errors) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(Badge, { bg: "danger" },
+                                "\u274C ",
+                                pureLogs.errors.length)) : ((_f = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.warnings) === null || _f === void 0 ? void 0 : _f.length) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)))),
+            React.createElement(Col, { sm: 9 },
+                React.createElement("div", { className: "p-3" }, activeTab === "tests" ? (React.createElement(TestTable, { testStatuses: testStatuses, projectName: projectName })) : activeTab === "node" ? (React.createElement(BuildLogViewer, { logs: nodeLogs, runtime: "Node" })) : activeTab === "web" ? (React.createElement(BuildLogViewer, { logs: webLogs, runtime: "Web" })) : activeTab === "pure" ? (React.createElement(BuildLogViewer, { logs: pureLogs, runtime: "Pure" })) : null)))));
+};