import { useRouter } from "next/router"; import { useEffect } from "react"; import { observer } from "mobx-react-lite"; // store hooks import { useEstimate, useLabel } from "hooks/store"; // icons import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui"; import { TagIcon, CopyPlus, Calendar, Link2Icon, Users2Icon, ArchiveIcon, PaperclipIcon, ContrastIcon, TriangleIcon, LayoutGridIcon, SignalMediumIcon, MessageSquareIcon, UsersIcon, } from "lucide-react"; // helpers import { renderFormattedDate } from "helpers/date-time.helper"; import { capitalizeFirstLetter } from "helpers/string.helper"; // types import { IIssueActivity } from "@plane/types"; export const IssueLink = ({ activity }: { activity: IIssueActivity }) => { const router = useRouter(); const { workspaceSlug } = router.query; return ( {activity?.issue_detail ? ( {`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}{" "} {activity.issue_detail?.name} ) : ( {" an Issue"}{" "} )} ); }; const UserLink = ({ activity }: { activity: IIssueActivity }) => { const router = useRouter(); const { workspaceSlug } = router.query; return ( {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value} ); }; const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) => { // store hooks const { workspaceLabels, fetchWorkspaceLabels } = useLabel(); useEffect(() => { if (!workspaceLabels) fetchWorkspaceLabels(workspaceSlug); }, [fetchWorkspaceLabels, workspaceLabels, workspaceSlug]); return ( l.id === labelId)?.color ?? "#000000", }} aria-hidden="true" /> ); }); const EstimatePoint = observer((props: { point: string }) => { const { point } = props; const { areEstimatesEnabledForCurrentProject, getEstimatePointValue } = useEstimate(); const currentPoint = Number(point) + 1; const estimateValue = getEstimatePointValue(Number(point), null); return ( {areEstimatesEnabledForCurrentProject ? estimateValue : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`} ); }); const activityDetails: { [key: string]: { message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode; icon: React.ReactNode; }; } = { assignees: { message: (activity, showIssue) => { if (activity.old_value === "") return ( <> added a new assignee {showIssue && ( <> {" "} to )} ); else return ( <> removed the assignee {showIssue && ( <> {" "} from )} ); }, icon: