forked from github/plane
fix: issue details page auth (#1331)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
a3f6d61347
commit
f2ebac1bb4
@ -5,6 +5,7 @@ export * from "./activity";
|
||||
export * from "./delete-issue-modal";
|
||||
export * from "./description-form";
|
||||
export * from "./form";
|
||||
export * from "./main-content";
|
||||
export * from "./modal";
|
||||
export * from "./my-issues-list-item";
|
||||
export * from "./parent-issues-list-modal";
|
||||
|
||||
118
apps/app/components/issues/main-content.tsx
Normal file
118
apps/app/components/issues/main-content.tsx
Normal file
@ -0,0 +1,118 @@
|
||||
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,
|
||||
} from "components/issues";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
// fetch-keys
|
||||
import { SUB_ISSUES } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
issueDetails: IIssue;
|
||||
submitChanges: (formData: Partial<IIssue>) => Promise<void>;
|
||||
};
|
||||
|
||||
export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { user } = useUserAuth();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const { data: siblingIssues } = useSWR(
|
||||
workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
|
||||
workspaceSlug && projectId && issueDetails?.parent
|
||||
? () =>
|
||||
issuesService.subIssues(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueDetails.parent ?? ""
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-lg">
|
||||
{issueDetails?.parent && issueDetails.parent !== "" ? (
|
||||
<div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issueDetails.parent}`}>
|
||||
<a className="flex items-center gap-2 text-brand-secondary">
|
||||
<span
|
||||
className="block h-1.5 w-1.5 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issueDetails?.state_detail?.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0">
|
||||
{issueDetails.project_detail.identifier}-{issueDetails.parent_detail?.sequence_id}
|
||||
</span>
|
||||
<span className="truncate">
|
||||
{issueDetails.parent_detail?.name.substring(0, 50)}
|
||||
</span>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<CustomMenu ellipsis position="left">
|
||||
{siblingIssues && siblingIssues.length > 0 ? (
|
||||
siblingIssues.map((issue: IIssue) => (
|
||||
<CustomMenu.MenuItem key={issue.id}>
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`}
|
||||
>
|
||||
<a>
|
||||
{issueDetails.project_detail.identifier}-{issue.sequence_id}
|
||||
</a>
|
||||
</Link>
|
||||
</CustomMenu.MenuItem>
|
||||
))
|
||||
) : (
|
||||
<CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-brand-secondary">
|
||||
No other sibling issues
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
</div>
|
||||
) : null}
|
||||
<IssueDescriptionForm
|
||||
issue={issueDetails}
|
||||
handleFormSubmit={submitChanges}
|
||||
isAllowed={memberRole.isMember || memberRole.isOwner}
|
||||
/>
|
||||
<div className="mt-2 space-y-2">
|
||||
<SubIssuesList parentIssue={issueDetails} user={user} />
|
||||
</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 />
|
||||
<IssueAttachments />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-5 pt-3">
|
||||
<h3 className="text-lg text-brand-base">Comments/Activity</h3>
|
||||
<IssueActivitySection issueId={issueId as string} user={user} />
|
||||
<AddComment issueId={issueId as string} user={user} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,14 +1,11 @@
|
||||
import React, { useCallback, useEffect } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
// contexts
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
// hooks
|
||||
@ -16,23 +13,15 @@ import useUserAuth from "hooks/use-user-auth";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import {
|
||||
IssueDescriptionForm,
|
||||
SubIssuesList,
|
||||
IssueDetailsSidebar,
|
||||
IssueActivitySection,
|
||||
AddComment,
|
||||
IssueAttachmentUpload,
|
||||
IssueAttachments,
|
||||
} from "components/issues";
|
||||
import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
|
||||
// ui
|
||||
import { Loader, CustomMenu } from "components/ui";
|
||||
import { Loader } from "components/ui";
|
||||
import { Breadcrumbs } from "components/breadcrumbs";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
|
||||
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
const defaultValues = {
|
||||
name: "",
|
||||
@ -55,7 +44,6 @@ const IssueDetailsPage: NextPage = () => {
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { user } = useUserAuth();
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
|
||||
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
|
||||
@ -65,18 +53,6 @@ const IssueDetailsPage: NextPage = () => {
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: siblingIssues } = useSWR(
|
||||
workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
|
||||
workspaceSlug && projectId && issueDetails?.parent
|
||||
? () =>
|
||||
issuesService.subIssues(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueDetails.parent ?? ""
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const { reset, control, watch } = useForm<IIssue>({
|
||||
defaultValues,
|
||||
});
|
||||
@ -149,75 +125,7 @@ const IssueDetailsPage: NextPage = () => {
|
||||
{issueDetails && projectId ? (
|
||||
<div className="flex h-full">
|
||||
<div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
|
||||
<div className="rounded-lg">
|
||||
{issueDetails?.parent && issueDetails.parent !== "" ? (
|
||||
<div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
|
||||
issueDetails.parent
|
||||
}`}
|
||||
>
|
||||
<a className="flex items-center gap-2 text-brand-secondary">
|
||||
<span
|
||||
className="block h-1.5 w-1.5 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issueDetails?.state_detail?.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0">
|
||||
{issueDetails.project_detail.identifier}-
|
||||
{issueDetails.parent_detail?.sequence_id}
|
||||
</span>
|
||||
<span className="truncate">
|
||||
{issueDetails.parent_detail?.name.substring(0, 50)}
|
||||
</span>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<CustomMenu ellipsis position="left">
|
||||
{siblingIssues && siblingIssues.length > 0 ? (
|
||||
siblingIssues.map((issue: IIssue) => (
|
||||
<CustomMenu.MenuItem key={issue.id}>
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
|
||||
issue.id
|
||||
}`}
|
||||
>
|
||||
<a>
|
||||
{issueDetails.project_detail.identifier}-{issue.sequence_id}
|
||||
</a>
|
||||
</Link>
|
||||
</CustomMenu.MenuItem>
|
||||
))
|
||||
) : (
|
||||
<CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-brand-secondary">
|
||||
No other sibling issues
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
</div>
|
||||
) : null}
|
||||
<IssueDescriptionForm
|
||||
issue={issueDetails}
|
||||
handleFormSubmit={submitChanges}
|
||||
isAllowed={memberRole.isMember || memberRole.isOwner}
|
||||
/>
|
||||
<div className="mt-2 space-y-2">
|
||||
<SubIssuesList parentIssue={issueDetails} user={user} />
|
||||
</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 />
|
||||
<IssueAttachments />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-5 pt-3">
|
||||
<h3 className="text-lg text-brand-base">Comments/Activity</h3>
|
||||
<IssueActivitySection issueId={issueId as string} user={user} />
|
||||
<AddComment issueId={issueId as string} user={user} />
|
||||
</div>
|
||||
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
|
||||
</div>
|
||||
<div className="basis-1/3 space-y-5 border-l border-brand-base p-5">
|
||||
<IssueDetailsSidebar
|
||||
|
||||
Loading…
Reference in New Issue
Block a user