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 Aaryan Khandelwal
parent 97d9a40d2d
commit fe0e4433dd
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);

46
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,13 +88,18 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
const issueCycle = issueDetail?.issue_cycle;
const disableSelect = disabled || isUpdating;
return (
<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(value);
: handleCycleChange
? handleCycleChange(value)
: handleCycleStoreChange(value);
}}
options={options}
customButton={
@ -82,7 +108,7 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
<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" : ""
disableSelect ? "cursor-not-allowed" : ""
} max-w-[10rem]`}
>
<span
@ -99,7 +125,9 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
}
width="max-w-[10rem]"
noChevron
disabled={disabled}
disabled={disableSelect}
/>
{isUpdating && <Spinner className="w-4 h-4" />}
</div>
);
};

46
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,13 +78,18 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
const issueModule = issueDetail?.issue_module;
const disableSelect = disabled || isUpdating;
return (
<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(value);
: handleModuleChange
? handleModuleChange(value)
: handleModuleStoreChange(value);
}}
options={options}
customButton={
@ -75,7 +101,7 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
<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" : ""
disableSelect ? "cursor-not-allowed" : ""
} max-w-[10rem]`}
>
<span
@ -94,7 +120,9 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
}
width="max-w-[10rem]"
noChevron
disabled={disabled}
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;
}
};