plane/apps/app/components/issues/main-content.tsx

160 lines
5.7 KiB
TypeScript
Raw Normal View History

2023-06-19 18:09:47 +00:00
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import issuesService from "services/issues.service";
// hooks
import useUserAuth from "hooks/use-user-auth";
// contexts
import { useProjectMyMembership } from "contexts/project-member.context";
// components
import {
AddComment,
IssueActivitySection,
IssueAttachmentUpload,
IssueAttachments,
IssueDescriptionForm,
SubIssuesList,
IssueReaction,
2023-06-19 18:09:47 +00:00
} from "components/issues";
// ui
import { CustomMenu } from "components/ui";
// icons
import { LayerDiagonalIcon } from "components/icons";
import { MinusCircleIcon } from "@heroicons/react/24/outline";
2023-06-19 18:09:47 +00:00
// types
import { IIssue } from "types";
// fetch-keys
import { SUB_ISSUES } from "constants/fetch-keys";
type Props = {
issueDetails: IIssue;
submitChanges: (formData: Partial<IIssue>) => Promise<void>;
uneditable?: boolean;
2023-06-19 18:09:47 +00:00
};
export const IssueMainContent: React.FC<Props> = ({
issueDetails,
submitChanges,
uneditable = false,
}) => {
2023-06-19 18:09:47 +00:00
const router = useRouter();
const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
2023-06-19 18:09:47 +00:00
const { user } = useUserAuth();
const { memberRole } = useProjectMyMembership();
const { data: siblingIssues } = useSWR(
workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
workspaceSlug && projectId && issueDetails?.parent
? () =>
feat : Tiptap integration (#1832) * remirror instances commented out to avoid prosemirror conflicts * styles migrated for remirror to tiptap transition * added bubblemenu support with extensions * fixed css for task lists and code with syntax highlighting * added support for slash command * fixed bubble menu to match styles and added better seperation in UI * saving with debounce logic added and it's stored in backend * added migration support by updating to html * Image uploads done * improved file structure and delete image function implemented * Integrated tiptap with Issue Modal * added additional props and Tiptap Integration with Comments * added tiptap integration with user activity feeds * added ref control support and bubble menu support for readonly editor * added tiptap support for plane pages * added tiptap support to gpt assistant modal (yet to be tested) * removed remirror instances and cleaned up code * improved code structure for extracting props in Tiptap * fixing ts errors for next build * fixing node ts error for Horizontal Rule * added ts fix for node types * temp fix * temp fix * added min height for issue description in modal * added resolutions to prosemirror-model version * trying pnpm overrides * explicitly added prosemirror deps * bugfixes * removed extra gap at the top and moved saved indicator to the bottom * fix: slash command scroll position * chore: update custom css variables * matched theme colours * fixed gpt-assistant modal * updated yarn lock * added debounced updates for the title and removed saved state after timeout * added css animations for saved state * build fixes and remove remirror instances * minor commenting fixes --------- Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-08-15 09:34:46 +00:00
issuesService.subIssues(
workspaceSlug as string,
projectId as string,
issueDetails.parent ?? ""
)
2023-06-19 18:09:47 +00:00
: null
);
const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
2023-06-19 18:09:47 +00:00
return (
<>
<div className="rounded-lg">
{issueDetails?.parent ? (
<div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md bg-custom-background-80 border border-custom-border-300 py-1 px-2.5 text-xs">
<Link
href={`/${workspaceSlug}/projects/${issueDetails.parent_detail?.project_detail.id}/issues/${issueDetails.parent}`}
>
<a className="flex items-center gap-3">
<div className="flex items-center gap-2.5">
<span
className="block h-2 w-2 rounded-full"
style={{
backgroundColor: issueDetails.parent_detail?.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-custom-text-200">
{issueDetails.parent_detail?.project_detail.identifier}-
{issueDetails.parent_detail?.sequence_id}
</span>
</div>
<span className="truncate text-custom-text-100">
2023-06-19 18:09:47 +00:00
{issueDetails.parent_detail?.name.substring(0, 50)}
</span>
</a>
</Link>
<CustomMenu position="left" ellipsis optionsClassName="px-1.5">
{siblingIssuesList ? (
siblingIssuesList.length > 0 ? (
<>
<h2 className="mb-1 text-custom-text-200 text-xs font-medium px-2 pb-1 border-b border-custom-border-300">
Sibling issues
</h2>
{siblingIssuesList.map((issue) => (
<CustomMenu.MenuItem
key={issue.id}
renderAs="a"
feat : Tiptap integration (#1832) * remirror instances commented out to avoid prosemirror conflicts * styles migrated for remirror to tiptap transition * added bubblemenu support with extensions * fixed css for task lists and code with syntax highlighting * added support for slash command * fixed bubble menu to match styles and added better seperation in UI * saving with debounce logic added and it's stored in backend * added migration support by updating to html * Image uploads done * improved file structure and delete image function implemented * Integrated tiptap with Issue Modal * added additional props and Tiptap Integration with Comments * added tiptap integration with user activity feeds * added ref control support and bubble menu support for readonly editor * added tiptap support for plane pages * added tiptap support to gpt assistant modal (yet to be tested) * removed remirror instances and cleaned up code * improved code structure for extracting props in Tiptap * fixing ts errors for next build * fixing node ts error for Horizontal Rule * added ts fix for node types * temp fix * temp fix * added min height for issue description in modal * added resolutions to prosemirror-model version * trying pnpm overrides * explicitly added prosemirror deps * bugfixes * removed extra gap at the top and moved saved indicator to the bottom * fix: slash command scroll position * chore: update custom css variables * matched theme colours * fixed gpt-assistant modal * updated yarn lock * added debounced updates for the title and removed saved state after timeout * added css animations for saved state * build fixes and remove remirror instances * minor commenting fixes --------- Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-08-15 09:34:46 +00:00
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id
}`}
className="flex items-center gap-2 py-2"
>
<LayerDiagonalIcon className="h-4 w-4" />
{issueDetails.project_detail.identifier}-{issue.sequence_id}
</CustomMenu.MenuItem>
))}
</>
) : (
<p className="flex items-center gap-2 whitespace-nowrap px-1 text-left text-xs text-custom-text-200 py-1">
No sibling issues
</p>
)
) : null}
<CustomMenu.MenuItem
renderAs="button"
onClick={() => submitChanges({ parent: null })}
className="flex items-center gap-2 text-red-500 py-2"
>
<MinusCircleIcon className="h-4 w-4" />
<span> Remove Parent Issue</span>
</CustomMenu.MenuItem>
2023-06-19 18:09:47 +00:00
</CustomMenu>
</div>
) : null}
<IssueDescriptionForm
issue={issueDetails}
handleFormSubmit={submitChanges}
isAllowed={memberRole.isMember || memberRole.isOwner || !uneditable}
2023-06-19 18:09:47 +00:00
/>
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
2023-06-19 18:09:47 +00:00
<div className="mt-2 space-y-2">
<SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
2023-06-19 18:09:47 +00:00
</div>
</div>
<div className="flex flex-col gap-3 py-3">
<h3 className="text-lg">Attachments</h3>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
<IssueAttachmentUpload disabled={uneditable} />
2023-06-19 18:09:47 +00:00
<IssueAttachments />
</div>
</div>
<div className="space-y-5 pt-3">
<h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
<IssueActivitySection
issueId={(archivedIssueId as string) ?? (issueId as string)}
user={user}
/>
<AddComment
issueId={(archivedIssueId as string) ?? (issueId as string)}
user={user}
disabled={uneditable}
/>
2023-06-19 18:09:47 +00:00
</div>
</>
);
};