hale-commenting-system 2.0.2 → 2.0.4

package/dist/components/CommentPanel.js

@@ -0,0 +1,334 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentPanel = void 0;
+const React = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const CommentContext_1 = require("../contexts/CommentContext");
+const DetailsTab_1 = require("./DetailsTab");
+const JiraTab_1 = require("./JiraTab");
+const FloatingWidget_1 = require("./FloatingWidget");
+const version_1 = require("../utils/version");
+const CommentPanel = ({ children }) => {
+    const { getThreadsForRoute, selectedThreadId, setSelectedThreadId, drawerPinnedOpen, setDrawerPinnedOpen, floatingWidgetMode, setFloatingWidgetMode, addReply, updateComment, deleteComment, closeThread, reopenThread, removePin, retrySync, } = (0, CommentContext_1.useComments)();
+    const location = (0, react_router_dom_1.useLocation)();
+    const detectedVersion = (0, version_1.getVersionFromPathOrQuery)(location.pathname, location.search);
+    const [newCommentText, setNewCommentText] = React.useState('');
+    const [replyingToCommentId, setReplyingToCommentId] = React.useState(null);
+    const [replyTextByCommentId, setReplyTextByCommentId] = React.useState({});
+    const [editingCommentId, setEditingCommentId] = React.useState(null);
+    const [editText, setEditText] = React.useState('');
+    const drawerRef = React.useRef(null);
+    const [activeTabKey, setActiveTabKey] = React.useState('comments');
+    const currentThreads = getThreadsForRoute(location.pathname, detectedVersion);
+    const selectedThread = currentThreads.find((t) => t.id === selectedThreadId);
+    const isExpanded = !!selectedThreadId || drawerPinnedOpen || floatingWidgetMode;
+    const onExpand = () => {
+        drawerRef.current && drawerRef.current.focus();
+    };
+    React.useEffect(() => {
+        if (selectedThreadId) {
+            setActiveTabKey('comments');
+        }
+    }, [selectedThreadId]);
+    React.useEffect(() => {
+        if (drawerPinnedOpen && !selectedThreadId) {
+            setActiveTabKey('details');
+        }
+    }, [drawerPinnedOpen, selectedThreadId]);
+    const handleAddComment = () => {
+        if (newCommentText.trim() && selectedThread) {
+            addReply(selectedThread.id, newCommentText.trim());
+            setNewCommentText('');
+        }
+    };
+    const handleStartReply = (commentId) => {
+        setReplyingToCommentId(commentId);
+        setReplyTextByCommentId((prev) => ({ ...prev, [commentId]: prev[commentId] ?? '' }));
+    };
+    const handleCancelReply = () => {
+        setReplyingToCommentId(null);
+    };
+    const handleSubmitReply = (parentCommentId) => {
+        if (!selectedThread)
+            return;
+        const text = (replyTextByCommentId[parentCommentId] || '').trim();
+        if (!text)
+            return;
+        addReply(selectedThread.id, text, parentCommentId);
+        setReplyTextByCommentId((prev) => ({ ...prev, [parentCommentId]: '' }));
+        setReplyingToCommentId(null);
+    };
+    const handleStartEdit = (commentId, currentText) => {
+        setEditingCommentId(commentId);
+        setEditText(currentText);
+    };
+    const handleSaveEdit = (commentId) => {
+        if (editText.trim() && selectedThread) {
+            updateComment(selectedThread.id, commentId, editText.trim());
+            setEditingCommentId(null);
+            setEditText('');
+        }
+    };
+    const handleCancelEdit = () => {
+        setEditingCommentId(null);
+        setEditText('');
+    };
+    const handleDeleteComment = (commentId) => {
+        if (selectedThread) {
+            deleteComment(selectedThread.id, commentId);
+        }
+    };
+    const handleCloseThread = () => {
+        if (selectedThread) {
+            closeThread(selectedThread.id);
+        }
+    };
+    const handleReopenThread = () => {
+        if (selectedThread) {
+            reopenThread(selectedThread.id);
+        }
+    };
+    const handleRemovePin = () => {
+        if (!selectedThread)
+            return;
+        removePin(selectedThread.id);
+    };
+    const handleClose = () => {
+        setSelectedThreadId(null);
+        if (floatingWidgetMode) {
+            setFloatingWidgetMode(false);
+        }
+        else {
+            setDrawerPinnedOpen(false);
+        }
+        setEditingCommentId(null);
+        setEditText('');
+        setNewCommentText('');
+        setReplyingToCommentId(null);
+        setReplyTextByCommentId({});
+    };
+    const formatCommentDate = (isoDate) => {
+        const date = new Date(isoDate);
+        return date.toLocaleString(undefined, {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+    const stripMarkersForDisplay = (text) => {
+        return text
+            .replace(/<!--\s*hale-reply-to:\d+\s*-->\s*\n?/g, '')
+            .replace(/<!--\s*hale-reply-to-local\s*-->\s*\n?/g, '')
+            .trimEnd();
+    };
+    const deriveStatus = () => {
+        if (!selectedThread)
+            return 'local';
+        if (selectedThread.syncStatus === 'error')
+            return 'error';
+        // If we have an issue and any comment hasn't synced yet, treat as pending.
+        if (selectedThread.issueNumber && selectedThread.comments.some((c) => !c.githubCommentId))
+            return 'pending';
+        if (selectedThread.issueNumber)
+            return 'synced';
+        return selectedThread.syncStatus || 'local';
+    };
+    const renderSyncLabel = (status) => {
+        switch (status) {
+            case 'synced':
+                return (React.createElement(react_core_1.Label, { color: "green", icon: React.createElement(react_icons_1.GithubIcon, null) }, "Synced"));
+            case 'local':
+                return React.createElement(react_core_1.Label, { color: "grey" }, "Local");
+            case 'pending':
+                return React.createElement(react_core_1.Label, { color: "blue" }, "Pending\u2026");
+            case 'syncing':
+                return (React.createElement(react_core_1.Label, { color: "blue", icon: React.createElement(react_core_1.Spinner, { size: "sm" }) }, "Syncing\u2026"));
+            case 'error':
+                return React.createElement(react_core_1.Label, { color: "red" }, "Sync error");
+            default:
+                return null;
+        }
+    };
+    const panelContent = (React.createElement(React.Fragment, null,
+        React.createElement(react_core_1.Tabs, { activeKey: activeTabKey, onSelect: (_event, tabKey) => setActiveTabKey(tabKey), "aria-label": "Hale Commenting System drawer tabs" },
+            React.createElement(react_core_1.Tab, { eventKey: "details", title: React.createElement(react_core_1.TabTitleText, null, "Details") },
+                React.createElement("div", { style: { paddingTop: '1rem' } },
+                    React.createElement(DetailsTab_1.DetailsTab, null))),
+            React.createElement(react_core_1.Tab, { eventKey: "jira", title: React.createElement(react_core_1.TabTitleText, null, "Jira") },
+                React.createElement("div", { style: { paddingTop: '1rem' } },
+                    React.createElement(JiraTab_1.JiraTab, null))),
+            React.createElement(react_core_1.Tab, { eventKey: "comments", title: React.createElement(react_core_1.TabTitleText, null, "Comments") },
+                React.createElement("div", { style: { paddingTop: '1rem' } }, !selectedThread ? (React.createElement(react_core_1.EmptyState, { icon: react_icons_1.InfoCircleIcon, titleText: "No pin selected", headingLevel: "h3" },
+                    React.createElement(react_core_1.EmptyStateBody, null, "Select or create a comment pin to start a thread."))) : (React.createElement(React.Fragment, null,
+                    React.createElement(react_core_1.Card, { style: { marginBottom: '1rem' } },
+                        React.createElement(react_core_1.CardBody, null,
+                            React.createElement("div", { style: { display: 'grid', gap: '0.5rem' } },
+                                React.createElement("div", { style: { fontSize: '0.875rem' } },
+                                    React.createElement("strong", null, "Location:"),
+                                    " (",
+                                    selectedThread.xPercent.toFixed(1),
+                                    "%, ",
+                                    selectedThread.yPercent.toFixed(1),
+                                    "%)"),
+                                React.createElement("div", { style: { fontSize: '0.875rem' } },
+                                    React.createElement("strong", null, "Comments:"),
+                                    " ",
+                                    selectedThread.comments.length),
+                                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem' } },
+                                    React.createElement("strong", null, "Status:"),
+                                    renderSyncLabel(deriveStatus()) ?? React.createElement(react_core_1.Label, { color: "grey" }, "Local")),
+                                React.createElement("div", { style: { fontSize: '0.875rem' } }, selectedThread.issueNumber && selectedThread.issueUrl ? (React.createElement("a", { href: selectedThread.issueUrl, target: "_blank", rel: "noopener noreferrer", style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' } },
+                                    React.createElement(react_icons_1.GithubIcon, null),
+                                    "Issue #",
+                                    selectedThread.issueNumber,
+                                    React.createElement(react_icons_1.ExternalLinkAltIcon, { style: { fontSize: '0.75rem' } }))) : (React.createElement("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem', color: 'var(--pf-t--global--text--color--subtle)' } },
+                                    React.createElement(react_icons_1.GithubIcon, null),
+                                    "Issue pending\u2026"))),
+                                React.createElement("div", null)))),
+                    selectedThread.comments.length > 0 && (React.createElement("div", { style: { marginBottom: '1.5rem' } }, (() => {
+                        const comments = selectedThread.comments;
+                        const byId = new Map(comments.map((c) => [c.id, c]));
+                        const byGitHubId = new Map();
+                        for (const c of comments) {
+                            if (c.githubCommentId)
+                                byGitHubId.set(c.githubCommentId, c.id);
+                        }
+                        const childrenByParent = new Map();
+                        const topLevel = [];
+                        for (const c of comments) {
+                            const parentLocal = c.parentCommentId ||
+                                (c.parentGitHubCommentId ? byGitHubId.get(c.parentGitHubCommentId) : undefined);
+                            if (parentLocal && byId.has(parentLocal)) {
+                                const list = childrenByParent.get(parentLocal) || [];
+                                list.push(c.id);
+                                childrenByParent.set(parentLocal, list);
+                            }
+                            else {
+                                topLevel.push(c.id);
+                            }
+                        }
+                        const sortByCreatedAt = (aId, bId) => {
+                            const a = byId.get(aId);
+                            const b = byId.get(bId);
+                            const at = a ? Date.parse(a.createdAt) : 0;
+                            const bt = b ? Date.parse(b.createdAt) : 0;
+                            return at - bt;
+                        };
+                        topLevel.sort(sortByCreatedAt);
+                        childrenByParent.forEach((list, parentId) => {
+                            list.sort(sortByCreatedAt);
+                            childrenByParent.set(parentId, list);
+                        });
+                        const renderNode = (id, depth, topIndex) => {
+                            const comment = byId.get(id);
+                            if (!comment)
+                                return null;
+                            const isReply = depth > 0;
+                            const title = isReply ? 'Reply' : `Comment #${(topIndex ?? 0) + 1}`;
+                            const children = childrenByParent.get(id) || [];
+                            return (React.createElement("div", { key: id, style: {
+                                    marginLeft: depth * 16,
+                                    marginTop: depth > 0 ? '8px' : undefined,
+                                    marginBottom: depth > 0 ? '8px' : '1rem',
+                                } },
+                                React.createElement(react_core_1.Card, null,
+                                    React.createElement(react_core_1.CardBody, { style: { position: 'relative' } },
+                                        React.createElement(react_core_1.Button, { variant: "plain", icon: React.createElement(react_icons_1.TrashIcon, null), isDanger: true, "aria-label": "Delete comment", title: "Delete comment", onClick: () => handleDeleteComment(comment.id), style: { position: 'absolute', top: '12px', right: '12px' } }),
+                                        React.createElement(react_core_1.Title, { headingLevel: "h3", size: isReply ? 'lg' : 'xl', style: { paddingRight: '2.5rem' } }, title),
+                                        React.createElement("div", { style: {
+                                                marginTop: '0.25rem',
+                                                fontSize: '0.875rem',
+                                                color: 'var(--pf-t--global--text--color--subtle)',
+                                                paddingRight: '2.5rem',
+                                            } },
+                                            "@",
+                                            comment.author ?? '—',
+                                            " \u00A0 ",
+                                            formatCommentDate(comment.createdAt)),
+                                        editingCommentId === comment.id ? (React.createElement("div", { style: { marginTop: '0.5rem' } },
+                                            React.createElement(react_core_1.TextArea, { value: editText, onChange: (_event, value) => setEditText(value), "aria-label": "Edit comment", rows: 3 }),
+                                            React.createElement(react_core_1.ActionList, { style: { marginTop: '0.5rem' } },
+                                                React.createElement(react_core_1.ActionListItem, null,
+                                                    React.createElement(react_core_1.Button, { variant: "primary", onClick: () => handleSaveEdit(comment.id) }, "Save")),
+                                                React.createElement(react_core_1.ActionListItem, null,
+                                                    React.createElement(react_core_1.Button, { variant: "link", onClick: handleCancelEdit }, "Cancel"))))) : (React.createElement("div", null,
+                                            React.createElement("div", { style: { marginTop: '0.75rem', whiteSpace: 'pre-wrap' } }, stripMarkersForDisplay(comment.text)),
+                                            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '0.5rem' } },
+                                                React.createElement(react_core_1.Button, { variant: "primary", onClick: () => handleStartReply(comment.id) }, "Reply"),
+                                                React.createElement(react_core_1.Button, { variant: "link", onClick: () => handleStartEdit(comment.id, stripMarkersForDisplay(comment.text)) }, "Edit")))),
+                                        replyingToCommentId === comment.id && (React.createElement("div", { style: { marginTop: '0.75rem' } },
+                                            React.createElement(react_core_1.Title, { headingLevel: "h4", size: "md", style: { marginBottom: '0.5rem' } }, "Reply to this comment"),
+                                            React.createElement(react_core_1.TextArea, { value: replyTextByCommentId[comment.id] || '', onChange: (_event, value) => setReplyTextByCommentId((prev) => ({ ...prev, [comment.id]: value })), placeholder: "Type your reply...", "aria-label": "Reply to comment", rows: 3 }),
+                                            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '0.5rem' } },
+                                                React.createElement(react_core_1.Button, { variant: "primary", onClick: () => handleSubmitReply(comment.id), isDisabled: !(replyTextByCommentId[comment.id] || '').trim() }, "Post reply"),
+                                                React.createElement(react_core_1.Button, { variant: "link", onClick: handleCancelReply }, "Cancel")))))),
+                                children.map((childId) => renderNode(childId, depth + 1))));
+                        };
+                        return React.createElement(React.Fragment, null, topLevel.map((id, idx) => renderNode(id, 0, idx)));
+                    })())),
+                    React.createElement("div", null, selectedThread.status === 'closed' ? (React.createElement("div", { style: { marginBottom: '1rem', padding: '1rem', backgroundColor: 'var(--pf-t--global--background--color--secondary--default)', borderRadius: 'var(--pf-t--global--border--radius--medium)' } },
+                        React.createElement(react_core_1.Title, { headingLevel: "h3", size: "md", style: { marginBottom: '0.5rem' } }, "\uD83D\uDD12 Thread Closed"),
+                        React.createElement("p", { style: { color: 'var(--pf-t--global--text--color--subtle)', marginBottom: '1rem' } }, "This thread has been closed and locked. Reopen it to add new comments."),
+                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
+                            React.createElement(react_core_1.Button, { variant: "primary", onClick: handleReopenThread }, "Reopen Thread"),
+                            React.createElement(react_core_1.Button, { variant: "link", isDanger: true, onClick: handleRemovePin }, "Remove pin")))) : (React.createElement(React.Fragment, null,
+                        React.createElement(react_core_1.Title, { headingLevel: "h3", size: "md", style: { marginBottom: '0.5rem' } }, "Add comment"),
+                        React.createElement(react_core_1.TextArea, { value: newCommentText, onChange: (_event, value) => setNewCommentText(value), placeholder: "Type your comment...", "aria-label": "New comment", rows: 4 }),
+                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '1rem' } },
+                            React.createElement(react_core_1.Button, { variant: "primary", onClick: handleAddComment, isDisabled: !newCommentText.trim() }, "Add Comment"),
+                            React.createElement(react_core_1.Button, { variant: "secondary", onClick: handleCloseThread }, "Close Thread"),
+                            React.createElement(react_core_1.Button, { variant: "link", isDanger: true, onClick: handleRemovePin }, "Remove pin"))))))))))));
+    if (floatingWidgetMode && isExpanded) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(FloatingWidget_1.FloatingWidget, { onClose: handleClose, title: "Hale Commenting System" },
+                React.createElement("div", { style: { padding: '1rem' } }, panelContent)),
+            React.createElement("div", { style: { position: 'relative' } }, children)));
+    }
+    const drawerPanelContent = isExpanded ? (React.createElement(react_core_1.DrawerPanelContent, { isResizable: true, defaultSize: '500px', minSize: '300px' },
+        React.createElement(react_core_1.DrawerHead, null,
+            React.createElement("span", { tabIndex: isExpanded ? 0 : -1, ref: drawerRef },
+                React.createElement(react_core_1.Title, { headingLevel: "h2", size: "lg" }, "Hale Commenting System")),
+            React.createElement(react_core_1.DrawerActions, null,
+                React.createElement(react_core_1.DrawerCloseButton, { onClick: handleClose }))),
+        React.createElement(react_core_1.DrawerPanelBody, null, panelContent))) : null;
+    return (React.createElement(react_core_1.Drawer, { isExpanded: isExpanded, isInline: true, onExpand: onExpand },
+        React.createElement(react_core_1.DrawerContent, { panelContent: drawerPanelContent },
+            React.createElement(react_core_1.DrawerContentBody, { style: { position: 'relative' } }, children))));
+};
+exports.CommentPanel = CommentPanel;

package/dist/components/CommentPin.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface CommentPinProps {
+    xPercent: number;
+    yPercent: number;
+    commentCount: number;
+    isClosed?: boolean;
+    isSelected: boolean;
+    onClick: () => void;
+}
+export declare const CommentPin: React.FunctionComponent<CommentPinProps>;
+export {};

package/dist/components/CommentPin.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentPin = void 0;
+const React = __importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const CommentPin = ({ xPercent, yPercent, commentCount, isClosed = false, isSelected, onClick, }) => {
+    return (React.createElement(react_core_1.Button, { variant: "plain", "data-comment-pin": true, style: {
+            position: 'absolute',
+            left: `${xPercent}%`,
+            top: `${yPercent}%`,
+            transform: 'translate(-50%, -50%)',
+            width: '32px',
+            height: '32px',
+            borderRadius: '50%',
+            backgroundColor: isClosed ? 'var(--pf-t--global--icon--color--subtle)' : '#C9190B',
+            color: 'white',
+            border: isSelected ? '3px solid #0066CC' : '2px solid white',
+            boxShadow: isSelected
+                ? '0 0 0 3px rgba(0, 102, 204, 0.3), 0 2px 8px rgba(0,0,0,0.3)'
+                : '0 2px 8px rgba(0,0,0,0.3)',
+            cursor: 'pointer',
+            padding: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'all 0.2s ease',
+            pointerEvents: 'auto',
+        }, onClick: onClick, "aria-label": `${isClosed ? 'Closed ' : ''}comment thread with ${commentCount} comment${commentCount !== 1 ? 's' : ''}` }, commentCount === 0 ? (React.createElement(react_icons_1.CommentIcon, { style: { fontSize: '16px' } })) : commentCount === 1 ? (React.createElement(react_icons_1.CommentIcon, { style: { fontSize: '16px' } })) : (React.createElement("span", { style: { fontSize: '14px', fontWeight: 'bold' } }, commentCount))));
+};
+exports.CommentPin = CommentPin;

package/dist/components/DetailsTab.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const DetailsTab: React.FunctionComponent;