import React from "react"; // next imports import { useRouter } from "next/router"; // swr import { mutate } from "swr"; // lucide icons import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react"; // components import { IssuePeekOverview } from "components/issues/peek-overview"; import { SubIssuesRootList } from "./issues-list"; import { IssueProperty } from "./properties"; // ui import { CustomMenu } from "components/ui"; import { Tooltip } from "@plane/ui"; // types import { IUser, IIssue } from "types"; import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root"; // fetch keys import { SUB_ISSUES } from "constants/fetch-keys"; export interface ISubIssues { workspaceSlug: string; projectId: string; parentIssue: IIssue; issue: any; spacingLeft?: number; user: IUser | undefined; editable: boolean; removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void; issuesLoader: ISubIssuesRootLoaders; handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void; copyText: (text: string) => void; handleIssueCrudOperation: ( key: "create" | "existing" | "edit" | "delete", issueId: string, issue?: IIssue | null ) => void; } export const SubIssues: React.FC = ({ workspaceSlug, projectId, parentIssue, issue, spacingLeft = 0, user, editable, removeIssueFromSubIssues, issuesLoader, handleIssuesLoader, copyText, handleIssueCrudOperation, }) => { const router = useRouter(); const { query } = router; const { peekIssue } = query as { peekIssue: string }; const openPeekOverview = (issue_id: string) => { router.push({ pathname: router.pathname, query: { ...query, peekIssue: issue_id }, }); }; return (
{issue && (
{issue?.sub_issues_count > 0 && ( <> {issuesLoader.sub_issues.includes(issue?.id) ? (
) : (
handleIssuesLoader({ key: "visibility", issueId: issue?.id })} > {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? ( ) : ( )}
)} )}
openPeekOverview(issue?.id)}>
{issue.project_detail.identifier}-{issue?.sequence_id}
{issue?.name}
{editable && ( handleIssueCrudOperation("edit", parentIssue?.id, issue)}>
Edit issue
)} {editable && ( handleIssueCrudOperation("delete", parentIssue?.id, issue)}>
Delete issue
)} copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)} >
Copy issue link
{editable && ( <> {issuesLoader.delete.includes(issue?.id) ? (
) : (
{ handleIssuesLoader({ key: "delete", issueId: issue?.id }); removeIssueFromSubIssues(parentIssue?.id, issue); }} >
)} )}
)} {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && ( )} {peekIssue && peekIssue === issue?.id && ( parentIssue && parentIssue?.id && mutate(SUB_ISSUES(parentIssue?.id))} projectId={issue?.project ?? ""} workspaceSlug={workspaceSlug ?? ""} readOnly={!editable} /> )}
); };