thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: issue details page auth (#1331)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-06-19 23:39:47 +05:30 committed by GitHub
parent a3f6d61347
commit f2ebac1bb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 123 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/components/issues/index.ts
View File

@ -5,6 +5,7 @@ export * from "./activity";
export * from "./delete-issue-modal"; export * from "./delete-issue-modal";
export * from "./description-form"; export * from "./description-form";
export * from "./form"; export * from "./form";
export * from "./main-content";
export * from "./modal"; export * from "./modal";
export * from "./my-issues-list-item"; export * from "./my-issues-list-item";
export * from "./parent-issues-list-modal"; export * from "./parent-issues-list-modal";

118
apps/app/components/issues/main-content.tsx Normal file
View 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>
</>
);
};

100
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -1,14 +1,11 @@
import React, { useCallback, useEffect } from "react"; import React, { useCallback, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// react-hook-form // react-hook-form
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
// contexts
import { useProjectMyMembership } from "contexts/project-member.context";
// services // services
import issuesService from "services/issues.service"; import issuesService from "services/issues.service";
// hooks // hooks
@ -16,23 +13,15 @@ import useUserAuth from "hooks/use-user-auth";
// layouts // layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout"; import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
// components // components
import { import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
IssueDescriptionForm,
SubIssuesList,
IssueDetailsSidebar,
IssueActivitySection,
AddComment,
IssueAttachmentUpload,
IssueAttachments,
} from "components/issues";
// ui // ui
import { Loader, CustomMenu } from "components/ui"; import { Loader } from "components/ui";
import { Breadcrumbs } from "components/breadcrumbs"; import { Breadcrumbs } from "components/breadcrumbs";
// types // types
import { IIssue } from "types"; import { IIssue } from "types";
import type { NextPage } from "next"; import type { NextPage } from "next";
// fetch-keys // 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 = { const defaultValues = {
name: "", name: "",
@ -55,7 +44,6 @@ const IssueDetailsPage: NextPage = () => {
const { workspaceSlug, projectId, issueId } = router.query; const { workspaceSlug, projectId, issueId } = router.query;
const { user } = useUserAuth(); const { user } = useUserAuth();
const { memberRole } = useProjectMyMembership();
const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>( const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
@ -65,18 +53,6 @@ const IssueDetailsPage: NextPage = () => {
: null : 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>({ const { reset, control, watch } = useForm<IIssue>({
defaultValues, defaultValues,
}); });
@ -149,75 +125,7 @@ const IssueDetailsPage: NextPage = () => {
{issueDetails && projectId ? ( {issueDetails && projectId ? (
<div className="flex h-full"> <div className="flex h-full">
<div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5"> <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
<div className="rounded-lg"> <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
{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>
</div> </div>
<div className="basis-1/3 space-y-5 border-l border-brand-base p-5"> <div className="basis-1/3 space-y-5 border-l border-brand-base p-5">
<IssueDetailsSidebar <IssueDetailsSidebar