jira-pat 1.0.0

package/frontend/src/components/IssueDetailPanel.jsx

@@ -0,0 +1,517 @@
+import {
+  X, Loader2, AlertCircle, Link2, Paperclip, Calendar, Package,
+  PlusCircle
+} from 'lucide-react';
+import { sanitizeHtml } from '../utils/sanitize.js';
+import {
+  SEVERITY_FIELD,
+  getIssueTypeIcon,
+  getStatusClass,
+  getSeverityIcon,
+  formatSeverity,
+  getInitials
+} from '../utils/issueHelpers.jsx';
+import { 
+  SkeletonTitle, 
+  SkeletonText, 
+  SkeletonChip,
+  SkeletonSidebarItem 
+} from './SkeletonComponents.jsx';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000';
+
+const getAttachmentUrl = (content, mode) => {
+  const baseUrl = mode === 'standalone' ? API_BASE_URL : 'http://localhost:5000';
+  return `${baseUrl}/api/issues/image/proxy?url=${encodeURIComponent(content)}`;
+};
+
+const handleNavigation = (key, mode, onSubtaskClick) => {
+  if (mode === 'standalone') {
+    window.location.hash = `#/view/${key}`;
+  } else if (onSubtaskClick) {
+    onSubtaskClick(key);
+  }
+};
+
+export default function IssueDetailPanel({
+  mode,
+  issueDetail,
+  comments,
+  transitions,
+  assignableUsers,
+  projectVersions,
+  drawerLoading,
+  drawerError,
+  newCommentText,
+  setNewCommentText,
+  isPostingComment,
+  targetTransitionId,
+  setTargetTransitionId,
+  isTransitioning,
+  isTransitioningOptimistic,
+  optimisticStatus,
+  assigneeSearch,
+  setAssigneeSearch,
+  targetAccountId,
+  setTargetAccountId,
+  isAssigning,
+  isAssigningOptimistic,
+  optimisticAssignee,
+  isUpdatingVersions,
+  newLabelText,
+  setNewLabelText,
+  labelSuggestions,
+  showLabelSuggestions,
+  setShowLabelSuggestions,
+  isUpdatingLabels,
+  isUploading,
+  uploadMessage,
+  handlePostComment,
+  handleAssignUser,
+  handleFileUpload,
+  handleUpdateVersion,
+  handleAddLabel,
+  handleRemoveLabel,
+  handleUpdateStatus,
+  onSubtaskClick
+}) {
+  return (
+    <>
+      {drawerLoading && (
+        <>
+          <div className="drawer-main">
+            <div className="drawer-skeleton">
+              <div className="drawer-skeleton-header">
+                <SkeletonTitle width="40%" />
+                <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
+                  <SkeletonChip />
+                  <SkeletonChip width={60} />
+                </div>
+              </div>
+              <div className="drawer-skeleton-description">
+                <SkeletonText lines={4} />
+              </div>
+            </div>
+          </div>
+          <div className="drawer-sidebar">
+            <div className="drawer-skeleton-sidebar">
+              <SkeletonSidebarItem />
+              <SkeletonSidebarItem />
+              <SkeletonSidebarItem />
+              <SkeletonSidebarItem />
+            </div>
+          </div>
+        </>
+      )}
+      {drawerError && (
+        <div className="error" role="alert" style={{ gridColumn: '1 / -1' }}>
+          <AlertCircle size={16} style={{ marginRight: '0.5rem' }} />
+          {drawerError}
+        </div>
+      )}
+
+      {!drawerLoading && !drawerError && issueDetail && (
+        <>
+          <div className="drawer-main">
+            <div className="main-content-section">
+              <h3>Description</h3>
+              <div className="description-content">
+                {issueDetail.fields.descriptionHtml ? (
+                  <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(issueDetail.fields.descriptionHtml) }} />
+                ) : (
+                  issueDetail.fields.descriptionText || <i style={{ color: 'var(--text-muted)' }}>No description provided.</i>
+                )}
+              </div>
+            </div>
+
+            {issueDetail.fields.subtasksMapped?.length > 0 && (
+              <div className="main-content-section">
+                <h3>Subtasks ({issueDetail.fields.subtasksMapped.length})</h3>
+                <div className="subtask-list">
+                  {issueDetail.fields.subtasksMapped.map(st => (
+                    <div
+                      key={st.key}
+                      className="subtask-item"
+                      onClick={() => handleNavigation(st.key, mode, onSubtaskClick)}
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(e) => e.key === 'Enter' && handleNavigation(st.key, mode, onSubtaskClick)}
+                    >
+                      <span className="issue-key">
+                        {getIssueTypeIcon('subtask')}
+                        {st.key}
+                      </span>
+                      <span className={`status-badge ${getStatusClass(st.status)}`}>
+                        {st.status}
+                      </span>
+                      <span className="summary">{st.summary}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {issueDetail.fields.issuelinksMapped?.length > 0 && (
+              <div className="main-content-section">
+                <h3>Linked Issues ({issueDetail.fields.issuelinksMapped.length})</h3>
+                <div className="linked-list">
+                  {issueDetail.fields.issuelinksMapped.map(link => (
+                    <div
+                      key={link.key}
+                      className="linked-item"
+                      onClick={() => handleNavigation(link.key, mode, onSubtaskClick)}
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(e) => e.key === 'Enter' && handleNavigation(link.key, mode, onSubtaskClick)}
+                    >
+                      <Link2 size={14} className="link-type-icon" style={{ color: 'var(--text-muted)' }} />
+                      <span className="link-type">{link.label}</span>
+                      <span className="issue-key">{link.key}</span>
+                      <span className={`status-badge ${getStatusClass(link.status)}`}>
+                        {link.status}
+                      </span>
+                      <span className="summary">{link.summary}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="main-content-section">
+              <h3>Attachments ({issueDetail.fields.attachment?.length || 0})</h3>
+              <div className="attachments-list">
+                {issueDetail.fields.attachment && issueDetail.fields.attachment.length > 0 ? (
+                  issueDetail.fields.attachment.map(att => (
+                    <div key={att.id} className="attachment-item">
+                      <Paperclip size={14} style={{ color: 'var(--text-muted)' }} />
+                      <a
+                        href={getAttachmentUrl(att.content, mode)}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {att.filename}
+                      </a>
+                      <span className="size">({Math.round(att.size / 1024)} KB)</span>
+                    </div>
+                  ))
+                ) : (
+                  <div style={{ color: 'var(--text-muted)', fontSize: '13px' }}>
+                    No attachments yet.
+                  </div>
+                )}
+              </div>
+              <div className="upload-zone">
+                <input
+                  type="file"
+                  onChange={handleFileUpload}
+                  disabled={isUploading}
+                  aria-label="Upload attachment"
+                />
+                {isUploading && (
+                  <div className="upload-message">
+                    <Loader2 size={14} style={{ animation: 'spin 1s linear infinite', marginRight: '4px' }} />
+                    Uploading...
+                  </div>
+                )}
+                {uploadMessage && (
+                  <div className={`upload-message ${uploadMessage.startsWith('Error') ? 'error' : 'success'}`}>
+                    {uploadMessage}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="main-content-section">
+              <h3>Comments ({comments.length})</h3>
+              <div className="comment-composer">
+                <textarea
+                  className="comment-box"
+                  placeholder="Add a comment..."
+                  value={newCommentText}
+                  onChange={(e) => setNewCommentText(e.target.value)}
+                  disabled={isPostingComment}
+                  aria-label="Add comment"
+                />
+                <button
+                  className="btn-primary"
+                  onClick={handlePostComment}
+                  disabled={!newCommentText.trim() || isPostingComment}
+                  aria-label="Post comment"
+                >
+                  {isPostingComment ? (
+                    <>
+                      <Loader2 size={16} className="spinner" />
+                      Posting...
+                    </>
+                  ) : 'Post Comment'}
+                </button>
+              </div>
+              {comments.length === 0 ? (
+                <div style={{ color: 'var(--text-muted)', fontSize: '13px', padding: '16px', textAlign: 'center', background: 'var(--sidebar-bg)', borderRadius: 'var(--radius-md)', marginTop: '16px' }}>
+                  No comments yet. Be the first to comment!
+                </div>
+              ) : (
+                <div className="comments-list">
+                  {[...comments].reverse().map(comment => (
+                    <div key={comment.id} className="comment-item">
+                      <div className="comment-header">
+                        <span className="avatar">
+                          {getInitials(comment.author?.displayName || 'Unknown')}
+                        </span>
+                        <span className="comment-author">{comment.author?.displayName || 'Unknown'}</span>
+                        <span className="comment-date">{new Date(comment.created).toLocaleString()}</span>
+                      </div>
+                      <div className="comment-body">
+                        {comment.renderedHtml ? (
+                          <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(comment.renderedHtml) }} />
+                        ) : (
+                          comment.bodyText || <i>Empty comment</i>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="drawer-sidebar">
+            <div className="sidebar-section">
+              <div className="sidebar-label">Status</div>
+              <div className="status-sidebar">
+                <span className={`status-badge ${getStatusClass(optimisticStatus ?? issueDetail.fields.status?.name)}`}>
+                  {optimisticStatus ?? issueDetail.fields.status?.name ?? 'Unknown'}
+                  {isTransitioningOptimistic && <span className="inline-spinner" aria-label="Saving..." />}
+                </span>
+                <div className="transition-control">
+                  <select
+                    className="select-input"
+                    value={targetTransitionId}
+                    onChange={(e) => setTargetTransitionId(e.target.value)}
+                    aria-label="Select transition"
+                  >
+                    <option value="">Transition...</option>
+                    {[...transitions]
+                      .sort((a, b) => {
+                        const aName = (a.to?.name || a.name).toLowerCase();
+                        const bName = (b.to?.name || b.name).toLowerCase();
+                        if (aName === 'backlog') return 1;
+                        if (bName === 'backlog') return -1;
+                        return 0;
+                      })
+                      .map(t => (
+                        <option key={t.id} value={t.id}>{t.to?.name || t.name}</option>
+                      ))}
+                  </select>
+                  <button
+                    className="btn-primary btn-sm"
+                    disabled={!targetTransitionId || isTransitioning}
+                    onClick={() => {
+                      const selectedTransition = transitions.find(t => t.id === targetTransitionId);
+                      handleUpdateStatus(targetTransitionId, selectedTransition?.to?.name || selectedTransition?.name);
+                    }}
+                    aria-label="Update status"
+                  >
+                    {isTransitioning ? '...' : 'Go'}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="sidebar-section">
+              <div className="sidebar-label">Assignee</div>
+              <div className="assignee-sidebar">
+                {(() => {
+                  const displayAssignee = isAssigningOptimistic ? optimisticAssignee : issueDetail.fields.assignee;
+                  return displayAssignee ? (
+                    <div className="user-info">
+                      <span className="avatar small">
+                        {getInitials(displayAssignee.displayName)}
+                      </span>
+                      <span style={{ fontSize: '13px' }}>{displayAssignee.displayName}</span>
+                      {isAssigningOptimistic && <span className="inline-spinner" aria-label="Saving..." />}
+                    </div>
+                  ) : (
+                    <span className="unassigned-text">Unassigned</span>
+                  );
+                })()}
+                <input
+                  type="text"
+                  className="text-input"
+                  placeholder="Change assignee..."
+                  value={assigneeSearch}
+                  onChange={(e) => setAssigneeSearch(e.target.value)}
+                  aria-label="Search for assignee"
+                />
+                {assigneeSearch.trim() && (
+                  <div className="assignee-suggestions-dropdown">
+                    {assignableUsers
+                      .filter(u => u.displayName.toLowerCase().includes(assigneeSearch.toLowerCase()))
+                      .slice(0, 10)
+                      .map(u => (
+                        <div
+                          key={u.accountId}
+                          className="assignee-suggestion-item"
+                          onClick={() => {
+                            setTargetAccountId(u.accountId);
+                            setAssigneeSearch(u.displayName);
+                          }}
+                        >
+                          <span className="avatar small">
+                            {getInitials(u.displayName)}
+                          </span>
+                          <span className="user-name">{u.displayName}</span>
+                        </div>
+                      ))}
+                  </div>
+                )}
+                {targetAccountId && (
+                  <div className="assignee-actions">
+                    <button
+                      className="btn-primary btn-sm"
+                      disabled={isAssigning}
+                      onClick={() => {
+                        const selectedUser = assignableUsers.find(u => u.accountId === targetAccountId);
+                        handleAssignUser(targetAccountId, selectedUser?.displayName || assigneeSearch);
+                      }}
+                      aria-label="Assign"
+                    >
+                      {isAssigning ? '...' : 'Assign'}
+                    </button>
+                    <button
+                      className="btn-icon"
+                      onClick={() => {
+                        setTargetAccountId('');
+                        setAssigneeSearch('');
+                      }}
+                      aria-label="Clear"
+                    >
+                      <X size={14} />
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="sidebar-section">
+              <div className="sidebar-label">Severity</div>
+              <div className="sidebar-value">
+                {issueDetail.fields[SEVERITY_FIELD] ? (
+                  <span className={`severity-badge ${(issueDetail.fields[SEVERITY_FIELD].value || issueDetail.fields[SEVERITY_FIELD].name || '').toLowerCase().replace(/\s+/g, '-')}`}>
+                    {getSeverityIcon(issueDetail.fields[SEVERITY_FIELD].value || issueDetail.fields[SEVERITY_FIELD].name)}
+                    {formatSeverity(issueDetail.fields[SEVERITY_FIELD].value || issueDetail.fields[SEVERITY_FIELD].name)}
+                  </span>
+                ) : (
+                  <span style={{ color: 'var(--text-muted)', fontSize: '13px' }}>—</span>
+                )}
+              </div>
+            </div>
+
+            <div className="sidebar-section">
+              <div className="sidebar-label">Labels</div>
+              <div className="sidebar-labels">
+                {(issueDetail.fields.labels || []).map(label => (
+                  <span key={label} className="label-tag">
+                    {label}
+                    <button
+                      className="label-remove"
+                      onClick={() => handleRemoveLabel(label)}
+                      disabled={isUpdatingLabels}
+                      title="Remove Label"
+                    >
+                      <X size={10} />
+                    </button>
+                  </span>
+                ))}
+                <div className="add-label-wrapper" style={{ position: 'relative' }}>
+                  {isUpdatingLabels ? (
+                    <Loader2 size={12} className="spinner" />
+                  ) : (
+                    <PlusCircle size={12} style={{ color: 'var(--primary)' }} />
+                  )}
+                  <input
+                    type="text"
+                    className="add-label-input"
+                    placeholder="Add..."
+                    value={newLabelText}
+                    onChange={(e) => setNewLabelText(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleAddLabel();
+                      }
+                    }}
+                    onFocus={() => setShowLabelSuggestions(labelSuggestions.length > 0)}
+                    onBlur={() => setTimeout(() => setShowLabelSuggestions(false), 200)}
+                    disabled={isUpdatingLabels}
+                  />
+                  {showLabelSuggestions && (
+                    <div className="label-suggestions-dropdown">
+                      {labelSuggestions.map(label => (
+                        <div
+                          key={label}
+                          className="label-suggestion-item"
+                          onClick={() => handleAddLabel(label)}
+                        >
+                          {label}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="sidebar-section">
+              <div className="sidebar-label">Fix Version</div>
+              <div className="sidebar-value">
+                <Package size={14} />
+                <select
+                  className="version-select"
+                  value={issueDetail.fields.fixVersions?.[0]?.id || ''}
+                  onChange={(e) => handleUpdateVersion(e.target.value)}
+                  disabled={isUpdatingVersions}
+                >
+                  <option value="">None</option>
+                  {projectVersions.map(v => (
+                    <option key={v.id} value={v.id}>
+                      {v.name} {v.released ? '(Released)' : ''}
+                    </option>
+                  ))}
+                </select>
+                {isUpdatingVersions && (
+                  <Loader2 size={12} className="spinner" />
+                )}
+              </div>
+            </div>
+
+            <div className="sidebar-section">
+              <div className="sidebar-label">Reporter</div>
+              <div className="sidebar-value">
+                <span className="avatar small">
+                  {getInitials(issueDetail.fields.reporter?.displayName || 'Unknown')}
+                </span>
+                <span>{issueDetail.fields.reporter?.displayName || 'Unknown'}</span>
+              </div>
+            </div>
+
+            <div className="sidebar-section">
+              <div className="sidebar-label">Created</div>
+              <div className="sidebar-date">
+                <Calendar size={14} />
+                <span>{new Date(issueDetail.fields.created).toLocaleDateString()}</span>
+              </div>
+            </div>
+
+            <div className="sidebar-section">
+              <div className="sidebar-label">Updated</div>
+              <div className="sidebar-date">
+                <Calendar size={14} />
+                <span>{new Date(issueDetail.fields.updated).toLocaleDateString()}</span>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

package/frontend/src/components/IssueDrawer.jsx

@@ -0,0 +1,155 @@
+import React, { useRef } from 'react';
+import { 
+  X, Link2, ExternalLink
+} from 'lucide-react';
+import IssueDetailPanel from './IssueDetailPanel';
+import { getIssueTypeIcon } from '../utils/issueHelpers.jsx';
+import { useFocusTrap } from '../hooks/useFocusTrap.js';
+
+export default React.memo(function IssueDrawer({
+  issueKey,
+  isExpanded,
+  onClose,
+  onExpand,
+  addToast,
+  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,
+  onSubtaskClick
+}) {
+  const drawerRef = useRef(null);
+  useFocusTrap(drawerRef, isExpanded);
+
+  const copyLink = () => {
+    navigator.clipboard.writeText(window.location.href);
+    addToast('Link copied to clipboard', 'success');
+  };
+
+  return (
+    <div className="drawer-overlay" ref={drawerRef} onClick={onClose}>
+      <div className={`drawer ${isExpanded ? 'expanded' : ''}`} onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="drawer-title">
+        <div className="drawer-header">
+          <div className="drawer-header-content">
+            <div className="drawer-breadcrumb">
+              <span>{issueKey?.split('-')[0]}</span>
+              <span>/</span>
+              <span>{issueKey}</span>
+            </div>
+            {issueDetail && (
+              <h2 id="drawer-title">
+                {getIssueTypeIcon(issueDetail.fields.issuetype?.name)}
+                {issueDetail.fields.summary}
+              </h2>
+            )}
+          </div>
+          <div className="drawer-header-actions">
+            <button 
+              className="action-btn" 
+              onClick={() => onExpand(!isExpanded)}
+              aria-label={isExpanded ? "Collapse" : "Expand to full view"}
+            >
+              {isExpanded ? (
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
+                </svg>
+              ) : (
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+                </svg>
+              )}
+            </button>
+            <button 
+              className="action-btn" 
+              onClick={() => window.open(`/#/view/${issueKey}`, '_blank')}
+              aria-label="Open in new tab"
+            >
+              <ExternalLink size={18} />
+            </button>
+            <button 
+              className="action-btn" 
+              onClick={copyLink}
+              aria-label="Copy link"
+            >
+              <Link2 size={18} />
+            </button>
+            <button className="close-btn" onClick={onClose} aria-label="Close drawer">
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+        
+        <div className="drawer-body">
+          <IssueDetailPanel
+            mode="drawer"
+            issueDetail={issueDetail}
+            comments={comments}
+            transitions={transitions}
+            assignableUsers={assignableUsers}
+            projectVersions={projectVersions}
+            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}
+            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={onSubtaskClick}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});