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

fix: bugs related to issues (#2995)

Browse Source 
* hide properties in list and kanban with 0 or nil values

* module and cycle mutation from peek overlay

* fix peek over view title change while switching

* fix create issue fetching

* fix build errors by mutating the values as well
This commit is contained in:
rahulramesha 2023-12-06 01:02:18 +05:30 committed by GitHub
parent aec50e2c48
commit ac18906604
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 193 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/issues/issue-layouts/kanban/properties.tsx
View File

@ -164,7 +164,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
{/* extra render properties */}
{/* sub-issues */}
{displayProperties && displayProperties?.sub_issue_count && (
{displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
<Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@ -174,7 +174,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
)}
{/* attachments */}
{displayProperties && displayProperties?.attachment_count && (
{displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@ -184,7 +184,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
)}
{/* link */}
{displayProperties && displayProperties?.link && (
{displayProperties && displayProperties?.link && !!issue?.link_count && (
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />

6
web/components/issues/issue-layouts/list/properties.tsx
View File

@ -135,7 +135,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
{/* extra render properties */}
{/* sub-issues */}
{displayProperties && displayProperties?.sub_issue_count && (
{displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
<Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@ -145,7 +145,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
)}
{/* attachments */}
{displayProperties && displayProperties?.attachment_count && (
{displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@ -155,7 +155,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
)}
{/* link */}
{displayProperties && displayProperties?.link && (
{displayProperties && displayProperties?.link && !!issue?.link_count && (
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />

10
web/components/issues/issue-peek-overview/issue-detail.tsx
View File

@ -60,8 +60,8 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
formState: { errors },
} = useForm<IIssue>({
defaultValues: {
name: "",
description_html: "",
name: issue.name,
description_html: issue.description_html,
},
});
@ -78,7 +78,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
[issue, issueUpdate]
);
const [localTitleValue, setLocalTitleValue] = useState("");
const [localTitleValue, setLocalTitleValue] = useState(issue.name);
const issueTitleCurrentValue = watch("name");
useEffect(() => {
if (localTitleValue === "" && issueTitleCurrentValue !== "") {
@ -86,6 +86,10 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
}
}, [issueTitleCurrentValue, localTitleValue]);
useEffect(() => {
setLocalTitleValue(issue.name);
}, [issue.name]);
const debouncedFormSave = debounce(async () => {
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
}, 1500);

26
web/components/issues/issue-peek-overview/properties.tsx
View File

@ -47,12 +47,13 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
const {
user: { currentProjectRole },
cycleIssues: { addIssueToCycle },
cycleIssues: cycleIssueStore,
moduleIssues: { addIssueToModule },
issueDetail: { fetchPeekIssueDetails },
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { setToastAlert } = useToast();
@ -77,17 +78,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
const handleParent = (_parent: string) => {
issueUpdate({ ...issue, parent: _parent });
};
const handleAddIssueToCycle = async (cycleId: string) => {
if (!workspaceSlug || !issue || !cycleId) return;
addIssueToCycle(workspaceSlug.toString(), cycleId, [issue.id]);
};
const handleAddIssueToModule = async (moduleId: string) => {
if (!workspaceSlug || !issue || !moduleId) return;
addIssueToModule(workspaceSlug.toString(), moduleId, [issue.id]);
};
const handleLabels = (formData: Partial<IIssue>) => {
issueUpdate({ ...issue, ...formData });
};
@ -147,6 +137,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
});
};
const handleCycleOrModuleChange = async () => {
if (!workspaceSlug || !projectId) return;
await fetchPeekIssueDetails(workspaceSlug, projectId, issue.id);
};
const handleEditLink = (link: ILinkDetails) => {
setSelectedLinkToUpdate(link);
setLinkModal(true);
@ -309,8 +305,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div>
<SidebarCycleSelect
issueDetail={issue}
handleCycleChange={handleAddIssueToCycle}
disabled={disableUserActions}
handleIssueUpdate={handleCycleOrModuleChange}
/>
</div>
</div>
@ -323,8 +319,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div>
<SidebarModuleSelect
issueDetail={issue}
handleModuleChange={handleAddIssueToModule}
disabled={disableUserActions}
handleIssueUpdate={handleCycleOrModuleChange}
/>
</div>
</div>

2
web/components/issues/modal.tsx
View File

@ -240,7 +240,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
if (handleSubmit) {
await handleSubmit(res);
} else {
if (viewId) currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);

104
web/components/issues/sidebar-select/cycle.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// mobx store
@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// services
import { CycleService } from "services/cycle.service";
// ui
import { ContrastIcon, CustomSearchSelect, Tooltip } from "@plane/ui";
import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui";
// types
import { IIssue } from "types";
// fetch-keys
@ -14,23 +14,26 @@ import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/f
type Props = {
issueDetail: IIssue | undefined;
handleCycleChange: (cycleId: string) => void;
handleCycleChange?: (cycleId: string) => void;
disabled?: boolean;
handleIssueUpdate?: () => void;
};
// services
const cycleService = new CycleService();
export const SidebarCycleSelect: React.FC<Props> = (props) => {
const { issueDetail, handleCycleChange, disabled = false } = props;
const { issueDetail, disabled = false, handleIssueUpdate, handleCycleChange } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// mobx store
const {
cycleIssues: { removeIssueFromCycle },
cycleIssues: { removeIssueFromCycle, addIssueToCycle },
} = useMobxStore();
const [isUpdating, setIsUpdating] = useState(false);
const { data: incompleteCycles } = useSWR(
workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
workspaceSlug && projectId
@ -38,17 +41,35 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
: null
);
const handleCycleStoreChange = async (cycleId: string) => {
if (!workspaceSlug || !issueDetail || !cycleId) return;
setIsUpdating(true);
await addIssueToCycle(workspaceSlug.toString(), cycleId, [issueDetail.id], false, projectId?.toString())
.then(async () => {
handleIssueUpdate && (await handleIssueUpdate());
})
.finally(() => {
setIsUpdating(false);
});
};
const handleRemoveIssueFromCycle = (bridgeId: string, cycleId: string) => {
if (!workspaceSlug || !projectId || !issueDetail) return;
setIsUpdating(true);
removeIssueFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId, issueDetail.id, bridgeId)
.then(() => {
.then(async () => {
handleIssueUpdate && (await handleIssueUpdate());
mutate(ISSUE_DETAILS(issueDetail.id));
mutate(CYCLE_ISSUES(cycleId));
})
.catch((e) => {
console.log(e);
})
.finally(() => {
setIsUpdating(false);
});
};
@ -67,39 +88,46 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
const issueCycle = issueDetail?.issue_cycle;
const disableSelect = disabled || isUpdating;
return (
<CustomSearchSelect
value={issueCycle?.cycle_detail.id}
onChange={(value: any) => {
value === issueCycle?.cycle_detail.id
? handleRemoveIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
: handleCycleChange(value);
}}
options={options}
customButton={
<div>
<Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
<button
type="button"
className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
disabled ? "cursor-not-allowed" : ""
} max-w-[10rem]`}
>
<span
className={`flex items-center gap-1.5 truncate ${
issueCycle ? "text-custom-text-100" : "text-custom-text-200"
}`}
<div className="flex items-center gap-1">
<CustomSearchSelect
value={issueCycle?.cycle_detail.id}
onChange={(value: any) => {
value === issueCycle?.cycle_detail.id
? handleRemoveIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
: handleCycleChange
? handleCycleChange(value)
: handleCycleStoreChange(value);
}}
options={options}
customButton={
<div>
<Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
<button
type="button"
className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
disableSelect ? "cursor-not-allowed" : ""
} max-w-[10rem]`}
>
<span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
<span className="truncate">{issueCycle ? issueCycle.cycle_detail.name : "No cycle"}</span>
</span>
</button>
</Tooltip>
</div>
}
width="max-w-[10rem]"
noChevron
disabled={disabled}
/>
<span
className={`flex items-center gap-1.5 truncate ${
issueCycle ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
<span className="truncate">{issueCycle ? issueCycle.cycle_detail.name : "No cycle"}</span>
</span>
</button>
</Tooltip>
</div>
}
width="max-w-[10rem]"
noChevron
disabled={disableSelect}
/>
{isUpdating && <Spinner className="w-4 h-4" />}
</div>
);
};

110
web/components/issues/sidebar-select/module.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { mutate } from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomSearchSelect, DiceIcon, Tooltip } from "@plane/ui";
import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
// types
import { IIssue } from "types";
// fetch-keys
@ -13,32 +13,53 @@ import { ISSUE_DETAILS, MODULE_ISSUES } from "constants/fetch-keys";
type Props = {
issueDetail: IIssue | undefined;
handleModuleChange: (moduleId: string) => void;
handleModuleChange?: (moduleId: string) => void;
disabled?: boolean;
handleIssueUpdate?: () => void;
};
export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
const { issueDetail, handleModuleChange, disabled = false } = props;
const { issueDetail, disabled = false, handleIssueUpdate, handleModuleChange } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// mobx store
const {
module: { projectModules },
moduleIssues: { removeIssueFromModule },
moduleIssues: { removeIssueFromModule, addIssueToModule },
} = useMobxStore();
const [isUpdating, setIsUpdating] = useState(false);
const handleModuleStoreChange = async (moduleId: string) => {
if (!workspaceSlug || !issueDetail || !moduleId) return;
setIsUpdating(true);
await addIssueToModule(workspaceSlug.toString(), moduleId, [issueDetail.id], false, projectId?.toString())
.then(async () => {
handleIssueUpdate && (await handleIssueUpdate());
})
.finally(() => {
setIsUpdating(false);
});
};
const handleRemoveIssueFromModule = (bridgeId: string, moduleId: string) => {
if (!workspaceSlug || !projectId || !issueDetail) return;
setIsUpdating(true);
removeIssueFromModule(workspaceSlug.toString(), projectId.toString(), moduleId, issueDetail.id, bridgeId)
.then(() => {
.then(async () => {
handleIssueUpdate && (await handleIssueUpdate());
mutate(ISSUE_DETAILS(issueDetail.id));
mutate(MODULE_ISSUES(moduleId));
})
.catch((e) => {
console.log(e);
})
.finally(() => {
setIsUpdating(false);
});
};
@ -57,44 +78,51 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
const issueModule = issueDetail?.issue_module;
const disableSelect = disabled || isUpdating;
return (
<CustomSearchSelect
value={issueModule?.module_detail.id}
onChange={(value: any) => {
value === issueModule?.module_detail.id
? handleRemoveIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
: handleModuleChange(value);
}}
options={options}
customButton={
<div>
<Tooltip
position="left"
tooltipContent={`${projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
>
<button
type="button"
className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
disabled ? "cursor-not-allowed" : ""
} max-w-[10rem]`}
<div className="flex items-center gap-1">
<CustomSearchSelect
value={issueModule?.module_detail.id}
onChange={(value: any) => {
value === issueModule?.module_detail.id
? handleRemoveIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
: handleModuleChange
? handleModuleChange(value)
: handleModuleStoreChange(value);
}}
options={options}
customButton={
<div>
<Tooltip
position="left"
tooltipContent={`${projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
>
<span
className={`flex items-center gap-1.5 truncate ${
issueModule ? "text-custom-text-100" : "text-custom-text-200"
}`}
<button
type="button"
className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
disableSelect ? "cursor-not-allowed" : ""
} max-w-[10rem]`}
>
<span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
<span className="truncate">
{projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
<span
className={`flex items-center gap-1.5 truncate ${
issueModule ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
<span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
<span className="truncate">
{projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
</span>
</span>
</span>
</button>
</Tooltip>
</div>
}
width="max-w-[10rem]"
noChevron
disabled={disabled}
/>
</button>
</Tooltip>
</div>
}
width="max-w-[10rem]"
noChevron
disabled={disableSelect}
/>
{isUpdating && <Spinner className="w-4 h-4" />}
</div>
);
});

2
web/components/profile/profile-issues.tsx
View File

@ -34,7 +34,7 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
async () => {
if (workspaceSlug && userId) {
await fetchFilters(workspaceSlug);
await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", type);
await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", undefined, type);
}
}
);

2
web/store/issues/profile/issue.store.ts
View File

@ -28,6 +28,7 @@ export interface IProfileIssuesStore {
workspaceSlug: string,
userId: string,
loadType: TLoader,
id?: string | undefined,
type?: "assigned" | "created" | "subscribed"
) => Promise<IIssueResponse>;
createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
@ -150,6 +151,7 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
workspaceSlug: string,
userId: string,
loadType: TLoader = "init-loader",
id?: string | undefined,
type?: "assigned" | "created" | "subscribed"
) => {
try {

21
web/store/issues/project-issues/cycle/issue.store.ts
View File

@ -53,7 +53,8 @@ export interface ICycleIssuesStore {
workspaceSlug: string,
cycleId: string,
issueIds: string[],
fetchAfterAddition?: boolean
fetchAfterAddition?: boolean,
projectId?: string
) => Promise<IIssue>;
removeIssueFromCycle: (
workspaceSlug: string,
@ -314,19 +315,27 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
}
};
addIssueToCycle = async (workspaceSlug: string, cycleId: string, issueIds: string[], fetchAfterAddition = true) => {
if (!this.currentProjectId) return;
addIssueToCycle = async (
workspaceSlug: string,
cycleId: string,
issueIds: string[],
fetchAfterAddition = true,
projectId?: string
) => {
if (!this.currentProjectId && !projectId) return;
const projectIdToUpdate: string = this.currentProjectId || projectId || "";
try {
const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, this.currentProjectId, cycleId, {
const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, projectIdToUpdate, cycleId, {
issues: issueIds,
});
if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
if (fetchAfterAddition) this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", cycleId);
return issueToCycle;
} catch (error) {
this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", cycleId);
throw error;
}
};

21
web/store/issues/project-issues/module/issue.store.ts
View File

@ -53,7 +53,8 @@ export interface IModuleIssuesStore {
workspaceSlug: string,
moduleId: string,
issueIds: string[],
fetchAfterAddition?: boolean
fetchAfterAddition?: boolean,
projectId?: string
) => Promise<any>;
removeIssueFromModule: (
workspaceSlug: string,
@ -306,19 +307,27 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
}
};
addIssueToModule = async (workspaceSlug: string, moduleId: string, issueIds: string[], fetchAfterAddition = true) => {
if (!this.currentProjectId) return;
addIssueToModule = async (
workspaceSlug: string,
moduleId: string,
issueIds: string[],
fetchAfterAddition = true,
projectId?: string
) => {
if (!this.currentProjectId && !projectId) return;
const projectIdToUpdate: string = this.currentProjectId || projectId || "";
try {
const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, this.currentProjectId, moduleId, {
const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, projectIdToUpdate, moduleId, {
issues: issueIds,
});
if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
if (fetchAfterAddition) this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", moduleId);
return issueToModule;
} catch (error) {
this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", moduleId);
throw error;
}
};