testeranto 0.202.0 → 0.205.0

package/src/app/frontend/components/stateful/GenericXMLEditorPage.tsx

@@ -0,0 +1,455 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useCallback, useEffect } from "react";
+import { Card, Button, ButtonGroup } from "react-bootstrap";
+import { GenericTree } from "./GenericXMLEditor/GenericTree";
+import { GenericPreview } from "./GenericXMLEditor/GenericPreview";
+import { GenericTextEditor } from "./GenericXMLEditor/GenericTextEditor";
+import { Drawer } from "./GenericXMLEditor/Drawer";
+
+export interface XMLNode {
+  id: string;
+  type: string;
+  attributes: Record<string, string>;
+  children: XMLNode[];
+  textContent?: string;
+}
+
+interface GenericXMLEditorPageProps {
+  initialTree: XMLNode;
+  renderPreview: (
+    node: XMLNode,
+    isSelected: boolean,
+    eventHandlers: any,
+    onTreeUpdate?: (newTree: XMLNode) => void
+  ) => React.ReactElement;
+  attributeEditor: (
+    node: XMLNode,
+    onUpdateAttributes: (attrs: Record<string, string>) => void,
+    onUpdateTextContent: (text: string) => void
+  ) => React.ReactElement;
+  nodeTypes: { label: string; type: string }[];
+  onAddNode: (parentId: string, nodeType: string) => XMLNode;
+  additionalControls?: React.ReactNode;
+}
+
+export const GenericXMLEditorPage: React.FC<GenericXMLEditorPageProps> = ({
+  initialTree,
+  renderPreview,
+  attributeEditor,
+  nodeTypes,
+  onAddNode,
+}) => {
+  const [xmlTree, setXmlTree] = useState<XMLNode>(initialTree);
+  // Add a check to ensure xmlTree is never undefined
+  useEffect(() => {
+    if (!xmlTree) {
+      console.error("xmlTree became undefined, resetting to initialTree");
+      setXmlTree(initialTree);
+    }
+  }, [xmlTree, initialTree]);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("preview");
+  const [history, setHistory] = useState<XMLNode[]>([initialTree]);
+  const [historyIndex, setHistoryIndex] = useState<number>(0);
+  const [hiddenNodes, setHiddenNodes] = useState<Set<string>>(new Set());
+  const [drawerStates, setDrawerStates] = useState({
+    left: { isOpen: true, zIndex: 1 },
+    right: { isOpen: true, zIndex: 1 },
+    bottom: { isOpen: true, zIndex: 1 },
+  });
+  const [activeDrawer, setActiveDrawer] = useState<string | null>(null);
+
+  // Find a node by ID
+  const findNode = useCallback((node: XMLNode, id: string): XMLNode | null => {
+    if (node.id === id) return node;
+    for (const child of node.children) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
+    return null;
+  }, []);
+
+  // Helper to update tree and manage history
+  const updateTree = useCallback(
+    (newTree: XMLNode) => {
+      setXmlTree(newTree);
+      setHistory((prevHistory) => {
+        const newHistory = prevHistory.slice(0, historyIndex + 1);
+        newHistory.push(newTree);
+        return newHistory;
+      });
+      setHistoryIndex((prevIndex) => prevIndex + 1);
+    },
+    [historyIndex]
+  );
+
+  // Update node attributes
+  const updateNodeAttributes = useCallback(
+    (nodeId: string, attributes: Record<string, string>) => {
+      setXmlTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const node = findNode(newTree, nodeId);
+        if (node) {
+          node.attributes = { ...node.attributes, ...attributes };
+        }
+        updateTree(newTree);
+        return newTree;
+      });
+    },
+    [findNode, updateTree]
+  );
+
+  // Update node text content
+  const updateNodeTextContent = useCallback(
+    (nodeId: string, textContent: string) => {
+      setXmlTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const node = findNode(newTree, nodeId);
+        if (node) {
+          node.textContent = textContent;
+        }
+        updateTree(newTree);
+        return newTree;
+      });
+    },
+    [findNode, updateTree]
+  );
+
+  // Toggle node visibility
+  const toggleNodeVisibility = useCallback((nodeId: string) => {
+    setHiddenNodes((prev) => {
+      const newHidden = new Set(prev);
+      if (newHidden.has(nodeId)) {
+        newHidden.delete(nodeId);
+      } else {
+        newHidden.add(nodeId);
+      }
+      return newHidden;
+    });
+  }, []);
+
+  // Add a new child node
+  const handleAddChildNode = useCallback(
+    (parentId: string, nodeType: string) => {
+      setXmlTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const parent = findNode(newTree, parentId);
+        if (parent) {
+          const newNode = onAddNode(parentId, nodeType);
+          parent.children = [...parent.children, newNode];
+          setSelectedNodeId(newNode.id);
+          updateTree(newTree);
+        }
+        return newTree;
+      });
+    },
+    [findNode, updateTree, onAddNode]
+  );
+
+  // Remove a node
+  const removeNode = useCallback(
+    (nodeId: string) => {
+      setXmlTree((prevTree) => {
+        const newTree = JSON.parse(JSON.stringify(prevTree));
+        const removeFromParent = (node: XMLNode, targetId: string): boolean => {
+          for (let i = 0; i < node.children.length; i++) {
+            if (node.children[i].id === targetId) {
+              node.children.splice(i, 1);
+              return true;
+            }
+            if (removeFromParent(node.children[i], targetId)) {
+              return true;
+            }
+          }
+          return false;
+        };
+        removeFromParent(newTree, nodeId);
+        if (selectedNodeId === nodeId) {
+          setSelectedNodeId(null);
+        }
+        updateTree(newTree);
+        return newTree;
+      });
+    },
+    [selectedNodeId, updateTree]
+  );
+
+  // Undo/Redo handlers
+  const handleUndo = useCallback(() => {
+    if (historyIndex > 0) {
+      setHistoryIndex((prevIndex) => prevIndex - 1);
+      setXmlTree(history[historyIndex - 1]);
+    }
+  }, [history, historyIndex]);
+
+  const handleRedo = useCallback(() => {
+    if (historyIndex < history.length - 1) {
+      setHistoryIndex((prevIndex) => prevIndex + 1);
+      setXmlTree(history[historyIndex + 1]);
+    }
+  }, [history, historyIndex]);
+
+  // Drawers are always open now, but we can keep the state for other purposes
+  // Remove toggle functionality since we're always showing content
+
+  // Bring drawer to front
+  const bringToFront = useCallback(
+    (drawer: string) => {
+      const maxZIndex = Math.max(
+        drawerStates.left.zIndex,
+        drawerStates.right.zIndex,
+        drawerStates.bottom.zIndex
+      );
+
+      setDrawerStates((prev) => {
+        const newStates = { ...prev };
+        Object.keys(newStates).forEach((key) => {
+          if (key === drawer) {
+            newStates[key as keyof typeof newStates].zIndex = maxZIndex + 1;
+          } else {
+            newStates[key as keyof typeof newStates].zIndex = Math.max(
+              1,
+              newStates[key as keyof typeof newStates].zIndex - 1
+            );
+          }
+        });
+        return newStates;
+      });
+      setActiveDrawer(drawer);
+    },
+    [drawerStates]
+  );
+
+  const selectedNode = selectedNodeId
+    ? findNode(xmlTree, selectedNodeId)
+    : null;
+
+  // Function to convert XML tree to XML string with proper formatting
+  const convertTreeToXML = useCallback((node: XMLNode, depth: number = 0): string => {
+    const indent = '  '.repeat(depth);
+    const attributes = Object.entries(node.attributes)
+      .map(([key, value]) => ` ${key}="${value}"`)
+      .join('');
+    
+    // Handle text content
+    const hasTextContent = node.textContent && node.textContent.trim().length > 0;
+    
+    if (node.children.length === 0) {
+      if (hasTextContent) {
+        return `${indent}<${node.type}${attributes}>${node.textContent}</${node.type}>\n`;
+      } else {
+        return `${indent}<${node.type}${attributes} />\n`;
+      }
+    } else {
+      let result = `${indent}<${node.type}${attributes}`;
+      
+      // If there are children and text content, we need to be careful
+      if (hasTextContent) {
+        result += `>${node.textContent}\n`;
+      } else {
+        result += '>\n';
+      }
+      
+      // Add children
+      node.children.forEach(child => {
+        result += convertTreeToXML(child, depth + 1);
+      });
+      
+      result += `${indent}</${node.type}>\n`;
+      return result;
+    }
+  }, []);
+
+  // Function to handle saving the XML
+  const handleSave = useCallback(async () => {
+    // Convert the XML tree to a proper XML string
+    const xmlContent = `<?xml version="1.0" encoding="UTF-8"?>\n${convertTreeToXML(xmlTree)}`;
+    
+    // Debug: log the content being sent
+    console.log('Saving XML content:', xmlContent);
+    
+    // Let's also check if the content looks right
+    if (!xmlContent.includes('kanban:KanbanProcess')) {
+      console.warn('XML content may not be properly formatted');
+    }
+    
+    try {
+      const response = await fetch('/api/files/write', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path: 'example/single-kanban-process.xml',
+          content: xmlContent
+        })
+      });
+      
+      if (response.ok) {
+        alert('File saved successfully!');
+        // Refresh the page to see changes
+        window.location.reload();
+      } else {
+        const error = await response.json();
+        console.error('Error response:', error);
+        alert(`Error saving file: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Error saving file:', error);
+      alert('Failed to save file');
+    }
+  }, [xmlTree, convertTreeToXML]);
+
+  return (
+    <div className="d-flex flex-column h-100">
+      {/* Control Bar */}
+      <div className="border-bottom p-0 bg-light">
+        <div className="d-flex justify-content-center align-items-center">
+          <ButtonGroup size="sm" className="me-2">
+            <Button
+              variant={
+                activeTab === "preview" ? "primary" : "outline-secondary"
+              }
+              onClick={() => setActiveTab("preview")}
+            >
+              Preview
+            </Button>
+            <Button
+              variant={activeTab === "text" ? "primary" : "outline-secondary"}
+              onClick={() => setActiveTab("text")}
+            >
+              Text Mode
+            </Button>
+          </ButtonGroup>
+
+          <ButtonGroup size="sm" className="me-2">
+            <Button
+              variant="outline-secondary"
+              onClick={handleUndo}
+              disabled={historyIndex === 0}
+            >
+              Undo
+            </Button>
+            <Button
+              variant="outline-secondary"
+              onClick={handleRedo}
+              disabled={historyIndex === history.length - 1}
+            >
+              Redo
+            </Button>
+          </ButtonGroup>
+          
+          <ButtonGroup size="sm">
+            <Button
+              variant="outline-success"
+              onClick={handleSave}
+            >
+              Save
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="position-relative flex-grow-1">
+        {activeTab === "preview" ? (
+          <>
+            {/* Preview Content */}
+            <div className="position-absolute w-100 h-100 p-0">
+              {xmlTree && (
+                <GenericPreview
+                  xmlTree={xmlTree}
+                  selectedNodeId={selectedNodeId}
+                  hiddenNodes={hiddenNodes}
+                  renderPreview={(node, isSelected, eventHandlers) =>
+                    renderPreview(node, isSelected, eventHandlers, updateTree)
+                  }
+                />
+              )}
+            </div>
+
+            {/* Drawers - Only visible in preview mode */}
+            <Drawer
+              position="left"
+              isOpen={true}
+              zIndex={drawerStates.left.zIndex}
+              onBringToFront={() => bringToFront("left")}
+              title="Tree View"
+            >
+              <ul style={{ paddingLeft: "0", marginBottom: "0" }}>
+                <GenericTree
+                  node={xmlTree}
+                  selectedNodeId={selectedNodeId}
+                  onSelectNode={setSelectedNodeId}
+                  onAddNode={handleAddChildNode}
+                  onRemoveNode={removeNode}
+                  onToggleVisibility={toggleNodeVisibility}
+                  hiddenNodes={hiddenNodes}
+                  nodeTypes={nodeTypes}
+                />
+              </ul>
+            </Drawer>
+
+            <Drawer
+              position="right"
+              isOpen={true}
+              zIndex={drawerStates.right.zIndex}
+              onBringToFront={() => bringToFront("right")}
+              title="Attributes"
+            >
+              {selectedNode ? (
+                <Card className="mb-3">
+                  <Card.Header>
+                    <strong>Node: {selectedNode.type}</strong>
+                  </Card.Header>
+                  <Card.Body>
+                    {attributeEditor(
+                      selectedNode,
+                      (attrs) => updateNodeAttributes(selectedNode.id, attrs),
+                      (text) => updateNodeTextContent(selectedNode.id, text)
+                    )}
+                  </Card.Body>
+                </Card>
+              ) : (
+                <Card>
+                  <Card.Body>
+                    <p className="text-muted">
+                      Select a node to edit its properties
+                    </p>
+                  </Card.Body>
+                </Card>
+              )}
+            </Drawer>
+
+            <Drawer
+              position="bottom"
+              isOpen={true}
+              zIndex={drawerStates.bottom.zIndex}
+              onBringToFront={() => bringToFront("bottom")}
+              title="Navigation Help"
+            >
+              <div className="p-1">
+                <h6 className="mb-0 small">Pan & Zoom</h6>
+                <p className="mb-0 small">
+                  <strong>Zoom:</strong> Wheel
+                </p>
+                <p className="mb-0 small">
+                  <strong>Pan:</strong> Alt+drag
+                </p>
+                <p className="mb-0 small">
+                  <strong>Reset:</strong> Button
+                </p>
+              </div>
+            </Drawer>
+          </>
+        ) : (
+          /* Text Mode - Full screen text editor, no drawers */
+          <div className="w-100 h-100 d-flex justify-content-center p-0">
+            <GenericTextEditor xmlTree={xmlTree} onUpdateTree={setXmlTree} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/app/frontend/components/stateful/GitIntegrationPage.tsx

@@ -0,0 +1,256 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import React, { useContext, useEffect, useState } from "react";
+import { useGitMode } from "../../useGitMode";
+import { GitIntegrationView } from "../pure/GitIntegrationView";
+// import { useFileService } from "../../useFileService";
+import { FileChange, RemoteStatus } from "../../../FileService";
+
+export const GitIntegrationPage = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const { mode, setMode, isStatic, isDev, isGit } = useGitMode();
+  // const [fileService, setFileService] = useState(() => getFileService(mode));
+  // const fileService = useFileService()
+  const [changes, setChanges] = useState<FileChange[]>([]);
+  const [remoteStatus, setRemoteStatus] = useState<RemoteStatus>({
+    ahead: 0,
+    behind: 0,
+  });
+  const [currentBranch, setCurrentBranch] = useState("main");
+  const [error, setError] = useState<string | null>(null);
+
+  const [commitSummary, setCommitSummary] = useState("");
+  const [commitDescription, setCommitDescription] = useState("");
+
+  const [isCommitting, setIsCommitting] = useState(false);
+  const [isPushing, setIsPushing] = useState(false);
+  const [isPulling, setIsPulling] = useState(false);
+
+  const handleSaveChanges = async () => {
+    if (!commitSummary.trim()) {
+      setError("Please provide a commit summary");
+      return;
+    }
+
+    try {
+      setIsCommitting(true);
+      setError(null);
+      // await fileService.commitChanges(commitSummary, commitDescription);
+      setCommitSummary("");
+      setCommitDescription("");
+      await loadChanges();
+      await loadGitStatus();
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to commit changes";
+      console.error("Failed to commit changes:", err);
+      setError(errorMessage);
+    } finally {
+      setIsCommitting(false);
+    }
+  };
+
+  const handleShareChanges = async () => {
+    if (!commitSummary.trim()) {
+      setError("Please provide a commit summary");
+      return;
+    }
+
+    try {
+      setIsCommitting(true);
+      setIsPushing(true);
+      setError(null);
+      // await fileService.commitChanges(commitSummary, commitDescription);
+      // await fileService.pushChanges();
+      // setCommitSummary("");
+      setCommitDescription("");
+      await loadChanges();
+      await loadGitStatus();
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to share changes";
+      console.error("Failed to share changes:", err);
+      setError(errorMessage);
+    } finally {
+      setIsCommitting(false);
+      setIsPushing(false);
+    }
+  };
+
+  const handleGetUpdates = async () => {
+    try {
+      setIsPulling(true);
+      setError(null);
+      // await fileService.pullChanges();
+      await loadChanges();
+      await loadGitStatus();
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to get updates";
+      console.error("Failed to get updates:", err);
+      setError(errorMessage);
+    } finally {
+      setIsPulling(false);
+    }
+  };
+
+  const getStatusBadgeVariant = (status: string) => {
+    switch (status) {
+      case "modified":
+        return "warning";
+      case "added":
+        return "success";
+      case "deleted":
+        return "danger";
+      case "conflicted":
+        return "danger";
+      default:
+        return "secondary";
+    }
+  };
+
+  const getSyncStatusText = () => {
+    if (remoteStatus.ahead > 0 && remoteStatus.behind > 0) {
+      return `${remoteStatus.ahead} ahead, ${remoteStatus.behind} behind`;
+    } else if (remoteStatus.ahead > 0) {
+      return `${remoteStatus.ahead} ahead`;
+    } else if (remoteStatus.behind > 0) {
+      return `${remoteStatus.behind} behind`;
+    } else {
+      return "Up to date";
+    }
+  };
+
+  const getSyncStatusVariant = () => {
+    if (remoteStatus.behind > 0) return "warning";
+    if (remoteStatus.ahead > 0) return "info";
+    return "success";
+  };
+
+  const loadGitStatus = async (event?: React.MouseEvent) => {
+    // Prevent default behavior if event exists
+    if (event) {
+      event.preventDefault();
+    }
+
+    try {
+      setError(null);
+      // const branch = await fileService.getCurrentBranch();
+      // const status = await fileService.getRemoteStatus();
+      setCurrentBranch(branch);
+      setRemoteStatus(status);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to load git status";
+      console.error("Failed to load git status:", err);
+      setError(errorMessage);
+    }
+  };
+
+  const loadChanges = async (event?: React.MouseEvent) => {
+    // Prevent default behavior if event exists
+    if (event) {
+      event.preventDefault();
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      // const changes = await fileService.getChanges();
+      setChanges(changes);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to load changes";
+      console.error("Failed to load changes:", err);
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setIsLoading(true);
+        // const changes = await fileService.getChanges();
+        setChanges(changes);
+
+        // const branch = await fileService.getCurrentBranch();
+        // const status = await fileService.getRemoteStatus();
+        // setCurrentBranch(branch);
+        // setRemoteStatus(status);
+      } catch (err) {
+        console.warn("Failed to load data:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+
+    // Set up real-time updates for dev mode
+    if (mode === "dev") {
+      // const devFileService = fileService as any;
+
+      // const unsubscribeChanges = devFileService.onChanges?.(
+      //   (newChanges: FileChange[]) => {
+      //     setChanges(newChanges);
+      //   }
+      // );
+
+      // const unsubscribeStatus = devFileService.onStatusUpdate?.(
+      //   (newStatus: RemoteStatus) => {
+      //     setRemoteStatus(newStatus);
+      //   }
+      // );
+
+      // const unsubscribeBranch = devFileService.onBranchUpdate?.(
+      //   (newBranch: string) => {
+      //     setCurrentBranch(newBranch);
+      //   }
+      // );
+
+      return () => {
+        // unsubscribeChanges?.();
+        // unsubscribeStatus?.();
+        // unsubscribeBranch?.();
+      };
+    }
+  }, [mode]);
+
+  return (
+    <GitIntegrationView
+      mode={mode}
+      setMode={setMode}
+      // fileService={fileService}
+      // setChanges={setChanges}
+      remoteStatus={remoteStatus}
+      changes={changes}
+      currentBranch={currentBranch}
+      // setIsLoading={setIsLoading}
+      isLoading={isLoading}
+      // setCurrentBranch={setCurrentBranch}
+      // setRemoteStatus={setRemoteStatus}
+      setError={setError}
+      loadChanges={loadChanges}
+      loadGitStatus={loadGitStatus}
+      error={error}
+      getStatusBadgeVariant={getStatusBadgeVariant}
+      commitSummary={commitSummary}
+      setCommitSummary={setCommitSummary}
+      commitDescription={commitDescription}
+      setCommitDescription={setCommitDescription}
+      handleSaveChanges={handleSaveChanges}
+      isCommitting={isCommitting}
+      handleShareChanges={handleShareChanges}
+      getSyncStatusVariant={getSyncStatusVariant}
+      handleGetUpdates={handleGetUpdates}
+      isPulling={isPulling}
+      isPushing={isPushing}
+      setIsPushing={setIsPushing}
+      getSyncStatusText={getSyncStatusText}
+      fileService={undefined}
+    />
+  );
+};