fix: issues resolved in sub issues (#2238)

This commit is contained in:
guru_sainath 2023-09-21 19:12:20 +05:30 committed by GitHub
parent 978909c021
commit 73afb8f4d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 264 additions and 189 deletions

View File

@ -43,7 +43,7 @@ export const IssueMainContent: React.FC<Props> = ({
uneditable = false,
}) => {
const router = useRouter();
const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
const { workspaceSlug, projectId, issueId } = router.query;
const { setToastAlert } = useToast();
@ -206,7 +206,7 @@ export const IssueMainContent: React.FC<Props> = ({
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
<div className="mt-2 space-y-2">
<SubIssuesRoot parentIssue={issueDetails} user={user} editable={uneditable} />
<SubIssuesRoot parentIssue={issueDetails} user={user} />
</div>
</div>
<div className="flex flex-col gap-3 py-3">

View File

@ -16,9 +16,9 @@ import { SubIssuesRootList } from "./issues-list";
import { IssueProperty } from "./properties";
// ui
import { Tooltip, CustomMenu } from "components/ui";
// types
import { ICurrentUserResponse, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
export interface ISubIssues {
workspaceSlug: string;
@ -29,8 +29,8 @@ export interface ISubIssues {
user: ICurrentUserResponse | undefined;
editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
issuesVisibility: string[];
handleIssuesVisibility: (issueId: string) => void;
issuesLoader: ISubIssuesRootLoaders;
handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
copyText: (text: string) => void;
handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete",
@ -48,8 +48,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
user,
editable,
removeIssueFromSubIssues,
issuesVisibility,
handleIssuesVisibility,
issuesLoader,
handleIssuesLoader,
copyText,
handleIssueCrudOperation,
}) => (
@ -62,19 +62,21 @@ export const SubIssues: React.FC<ISubIssues> = ({
<div className="flex-shrink-0 w-[22px] h-[22px]">
{issue?.sub_issues_count > 0 && (
<>
{true ? (
{issuesLoader.sub_issues.includes(issue?.id) ? (
<div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
onClick={() => handleIssuesVisibility(issue?.id)}
onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
>
{issuesVisibility && issuesVisibility.includes(issue?.id) ? (
{issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
<ChevronDown width={14} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
) : (
<Loader width={14} strokeWidth={2} className="animate-spin" />
)}
</>
)}
@ -92,7 +94,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
{issue.project_detail.identifier}-{issue?.sequence_id}
</div>
<Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
<div className="line-clamp-1 text-xs text-custom-text-100">{issue?.name}</div>
<div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
</Tooltip>
</a>
</Link>
@ -132,7 +134,11 @@ export const SubIssues: React.FC<ISubIssues> = ({
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={copyText}>
<CustomMenu.MenuItem
onClick={() =>
copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
}
>
<div className="flex items-center justify-start gap-2">
<LinkIcon width={14} strokeWidth={2} />
<span>Copy issue link</span>
@ -142,17 +148,28 @@ export const SubIssues: React.FC<ISubIssues> = ({
</div>
{editable && (
<div
className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden"
onClick={() => removeIssueFromSubIssues(parentIssue?.id, issue)}
>
<X width={14} strokeWidth={2} />
</div>
<>
{issuesLoader.delete.includes(issue?.id) ? (
<div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
onClick={() => {
handleIssuesLoader({ key: "delete", issueId: issue?.id });
removeIssueFromSubIssues(parentIssue?.id, issue);
}}
>
<X width={14} strokeWidth={2} />
</div>
)}
</>
)}
</div>
)}
{issuesVisibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
{issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
<SubIssuesRootList
workspaceSlug={workspaceSlug}
projectId={projectId}
@ -161,8 +178,8 @@ export const SubIssues: React.FC<ISubIssues> = ({
user={user}
editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesVisibility={issuesVisibility}
handleIssuesVisibility={handleIssuesVisibility}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>

View File

@ -5,6 +5,7 @@ import useSWR from "swr";
import { SubIssues } from "./issue";
// types
import { ICurrentUserResponse, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
// services
import issuesService from "services/issues.service";
// fetch keys
@ -18,8 +19,8 @@ export interface ISubIssuesRootList {
user: ICurrentUserResponse | undefined;
editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
issuesVisibility: string[];
handleIssuesVisibility: (issueId: string) => void;
issuesLoader: ISubIssuesRootLoaders;
handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
copyText: (text: string) => void;
handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete",
@ -36,8 +37,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
user,
editable,
removeIssueFromSubIssues,
issuesVisibility,
handleIssuesVisibility,
issuesLoader,
handleIssuesLoader,
copyText,
handleIssueCrudOperation,
}) => {
@ -50,6 +51,16 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
: null
);
React.useEffect(() => {
if (isLoading) {
handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
} else {
if (issuesLoader.sub_issues.includes(parentIssue?.id)) {
handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
}
}
}, [isLoading]);
return (
<div className="relative">
{issues &&
@ -66,8 +77,8 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
user={user}
editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesVisibility={issuesVisibility}
handleIssuesVisibility={handleIssuesVisibility}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>

View File

@ -14,7 +14,7 @@ export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
<div className="w-full">
<div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
<div
className="bg-green-500 h-[6px] rounded-full"
className="bg-green-500 h-[6px] rounded-full transition-all"
style={{ width: `${calPercentage(done, total)}%` }}
/>
</div>

View File

@ -86,12 +86,14 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
};
const handleAssigneeChange = (data: any) => {
const newData = issue.assignees ?? [];
let newData = issue.assignees ?? [];
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
else newData.push(data);
if (newData && newData.length > 0) {
if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
else newData = [...newData, data];
} else newData = [...newData, data];
partialUpdateIssue({ assignees_list: data });
partialUpdateIssue({ assignees_list: data, assignees: data });
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{

View File

@ -14,6 +14,7 @@ import { ProgressBar } from "./progressbar";
import { CustomMenu } from "components/ui";
// hooks
import { useProjectMyMembership } from "contexts/project-member.context";
import useToast from "hooks/use-toast";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
@ -25,18 +26,27 @@ import { SUB_ISSUES } from "constants/fetch-keys";
export interface ISubIssuesRoot {
parentIssue: IIssue;
user: ICurrentUserResponse | undefined;
editable: boolean;
}
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, editable }) => {
export interface ISubIssuesRootLoaders {
visibility: string[];
delete: string[];
sub_issues: string[];
}
export interface ISubIssuesRootLoadersHandler {
key: "visibility" | "delete" | "sub_issues";
issueId: string;
}
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { memberRole } = useProjectMyMembership();
const { setToastAlert } = useToast();
const { data: issues } = useSWR(
const { data: issues, isLoading } = useSWR(
workspaceSlug && projectId && parentIssue && parentIssue?.id
? SUB_ISSUES(parentIssue?.id)
: null,
@ -45,13 +55,18 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
: null
);
const [issuesVisibility, setIssuesVisibility] = React.useState<string[]>([parentIssue?.id]);
const handleIssuesVisibility = (issueId: string) => {
if (issuesVisibility.includes(issueId)) {
setIssuesVisibility(issuesVisibility.filter((i: string) => i !== issueId));
} else {
setIssuesVisibility([...issuesVisibility, issueId]);
}
const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
visibility: [parentIssue?.id],
delete: [],
sub_issues: [],
});
const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => {
setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({
...previousData,
[key]: previousData[key].includes(issueId)
? previousData[key].filter((i: string) => i !== issueId)
: [...previousData[key], issueId],
}));
};
const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
@ -100,7 +115,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
const payload = {
sub_issue_ids: data.map((i) => i.id),
};
await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
if (issueId) mutate(SUB_ISSUES(issueId));
});
@ -110,8 +124,22 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
if (!workspaceSlug || !parentIssue || !issue?.id) return;
issuesService
.patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
.finally(() => {
if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
.then(async () => {
if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
handleIssuesLoader({ key: "delete", issueId: issue?.id });
setToastAlert({
type: "success",
title: `Issue removed!`,
message: `Issue removed successfully.`,
});
})
.catch(() => {
handleIssuesLoader({ key: "delete", issueId: issue?.id });
setToastAlert({
type: "warning",
title: `Error!`,
message: `Error, Please try again later.`,
});
});
};
@ -119,11 +147,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
const originURL =
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard(`${originURL}/${text}`).then(() => {
// setToastAlert({
// type: "success",
// title: "Link Copied!",
// message: "Issue link copied to clipboard.",
// });
setToastAlert({
type: "success",
title: "Link Copied!",
message: "Issue link copied to clipboard.",
});
});
};
@ -135,148 +163,165 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user, edi
return (
<div className="w-full h-full space-y-2">
{parentIssue && parentIssue?.sub_issues_count > 0 ? (
{!issues && isLoading ? (
<div className="py-3 text-center text-sm text-custom-text-300 font-medium">Loading...</div>
) : (
<>
{/* header */}
<div className="relative flex items-center gap-4 text-xs">
<div
className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
onClick={() => handleIssuesVisibility(parentIssue?.id)}
>
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
{issuesVisibility.includes(parentIssue?.id) ? (
<ChevronDown width={16} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
{issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
<>
{/* header */}
<div className="relative flex items-center gap-4 text-xs">
<div
className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
onClick={() =>
handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
}
>
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
{issuesLoader.visibility.includes(parentIssue?.id) ? (
<ChevronDown width={16} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
<div>Sub-issues</div>
<div>({issues?.sub_issues?.length || 0})</div>
</div>
<div className="w-full max-w-[250px] select-none">
<ProgressBar
total={issues?.sub_issues?.length || 0}
done={
(issues?.state_distribution?.cancelled || 0) +
(issues?.state_distribution?.completed || 0)
}
/>
</div>
{isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
<div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
>
Add sub-issue
</div>
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
>
Add an existing issue
</div>
</div>
)}
</div>
<div>Sub-issues</div>
<div>({parentIssue?.sub_issues_count})</div>
</div>
<div className="w-full max-w-[250px] select-none">
<ProgressBar
total={parentIssue?.sub_issues_count}
done={
(issues?.state_distribution?.cancelled || 0) +
(issues?.state_distribution?.completed || 0)
}
/>
</div>
{isEditable && issuesVisibility.includes(parentIssue?.id) && (
<div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
>
Add sub-issue
{/* issues */}
{issuesLoader.visibility.includes(parentIssue?.id) && (
<div className="border border-b-0 border-custom-border-100">
<SubIssuesRootList
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={parentIssue}
user={undefined}
editable={isEditable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>
</div>
<div
className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
>
Add an existing issue
</div>
</div>
)}
</div>
{/* issues */}
{issuesVisibility.includes(parentIssue?.id) && (
<div className="border border-b-0 border-custom-border-100">
<SubIssuesRootList
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={parentIssue}
user={undefined}
editable={isEditable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesVisibility={issuesVisibility}
handleIssuesVisibility={handleIssuesVisibility}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
/>
</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
label={
<>
<Plus className="h-3 w-3" />
Add sub-issue
</>
}
buttonClassName="whitespace-nowrap"
position="left"
noBorder
noChevron
>
<CustomMenu.MenuItem
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
>
Create new
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
)}
</>
</div>
)
)}
{isEditable && issueCrudOperation?.create?.toggle && (
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.create?.toggle}
prePopulateData={{
parent: issueCrudOperation?.create?.issueId,
}}
handleClose={() => handleIssueCrudOperation("create", null)}
/>
)}
{isEditable &&
issueCrudOperation?.existing?.toggle &&
issueCrudOperation?.existing?.issueId && (
<ExistingIssuesListModal
isOpen={issueCrudOperation?.existing?.toggle}
handleClose={() => handleIssueCrudOperation("existing", null)}
searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
handleOnSubmit={addAsSubIssueFromExistingIssues}
workspaceLevelToggle
/>
)}
{isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.edit?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.edit?.issueId);
handleIssueCrudOperation("edit", null, null);
}}
data={issueCrudOperation?.edit?.issue}
/>
)}
{isEditable && issueCrudOperation?.delete?.toggle && issueCrudOperation?.delete?.issueId && (
<DeleteIssueModal
isOpen={issueCrudOperation?.delete?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.delete?.issueId);
handleIssueCrudOperation("delete", null, null);
}}
data={issueCrudOperation?.delete?.issue}
user={user}
redirection={false}
/>
) : (
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
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>
)
)}
{isEditable && issueCrudOperation?.create?.toggle && (
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.create?.toggle}
prePopulateData={{
parent: issueCrudOperation?.create?.issueId,
}}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.create?.issueId);
handleIssueCrudOperation("create", null);
}}
/>
)}
{isEditable &&
issueCrudOperation?.existing?.toggle &&
issueCrudOperation?.existing?.issueId && (
<ExistingIssuesListModal
isOpen={issueCrudOperation?.existing?.toggle}
handleClose={() => handleIssueCrudOperation("existing", null)}
searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
handleOnSubmit={addAsSubIssueFromExistingIssues}
workspaceLevelToggle
/>
)}
{isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
<>
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.edit?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.edit?.issueId);
handleIssueCrudOperation("edit", null, null);
}}
data={issueCrudOperation?.edit?.issue}
/>
</>
)}
{isEditable &&
issueCrudOperation?.delete?.toggle &&
issueCrudOperation?.delete?.issueId && (
<DeleteIssueModal
isOpen={issueCrudOperation?.delete?.toggle}
handleClose={() => {
mutateSubIssues(issueCrudOperation?.delete?.issueId);
handleIssueCrudOperation("delete", null, null);
}}
data={issueCrudOperation?.delete?.issue}
user={user}
redirection={false}
/>
)}
</>
)}
</div>
);