testeranto 0.200.1 → 0.203.0

package/src/components/pure/AppFrame.tsx

@@ -1,134 +1,410 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useState } from 'react';
-import { Container, Nav } from 'react-bootstrap';
-import { NavLink } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import {
+  Container,
+  Nav,
+  OverlayTrigger,
+  Tooltip,
+  Navbar,
+} from "react-bootstrap";
+import { NavLink } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+
+import { useWebSocket, useTutorialMode, useAuth } from "../../App";
+import { UserProfile } from "./UserProfile";
+import { HelpoChatDrawer } from "./HelpoChatDrawer";
 
 type AppFrameProps = {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-  'data-testid'?: string;
+  "data-testid"?: string;
   title?: string;
   rightContent?: React.ReactNode;
 };
 
 export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
   const location = useLocation();
-  const [isExpanded, setIsExpanded] = useState(true);
+  const { isConnected } = useWebSocket();
+  const { tutorialMode } = useTutorialMode();
+  const { isAuthenticated, logout } = useAuth();
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const [isHelpoActive, setIsHelpoActive] = useState(false);
+
+  // Add CSS for the brand logo animation
+  const brandLogoStyle = `
+    .brand-logo:hover {
+      transform: scale(1.1);
+      transition: transform 0.3s ease;
+    }
+    .brand-logo:active {
+      transform: scale(0.95);
+    }
+  `;
+
+  useEffect(() => {
+    // Only animate on the first load
+    if (!hasAnimated) {
+      const timer = setTimeout(() => {
+        setHasAnimated(true);
+      }, 4000); // Stop animation after all links have animated (1s + 1.8s = 2.8s, rounded up)
+      return () => clearTimeout(timer);
+    }
+  }, [hasAnimated]);
 
   return (
-    <div className="d-flex min-vh-100" style={{ backgroundColor: '#f8f9fa' }}>
-      {/* Sidebar */}
+    <div className="d-flex min-vh-100">
+      <style>{brandLogoStyle}</style>
+      {/* Sidebar - Always 60px wide, full height */}
       <div
-        className="bg-light border-end d-flex flex-column"
+        className={`border-end d-flex flex-column ${!hasAnimated ? 'sidebar-attention' : ''}`}
         style={{
-          width: isExpanded ? '250px' : '60px',
-          minHeight: '100vh',
-          transition: 'width 0.3s ease'
+          flexBasis: "100px" /* Sets the initial fixed width */,
+          flexGrow: "0" /* Prevents the item from growing */,
+          flexShrink: "0",
+
+          height: "100vh",
+          position: "sticky",
+          top: 0,
         }}
-        onMouseEnter={() => setIsExpanded(true)}
-        onMouseLeave={() => setIsExpanded(false)}
       >
-        <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
-          {isExpanded ? (
-            <img
-              src="/logo.svg"
-              alt="Testeranto Logo"
-              style={{ width: '128px', height: '128px' }}
-            />
-          ) : (
-            <img
-              src="/logo.svg"
-              alt="Testeranto Logo"
-              style={{ width: '40px', height: '40px' }}
-            />
-          )}
-        </div>
+
+        {/* Navigation */}
         <Nav variant="pills" className="flex-column p-2 flex-grow-1">
+
+          {/* Help Link - Always accessible */}
           <Nav.Link
             as={NavLink}
-            to="/"
-            className={`${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Projects"
+            to="/helpo"
+            className={`${location.pathname === "/helpo" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-1' : ''}`}
           >
-            <span className="me-2">📁</span>
-            {isExpanded && 'Projects'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="help-tooltip">Chat with Helpo, the helpful robot.</Tooltip>}
+              >
+                <span>helpo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>helpo</span>
+            )}
           </Nav.Link>
 
-          {/* temporarily disabled */}
-          {/* <Nav.Link
+          {/* Projects Link - Always clickable with hover, tutorial tooltip conditionally */}
+          <Nav.Link
             as={NavLink}
-            to="/features-reporter"
-            className={`${location.pathname === '/features-reporter' ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Features Reporter"
+            to="/projects"
+            className={`${location.pathname === "/projects" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-2' : ''}`}
           >
-            <span className="me-2">📊</span>
-            {isExpanded && 'Features Reporter'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="projects-tooltip">Projects</Tooltip>}
+              >
+                <span>testo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>testo</span>
+            )}
           </Nav.Link>
+
+          {/* Process Manager Link - Darken if not authenticated or not connected */}
           <Nav.Link
             as={NavLink}
-            to="/design-editor"
-            className={`${location.pathname === '/design-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Design Editor"
+            to="/processes"
+            className={`${location.pathname.startsWith('/processes') ? 'active' : ''} d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-3' : ''}`}
+            // style={{
+            //   height: '40px',
+            //   width: '40px',
+            //   opacity: isConnected && isAuthenticated ? 1 : 0.6
+            // }}
+            onClick={(e) => {
+              if (!isConnected || !isAuthenticated) {
+                e.preventDefault();
+              }
+            }}
           >
-            <span className="me-2">🎨</span>
-            {isExpanded && 'Design Editor'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+                  <Tooltip id="processes-tooltip">
+                    Processes{" "}
+                    {!isAuthenticated
+                      ? "(Sign in required)"
+                      : !isConnected
+                        ? "(WebSocket disconnected)"
+                        : ""}
+                  </Tooltip>
+                }
+              >
+                <span>proĉo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>proĉo</span>
+            )}
           </Nav.Link>
+
+          {/* Git Integration Link - Darken if not authenticated */}
           <Nav.Link
             as={NavLink}
-            to="/text-editor"
-            className={`${location.pathname === '/text-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Text Editor"
+            to="/git"
+            className={`${location.pathname === "/git" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!isAuthenticated ? "text-muted pe-none" : ""
+              } ${!hasAnimated ? 'navbar-attention-4' : ''}`}
+            // style={{
+            //   height: '40px',
+            //   width: '40px',
+            //   opacity: isAuthenticated ? 1 : 0.6
+            // }}
+            onClick={(e) => {
+              if (!isAuthenticated) {
+                e.preventDefault();
+              }
+            }}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+                  <Tooltip id="git-tooltip">
+                    Git Integration{" "}
+                    {!isAuthenticated ? "(Sign in required)" : ""}
+                  </Tooltip>
+                }
+              >
+                <span>arbo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>arbo</span>
+            )}
+          </Nav.Link>
+
+
+          {/* <Nav.Link
+            as={NavLink}
+            to="/design-editor"
+            className={`${location.pathname === '/design-editor' ? 'active' : ''} d-flex align-items-center justify-content-center`}
           >
-            <span className="me-2">📝</span>
-            {isExpanded && 'Text Editor'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="design-editor-tooltip">
+                  Canvas editor
+                </Tooltip>
+                }
+              >
+                <span>kanvaso</span>
+              </OverlayTrigger>
+            ) : (
+              <span>kanvaso</span>
+            )}
           </Nav.Link> */}
 
+
           <Nav.Link
             as={NavLink}
-            to="/processes"
-            className={`${location.pathname.startsWith('/processes') ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Process Manager"
+            to="/svg-editor"
+            className={`${location.pathname === '/svg-editor' ? 'active' : ''} d-flex align-items-center justify-content-center`}
           >
-            <span className="me-2">📊</span>
-            {isExpanded && 'Process Manager'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="svg-editor-tooltip">
+                  svg editor
+                </Tooltip>
+                }
+              >
+                <span>vektoro</span>
+              </OverlayTrigger>
+            ) : (
+              <span>vektoro</span>
+            )}
           </Nav.Link>
+
+          <Nav.Link
+            as={NavLink}
+            to="/drato"
+            className={`${location.pathname === '/drato' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="drato-tooltip">
+                  Bootstrap wireframing tool
+                </Tooltip>
+                }
+              >
+                <span>drato</span>
+              </OverlayTrigger>
+            ) : (
+              <span>drato</span>
+            )}
+          </Nav.Link>
+
+          <Nav.Link
+            as={NavLink}
+            to="/grafeo"
+            className={`${location.pathname === '/grafeo' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="grafeo-tooltip">
+                  GraphML editor
+                </Tooltip>
+                }
+              >
+                <span>grafeo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>grafeo</span>
+            )}
+          </Nav.Link>
+
+          <Nav.Link
+            as={NavLink}
+            to="/skribo"
+            className={`${location.pathname === '/skribo' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+          >
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="skribo-tooltip">
+                  Code editor
+                </Tooltip>
+                }
+              >
+                <span>skribo</span>
+              </OverlayTrigger>
+            ) : (
+              <span>skribo</span>
+            )}
+          </Nav.Link>
+
+
+          {/* Settings Link - Always accessible */}
           <Nav.Link
             as={NavLink}
             to="/settings"
-            className={`${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Settings"
+            className={`${location.pathname === "/settings" ? "active" : ""
+              } d-flex align-items-center justify-content-center ${!hasAnimated ? 'navbar-attention-6' : ''}`}
+          // style={{ height: '40px', width: '40px' }}
           >
-            <span className="me-2">⚙️</span>
-            {isExpanded && 'Settings'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={<Tooltip id="settings-tooltip">Settings</Tooltip>}
+              >
+                <span>konto</span>
+              </OverlayTrigger>
+            ) : (
+              <span>konto</span>
+            )}
           </Nav.Link>
         </Nav>
 
-        <div className="p-3 border-top text-center mt-auto">
-          {isExpanded ? (
-            <small className="text-muted">
-              made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
-            </small>
-          ) : (
-            <small className="text-muted">❤️</small>
-          )}
+        {/* WebSocket Status Indicator - Always show normal tooltip */}
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip id="status-tooltip">
+              {isConnected
+                ? "Dev mode - Full access"
+                : "Static mode - Read only"}
+            </Tooltip>
+          }
+        >
+          <div className="p-2 border-top d-flex align-items-center justify-content-center">
+            <span
+              className={`badge rounded-circle d-flex align-items-center justify-content-center`}
+            // style={{
+            //   backgroundColor: isConnected ? '#198754' : '#6c757d',
+            //   width: '20px',
+            //   height: '20px',
+            //   fontSize: '12px'
+            // }}
+            >
+              {isConnected ? "🟢" : "🔴"}
+            </span>
+          </div>
+        </OverlayTrigger>
+
+        {/* Brand Logo */}
+        <div className="p-2 border-top d-flex align-items-center justify-content-center">
+          <button
+            onClick={() => setIsHelpoActive(!isHelpoActive)}
+            className="brand-logo btn p-0 border-0 bg-transparent"
+            style={{
+              display: 'block',
+              transition: 'transform 0.3s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'scale(1.1)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'scale(1)';
+            }}
+          >
+            <img
+              src="https://www.testeranto.com/logo.svg"
+              alt="Testeranto Logo"
+              style={{
+                height: '64px',
+                width: '64px',
+              }}
+            />
+          </button>
         </div>
       </div>
 
-      <div className="flex-grow-1 d-flex flex-column">
-        <main className="flex-grow-1 p-4" style={{ overflow: 'auto' }}>
-          <Container fluid className="h-100">
-            {children}
+      {/* Helpo Drawer */}
+      <HelpoChatDrawer 
+        isActive={isHelpoActive} 
+        onToggle={() => setIsHelpoActive(!isHelpoActive)}
+      />
+
+      {/* Main Content */}
+      <div
+        className="d-flex flex-column"
+        style={{
+          minHeight: "100vh",
+          minWidth: "0", // Allows the content to shrink below its initial size
+          flex: "1 1 auto", // Take up remaining space
+          overflow: "auto", // Enable scrolling
+        }}
+      >
+        <main className="flex-grow-1 p-4" style={{
+          minWidth: "fit-content", // Allow the content to be as wide as needed
+          width: "100%",
+        }}>
+          <Container fluid style={{
+            height: "100%",
+            minWidth: "fit-content", // Prevent the container from constraining width
+          }}>
+            {location.pathname === "/helpo" ? (
+              <div>
+                <h1>Helpo Documentation</h1>
+                <p>Welcome to the Helpo documentation. Here you can find information about using Testeranto.</p>
+                <h2>Getting Started</h2>
+                <p>Start by creating a project and writing your first test cases.</p>
+                <h2>Features</h2>
+                <ul>
+                  <li>Test automation</li>
+                  <li>Process management</li>
+                  <li>Git integration</li>
+                  <li>And much more...</li>
+                </ul>
+              </div>
+            ) : (
+              children
+            )}
           </Container>
         </main>
       </div>
+
     </div>
   );
 };

package/src/components/pure/ArtifactTree.tsx

@@ -0,0 +1,82 @@
+// export const ArtifactTree = ({
+//   treeData,
+//   projectName,
+//   testName,
+//   runtime,
+//   onSelect,
+//   level = 0,
+//   basePath = ''
+// }: {
+//   treeData: Record<string, any>;
+//   projectName: string;
+//   testName: string;
+//   runtime: string;
+//   onSelect: (path: string) => void;
+//   level?: number;
+//   basePath?: string;
+// }) => {
+//   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+//   const toggleExpand = (path: string) => {
+//     setExpanded(prev => ({ ...prev, [path]: !prev[path] }));
+//   };
+
+//   return (
+//     <ul className="list-unstyled" style={{ paddingLeft: `${level * 16}px` }}>
+//       {Object.entries(treeData).map(([name, node]) => {
+//         const fullPath = basePath ? `${basePath}/${name}` : name;
+//         const isExpanded = expanded[fullPath];
+
+//         if (node.__isFile) {
+//           return (
+//             <li key={fullPath} className="py-1">
+//               <a
+//                 href={`reports/${projectName}/${testName
+//                   .split('.')
+//                   .slice(0, -1)
+//                   .join('.')}/${runtime}/${node.path}`}
+//                 target="_blank"
+//                 rel="noopener noreferrer"
+//                 className="text-decoration-none"
+//                 onClick={(e) => {
+//                   e.preventDefault();
+//                   onSelect(node.path);
+//                 }}
+//               >
+//                 <i className="bi bi-file-earmark-text me-2"></i>
+//                 {name}
+//               </a>
+//             </li>
+//           );
+//         } else {
+//           return (
+//             <li key={fullPath} className="py-1">
+//               <div className="d-flex align-items-center">
+//                 <button
+//                   className="btn btn-link text-start p-0 text-decoration-none me-1"
+//                   onClick={() => toggleExpand(fullPath)}
+//                 >
+//                   <i
+//                     className={`bi ${isExpanded ? 'bi-folder2-open' : 'bi-folder'} me-2`}
+//                   ></i>
+//                   {name}
+//                 </button>
+//               </div>
+//               {isExpanded && (
+//                 <ArtifactTree
+//                   treeData={node}
+//                   projectName={projectName}
+//                   testName={testName}
+//                   runtime={runtime}
+//                   onSelect={onSelect}
+//                   level={level + 1}
+//                   basePath={fullPath}
+//                 />
+//               )}
+//             </li>
+//           );
+//         }
+//       })}
+//     </ul>
+//   );
+// };