{
display: 'flex',
alignItems: 'center',
gap: '1rem',
- background: 'transparent',
}}
>
![]()
{
style={{
height: '100px',
width: 'auto',
- background: 'transparent',
- backgroundColor: 'transparent',
display: 'block',
}}
/>
@@ -286,6 +377,15 @@ const App = () => {
+
{reactionsLoading && (
diff --git a/frontend/src/components/CommentCard.test.jsx b/frontend/src/components/CommentCard.test.jsx
index a576c3e..4d233b4 100644
--- a/frontend/src/components/CommentCard.test.jsx
+++ b/frontend/src/components/CommentCard.test.jsx
@@ -16,8 +16,23 @@ describe('CommentCard', () => {
};
it('renders comment body as HTML', () => {
- render(", or blank
@@ -768,32 +860,164 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
borderBottom: '1px solid #d2d2d2',
};
- return (
- <>
-
- {/* Column 1: Expansion icon */}
-
- {issue.body_html ? (
+ const depth = issue.hierarchy_depth || 0;
+ const childCount = issue.child_count ?? (issue.children || []).length;
+ const indentPx = enableHierarchy ? depth * 16 : 0;
+
+ const handleAdoptParentMilestone = async () => {
+ try {
+ const result = await adoptParentMilestone(issue.number);
+ onAdoptParentMilestone?.({
+ fromMilestoneNumber: result.from_milestone ?? currentMilestone?.number,
+ toMilestoneNumber: result.to_milestone,
+ });
+ } catch (err) {
+ console.error('Failed to adopt parent milestone:', err);
+ }
+ };
+
+ const renderHierarchyType = () => {
+ if (!enableHierarchy) return null;
+ let Icon = LayerGroupIcon;
+ let label = 'Epic';
+ if (depth === 1) {
+ Icon = CatalogIcon;
+ label = 'Story';
+ } else if (depth >= 2) {
+ Icon = TaskIcon;
+ label = 'Sub-story';
+ }
+ return (
+
+
+ );
+ };
+
+ const rowStyle = {
+ backgroundColor: isDropTarget
+ ? '#e7f1fa'
+ : isDragging
+ ? '#f0f0f0'
+ : undefined,
+ opacity: isDragging ? 0.6 : 1,
+ };
+
+ return (
+ <>
+
+ {/* Column 1: Expansion icon */}
+
+
{/* Column 2: Issue number link */}
-
+
{
- {/* Column 3: Owner avatar, creation date, assigned chiclet stacked */}
+ {renderHierarchyType()}
+
+ {/* Column: Owner avatar, creation date, assigned chiclet stacked */}
{/* Expanded description and comments - only shown when expanded */}
- {issue.body_html && isDescriptionExpanded && (
+ {isDescriptionExpanded && (
-
- {issue.comments > 0 && (
-
)}
+ setIsCommentModalOpen(false)}
+ mode="comment"
+ title={`Comment on #${issue.number}`}
+ submitLabel="Submit"
+ showCloseWithComment
+ onSubmit={handleAddComment}
+ onCloseWithComment={handleCloseWithComment}
+ />
+ setIsCreateSubIssueOpen(false)}
+ mode="issue"
+ title={`Add sub-issue under #${issue.number}`}
+ submitLabel="Create Issue"
+ onSubmit={handleCreateSubIssue}
+ />
{
});
});
- it('does not show expansion icon when body is absent', async () => {
+ it('shows expansion icon when body is absent (for comments)', async () => {
const issueWithoutBody = { ...mockIssue, body: null, body_html: null };
await act(async () => {
render(
+
+
+ );
+ });
+
+ await user.click(
+ screen.getByRole('button', { name: 'Remove enhancement label' })
+ );
+
+ await waitFor(() => {
+ expect(api.removeLabel).toHaveBeenCalledWith(459, 'enhancement');
+ expect(onLabelsChange).toHaveBeenCalledWith({ milestoneNumber: 6 });
+ });
+ });
+
+ it('calls onLabelsChange with milestone 0 when issue has no milestone', async () => {
+ const user = userEvent.setup();
+ const onLabelsChange = vi.fn();
+ api.removeLabel.mockResolvedValue({});
+ const issueWithoutMilestone = {
+ ...mockIssue,
+ milestone: null,
+ };
+
+ await act(async () => {
+ render(
+
+
+
+ );
+ });
+
+ await user.click(
+ screen.getByRole('button', { name: 'Remove enhancement label' })
+ );
+
+ await waitFor(() => {
+ expect(onLabelsChange).toHaveBeenCalledWith({ milestoneNumber: 0 });
+ });
+ });
+
+ it('shows Epic type icon and child count when hierarchy enabled', async () => {
+ const epic = {
+ ...mockIssue,
+ hierarchy_depth: 0,
+ child_count: 2,
+ children: [{ number: 2 }, { number: 3 }],
+ };
+ await act(async () => {
+ render(
+
+
+
+ );
+ });
+ expect(screen.getByLabelText('Epic')).toBeInTheDocument();
+ expect(screen.getByText('2')).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Show sub-issues' })
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Add sub-issue' })
+ ).toBeInTheDocument();
+ });
+
+ it('shows Add Comment under expanded description', async () => {
+ const user = userEvent.setup();
+ await act(async () => {
+ render(
+
+
+ );
+ });
+ expect(screen.getByLabelText('Story')).toBeInTheDocument();
+ expect(screen.getByLabelText('Sub-story')).toBeInTheDocument();
+ });
+
+ it('calls adoptParentMilestone for external parent', async () => {
+ const user = userEvent.setup();
+ const onAdopt = vi.fn();
+ api.adoptParentMilestone.mockResolvedValue({
+ from_milestone: 1,
+ to_milestone: 2,
+ });
+ const issue = {
+ ...mockIssue,
+ hierarchy_depth: 0,
+ child_count: 0,
+ external_parent: {
+ number: 99,
+ title: 'Other',
+ milestone: { number: 2, title: 'M2' },
+ },
+ };
+ await act(async () => {
+ render(
+
+
+
+ );
+ });
+ await user.click(screen.getByText('Match parent milestone'));
+ await waitFor(() => {
+ expect(api.adoptParentMilestone).toHaveBeenCalledWith(459);
+ expect(onAdopt).toHaveBeenCalledWith({
+ fromMilestoneNumber: 1,
+ toMilestoneNumber: 2,
+ });
+ });
+ });
});
diff --git a/frontend/src/components/MarkdownInputModal.jsx b/frontend/src/components/MarkdownInputModal.jsx
new file mode 100644
index 0000000..4e11789
--- /dev/null
+++ b/frontend/src/components/MarkdownInputModal.jsx
@@ -0,0 +1,462 @@
+// Generated-by: Cursor
+import React, { useState, useEffect, useRef } from 'react';
+import {
+ Modal,
+ Button,
+ Tabs,
+ Tab,
+ TabTitleText,
+ TextInput,
+ TextArea,
+ Form,
+ FormGroup,
+ Checkbox,
+ Spinner,
+ Alert,
+ Tooltip,
+} from '@patternfly/react-core';
+import { renderMarkdown, fetchLabels, fetchAssignees } from '../services/api';
+import labelsCache from '../utils/labelsCache';
+import assigneesCache from '../utils/assigneesCache';
+import UserAvatar from './UserAvatar';
+
+const ISSUE_TYPES = ['Bug', 'Feature'];
+
+/**
+ * Popup input window with Edit / Preview markdown tabs.
+ *
+ * Modes:
+ * - comment: body only; actions Submit + optional Close with Comment + Cancel
+ * - issue: title, type, labels, assignees + body; action Submit + Cancel
+ *
+ * Generated-by: Cursor
+ */
+const MarkdownInputModal = ({
+ isOpen,
+ onClose,
+ mode = 'comment',
+ title = 'Add Comment',
+ submitLabel = 'Submit',
+ onSubmit,
+ showCloseWithComment = false,
+ onCloseWithComment,
+}) => {
+ const [activeTab, setActiveTab] = useState(0);
+ const [body, setBody] = useState('');
+ const [issueTitle, setIssueTitle] = useState('');
+ const [issueType, setIssueType] = useState('Feature');
+ const [selectedLabels, setSelectedLabels] = useState([]);
+ const [selectedAssignees, setSelectedAssignees] = useState([]);
+ const [availableLabels, setAvailableLabels] = useState([]);
+ const [availableAssignees, setAvailableAssignees] = useState([]);
+ const [labelsLoading, setLabelsLoading] = useState(false);
+ const [assigneesLoading, setAssigneesLoading] = useState(false);
+ const [previewHtml, setPreviewHtml] = useState('');
+ const [previewLoading, setPreviewLoading] = useState(false);
+ const [previewError, setPreviewError] = useState(null);
+ const [submitError, setSubmitError] = useState(null);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const textareaRef = useRef(null);
+ const previewRequestId = useRef(0);
+
+ const resetState = () => {
+ setActiveTab(0);
+ setBody('');
+ setIssueTitle('');
+ setIssueType('Feature');
+ setSelectedLabels([]);
+ setSelectedAssignees([]);
+ setPreviewHtml('');
+ setPreviewError(null);
+ setSubmitError(null);
+ setIsSubmitting(false);
+ };
+
+ useEffect(() => {
+ if (!isOpen) {
+ resetState();
+ return;
+ }
+ if (mode !== 'issue') return;
+
+ // Load labels
+ if (labelsCache.data.length > 0) {
+ setAvailableLabels(labelsCache.data);
+ } else {
+ setLabelsLoading(true);
+ fetchLabels()
+ .then((data) => {
+ labelsCache.data = data;
+ setAvailableLabels(data);
+ setLabelsLoading(false);
+ })
+ .catch(() => setLabelsLoading(false));
+ }
+
+ // Load assignees
+ if (assigneesCache.data.length > 0) {
+ setAvailableAssignees(assigneesCache.data);
+ } else {
+ setAssigneesLoading(true);
+ fetchAssignees()
+ .then((data) => {
+ assigneesCache.data = data;
+ setAvailableAssignees(data);
+ setAssigneesLoading(false);
+ })
+ .catch(() => setAssigneesLoading(false));
+ }
+ }, [isOpen, mode]);
+
+ useEffect(() => {
+ if (!isOpen || activeTab !== 1) return;
+
+ const requestId = ++previewRequestId.current;
+ setPreviewLoading(true);
+ setPreviewError(null);
+
+ renderMarkdown(body || '')
+ .then((data) => {
+ if (previewRequestId.current !== requestId) return;
+ setPreviewHtml(data.html || '');
+ setPreviewLoading(false);
+ })
+ .catch((err) => {
+ if (previewRequestId.current !== requestId) return;
+ setPreviewError(err.message);
+ setPreviewLoading(false);
+ });
+ }, [isOpen, activeTab, body]);
+
+ const handleClose = () => {
+ if (isSubmitting) return;
+ onClose?.();
+ };
+
+ const buildIssuePayload = () => ({
+ title: issueTitle.trim(),
+ body: body || undefined,
+ type: issueType || undefined,
+ labels: selectedLabels.length > 0 ? selectedLabels : undefined,
+ assignees: selectedAssignees.length > 0 ? selectedAssignees : undefined,
+ });
+
+ const handleSubmit = async () => {
+ if (mode === 'issue' && !issueTitle.trim()) {
+ setSubmitError('Title is required');
+ return;
+ }
+ if (mode === 'comment' && !body.trim()) {
+ setSubmitError('Comment body is required');
+ return;
+ }
+ setIsSubmitting(true);
+ setSubmitError(null);
+ try {
+ if (mode === 'issue') {
+ await onSubmit?.(buildIssuePayload());
+ } else {
+ await onSubmit?.(body);
+ }
+ onClose?.();
+ } catch (err) {
+ setSubmitError(err.message || 'Submit failed');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleCloseWithComment = async () => {
+ if (!body.trim()) {
+ setSubmitError('Comment body is required');
+ return;
+ }
+ setIsSubmitting(true);
+ setSubmitError(null);
+ try {
+ await onCloseWithComment?.(body);
+ onClose?.();
+ } catch (err) {
+ setSubmitError(err.message || 'Close with comment failed');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const toggleLabel = (name, checked) => {
+ setSelectedLabels((prev) =>
+ checked ? [...prev, name] : prev.filter((n) => n !== name)
+ );
+ };
+
+ const toggleAssignee = (login, checked) => {
+ setSelectedAssignees((prev) =>
+ checked ? [...prev, login] : prev.filter((n) => n !== login)
+ );
+ };
+
+ const actions = [
+ ,
+ ];
+
+ if (showCloseWithComment && mode === 'comment') {
+ actions.push(
+
+ );
+ }
+
+ actions.push(
+
+ );
+
+ return (
+
+
Notes
- First item
- Second item
+ {childCount > 0 && (
- ) : null}
+ )}
+
+
+
+
+
+
+ {issue.external_parent && (
+
+
+
+ )}
+
+ {
- setIsCommentsExpanded(!isCommentsExpanded)}
- isExpanded={isCommentsExpanded}
- >
-
- {commentsLoading && (
-
-
{issue.reactions?.total_count > 0 && (
+ No description. +
+ )} +
+ setIsCommentsExpanded(!isCommentsExpanded)}
+ isExpanded={isCommentsExpanded}
+ >
+
+
+
+
+ {commentsLoading && (
+
+ {commentsError}
+
+ )}
+ {!commentsLoading &&
+ !commentsError &&
+ comments.length > 0 && (
+
- {commentsError}
-
+ {!commentsLoading &&
+ !commentsError &&
+ comments.length === 0 &&
+ isCommentsExpanded && (
+
-
+
+ )}
+ {commentsError && (
+
+ {comments.map((comment) => (
+
)}
- {commentsError && (
- + No comments found. +
)} - {!commentsLoading && - !commentsError && - comments.length > 0 && ( -
- {comments.map((comment) => (
-
- )}
- {!commentsLoading &&
- !commentsError &&
- comments.length === 0 &&
- isCommentsExpanded && (
- - No comments found. -
- )} -
+
- )}
+
{reactionsLoading && (
@@ -1556,6 +1805,24 @@ const IssueCard = ({ issue, onMilestoneChange, onIssueUpdate }) => {
Pre-existing comment
', + user: { + login: 'alice', + avatar_url: 'https://avatar.url/alice', + }, + created_at: '2025-01-01T00:00:00Z', + }; + const createdComment = { + id: 2, + body: 'Brand new comment', + body_html: 'Brand new comment
', + user: { + login: 'bob', + avatar_url: 'https://avatar.url/bob', + }, + created_at: '2025-01-02T00:00:00Z', + }; + api.createComment.mockResolvedValue(createdComment); + api.fetchComments.mockResolvedValue([existingComment, createdComment]); + + const issueWithComments = { ...mockIssue, comments: 1 }; + await act(async () => { + render(