import React from "react"; import { observer } from "mobx-react-lite"; import { CalendarCheck2, Signal, Tag } from "lucide-react"; // hooks // components import { DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui"; import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns"; import { IssueLabel, TIssueOperations } from "@/components/issues"; // icons // helper import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"; import { useIssueDetail, useProject, useProjectState } from "@/hooks/store"; type Props = { workspaceSlug: string; projectId: string; issueId: string; issueOperations: TIssueOperations; is_editable: boolean; }; export const InboxIssueDetailsSidebar: React.FC = observer((props) => { const { workspaceSlug, projectId, issueId, issueOperations, is_editable } = props; // store hooks const { getProjectById } = useProject(); const { projectStates } = useProjectState(); const { issue: { getIssueById }, } = useIssueDetail(); const issue = getIssueById(issueId); if (!issue) return <>; const projectDetails = issue ? getProjectById(issue.project_id) : null; const minDate = issue.start_date ? getDate(issue.start_date) : null; minDate?.setDate(minDate.getDate()); const currentIssueState = projectStates?.find((s) => s.id === issue.state_id); return (
{currentIssueState && ( )}

{projectDetails?.identifier}-{issue?.sequence_id}

Properties
{/* State */}
State
issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })} projectId={projectId?.toString() ?? ""} disabled={!is_editable} buttonVariant="transparent-with-text" className="w-3/5 flex-grow group" buttonContainerClassName="w-full text-left" buttonClassName="text-sm" dropdownArrow dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline" />
{/* Assignee */}
Assignees
issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })} disabled={!is_editable} projectId={projectId?.toString() ?? ""} placeholder="Add assignees" multiple buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "transparent-with-text"} className="w-3/5 flex-grow group" buttonContainerClassName="w-full text-left" buttonClassName={`text-sm justify-between ${ issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400" }`} hideIcon={issue.assignee_ids?.length === 0} dropdownArrow dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline" />
{/* Priority */}
Priority
issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })} disabled={!is_editable} buttonVariant="border-with-text" className="w-3/5 flex-grow rounded px-2 hover:bg-custom-background-80" buttonContainerClassName="w-full text-left" buttonClassName="w-min h-auto whitespace-nowrap" />
{/* Due Date */}
Due date
issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val ? renderFormattedPayloadDate(val) : null, }) } minDate={minDate ?? undefined} disabled={!is_editable} buttonVariant="transparent-with-text" className="w-3/5 flex-grow group" buttonContainerClassName="w-full text-left" buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`} hideIcon clearIconClassName="h-3 w-3 hidden group-hover:inline" />
{/* Labels */}
Labels
issueOperations.update(workspaceSlug, projectId, issueId, { label_ids: val }) } />
); });