forked from github/plane
feat: Add peek overview in sub issues and updated UI for empty states. (#2263)
This commit is contained in:
parent
7db78594dc
commit
1ad99873a9
@ -1,6 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
// next imports
|
// next imports
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
// lucide icons
|
// lucide icons
|
||||||
import {
|
import {
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
@ -37,6 +38,7 @@ export interface ISubIssues {
|
|||||||
issueId: string,
|
issueId: string,
|
||||||
issue?: IIssue | null
|
issue?: IIssue | null
|
||||||
) => void;
|
) => void;
|
||||||
|
setPeekParentId: (id: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SubIssues: React.FC<ISubIssues> = ({
|
export const SubIssues: React.FC<ISubIssues> = ({
|
||||||
@ -52,7 +54,21 @@ export const SubIssues: React.FC<ISubIssues> = ({
|
|||||||
handleIssuesLoader,
|
handleIssuesLoader,
|
||||||
copyText,
|
copyText,
|
||||||
handleIssueCrudOperation,
|
handleIssueCrudOperation,
|
||||||
}) => (
|
setPeekParentId,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const openPeekOverview = (issue_id: string) => {
|
||||||
|
const { query } = router;
|
||||||
|
|
||||||
|
setPeekParentId(parentIssue?.id);
|
||||||
|
router.push({
|
||||||
|
pathname: router.pathname,
|
||||||
|
query: { ...query, peekIssue: issue_id },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
<div>
|
<div>
|
||||||
{issue && (
|
{issue && (
|
||||||
<div
|
<div
|
||||||
@ -82,8 +98,10 @@ export const SubIssues: React.FC<ISubIssues> = ({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
<div
|
||||||
<a className="w-full flex items-center gap-2">
|
className="w-full flex items-center gap-2 cursor-pointer"
|
||||||
|
onClick={() => openPeekOverview(issue?.id)}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
|
className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
|
||||||
style={{
|
style={{
|
||||||
@ -96,8 +114,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
|
|||||||
<Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
|
<Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
|
||||||
<div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
|
<div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</a>
|
</div>
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex-shrink-0 text-sm">
|
<div className="flex-shrink-0 text-sm">
|
||||||
<IssueProperty
|
<IssueProperty
|
||||||
@ -182,7 +199,9 @@ export const SubIssues: React.FC<ISubIssues> = ({
|
|||||||
handleIssuesLoader={handleIssuesLoader}
|
handleIssuesLoader={handleIssuesLoader}
|
||||||
copyText={copyText}
|
copyText={copyText}
|
||||||
handleIssueCrudOperation={handleIssueCrudOperation}
|
handleIssueCrudOperation={handleIssueCrudOperation}
|
||||||
|
setPeekParentId={setPeekParentId}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
@ -27,6 +27,7 @@ export interface ISubIssuesRootList {
|
|||||||
issueId: string,
|
issueId: string,
|
||||||
issue?: IIssue | null
|
issue?: IIssue | null
|
||||||
) => void;
|
) => void;
|
||||||
|
setPeekParentId: (id: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
|
export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
|
||||||
@ -41,6 +42,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
|
|||||||
handleIssuesLoader,
|
handleIssuesLoader,
|
||||||
copyText,
|
copyText,
|
||||||
handleIssueCrudOperation,
|
handleIssueCrudOperation,
|
||||||
|
setPeekParentId,
|
||||||
}) => {
|
}) => {
|
||||||
const { data: issues, isLoading } = useSWR(
|
const { data: issues, isLoading } = useSWR(
|
||||||
workspaceSlug && projectId && parentIssue && parentIssue?.id
|
workspaceSlug && projectId && parentIssue && parentIssue?.id
|
||||||
@ -81,6 +83,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
|
|||||||
handleIssuesLoader={handleIssuesLoader}
|
handleIssuesLoader={handleIssuesLoader}
|
||||||
copyText={copyText}
|
copyText={copyText}
|
||||||
handleIssueCrudOperation={handleIssueCrudOperation}
|
handleIssueCrudOperation={handleIssueCrudOperation}
|
||||||
|
setPeekParentId={setPeekParentId}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
@ -10,6 +10,7 @@ import { ExistingIssuesListModal } from "components/core";
|
|||||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||||
import { SubIssuesRootList } from "./issues-list";
|
import { SubIssuesRootList } from "./issues-list";
|
||||||
import { ProgressBar } from "./progressbar";
|
import { ProgressBar } from "./progressbar";
|
||||||
|
import { IssuePeekOverview } from "components/issues/peek-overview";
|
||||||
// ui
|
// ui
|
||||||
import { CustomMenu } from "components/ui";
|
import { CustomMenu } from "components/ui";
|
||||||
// hooks
|
// hooks
|
||||||
@ -41,7 +42,11 @@ export interface ISubIssuesRootLoadersHandler {
|
|||||||
|
|
||||||
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
|
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
|
const { workspaceSlug, projectId, peekIssue } = router.query as {
|
||||||
|
workspaceSlug: string;
|
||||||
|
projectId: string;
|
||||||
|
peekIssue: string;
|
||||||
|
};
|
||||||
|
|
||||||
const { memberRole } = useProjectMyMembership();
|
const { memberRole } = useProjectMyMembership();
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
@ -55,6 +60,8 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const [peekParentId, setPeekParentId] = React.useState<string | null>("");
|
||||||
|
|
||||||
const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
|
const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
|
||||||
visibility: [parentIssue?.id],
|
visibility: [parentIssue?.id],
|
||||||
delete: [],
|
delete: [],
|
||||||
@ -230,15 +237,12 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
|
|||||||
handleIssuesLoader={handleIssuesLoader}
|
handleIssuesLoader={handleIssuesLoader}
|
||||||
copyText={copyText}
|
copyText={copyText}
|
||||||
handleIssueCrudOperation={handleIssueCrudOperation}
|
handleIssueCrudOperation={handleIssueCrudOperation}
|
||||||
|
setPeekParentId={setPeekParentId}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
|
||||||
) : (
|
<div>
|
||||||
isEditable && (
|
|
||||||
<div className="text-xs py-2 text-custom-text-300 font-medium">
|
|
||||||
<div className="py-3 text-center">No sub issues are available</div>
|
|
||||||
<>
|
|
||||||
<CustomMenu
|
<CustomMenu
|
||||||
label={
|
label={
|
||||||
<>
|
<>
|
||||||
@ -268,7 +272,43 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
|
|||||||
Add an existing issue
|
Add an existing issue
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
</CustomMenu>
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
|
) : (
|
||||||
|
isEditable && (
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="text-xs py-2 text-custom-text-300 italic">No Sub-Issues yet</div>
|
||||||
|
<div>
|
||||||
|
<CustomMenu
|
||||||
|
label={
|
||||||
|
<>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
Add sub-issue
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
buttonClassName="whitespace-nowrap"
|
||||||
|
position="left"
|
||||||
|
noBorder
|
||||||
|
noChevron
|
||||||
|
>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
mutateSubIssues(parentIssue?.id);
|
||||||
|
handleIssueCrudOperation("create", parentIssue?.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Create new
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
<CustomMenu.MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
mutateSubIssues(parentIssue?.id);
|
||||||
|
handleIssueCrudOperation("existing", parentIssue?.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add an existing issue
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
@ -323,6 +363,13 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
|
|||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<IssuePeekOverview
|
||||||
|
handleMutation={() => peekParentId && peekIssue && mutateSubIssues(peekParentId)}
|
||||||
|
projectId={projectId ?? ""}
|
||||||
|
workspaceSlug={workspaceSlug ?? ""}
|
||||||
|
readOnly={!isEditable}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user