testeranto 0.200.1 → 0.203.0

package/src/components/pure/ProcessTerminal.tsx

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

package/src/components/pure/ProjectPageView.tsx

@@ -1,188 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
-import { Tab, Container, Alert, Table, Badge, Nav, Card, ListGroup, Col, Row } from 'react-bootstrap';
-
-import { TestStatusBadge } from '../TestStatusBadge';
+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";
 
-const BuildLogViewer = ({ logs, runtime }: { logs: any, runtime: string }) => {
-  if (!logs) return <Alert variant="info">Loading {runtime.toLowerCase()} build logs...</Alert>;
-
-  const hasErrors = logs.errors?.length > 0;
-  const hasWarnings = logs.warnings?.length > 0;
-  const [activeTab, setActiveTab] = React.useState('summary');
-
-  return (
-    <div>
-      <Tab.Container activeKey={activeTab} onSelect={(k) => setActiveTab(k || 'summary')}>
-        <Nav variant="tabs" className="mb-3">
-          <Nav.Item>
-            <Nav.Link eventKey="summary">Build Summary</Nav.Link>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link eventKey="warnings">
-              {hasWarnings ? `⚠️ Warnings (${logs.warnings.length})` : 'Warnings'}
-            </Nav.Link>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link eventKey="errors">
-              {hasErrors ? `❌ Errors (${logs.errors.length})` : 'Errors'}
-            </Nav.Link>
-          </Nav.Item>
-        </Nav>
-
-        <Tab.Content>
-          <Tab.Pane eventKey="summary">
-            <Card>
-              <Card.Header className="d-flex justify-content-between align-items-center">
-                <h5>Build Summary</h5>
-                <div>
-                  {hasErrors && (
-                    <Badge bg="danger" className="me-2">
-                      {logs.errors.length} Error{logs.errors.length !== 1 ? 's' : ''}
-                    </Badge>
-                  )}
-                  {hasWarnings && (
-                    <Badge bg="warning" text="dark">
-                      {logs.warnings.length} Warning{logs.warnings.length !== 1 ? 's' : ''}
-                    </Badge>
-                  )}
-                  {!hasErrors && !hasWarnings && (
-                    <Badge bg="success">Build Successful</Badge>
-                  )}
-                </div>
-              </Card.Header>
-              <Card.Body>
-                <div className="mb-3">
-                  <h6>Input Files ({Object.keys(logs.metafile?.inputs || {}).length})</h6>
-                  <ListGroup className="max-h-200 overflow-auto">
-                    {Object.keys(logs.metafile?.inputs || {}).map((file) => (
-                      <ListGroup.Item key={file} className="py-2">
-                        <code>{file}</code>
-                        <div className="text-muted small">
-                          {logs.metafile.inputs[file].bytes} bytes
-                        </div>
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </div>
-                <div>
-                  <h6>Output Files ({Object.keys(logs.metafile?.outputs || {}).length})</h6>
-                  <ListGroup className="max-h-200 overflow-auto">
-                    {Object.keys(logs.metafile?.outputs || {}).map((file) => (
-                      <ListGroup.Item key={file} className="py-2">
-                        <code>{file}</code>
-                        <div className="text-muted small">
-                          {logs.metafile.outputs[file].bytes} bytes
-                          {logs.metafile.outputs[file].entryPoint && (
-                            <span className="ms-2 badge bg-info">Entry Point</span>
-                          )}
-                        </div>
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </div>
-              </Card.Body>
-            </Card>
-          </Tab.Pane>
-          <Tab.Pane eventKey="warnings">
-            {hasWarnings ? (
-              <Card className="border-warning">
-                <Card.Header className="bg-warning text-white d-flex justify-content-between align-items-center">
-                  <span>Build Warnings ({logs.warnings.length})</span>
-                  <Badge bg="light" text="dark">
-                    {new Date().toLocaleString()}
-                  </Badge>
-                </Card.Header>
-                <Card.Body className="p-0">
-                  <ListGroup variant="flush">
-                    {logs.warnings.map((warn: any, i: number) => (
-                      <ListGroup.Item key={i} className="text-warning">
-                        <div className="d-flex justify-content-between">
-                          <strong>
-                            {warn.location?.file || 'Unknown file'}
-                            {warn.location?.line && `:${warn.location.line}`}
-                          </strong>
-                          <small className="text-muted">
-                            {warn.pluginName ? `[${warn.pluginName}]` : ''}
-                          </small>
-                        </div>
-                        <div className="mt-1">
-                          <pre className="mb-0 p-2 bg-light rounded">
-                            {JSON.stringify(warn)}
-                          </pre>
-                        </div>
-                        {/* {warn.detail && (
-                          <div className="mt-1 small text-muted">
-                            <pre className="mb-0 p-2 bg-light rounded">
-                              {warn.detail}
-                            </pre>
-                          </div>
-                        )} */}
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </Card.Body>
-              </Card>
-            ) : (
-              <Alert variant="info">No warnings found</Alert>
-            )}
-          </Tab.Pane>
-          <Tab.Pane eventKey="errors">
-            {hasErrors ? (
-              <Card className="border-danger">
-                <Card.Header className="bg-danger text-white d-flex justify-content-between align-items-center">
-                  <span>Build Errors ({logs.errors.length})</span>
-                  <Badge bg="light" text="dark">
-                    {new Date().toLocaleString()}
-                  </Badge>
-                </Card.Header>
-                <Card.Body className="p-0">
-                  <ListGroup variant="flush">
-                    {logs.errors.map((err: any, i: number) => (
-                      <ListGroup.Item key={i} className="text-danger">
-                        <div className="d-flex justify-content-between">
-                          <strong>
-                            {err.location?.file || 'Unknown file'}
-                            {err.location?.line && `:${err.location.line}`}
-                          </strong>
-                          <small className="text-muted">
-                            {err.pluginName ? `[${err.pluginName}]` : ''}
-                          </small>
-                        </div>
-                        <div className="mt-1">
-                          <pre className="mb-0 p-2 bg-light rounded">
-                            {/* {err.text || err.message || JSON.stringify(err)} */}
-                            {JSON.stringify(err)}
-                          </pre>
-                        </div>
-                        {/* {err.detail && (
-                          <div className="mt-1 small text-muted">
-                            <pre className="mb-0 p-2 bg-light rounded">
-                              {err.detail}
-                            </pre>
-                          </div>
-                        )} */}
-                      </ListGroup.Item>
-                    ))}
-                  </ListGroup>
-                </Card.Body>
-              </Card>
-            ) : (
-              <Alert variant="success">
-                <h5>No Errors Found</h5>
-                <p className="mb-0">The build completed without any errors.</p>
-              </Alert>
-            )}
-          </Tab.Pane>
-        </Tab.Content>
-      </Tab.Container>
-    </div>
-  );
-};
 
 export type IProjectPageViewProps = {
   summary: any;
@@ -218,6 +43,7 @@ export const ProjectPageView = ({
     runTimeErrors: number;
     typeErrors: number;
     staticErrors: number;
+    runTimeTests: number;
   }]) => {
     const runTime = config.tests?.find((t: [string, string]) => t[0] === testName)?.[1] || 'node';
     return {
@@ -226,6 +52,7 @@ export const ProjectPageView = ({
       runTimeErrors: Number(testData.runTimeErrors) || 0,
       typeErrors: Number(testData.typeErrors) || 0,
       staticErrors: Number(testData.staticErrors) || 0,
+      runTimeTests: Number(testData.runTimeTests) || 0,
       runTime
     };
   });
@@ -305,52 +132,7 @@ export const ProjectPageView = ({
         <Col sm={9}>
           <div className="p-3">
             {activeTab === 'tests' ? (
-              <Table striped bordered hover>
-                <thead>
-                  <tr>
-                    <th>Test</th>
-                    <th>Runtime</th>
-                    <th>Status</th>
-                    <th>Type Errors</th>
-                    <th>Lint Errors</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {testStatuses.map((test) => (
-                    <tr key={test.testName} data-testid={`test-row-${test.testName}`}>
-                      <td>
-                        <a href={`#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}`}>
-                          {test.testName}
-                        </a>
-                      </td>
-                      <td>
-                        <Badge bg="secondary" className="ms-2">
-                          {test.runTime}
-                        </Badge>
-                      </td>
-                      <td>
-                        <TestStatusBadge
-                          testName={test.testName}
-                          testsExist={test.testsExist}
-                          runTimeErrors={test.runTimeErrors}
-                          typeErrors={test.typeErrors}
-                          staticErrors={test.staticErrors}
-                        />
-                      </td>
-                      <td>
-                        <a href={`#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types`}>
-                          {test.typeErrors > 0 ? `❌ ${test.typeErrors}` : '✅'}
-                        </a>
-                      </td>
-                      <td>
-                        <a href={`#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint`}>
-                          {test.staticErrors > 0 ? `❌ ${test.staticErrors}` : '✅'}
-                        </a>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </Table>
+              <TestTable testStatuses={testStatuses} projectName={projectName} />
             ) : activeTab === 'node' ? (
               <BuildLogViewer logs={nodeLogs} runtime="Node" />
             ) : activeTab === 'web' ? (

package/src/components/pure/Settings.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Settings } from './Settings';
+
+// Mock the tutorial mode context
+jest.mock('../../App', () => ({
+  useTutorialMode: () => ({
+    tutorialMode: false,
+    setTutorialMode: jest.fn()
+  })
+}));
+
+test('renders settings page', () => {
+  render(<Settings />);
+  const themeLabel = screen.getByText(/Theme/i);
+  expect(themeLabel).toBeInTheDocument();
+});
+
+test('renders theme options', () => {
+  render(<Settings />);
+  const lightModeOption = screen.getByLabelText(/Light Mode/i);
+  const darkModeOption = screen.getByLabelText(/Dark Mode/i);
+  const autoModeOption = screen.getByLabelText(/Auto/i);
+  
+  expect(lightModeOption).toBeInTheDocument();
+  expect(darkModeOption).toBeInTheDocument();
+  expect(autoModeOption).toBeInTheDocument();
+});
+
+test('renders tutorial mode switch', () => {
+  render(<Settings />);
+  const tutorialModeSwitch = screen.getByLabelText(/Tutorial Mode: OFF/i);
+  expect(tutorialModeSwitch).toBeInTheDocument();
+});

package/src/components/pure/Settings.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from "react";
+import { Form, Container, Row, Col, Card, Button } from "react-bootstrap";
+import { useTutorialMode, useAuth } from "../../App";
+import { GitHubLoginButton } from "./GitHubLoginButton";
+import { githubAuthService } from "../../services/GitHubAuthService";
+
+export const Settings = () => {
+  const [theme, setTheme] = useState<"light" | "dark" | "auto">("auto");
+  const { tutorialMode, setTutorialMode } = useTutorialMode();
+  const { isAuthenticated, logout } = useAuth();
+
+  useEffect(() => {
+    // Load saved theme from localStorage
+    const savedTheme = localStorage.getItem("theme") as
+      | "light"
+      | "dark"
+      | "auto"
+      | null;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Apply theme when it changes
+    applyTheme(theme);
+    // Save to localStorage
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const applyTheme = (selectedTheme: "light" | "dark" | "auto") => {
+    const root = document.documentElement;
+
+    if (selectedTheme === "auto") {
+      // Use system preference
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        root.setAttribute("data-bs-theme", "dark");
+      } else {
+        root.setAttribute("data-bs-theme", "light");
+      }
+    } else {
+      root.setAttribute("data-bs-theme", selectedTheme);
+    }
+  };
+
+  const handleThemeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTheme(event.target.value as "light" | "dark" | "auto");
+  };
+
+  const handleTutorialModeChange = () => {
+    const newTutorialMode = !tutorialMode;
+    setTutorialMode(newTutorialMode);
+    // Save to localStorage
+    localStorage.setItem("tutorialMode", newTutorialMode.toString());
+  };
+
+
+  return (
+    <Container>
+      <Row>
+        <Col md={8} lg={6}>
+          <Card>
+            <Card.Header>
+              <h5 className="mb-0">Appearance</h5>
+            </Card.Header>
+            <Card.Body>
+              <Form>
+                <Form.Group className="mb-4">
+                  <div>
+                    <Form.Check
+                      type="radio"
+                      id="theme-light"
+                      name="theme"
+                      value="light"
+                      label="Light mode"
+                      checked={theme === "light"}
+                      onChange={handleThemeChange}
+                    />
+                    <Form.Check
+                      type="radio"
+                      id="theme-dark"
+                      name="theme"
+                      value="dark"
+                      label="Dark mode"
+                      checked={theme === "dark"}
+                      onChange={handleThemeChange}
+                    />
+                    <Form.Check
+                      type="radio"
+                      id="theme-auto"
+                      name="theme"
+                      value="auto"
+                      label="Auto mode. Use system setting"
+                      checked={theme === "auto"}
+                      onChange={handleThemeChange}
+                    />
+                  </div>
+                </Form.Group>
+
+                <Form.Group className="mb-4">
+                  <Form.Check
+                    type="switch"
+                    id="tutorial-mode"
+                    label={
+                      tutorialMode ? "Tutorial Mode: ON" : "Tutorial Mode: OFF"
+                    }
+                    checked={tutorialMode}
+                    onChange={handleTutorialModeChange}
+                  />
+                  <Form.Text className="text-muted">
+                    When enabled, helpful tooltips will appear throughout the
+                    app to guide you.
+                  </Form.Text>
+                </Form.Group>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* GitHub Authentication Section */}
+      <Row className="mt-4">
+        <Col md={8} lg={6}>
+          <Card>
+            <Card.Header>
+              <h5 className="mb-0">GitHub Integration</h5>
+            </Card.Header>
+            <Card.Body>
+              {githubAuthService.isConfigured() ? (
+                isAuthenticated ? (
+                  <div>
+                    <p>Connected to GitHub</p>
+                    <div className="d-grid gap-2">
+                      <Button variant="danger" onClick={logout}>
+                        Sign Out from GitHub
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <p>Connect your GitHub account to enable Git operations:</p>
+                    <GitHubLoginButton />
+                  </div>
+                )
+              ) : (
+                <div>
+                  <p className="text-danger">GitHub integration is not configured.</p>
+                  <p>To enable GitHub authentication:</p>
+                  <ol className="small">
+                    <li>Create a GitHub OAuth App at https://github.com/settings/developers</li>
+                    <li>Set Authorization callback URL to: {window.location.origin}/auth/github/callback</li>
+                    <li>Update the clientId in testeranto.config.ts</li>
+                    <li>Restart the development server</li>
+                  </ol>
+                </div>
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+};

package/src/components/pure/SignIn.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Container, Row, Col, Card } from 'react-bootstrap';
+
+import { githubAuthService } from '../../services/GitHubAuthService';
+
+import { GitHubLoginButton } from './GitHubLoginButton';
+
+
+export const SignIn = () => {
+  return (
+    <Container className="d-flex align-items-center justify-content-center min-vh-100">
+      <Row>
+        <Col md={12}>
+          <Card>
+            <Card.Header className="text-center">
+              <h3 className="mb-0">Sign In</h3>
+            </Card.Header>
+            <Card.Body className="text-center">
+              {githubAuthService.isConfigured() ? (
+                <GitHubLoginButton />
+              ) : (
+                <div>
+                  <p className="text-danger">GitHub authentication is not configured</p>
+                  <p>Please contact the administrator</p>
+                </div>
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+};