circuit_breaker-wf 0.1.0

data/workflow-editor/src/components/EdgeDetails.tsx

@@ -0,0 +1,175 @@
+import { Edge, useNodes } from 'reactflow';
+import { Card } from 'flowbite-react';
+import { useState, useEffect } from 'react';
+
+interface EdgeDetailsProps {
+  edge: Edge | null;
+  onChange: (changes: any[]) => void;
+  onSave: () => Promise<boolean>;
+}
+
+export const EdgeDetails = ({ edge, onChange, onSave }: EdgeDetailsProps) => {
+  const nodes = useNodes();
+  const [label, setLabel] = useState(edge?.startLabel || '');
+  const [requirements, setRequirements] = useState<string[]>(edge?.data?.requirements || []);
+  const [newRequirement, setNewRequirement] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveMessage, setSaveMessage] = useState('');
+
+  // Update label and requirements state when edge changes
+  useEffect(() => {
+    setLabel(edge?.startLabel || '');
+    setRequirements(edge?.data?.requirements || []);
+  }, [edge]);
+
+  if (!edge) {
+    return (
+      <div className="p-6 text-center text-gray-500">
+        <p className="text-sm">Select a transition to view details</p>
+      </div>
+    );
+  }
+
+  const sourceNode = nodes.find(n => n.id === edge.source);
+  const targetNode = nodes.find(n => n.id === edge.target);
+
+  const handleLabelChange = (newLabel: string) => {
+    setLabel(newLabel);
+    onChange([{
+      id: edge.id,
+      startLabel: newLabel,
+      data: { 
+        ...edge.data,
+        label: newLabel,
+        requirements 
+      }
+    }]);
+  };
+
+  const handleAddRequirement = () => {
+    if (!newRequirement.trim()) return;
+    
+    const updatedRequirements = [...requirements, newRequirement.trim()];
+    setRequirements(updatedRequirements);
+    setNewRequirement('');
+    
+    onChange([{
+      id: edge.id,
+      data: { 
+        ...edge.data,
+        label,
+        requirements: updatedRequirements 
+      }
+    }]);
+  };
+
+  const handleRemoveRequirement = (index: number) => {
+    const updatedRequirements = requirements.filter((_, i) => i !== index);
+    setRequirements(updatedRequirements);
+    
+    onChange([{
+      id: edge.id,
+      data: { 
+        ...edge.data,
+        label,
+        requirements: updatedRequirements 
+      }
+    }]);
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setSaveMessage('');
+    try {
+      const success = await onSave();
+      setSaveMessage(success ? 'Changes saved!' : 'Failed to save changes');
+      setTimeout(() => setSaveMessage(''), 3000);
+    } catch (error) {
+      setSaveMessage('Error saving changes');
+      setTimeout(() => setSaveMessage(''), 3000);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-4">
+      <div className="bg-gray-100 p-4 rounded-lg border border-gray-200">
+        <h3 className="text-lg font-bold text-gray-900 m-0">
+          {label || 'Transition'}
+        </h3>
+      </div>
+
+      <Card className="shadow-sm">
+        <div className="space-y-4">
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-2">Source</h4>
+            <p className="text-sm text-gray-600">{sourceNode?.data.label}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-2">Target</h4>
+            <p className="text-sm text-gray-600">{targetNode?.data.label}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-2">Label</h4>
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => handleLabelChange(e.target.value)}
+              className="w-full p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Enter transition label"
+            />
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-2">Requirements</h4>
+            <div className="space-y-2">
+              {requirements.map((req, index) => (
+                <div key={index} className="flex items-center justify-between bg-gray-50 p-2 rounded">
+                  <span className="text-sm text-gray-700">{req}</span>
+                  <button
+                    onClick={() => handleRemoveRequirement(index)}
+                    className="text-red-500 hover:text-red-700"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={newRequirement}
+                  onChange={(e) => setNewRequirement(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && handleAddRequirement()}
+                  className="flex-1 p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="Add a requirement"
+                />
+                <button
+                  onClick={handleAddRequirement}
+                  className="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600 transition-colors"
+                >
+                  Add
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-between pt-4">
+            <button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+            >
+              {isSaving ? 'Saving...' : 'Save Details'}
+            </button>
+            {saveMessage && (
+              <span className={`text-sm ${saveMessage.includes('Error') || saveMessage.includes('Failed') ? 'text-red-600' : 'text-green-600'}`}>
+                {saveMessage}
+              </span>
+            )}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};

data/workflow-editor/src/components/NodeDetails.tsx

@@ -0,0 +1,177 @@
+import { Edge, Node, useEdges } from 'reactflow';
+import { Card } from 'flowbite-react';
+import { initialNodes } from '../config/flowConfig';
+import { useState, useEffect } from 'react';
+
+interface NodeDetailsProps {
+  node: Node;
+  onChange: (changes: any[]) => void;
+  onSave: () => Promise<boolean>;
+}
+
+export const NodeDetails = ({ node, onChange, onSave }: NodeDetailsProps) => {
+  const edges = useEdges();
+  const [label, setLabel] = useState(node?.data?.label || '');
+  const [description, setDescription] = useState(node?.data?.description || '');
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveMessage, setSaveMessage] = useState('');
+
+  useEffect(() => {
+    setLabel(node?.data?.label || '');
+    setDescription(node?.data?.description || '');
+  }, [node]);
+
+  if (!node) {
+    return (
+      <div className="p-6 text-center text-gray-500">
+        <p className="text-sm">Select a node to view details</p>
+      </div>
+    );
+  }
+
+  const incomingEdges = edges.filter(edge => edge.target === node.id);
+  const outgoingEdges = edges.filter(edge => edge.source === node.id);
+
+  const handleChange = (field: string, value: string) => {
+    if (field === 'label') setLabel(value);
+    if (field === 'description') setDescription(value);
+
+    onChange([{
+      id: node.id,
+      data: {
+        ...node.data,
+        [field]: value
+      }
+    }]);
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setSaveMessage('');
+    try {
+      const success = await onSave();
+      setSaveMessage(success ? 'Changes saved!' : 'Failed to save changes');
+      setTimeout(() => setSaveMessage(''), 3000);
+    } catch (error) {
+      setSaveMessage('Error saving changes');
+      setTimeout(() => setSaveMessage(''), 3000);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-4">
+      <div className="bg-gray-100 p-4 rounded-lg border border-gray-200">
+        <h3 className="text-lg font-bold text-gray-900 m-0">
+          {label}
+        </h3>
+        <p className="text-sm text-gray-600 mt-1 mb-0">
+          {description}
+        </p>
+      </div>
+
+      <Card className="shadow-sm">
+        <div className="space-y-6">
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-2">Name</h4>
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => handleChange('label', e.target.value)}
+              className="w-full p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Enter node name"
+            />
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-2">Description</h4>
+            <textarea
+              value={description}
+              onChange={(e) => handleChange('description', e.target.value)}
+              className="w-full p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Enter node description"
+              rows={3}
+            />
+          </div>
+
+          <div className="flex items-center justify-between pt-4">
+            <button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+            >
+              {isSaving ? 'Saving...' : 'Save Details'}
+            </button>
+            {saveMessage && (
+              <span className={`text-sm ${saveMessage.includes('Error') || saveMessage.includes('Failed') ? 'text-red-600' : 'text-green-600'}`}>
+                {saveMessage}
+              </span>
+            )}
+          </div>
+
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-3">
+              Incoming Transitions
+            </h4>
+            {incomingEdges.length > 0 ? (
+              <div className="space-y-2">
+                {incomingEdges.map(edge => {
+                  const sourceNode = initialNodes.find(n => n.id === edge.source);
+                  return (
+                    <div 
+                      key={edge.id} 
+                      className="flex items-center text-sm bg-gray-50 p-3 rounded-md hover:bg-gray-100 transition-colors"
+                    >
+                      <div className="flex items-center flex-1 min-w-0">
+                        <span className="text-gray-600 truncate">{sourceNode?.data.label}</span>
+                        <svg className="w-4 h-4 mx-2 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                        </svg>
+                        <span className="text-gray-900 font-medium truncate">{edge.label || 'Transition'}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-500">No incoming transitions</p>
+            )}
+          </div>
+
+          {incomingEdges.length > 0 && outgoingEdges.length > 0 && (
+            <hr className="border-gray-200" />
+          )}
+
+          <div>
+            <h4 className="text-sm font-semibold text-gray-900 mb-3">
+              Outgoing Transitions
+            </h4>
+            {outgoingEdges.length > 0 ? (
+              <div className="space-y-2">
+                {outgoingEdges.map(edge => {
+                  const targetNode = initialNodes.find(n => n.id === edge.target);
+                  return (
+                    <div 
+                      key={edge.id} 
+                      className="flex items-center text-sm bg-gray-50 p-3 rounded-md hover:bg-gray-100 transition-colors"
+                    >
+                      <div className="flex items-center flex-1 min-w-0">
+                        <span className="text-gray-900 font-medium truncate">{edge.label || 'Transition'}</span>
+                        <svg className="w-4 h-4 mx-2 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                        </svg>
+                        <span className="text-gray-600 truncate">{targetNode?.data.label}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-500">No outgoing transitions</p>
+            )}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};

data/workflow-editor/src/components/ResizablePanel.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useCallback, useEffect } from 'react';
+
+interface ResizablePanelProps {
+  children: React.ReactNode;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+export const ResizablePanel: React.FC<ResizablePanelProps> = ({
+  children,
+  defaultWidth = 400,
+  minWidth = 350,
+  maxWidth = 800
+}) => {
+  const [width, setWidth] = useState(defaultWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [startWidth, setStartWidth] = useState(width);
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    setIsDragging(true);
+    setStartX(e.pageX);
+    setStartWidth(width);
+  }, [width]);
+
+  const stopResizing = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  const resize = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      const diff = startX - e.pageX;
+      const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + diff));
+      setWidth(newWidth);
+    }
+  }, [isDragging, startX, startWidth, minWidth, maxWidth]);
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', resize);
+      document.addEventListener('mouseup', stopResizing);
+      return () => {
+        document.removeEventListener('mousemove', resize);
+        document.removeEventListener('mouseup', stopResizing);
+      };
+    }
+  }, [isDragging, resize, stopResizing]);
+
+  return (
+    <div 
+      className="relative"
+      style={{ 
+        width: `${width}px`,
+        minWidth: `${minWidth}px`,
+        maxWidth: `${maxWidth}px`
+      }}
+    >
+      <div
+        className="absolute left-0 top-0 w-1 h-full cursor-ew-resize group"
+        onMouseDown={startResizing}
+        style={{ 
+          transform: 'translateX(-50%)',
+          touchAction: 'none'
+        }}
+      >
+        <div className="absolute inset-y-0 left-1/2 w-4 -translate-x-1/2 group-hover:bg-blue-500/20 transition-colors" />
+      </div>
+      <div className="h-full bg-white border-l border-gray-200">
+        {children}
+      </div>
+    </div>
+  );
+};

data/workflow-editor/src/components/SaveButton.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+interface SaveButtonProps {
+  onSave: () => Promise<boolean>;
+}
+
+export function SaveButton({ onSave }: SaveButtonProps) {
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMessage('');
+    
+    try {
+      const success = await onSave();
+      setMessage(success ? 'Saved successfully!' : 'Failed to save');
+      setTimeout(() => setMessage(''), 3000);
+    } catch (error) {
+      setMessage('Error saving workflow');
+      setTimeout(() => setMessage(''), 3000);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="absolute top-4 right-4 z-50">
+      <button
+        onClick={handleSave}
+        disabled={saving}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+      >
+        {saving ? 'Saving...' : 'Save Workflow'}
+      </button>
+      {message && (
+        <div className={`mt-2 p-2 rounded text-sm ${
+          message.includes('success') ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+        }`}>
+          {message}
+        </div>
+      )}
+    </div>
+  );
+}

data/workflow-editor/src/config/change_workflow.yaml

@@ -0,0 +1,59 @@
+---
+object_type: Issue
+places:
+  states:
+    - backlog
+    - sprint_planning
+    - sprint_backlog
+    - in_progress
+    - in_review
+    - testing
+    - done
+  special_states:
+    - blocked
+transitions:
+  regular:
+    - name: move_to_sprint
+      from: backlog
+      to: sprint_planning
+      requires:
+        - description
+        - priority
+    - name: plan_issue
+      from: sprint_planning
+      to: sprint_backlog
+      requires:
+        - story_points
+        - sprint
+    - name: start_work
+      from: sprint_backlog
+      to: in_progress
+      requires:
+        - assignee
+    - name: submit_for_review
+      from: in_progress
+      to: in_review
+      requires:
+        - pull_request_url
+    - name: approve_review
+      from: in_review
+      to: testing
+      requires:
+        - review_approvals
+        - test_coverage
+    - name: pass_testing
+      from: testing
+      to: done
+      requires:
+        - qa_approved
+        - deployment_approved
+    - name: reject_review
+      from: in_review
+      to: in_progress
+      requires:
+        - review_comments
+    - name: fail_testing
+      from: testing
+      to: in_progress
+      requires:
+        - test_failure_reason

data/workflow-editor/src/config/constants.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+
+// This is used for server-side file operations
+export const WORKFLOW_FILE = 'workflow.yaml';
+export const WORKFLOW_PATH = path.join('src', 'config', WORKFLOW_FILE);
+
+// Add a YAML header when saving
+export const YAML_HEADER = '---\n';
+
+// Note: For client-side imports, we must use the hardcoded path:
+// import workflowConfig from './workflow.yaml';