jira-pat 1.0.0

package/frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "dompurify": "^3.3.3",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^4.1.0",
+    "jsdom": "^29.0.1",
+    "vite": "^6.0.7",
+    "vitest": "^4.1.0"
+  }
+}

package/frontend/src/App.jsx

@@ -0,0 +1,447 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Plus, Search, X, AlertCircle, Loader2, Activity, Circle, Clock, CheckCircle2, XCircle, Archive, Sun, Moon } from 'lucide-react';
+import { getIssues, fetchProjects } from './services/api';
+import IssueTable from './components/IssueTable';
+import IssueDrawer from './components/IssueDrawer';
+import CreateIssueModal from './components/CreateIssueModal';
+import ToastContainer from './components/ToastContainer';
+import StandaloneIssuePage from './components/StandaloneIssuePage';
+import { useToasts } from './hooks/useToasts';
+import { useIssueDrawer } from './hooks/useIssueDrawer';
+import './index.css';
+
+const STATUS_CHIPS = [
+  { value: '', label: 'Active', icon: Activity },
+  { value: 'To Do', label: 'To Do', icon: Circle },
+  { value: 'In Progress', label: 'In Progress', icon: Clock },
+  { value: 'Done', label: 'Done', icon: CheckCircle2 },
+  { value: 'Cancelled', label: 'Cancelled', icon: XCircle },
+  { value: 'Closed', label: 'Closed', icon: Archive },
+];
+
+function App() {
+  const [issues, setIssues] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [projectKey] = useState('ADW');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageSize] = useState(25);
+  const [totalIssues, setTotalIssues] = useState(0);
+  const [projects, setProjects] = useState([]);
+  const [projectsLoading, setProjectsLoading] = useState(false);
+  
+  const [selectedIssueKey, setSelectedIssueKey] = useState(null);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [isStandaloneView, setIsStandaloneView] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+
+  const [searchSuggestions, setSearchSuggestions] = useState([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  const [suggestionsLoading, setSuggestionsLoading] = useState(false);
+  const isInitialLoad = useRef(true);
+
+  const { toasts, addToast, removeToast } = useToasts();
+
+  const refetchIssues = useCallback(() => {
+    setLoading(true);
+    getIssues({
+      project: projectKey,
+      status: statusFilter ? statusFilter : 'exclude:Done,Cancelled,Closed',
+      startAt: currentPage * pageSize,
+      maxResults: pageSize,
+    })
+      .then(data => {
+        setIssues(data.issues || []);
+        setTotalIssues(data.total || 0);
+      })
+      .catch(err => setError(err.message || 'Failed to fetch issues'))
+      .finally(() => setLoading(false));
+  }, [projectKey, statusFilter, currentPage, pageSize]);
+
+  const {
+    issueDetail,
+    comments,
+    transitions,
+    assignableUsers,
+    drawerLoading,
+    drawerError,
+    newCommentText,
+    setNewCommentText,
+    isPostingComment,
+    targetTransitionId,
+    setTargetTransitionId,
+    isTransitioning,
+    assigneeSearch,
+    setAssigneeSearch,
+    targetAccountId,
+    setTargetAccountId,
+    isAssigning,
+    projectVersions,
+    isUpdatingVersions,
+    newLabelText,
+    setNewLabelText,
+    labelSuggestions,
+    showLabelSuggestions,
+    setShowLabelSuggestions,
+    isUpdatingLabels,
+    isUploading,
+    uploadMessage,
+    handlePostComment,
+    handleAssignUser,
+    handleFileUpload,
+    handleUpdateVersion,
+    handleAddLabel,
+    handleRemoveLabel,
+    handleUpdateStatus
+  } = useIssueDrawer(selectedIssueKey, addToast, refetchIssues);
+
+  useEffect(() => {
+    setProjectsLoading(true);
+    fetchProjects()
+      .then(setProjects)
+      .catch(() => addToast('Failed to load projects', 'error'))
+      .finally(() => setProjectsLoading(false));
+  }, []);
+
+  useEffect(() => {
+    const checkStandalone = () => {
+      const hash = window.location.hash;
+      if (isInitialLoad.current) {
+        setIsStandaloneView(hash.startsWith('#/view/'));
+        isInitialLoad.current = false;
+      }
+    };
+    
+    checkStandalone();
+    window.addEventListener('hashchange', checkStandalone);
+    window.addEventListener('popstate', checkStandalone);
+    window.addEventListener('load', checkStandalone);
+    
+    return () => {
+      window.removeEventListener('hashchange', checkStandalone);
+      window.removeEventListener('popstate', checkStandalone);
+      window.removeEventListener('load', checkStandalone);
+    };
+  }, []);
+
+  useEffect(() => {
+    const checkHash = () => {
+      const hash = window.location.hash;
+      if (hash.startsWith('#/issue/')) {
+        const issueKey = hash.replace('#/issue/', '');
+        if (issueKey && issueKey !== selectedIssueKey) {
+          setSelectedIssueKey(issueKey);
+        }
+      }
+    };
+    checkHash();
+    window.addEventListener('hashchange', checkHash);
+    return () => window.removeEventListener('hashchange', checkHash);
+  }, []);
+
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [statusFilter, searchQuery]);
+
+  useEffect(() => {
+    refetchIssues();
+  }, [refetchIssues]);
+
+  useEffect(() => {
+    if (!searchQuery) {
+      setSearchSuggestions([]);
+      setShowSuggestions(false);
+      setSuggestionsLoading(false);
+      return;
+    }
+    setSuggestionsLoading(true);
+    const timer = setTimeout(async () => {
+      try {
+        const data = await getIssues({
+          project: projectKey,
+          search: searchQuery,
+        });
+        const suggestions = (data.issues || []).slice(0, 6);
+        setSearchSuggestions(suggestions);
+        setShowSuggestions(suggestions.length > 0);
+        setSelectedSuggestionIndex(-1);
+      } catch (err) {
+        setSearchSuggestions([]);
+        setShowSuggestions(false);
+      } finally {
+        setSuggestionsLoading(false);
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery, projectKey]);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) {
+        e.preventDefault();
+        document.querySelector('.text-input')?.focus();
+      }
+      if (e.key === 'Escape') {
+        if (showSuggestions) {
+          setShowSuggestions(false);
+          setSelectedSuggestionIndex(-1);
+        } else if (selectedIssueKey) {
+          setSelectedIssueKey(null);
+        } else if (showCreateModal) {
+          setShowCreateModal(false);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedIssueKey, showCreateModal, showSuggestions]);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (showSuggestions && !e.target.closest('.search-input-wrapper')) {
+        setShowSuggestions(false);
+        setSelectedSuggestionIndex(-1);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [showSuggestions]);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  const openDrawer = useCallback((issueKey) => {
+    setSelectedIssueKey(issueKey);
+    setIsDrawerExpanded(false);
+  }, []);
+
+  const closeDrawer = useCallback(() => {
+    setSelectedIssueKey(null);
+  }, []);
+
+  const handleSubtaskClick = useCallback((key) => {
+    setSelectedIssueKey(key);
+  }, []);
+
+  const handleCreateSuccess = useCallback(() => {
+    setShowCreateModal(false);
+    refetchIssues();
+  }, [refetchIssues]);
+
+  const handleStatusFilterChange = useCallback((value) => {
+    setStatusFilter(prev => prev === value ? '' : value);
+  }, []);
+
+  if (isStandaloneView) {
+    return <StandaloneIssuePage />;
+  }
+
+  return (
+    <div className="dashboard-container">
+      <header className="header">
+        <h1>Jira Dashboard</h1>
+        <div className="header-actions">
+          <button
+            className="theme-toggle"
+            onClick={toggleTheme}
+            aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+            title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+          >
+            {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+          </button>
+          <button className="btn-primary" onClick={() => setShowCreateModal(true)} aria-label="Create new issue">
+            <Plus size={18} />
+            Create Issue
+          </button>
+        </div>
+      </header>
+
+      <div className="controls">
+        <div className="controls-main">
+          <div className="input-group search-group">
+            <label className="input-label">Search</label>
+            <div className="search-input-wrapper">
+              <Search size={16} className="search-icon" />
+              <input
+                type="text"
+                className="text-input"
+                placeholder="Search issues or jump to (e.g. ADW-123)..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    if (selectedSuggestionIndex >= 0 && searchSuggestions[selectedSuggestionIndex]) {
+                      openDrawer(searchSuggestions[selectedSuggestionIndex].key);
+                      setSearchQuery('');
+                      setShowSuggestions(false);
+                    } else if (searchQuery.trim()) {
+                      const query = searchQuery.trim().toUpperCase();
+                      const jiraKeyPattern = /^[A-Z]+-\d+$/;
+                      if (jiraKeyPattern.test(query)) {
+                        openDrawer(query);
+                      }
+                    }
+                  } else if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    setSelectedSuggestionIndex(prev => 
+                      prev < searchSuggestions.length - 1 ? prev + 1 : prev
+                    );
+                  } else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    setSelectedSuggestionIndex(prev => prev > 0 ? prev - 1 : -1);
+                  } else if (e.key === 'Escape') {
+                    setShowSuggestions(false);
+                    setSelectedSuggestionIndex(-1);
+                  }
+                }}
+                onFocus={() => {
+                  if (searchSuggestions.length > 0) {
+                    setShowSuggestions(true);
+                  }
+                }}
+                aria-label="Search issues"
+                aria-autocomplete="list"
+              />
+              {searchQuery && (
+                <button 
+                  className="search-clear-btn" 
+                  onClick={() => {
+                    setSearchQuery('');
+                    setShowSuggestions(false);
+                  }}
+                  aria-label="Clear search"
+                >
+                  <X size={14} />
+                </button>
+              )}
+              {showSuggestions && (
+                <div className="search-suggestions-dropdown">
+                  {suggestionsLoading ? (
+                    <div className="suggestions-skeleton">
+                      <div className="skeleton" style={{ height: 14, width: '80%' }} />
+                      <div className="skeleton" style={{ height: 14, width: '60%' }} />
+                      <div className="skeleton" style={{ height: 14, width: '70%' }} />
+                    </div>
+                  ) : (
+                    searchSuggestions.map((issue, index) => (
+                      <div
+                        key={issue.id}
+                        className={`search-suggestion-item ${index === selectedSuggestionIndex ? 'selected' : ''}`}
+                        onClick={() => {
+                          openDrawer(issue.key);
+                          setSearchQuery('');
+                          setShowSuggestions(false);
+                        }}
+                        onMouseEnter={() => setSelectedSuggestionIndex(index)}
+                      >
+                        <span className="suggestion-key">{issue.key}</span>
+                        <span className="suggestion-summary">{issue.fields.summary}</span>
+                      </div>
+                    ))
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="filter-chips">
+            {STATUS_CHIPS.map(chip => (
+              <button
+                key={chip.value}
+                className={`filter-chip${statusFilter === chip.value ? ' active' : ''}`}
+                onClick={() => handleStatusFilterChange(chip.value)}
+              >
+                {chip.icon && <chip.icon size={14} />}
+                {chip.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {error && (
+        <div className="error" role="alert">
+          <AlertCircle size={16} style={{ marginRight: '0.5rem', verticalAlign: 'middle' }} />
+          {error}
+        </div>
+      )}
+
+      <IssueTable 
+        issues={issues} 
+        loading={loading} 
+        onRowClick={openDrawer}
+        currentPage={currentPage}
+        pageSize={pageSize}
+        total={totalIssues}
+        onPageChange={setCurrentPage}
+      />
+
+      {selectedIssueKey && (
+        <IssueDrawer
+          issueKey={selectedIssueKey}
+          isExpanded={isDrawerExpanded}
+          onClose={closeDrawer}
+          onExpand={setIsDrawerExpanded}
+          addToast={addToast}
+          issueDetail={issueDetail}
+          comments={comments}
+          transitions={transitions}
+          assignableUsers={assignableUsers}
+          drawerLoading={drawerLoading}
+          drawerError={drawerError}
+          newCommentText={newCommentText}
+          setNewCommentText={setNewCommentText}
+          isPostingComment={isPostingComment}
+          targetTransitionId={targetTransitionId}
+          setTargetTransitionId={setTargetTransitionId}
+          isTransitioning={isTransitioning}
+          assigneeSearch={assigneeSearch}
+          setAssigneeSearch={setAssigneeSearch}
+          targetAccountId={targetAccountId}
+          setTargetAccountId={setTargetAccountId}
+          isAssigning={isAssigning}
+          projectVersions={projectVersions}
+          isUpdatingVersions={isUpdatingVersions}
+          newLabelText={newLabelText}
+          setNewLabelText={setNewLabelText}
+          labelSuggestions={labelSuggestions}
+          showLabelSuggestions={showLabelSuggestions}
+          setShowLabelSuggestions={setShowLabelSuggestions}
+          isUpdatingLabels={isUpdatingLabels}
+          isUploading={isUploading}
+          uploadMessage={uploadMessage}
+          handlePostComment={handlePostComment}
+          handleAssignUser={handleAssignUser}
+          handleFileUpload={handleFileUpload}
+          handleUpdateVersion={handleUpdateVersion}
+          handleAddLabel={handleAddLabel}
+          handleRemoveLabel={handleRemoveLabel}
+          handleUpdateStatus={handleUpdateStatus}
+          onSubtaskClick={handleSubtaskClick}
+        />
+      )}
+
+      <CreateIssueModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        onCreated={handleCreateSuccess}
+        projects={projects}
+        projectsLoading={projectsLoading}
+        addToast={addToast}
+      />
+
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </div>
+  );
+}
+
+export default App;