jira-pat 1.0.0

package/frontend/src/components/CreateIssueModal.jsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, AlertCircle, Loader2 } from 'lucide-react';
+import { fetchIssueTypes, createIssue } from '../services/api';
+import { useFocusTrap } from '../hooks/useFocusTrap.js';
+
+export default React.memo(function CreateIssueModal({ isOpen, onClose, onCreated, projects, projectsLoading, addToast }) {
+  const [issueTypes, setIssueTypes] = useState([]);
+  const [createData, setCreateData] = useState({
+    projectKey: '',
+    summary: '',
+    description: '',
+    issueType: '',
+    priority: ''
+  });
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState('');
+
+  useEffect(() => {
+    if (createData.projectKey) {
+      fetchIssueTypes(createData.projectKey).then(setIssueTypes).catch(console.error);
+    } else {
+      setIssueTypes([]);
+    }
+  }, [createData.projectKey]);
+
+  const modalRef = useRef(null);
+  useFocusTrap(modalRef, isOpen);
+
+  const handleCreateSubmit = async () => {
+    if (!createData.projectKey || !createData.summary || !createData.issueType) return;
+    setIsCreating(true);
+    setCreateError('');
+    try {
+      await createIssue(createData);
+      setCreateData({ projectKey: '', summary: '', description: '', issueType: '', priority: '' });
+      onCreated();
+      addToast('Issue created successfully', 'success');
+    } catch (err) {
+      setCreateError(err.message || 'Failed to create issue');
+      addToast(`Error creating issue: ${err.message}`, 'error');
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay" ref={modalRef} onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="modal-title">
+        <div className="modal-header">
+          <h2 id="modal-title">Create Issue</h2>
+          <button className="close-btn" onClick={onClose} aria-label="Close modal">
+            <X size={24} />
+          </button>
+        </div>
+        
+        <div className="modal-body">
+          {createError && (
+            <div className="error" role="alert" style={{ marginBottom: '1rem' }}>
+              <AlertCircle size={16} style={{ marginRight: '0.5rem' }} />
+              {createError}
+            </div>
+          )}
+          <div className="input-group" style={{ marginBottom: '1rem' }}>
+            <label className="input-label">Project *</label>
+            <select 
+              className="select-input" 
+              style={{ width: '100%' }}
+              value={createData.projectKey}
+              onChange={(e) => setCreateData({ ...createData, projectKey: e.target.value, issueType: '' })}
+              aria-label="Select project"
+            >
+              <option value="">{projectsLoading ? 'Loading...' : 'Select Project'}</option>
+              {!projectsLoading && projects.map(p => (
+                <option key={p.id} value={p.key}>{p.name} ({p.key})</option>
+              ))}
+            </select>
+          </div>
+
+          {createData.projectKey && (
+            <div className="input-group" style={{ marginBottom: '1rem' }}>
+              <label className="input-label">Issue Type *</label>
+              <select 
+                className="select-input" 
+                style={{ width: '100%' }}
+                value={createData.issueType}
+                onChange={(e) => setCreateData({ ...createData, issueType: e.target.value })}
+                aria-label="Select issue type"
+              >
+                <option value="">Select Type</option>
+                {issueTypes.filter(t => !t.subtask).map(t => (
+                  <option key={t.id} value={t.id}>
+                    {t.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <div className="input-group" style={{ marginBottom: '1rem' }}>
+            <label className="input-label">Summary *</label>
+            <input 
+              type="text" 
+              className="text-input" 
+              style={{ width: '100%' }}
+              placeholder="Short description"
+              value={createData.summary}
+              onChange={(e) => setCreateData({ ...createData, summary: e.target.value })}
+              aria-label="Issue summary"
+            />
+          </div>
+
+          <div className="input-group" style={{ marginBottom: '1rem' }}>
+            <label className="input-label">Description</label>
+            <textarea 
+              className="comment-box" 
+              style={{ width: '100%', minHeight: '100px' }}
+              placeholder="Detailed description..."
+              value={createData.description}
+              onChange={(e) => setCreateData({ ...createData, description: e.target.value })}
+              aria-label="Issue description"
+            />
+          </div>
+
+          <div className="input-group" style={{ marginBottom: '1rem' }}>
+            <label className="input-label">Priority (Optional)</label>
+            <select 
+              className="select-input" 
+              style={{ width: '100%' }}
+              value={createData.priority}
+              onChange={(e) => setCreateData({ ...createData, priority: e.target.value })}
+              aria-label="Select priority"
+            >
+              <option value="">Default Priority</option>
+              <option value="1">Highest</option>
+              <option value="2">High</option>
+              <option value="3">Medium</option>
+              <option value="4">Low</option>
+              <option value="5">Lowest</option>
+            </select>
+          </div>
+        </div>
+        
+        <div className="modal-footer">
+          <button 
+            className="btn-secondary"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button 
+            className="btn-primary" 
+            onClick={handleCreateSubmit}
+            disabled={!createData.projectKey || !createData.summary || !createData.issueType || isCreating}
+            aria-label="Create issue"
+          >
+            {isCreating ? (
+              <>
+                <Loader2 size={16} className="spinner" />
+                Creating...
+              </>
+            ) : 'Create'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});

package/frontend/src/components/ErrorBoundary.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const isDev = process.env.NODE_ENV === 'development';
+
+      return (
+        <div className="error-boundary-container">
+          <div className="error-boundary-icon">
+            <AlertCircle size={48} />
+          </div>
+          <h2 className="error-boundary-title">Something went wrong</h2>
+
+          {isDev && this.state.error && (
+            <>
+              <p className="error-boundary-message">{this.state.error.message}</p>
+              <pre className="error-boundary-stack">{this.state.error.stack}</pre>
+            </>
+          )}
+
+          {!isDev && (
+            <p className="error-boundary-fallback">Please refresh the page.</p>
+          )}
+
+          <button className="error-boundary-reload" onClick={() => window.location.reload()}>
+            <RefreshCw size={16} />
+            Reload
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;