github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update in sub-issues component and property validation and issue loaders (#3375)

Browse Source 
* fix: handled undefined issue_id in list layout

* chore: refactor peek overview and user role validation.

* chore: sub issues

* fix: sub issues state distribution changed

* chore: sub_issues implementation in issue detail page

* chore: fixes in cycle/ module layout.
* Fix progress chart
* Module issues's update/ delete.
* Peek Overview for Modules/ Cycle.
* Fix Cycle Filters not applying bug.

---------

Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
guru_sainath 2024-01-16 12:46:03 +05:30 committed by GitHub
parent e9ef3fb32a
commit ec26bf6e68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 1136 additions and 1174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apiserver/plane/app/views/issue.py
View File

@ -82,7 +82,7 @@ from plane.db.models import (
from plane.bgtasks.issue_activites_task import issue_activity
from plane.utils.grouper import group_results
from plane.utils.issue_filters import issue_filters
from collections import defaultdict
class IssueViewSet(WebhookMixin, BaseViewSet):
def get_serializer_class(self):
@ -784,22 +784,13 @@ class SubIssuesEndpoint(BaseAPIView):
queryset=IssueReaction.objects.select_related("actor"),
)
)
.annotate(state_group=F("state__group"))
)
state_distribution = (
State.objects.filter(
workspace__slug=slug, state_issue__parent_id=issue_id
)
.annotate(state_group=F("group"))
.values("state_group")
.annotate(state_count=Count("state_group"))
.order_by("state_group")
)
result = {
item["state_group"]: item["state_count"]
for item in state_distribution
}
# create's a dict with state group name with their respective issue id's
result = defaultdict(list)
for sub_issue in sub_issues:
result[sub_issue.state_group].append(str(sub_issue.id))
serializer = IssueSerializer(
sub_issues,
@ -831,7 +822,7 @@ class SubIssuesEndpoint(BaseAPIView):
_ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids).annotate(state_group=F("state__group"))
# Track the issue
_ = [
@ -846,11 +837,24 @@ class SubIssuesEndpoint(BaseAPIView):
)
for sub_issue_id in sub_issue_ids
]
# create's a dict with state group name with their respective issue id's
result = defaultdict(list)
for sub_issue in updated_sub_issues:
result[sub_issue.state_group].append(str(sub_issue.id))
serializer = IssueSerializer(
updated_sub_issues,
many=True,
)
return Response(
IssueSerializer(updated_sub_issues, many=True).data,
{
"sub_issues": serializer.data,
"state_distribution": result,
},
status=status.HTTP_200_OK,
)
class IssueLinkViewSet(BaseViewSet):

10
packages/types/src/issues/issue_sub_issues.d.ts vendored
View File

@ -1,11 +1,11 @@
import { TIssue } from "./issue";
export type TSubIssuesStateDistribution = {
backlog: number;
unstarted: number;
started: number;
completed: number;
cancelled: number;
backlog: string[];
unstarted: string[];
started: string[];
completed: string[];
cancelled: string[];
};
export type TIssueSubIssues = {

2
web/components/core/sidebar/progress-chart.tsx
View File

@ -41,7 +41,7 @@ const DashedLine = ({ series, lineGenerator, xScale, yScale }: any) =>
));
const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, totalIssues }) => {
const chartData = Object.keys(distribution).map((key) => ({
const chartData = Object.keys(distribution ?? []).map((key) => ({
currentDate: renderFormattedDateWithoutYear(key),
pending: distribution[key],
}));

2
web/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -183,7 +183,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
)}
</Tab.Panel>
<Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
{distribution.labels.length > 0 ? (
{distribution?.labels.length > 0 ? (
distribution.labels.map((label, index) => (
<SingleProgressStats
key={label.label_id ?? `no-label-${index}`}

14
web/components/issues/description-form.tsx
View File

@ -78,10 +78,16 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
async (formData: Partial<TIssue>) => {
if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
await issueOperations.update(workspaceSlug, projectId, issueId, {
name: formData.name ?? "",
description_html: formData.description_html ?? "<p></p>",
});
await issueOperations.update(
workspaceSlug,
projectId,
issueId,
{
name: formData.name ?? "",
description_html: formData.description_html ?? "<p></p>",
},
false
);
},
[workspaceSlug, projectId, issueId, issueOperations]
);

2
web/components/issues/issue-detail/label/label-list-item.tsx
View File

@ -25,7 +25,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
const label = getLabelById(labelId);
const handleLabel = async () => {
if (issue) {
if (issue && !disabled) {
const currentLabels = issue.label_ids.filter((_labelId) => _labelId !== labelId);
await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
}

2
web/components/issues/issue-detail/links/root.tsx
View File

@ -107,7 +107,7 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
linkOperations={handleLinkOperations}
/>
<div className={`py-1 text-xs ${disabled ? "opacity-60" : ""}`}>
<div className="py-1 text-xs">
<div className="flex items-center justify-between gap-2">
<h4>Links</h4>
{!disabled && (

5
web/components/issues/issue-detail/main-content.tsx
View File

@ -87,10 +87,9 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
<SubIssuesRoot
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
parentIssueId={issueId}
currentUser={currentUser}
is_archived={is_archived}
is_editable={is_editable}
disabled={!is_editable}
/>
)}
</div>

4
web/components/issues/issue-detail/parent/siblings.tsx
View File

@ -23,10 +23,10 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
} = useIssueDetail();
const { isLoading } = useSWR(
peekIssue && parentIssue
peekIssue && parentIssue && parentIssue.project_id
? `ISSUE_PARENT_CHILD_ISSUES_${peekIssue?.workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
: null,
peekIssue && parentIssue
peekIssue && parentIssue && parentIssue.project_id
? () => fetchSubIssues(peekIssue?.workspaceSlug, parentIssue.project_id, parentIssue.id)
: null
);

47
web/components/issues/issue-detail/root.tsx
View File

@ -1,6 +1,7 @@
import { FC, useMemo } from "react";
import { useRouter } from "next/router";
// components
import { IssuePeekOverview } from "components/issues";
import { IssueMainContent } from "./main-content";
import { IssueDetailsSidebar } from "./sidebar";
// ui
@ -8,16 +9,23 @@ import { EmptyState } from "components/common";
// images
import emptyIssue from "public/empty-state/issue.svg";
// hooks
import { useIssueDetail, useUser } from "hooks/store";
import { useIssueDetail, useIssues, useUser } from "hooks/store";
import useToast from "hooks/use-toast";
// types
import { TIssue } from "@plane/types";
// constants
import { EUserProjectRoles } from "constants/project";
import { EIssuesStoreType } from "constants/issue";
export type TIssueOperations = {
fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
update: (
workspaceSlug: string,
projectId: string,
issueId: string,
data: Partial<TIssue>,
showToast?: boolean
) => Promise<void>;
remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
@ -47,6 +55,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
addIssueToModule,
removeIssueFromModule,
} = useIssueDetail();
const {
issues: { removeIssue: removeArchivedIssue },
} = useIssues(EIssuesStoreType.ARCHIVED);
const { setToastAlert } = useToast();
const {
membership: { currentProjectRole },
@ -61,14 +72,22 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
console.error("Error fetching the parent issue");
}
},
update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
update: async (
workspaceSlug: string,
projectId: string,
issueId: string,
data: Partial<TIssue>,
showToast: boolean = true
) => {
try {
await updateIssue(workspaceSlug, projectId, issueId, data);
setToastAlert({
title: "Issue updated successfully",
type: "success",
message: "Issue updated successfully",
});
if (showToast) {
setToastAlert({
title: "Issue updated successfully",
type: "success",
message: "Issue updated successfully",
});
}
} catch (error) {
setToastAlert({
title: "Issue update failed",
@ -79,7 +98,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
},
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
await removeIssue(workspaceSlug, projectId, issueId);
if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
else await removeIssue(workspaceSlug, projectId, issueId);
setToastAlert({
title: "Issue deleted successfully",
type: "success",
@ -159,9 +179,11 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
},
}),
[
is_archived,
fetchIssue,
updateIssue,
removeIssue,
removeArchivedIssue,
addIssueToCycle,
removeIssueFromCycle,
addIssueToModule,
@ -170,9 +192,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
]
);
// Issue details
// issue details
const issue = getIssueById(issueId);
// Check if issue is editable, based on user role
// checking if issue is editable, based on user role
const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
return (
@ -211,6 +233,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
</div>
</div>
)}
{/* peek overview */}
<IssuePeekOverview />
</>
);
};

8
web/components/issues/issue-detail/sidebar.tsx
View File

@ -162,7 +162,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
/>
)}
{/* {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
{(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
<button
type="button"
className="rounded-md border border-custom-border-200 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
@ -170,9 +170,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
>
<LinkIcon className="h-3.5 w-3.5" />
</button>
)} */}
)}
{/* {isAllowed && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && (
{is_editable && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && (
<button
type="button"
className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
@ -180,7 +180,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
>
<Trash2 className="h-3.5 w-3.5" />
</button>
)} */}
)}
</div>
</div>

4
web/components/issues/issue-layouts/list/roots/module-root.tsx
View File

@ -25,12 +25,12 @@ export const ModuleListLayout: React.FC = observer(() => {
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug || !moduleId) return;
await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, moduleId.toString());
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug || !moduleId) return;
await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
},
[EIssueActions.REMOVE]: async (issue: TIssue) => {
if (!workspaceSlug || !moduleId) return;

31
web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
View File

@ -13,6 +13,7 @@ import {
CycleKanBanLayout,
CycleListLayout,
CycleSpreadsheetLayout,
IssuePeekOverview,
} from "components/issues";
import { TransferIssues, TransferIssuesModal } from "components/cycles";
// ui
@ -73,19 +74,23 @@ export const CycleLayoutRoot: React.FC = observer(() => {
cycleId={cycleId.toString()}
/>
) : (
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (
<CycleListLayout />
) : activeLayout === "kanban" ? (
<CycleKanBanLayout />
) : activeLayout === "calendar" ? (
<CycleCalendarLayout />
) : activeLayout === "gantt_chart" ? (
<CycleGanttLayout />
) : activeLayout === "spreadsheet" ? (
<CycleSpreadsheetLayout />
) : null}
</div>
<>
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (
<CycleListLayout />
) : activeLayout === "kanban" ? (
<CycleKanBanLayout />
) : activeLayout === "calendar" ? (
<CycleCalendarLayout />
) : activeLayout === "gantt_chart" ? (
<CycleGanttLayout />
) : activeLayout === "spreadsheet" ? (
<CycleSpreadsheetLayout />
) : null}
</div>
{/* peek overview */}
<IssuePeekOverview />
</>
)}
</>
)}

32
web/components/issues/issue-layouts/roots/module-layout-root.tsx
View File

@ -6,6 +6,7 @@ import useSWR from "swr";
import { useIssues } from "hooks/store";
// components
import {
IssuePeekOverview,
ModuleAppliedFiltersRoot,
ModuleCalendarLayout,
ModuleEmptyState,
@ -16,6 +17,7 @@ import {
} from "components/issues";
// ui
import { Spinner } from "@plane/ui";
// constants
import { EIssuesStoreType } from "constants/issue";
export const ModuleLayoutRoot: React.FC = observer(() => {
@ -62,19 +64,23 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
moduleId={moduleId.toString()}
/>
) : (
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (
<ModuleListLayout />
) : activeLayout === "kanban" ? (
<ModuleKanBanLayout />
) : activeLayout === "calendar" ? (
<ModuleCalendarLayout />
) : activeLayout === "gantt_chart" ? (
<ModuleGanttLayout />
) : activeLayout === "spreadsheet" ? (
<ModuleSpreadsheetLayout />
) : null}
</div>
<>
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (
<ModuleListLayout />
) : activeLayout === "kanban" ? (
<ModuleKanBanLayout />
) : activeLayout === "calendar" ? (
<ModuleCalendarLayout />
) : activeLayout === "gantt_chart" ? (
<ModuleGanttLayout />
) : activeLayout === "spreadsheet" ? (
<ModuleSpreadsheetLayout />
) : null}
</div>
{/* peek overview */}
<IssuePeekOverview />
</>
)}
</>
)}

6
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View File

@ -30,7 +30,11 @@ export const ProjectLayoutRoot: FC = observer(() => {
useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null, async () => {
if (workspaceSlug && projectId) {
await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
await issues?.fetchIssues(workspaceSlug.toString(), projectId.toString(), issues?.groupedIssueIds ? "mutation" : "init-loader");
await issues?.fetchIssues(
workspaceSlug.toString(),
projectId.toString(),
issues?.groupedIssueIds ? "mutation" : "init-loader"
);
}
});

29
web/components/issues/issue-modal/form.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useState, useRef } from "react";
import React, { FC, useState, useRef, useEffect } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
@ -6,7 +6,7 @@ import { LayoutPanelTop, Sparkle, X } from "lucide-react";
// editor
import { RichTextEditorWithRef } from "@plane/rich-text-editor";
// hooks
import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
import { useApplication, useEstimate, useIssueDetail, useMention, useProject } from "hooks/store";
import useToast from "hooks/use-toast";
// services
import { AIService } from "services/ai.service";
@ -85,6 +85,9 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
const { getProjectById } = useProject();
const { areEstimatesEnabledForProject } = useEstimate();
const { mentionHighlights, mentionSuggestions } = useMention();
const {
issue: { getIssueById },
} = useIssueDetail();
// toast alert
const { setToastAlert } = useToast();
// form info
@ -179,6 +182,28 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
const projectDetails = getProjectById(projectId);
// executing this useEffect when the parent_id coming from the component prop
useEffect(() => {
const parentId = watch("parent_id") || undefined;
if (!parentId) return;
if (parentId === selectedParentIssue?.id || selectedParentIssue) return;
const issue = getIssueById(parentId);
if (!issue) return;
const projectDetails = getProjectById(issue.project_id);
if (!projectDetails) return;
setSelectedParentIssue({
id: issue.id,
name: issue.name,
project_id: issue.project_id,
project__identifier: projectDetails.identifier,
project__name: projectDetails.name,
sequence_id: issue.sequence_id,
} as ISearchIssueResponse);
}, [watch, getIssueById, getProjectById, selectedParentIssue]);
return (
<>
{projectId && (

80
web/components/issues/issue-modal/modal.tsx
View File

@ -18,7 +18,7 @@ export interface IssuesModalProps {
data?: Partial<TIssue>;
isOpen: boolean;
onClose: () => void;
onSubmit?: (res: Partial<TIssue>) => Promise<void>;
onSubmit?: (res: TIssue) => Promise<void>;
withDraftIssueWrapper?: boolean;
}
@ -58,52 +58,46 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
onClose();
};
const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
if (!workspaceSlug || !payload.project_id) return null;
const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
if (!workspaceSlug || !payload.project_id) return undefined;
await createIssue(workspaceSlug.toString(), payload.project_id, payload)
.then(async (res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
});
!createMore && handleClose();
return res;
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
try {
const response = await createIssue(workspaceSlug.toString(), payload.project_id, payload);
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
});
return null;
!createMore && handleClose();
return response;
} catch (error) {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
}
};
const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
if (!workspaceSlug || !payload.project_id || !data?.id) return null;
const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
if (!workspaceSlug || !payload.project_id || !data?.id) return undefined;
await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload)
.then((res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Issue updated successfully.",
});
handleClose();
return { ...payload, ...res };
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be updated. Please try again.",
});
try {
const response = await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload);
setToastAlert({
type: "success",
title: "Success!",
message: "Issue updated successfully.",
});
return null;
handleClose();
return response;
} catch (error) {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
}
};
const handleFormSubmit = async (formData: Partial<TIssue>) => {
@ -114,7 +108,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
description_html: formData.description_html ?? "<p></p>",
};
let res: TIssue | null = null;
let res: TIssue | undefined = undefined;
if (!data?.id) res = await handleCreateIssue(payload);
else res = await handleUpdateIssue(payload);
@ -126,7 +120,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
if (formData.module_id && res && (!data?.id || formData.module_id !== data?.module_id))
await addIssueToModule(workspaceSlug.toString(), formData.project_id, formData.module_id, [res.id]);
if (res && onSubmit) await onSubmit(res);
if (res != undefined && onSubmit) await onSubmit(res);
};
const handleFormChange = (formData: Partial<TIssue> | null) => setChangesMade(formData);

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

@ -1,133 +1,32 @@
import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import debounce from "lodash/debounce";
// packages
import { RichTextEditor } from "@plane/rich-text-editor";
import { FC } from "react";
// hooks
import { useMention, useProject, useUser } from "hooks/store";
import useReloadConfirmations from "hooks/use-reload-confirmation";
import { useIssueDetail, useProject, useUser } from "hooks/store";
// components
import { IssuePeekOverviewReactions } from "components/issues";
// ui
import { TextArea } from "@plane/ui";
// types
import { TIssue, IUser } from "@plane/types";
// services
import { FileService } from "services/file.service";
// constants
import { EUserProjectRoles } from "constants/project";
const fileService = new FileService();
import { IssueDescriptionForm, TIssueOperations } from "components/issues";
import { IssueReaction } from "../issue-detail/reactions";
interface IPeekOverviewIssueDetails {
workspaceSlug: string;
issue: TIssue;
issueReactions: any;
user: IUser | null;
issueUpdate: (issue: Partial<TIssue>) => void;
issueReactionCreate: (reaction: string) => void;
issueReactionRemove: (reaction: string) => void;
projectId: string;
issueId: string;
issueOperations: TIssueOperations;
is_archived: boolean;
disabled: boolean;
isSubmitting: "submitting" | "submitted" | "saved";
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
}
export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
const {
workspaceSlug,
issue,
issueReactions,
user,
issueUpdate,
issueReactionCreate,
issueReactionRemove,
isSubmitting,
setIsSubmitting,
} = props;
// states
const [characterLimit, setCharacterLimit] = useState(false);
const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const { mentionHighlights, mentionSuggestions } = useMention();
const { getProjectById } = useProject();
// derived values
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
// toast alert
const { setShowAlert } = useReloadConfirmations();
// form info
const { currentUser } = useUser();
const {
handleSubmit,
watch,
reset,
control,
formState: { errors },
} = useForm<TIssue>({
defaultValues: {
name: issue.name,
description_html: issue.description_html,
},
});
const handleDescriptionFormSubmit = useCallback(
async (formData: Partial<TIssue>) => {
if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
await issueUpdate({
...issue,
name: formData.name ?? "",
description_html: formData.description_html ?? "<p></p>",
});
},
[issue, issueUpdate]
);
const [localTitleValue, setLocalTitleValue] = useState("");
const [localIssueDescription, setLocalIssueDescription] = useState({
id: issue.id,
description_html: issue.description_html,
});
// adding issue.description_html or issue.name to dependency array causes
// editor rerendering on every save
useEffect(() => {
if (issue.id) {
setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
setLocalTitleValue(issue.name);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [issue.id]); // TODO: Verify the exhaustive-deps warning
// ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
// TODO: Verify the exhaustive-deps warning
// eslint-disable-next-line react-hooks/exhaustive-deps
const debouncedFormSave = useCallback(
debounce(async () => {
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
}, 1500),
[handleSubmit]
);
useEffect(() => {
if (isSubmitting === "submitted") {
setShowAlert(false);
setTimeout(async () => {
setIsSubmitting("saved");
}, 2000);
} else if (isSubmitting === "submitting") {
setShowAlert(true);
}
}, [isSubmitting, setShowAlert, setIsSubmitting]);
// reset form values
useEffect(() => {
if (!issue) return;
reset({
...issue,
});
}, [issue, reset]);
issue: { getIssueById },
} = useIssueDetail();
// derived values
const issue = getIssueById(issueId);
if (!issue) return <></>;
const projectDetails = getProjectById(issue?.project_id);
return (
@ -135,82 +34,24 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
<span className="text-base font-medium text-custom-text-400">
{projectDetails?.identifier}-{issue?.sequence_id}
</span>
<div className="relative">
{isAllowed ? (
<Controller
name="name"
control={control}
render={({ field: { onChange } }) => (
<TextArea
id="name"
name="name"
value={localTitleValue}
placeholder="Enter issue name"
onFocus={() => setCharacterLimit(true)}
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
setCharacterLimit(false);
setIsSubmitting("submitting");
setLocalTitleValue(e.target.value);
onChange(e.target.value);
debouncedFormSave();
}}
required={true}
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary"
hasError={Boolean(errors?.name)}
role="textbox"
disabled={!true}
/>
)}
/>
) : (
<h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
)}
{characterLimit && true && (
<div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
<span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
{watch("name").length}
</span>
/255
</div>
)}
</div>
<span>{errors.name ? errors.name.message : null}</span>
<div className="relative">
<Controller
name="description_html"
control={control}
render={({ field: { onChange } }) => (
<RichTextEditor
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
value={localIssueDescription.description_html}
rerenderOnPropsChange={localIssueDescription}
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
dragDropEnabled
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
noBorder={!isAllowed}
onChange={(description: Object, description_html: string) => {
setShowAlert(true);
setIsSubmitting("submitting");
onChange(description_html);
debouncedFormSave();
}}
mentionSuggestions={mentionSuggestions}
mentionHighlights={mentionHighlights}
/>
)}
/>
</div>
<IssuePeekOverviewReactions
issueReactions={issueReactions}
user={user}
issueReactionCreate={issueReactionCreate}
issueReactionRemove={issueReactionRemove}
<IssueDescriptionForm
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
setIsSubmitting={(value) => setIsSubmitting(value)}
isSubmitting={isSubmitting}
issue={issue}
issueOperations={issueOperations}
disabled={disabled}
/>
{currentUser && (
<IssueReaction
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
currentUser={currentUser}
/>
)}
</>
);
};

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

@ -1,61 +1,40 @@
import { FC } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { CalendarDays, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react";
// hooks
import { useProject, useUser } from "hooks/store";
import { useIssueDetail, useProject } from "hooks/store";
// ui icons
import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui";
import { IssueLinkRoot, IssueCycleSelect, IssueModuleSelect, IssueParentSelect, IssueLabel } from "components/issues";
import {
IssueLinkRoot,
IssueCycleSelect,
IssueModuleSelect,
IssueParentSelect,
IssueLabel,
TIssueOperations,
} from "components/issues";
import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
// components
import { CustomDatePicker } from "components/ui";
// types
import { TIssue, TIssuePriorities } from "@plane/types";
// constants
// import { EUserProjectRoles } from "constants/project";
interface IPeekOverviewProperties {
issue: TIssue;
issueUpdate: (issue: Partial<TIssue>) => void;
disableUserActions: boolean;
issueOperations: any;
workspaceSlug: string;
projectId: string;
issueId: string;
disabled: boolean;
issueOperations: TIssueOperations;
}
export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
const { issue, issueUpdate, disableUserActions, issueOperations } = props;
const { workspaceSlug, projectId, issueId, issueOperations, disabled } = props;
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const { getProjectById } = useProject();
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const uneditable = currentProjectRole ? [5, 10].includes(currentProjectRole) : false;
// const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const handleState = (_state: string) => {
issueUpdate({ ...issue, state_id: _state });
};
const handlePriority = (_priority: TIssuePriorities) => {
issueUpdate({ ...issue, priority: _priority });
};
const handleAssignee = (_assignees: string[]) => {
issueUpdate({ ...issue, assignee_ids: _assignees });
};
const handleEstimate = (_estimate: number | null) => {
issueUpdate({ ...issue, estimate_point: _estimate });
};
const handleStartDate = (_startDate: string | null) => {
issueUpdate({ ...issue, start_date: _startDate || undefined });
};
const handleTargetDate = (_targetDate: string | null) => {
issueUpdate({ ...issue, target_date: _targetDate || undefined });
};
const {
issue: { getIssueById },
} = useIssueDetail();
// derived values
const issue = getIssueById(issueId);
if (!issue) return <></>;
const projectDetails = getProjectById(issue.project_id);
const isEstimateEnabled = projectDetails?.estimate;
@ -68,7 +47,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
return (
<>
<div className="flex flex-col">
<div className="flex w-full flex-col gap-5 py-5">
<div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
{/* state */}
<div className="flex w-full items-center gap-2">
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
@ -77,10 +56,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div>
<div>
<StateDropdown
value={issue?.state_id || ""}
onChange={handleState}
projectId={issue.project_id}
disabled={disableUserActions}
value={issue?.state_id ?? undefined}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
projectId={projectId?.toString() ?? ""}
disabled={disabled}
buttonVariant="background-with-text"
/>
</div>
@ -94,14 +73,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div>
<div className="h-5 sm:w-1/2">
<ProjectMemberDropdown
value={issue.assignee_ids}
onChange={handleAssignee}
disabled={disableUserActions}
value={issue?.assignee_ids ?? undefined}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
disabled={disabled}
projectId={projectId?.toString() ?? ""}
placeholder="Assignees"
multiple
buttonVariant={issue.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
/>
</div>
</div>
@ -114,9 +93,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div>
<div className="h-5">
<PriorityDropdown
value={issue.priority || ""}
onChange={handlePriority}
disabled={disableUserActions}
value={issue?.priority || undefined}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
disabled={disabled}
buttonVariant="background-with-text"
/>
</div>
@ -131,10 +110,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div>
<div>
<EstimateDropdown
value={issue.estimate_point}
onChange={handleEstimate}
projectId={issue.project_id}
disabled={disableUserActions}
value={issue?.estimate_point || null}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
projectId={projectId}
disabled={disabled}
buttonVariant="background-with-text"
/>
</div>
@ -150,11 +129,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div>
<CustomDatePicker
placeholder="Start date"
value={issue.start_date}
onChange={handleStartDate}
className="!rounded border-none bg-custom-background-80 !px-2.5 !py-0.5"
value={issue.start_date || undefined}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })}
className="border-none bg-custom-background-80"
maxDate={maxDate ?? undefined}
disabled={disableUserActions}
disabled={disabled}
/>
</div>
</div>
@ -168,11 +147,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div>
<CustomDatePicker
placeholder="Due date"
value={issue.target_date}
onChange={handleTargetDate}
className="!rounded border-none bg-custom-background-80 !px-2.5 !py-0.5"
value={issue.target_date || undefined}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })}
className="border-none bg-custom-background-80"
minDate={minDate ?? undefined}
disabled={disableUserActions}
disabled={disabled}
/>
</div>
</div>
@ -185,11 +164,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div>
<div>
<IssueParentSelect
workspaceSlug={workspaceSlug?.toString() ?? ""}
projectId={projectId?.toString() ?? ""}
issueId={issue?.id}
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
disabled={disableUserActions}
disabled={disabled}
/>
</div>
</div>
@ -197,7 +176,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<span className="border-t border-custom-border-200" />
<div className="flex w-full flex-col gap-5 py-5">
<div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
{projectDetails?.cycle_view && (
<div className="flex w-full items-center gap-2">
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
@ -206,11 +185,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div>
<div>
<IssueCycleSelect
workspaceSlug={workspaceSlug?.toString() ?? ""}
projectId={projectId?.toString() ?? ""}
issueId={issue?.id}
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
disabled={disableUserActions}
disabled={disabled}
/>
</div>
</div>
@ -224,11 +203,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
</div>
<div>
<IssueModuleSelect
workspaceSlug={workspaceSlug?.toString() ?? ""}
projectId={projectId?.toString() ?? ""}
issueId={issue?.id}
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
disabled={disableUserActions}
disabled={disabled}
/>
</div>
</div>
@ -240,12 +219,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Label</p>
</div>
<div className="flex w-full flex-col gap-3">
<IssueLabel
workspaceSlug={workspaceSlug?.toString() ?? ""}
projectId={projectId?.toString() ?? ""}
issueId={issue?.id}
disabled={uneditable}
/>
<IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
</div>
</div>
</div>
@ -253,11 +227,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<span className="border-t border-custom-border-200" />
<div className="w-full pt-3">
<IssueLinkRoot
workspaceSlug={workspaceSlug?.toString() ?? ""}
projectId={projectId?.toString() ?? ""}
issueId={issue?.id}
/>
<IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
</div>
</div>
</>

177
web/components/issues/peek-overview/root.tsx
View File

@ -1,14 +1,10 @@
import { FC, Fragment, useEffect, useState, useMemo } from "react";
// router
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import useToast from "hooks/use-toast";
import { useIssueDetail, useIssues, useMember, useProject, useUser } from "hooks/store";
import { useIssueDetail, useIssues, useMember, useUser } from "hooks/store";
// components
import { IssueView } from "components/issues";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { TIssue } from "@plane/types";
// constants
@ -16,10 +12,20 @@ import { EUserProjectRoles } from "constants/project";
import { EIssuesStoreType } from "constants/issue";
interface IIssuePeekOverview {
isArchived?: boolean;
is_archived?: boolean;
onIssueUpdate?: (issue: Partial<TIssue>) => Promise<void>;
}
export type TIssuePeekOperations = {
fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
update: (
workspaceSlug: string,
projectId: string,
issueId: string,
data: Partial<TIssue>,
showToast?: boolean
) => Promise<void>;
remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
@ -27,17 +33,13 @@ export type TIssuePeekOperations = {
};
export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const { isArchived = false } = props;
// router
const router = useRouter();
const { is_archived = false, onIssueUpdate } = props;
// hooks
const {
project: {},
} = useMember();
const { currentProjectDetails } = useProject();
const { setToastAlert } = useToast();
const {
currentUser,
membership: { currentProjectRole },
} = useUser();
const {
@ -47,17 +49,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
peekIssue,
updateIssue,
removeIssue,
createComment,
updateComment,
removeComment,
createCommentReaction,
removeCommentReaction,
createReaction,
removeReaction,
createSubscription,
removeSubscription,
issue: { getIssueById, fetchIssue },
fetchActivities,
} = useIssueDetail();
const { addIssueToCycle, removeIssueFromCycle, addIssueToModule, removeIssueFromModule } = useIssueDetail();
// state
@ -74,6 +66,54 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const issueOperations: TIssuePeekOperations = useMemo(
() => ({
fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
await fetchIssue(workspaceSlug, projectId, issueId);
} catch (error) {
console.error("Error fetching the parent issue");
}
},
update: async (
workspaceSlug: string,
projectId: string,
issueId: string,
data: Partial<TIssue>,
showToast: boolean = true
) => {
try {
const response = await updateIssue(workspaceSlug, projectId, issueId, data);
if (onIssueUpdate) await onIssueUpdate(response);
if (showToast)
setToastAlert({
title: "Issue updated successfully",
type: "success",
message: "Issue updated successfully",
});
} catch (error) {
setToastAlert({
title: "Issue update failed",
type: "error",
message: "Issue update failed",
});
}
},
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
else await removeIssue(workspaceSlug, projectId, issueId);
setToastAlert({
title: "Issue deleted successfully",
type: "success",
message: "Issue deleted successfully",
});
} catch (error) {
setToastAlert({
title: "Issue delete failed",
type: "error",
message: "Issue delete failed",
});
}
},
addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
try {
await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
@ -139,73 +179,27 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
}
},
}),
[addIssueToCycle, removeIssueFromCycle, addIssueToModule, removeIssueFromModule, setToastAlert]
[
is_archived,
fetchIssue,
updateIssue,
removeIssue,
removeArchivedIssue,
addIssueToCycle,
removeIssueFromCycle,
addIssueToModule,
removeIssueFromModule,
setToastAlert,
onIssueUpdate,
]
);
if (!peekIssue?.workspaceSlug || !peekIssue?.projectId || !peekIssue?.issueId) return <></>;
const issue = getIssueById(peekIssue.issueId) || undefined;
const redirectToIssueDetail = () => {
router.push({
pathname: `/${peekIssue.workspaceSlug}/projects/${peekIssue.projectId}/${
isArchived ? "archived-issues" : "issues"
}/${peekIssue.issueId}`,
});
};
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
e.preventDefault();
copyUrlToClipboard(
`${peekIssue.workspaceSlug}/projects/${peekIssue.projectId}/${isArchived ? "archived-issues" : "issues"}/${
peekIssue.issueId
}`
).then(() => {
setToastAlert({
type: "success",
title: "Link Copied!",
message: "Issue link copied to clipboard.",
});
});
};
const issueUpdate = async (_data: Partial<TIssue>) => {
if (!issue) return;
await updateIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, _data);
fetchActivities(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
};
const issueDelete = async () => {
if (!issue) return;
if (isArchived) await removeArchivedIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
else await removeIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
};
const issueReactionCreate = (reaction: string) =>
createReaction(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, reaction);
const issueReactionRemove = (reaction: string) =>
currentUser &&
currentUser.id &&
removeReaction(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, reaction, currentUser.id);
const issueCommentCreate = (comment: any) =>
createComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, comment);
const issueCommentUpdate = (comment: any) =>
updateComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, comment?.id, comment);
const issueCommentRemove = (commentId: string) =>
removeComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, commentId);
const issueCommentReactionCreate = (commentId: string, reaction: string) =>
createCommentReaction(peekIssue.workspaceSlug, peekIssue.projectId, commentId, reaction);
const issueCommentReactionRemove = (commentId: string, reaction: string) =>
removeCommentReaction(peekIssue.workspaceSlug, peekIssue.projectId, commentId, reaction);
const issueSubscriptionCreate = () =>
createSubscription(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
const issueSubscriptionRemove = () =>
removeSubscription(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
const userRole = currentProjectRole ?? EUserProjectRoles.GUEST;
// Check if issue is editable, based on user role
const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const isLoading = !issue || loader ? true : false;
return (
@ -215,23 +209,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
projectId={peekIssue.projectId}
issueId={peekIssue.issueId}
isLoading={isLoading}
isArchived={isArchived}
issue={issue}
handleCopyText={handleCopyText}
redirectToIssueDetail={redirectToIssueDetail}
issueUpdate={issueUpdate}
issueDelete={issueDelete}
issueReactionCreate={issueReactionCreate}
issueReactionRemove={issueReactionRemove}
issueCommentCreate={issueCommentCreate}
issueCommentUpdate={issueCommentUpdate}
issueCommentRemove={issueCommentRemove}
issueCommentReactionCreate={issueCommentReactionCreate}
issueCommentReactionRemove={issueCommentReactionRemove}
issueSubscriptionCreate={issueSubscriptionCreate}
issueSubscriptionRemove={issueSubscriptionRemove}
disableUserActions={[5, 10].includes(userRole)}
showCommentAccessSpecifier={currentProjectDetails?.is_deployed}
is_archived={is_archived}
disabled={!is_editable}
issueOperations={issueOperations}
/>
</Fragment>

210
web/components/issues/peek-overview/view.tsx
View File

@ -1,54 +1,36 @@
import { FC, useRef, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
import { MoveRight, MoveDiagonal, Link2, Trash2 } from "lucide-react";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// store hooks
import { useIssueDetail, useUser } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import {
DeleteArchivedIssueModal,
DeleteIssueModal,
IssueActivity,
IssueSubscription,
IssueUpdateStatus,
PeekOverviewIssueDetails,
PeekOverviewProperties,
TIssueOperations,
} from "components/issues";
// ui
import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
// types
import { TIssue } from "@plane/types";
import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
interface IIssueView {
workspaceSlug: string;
projectId: string;
issueId: string;
isLoading?: boolean;
isArchived?: boolean;
issue: TIssue | undefined;
handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
redirectToIssueDetail: () => void;
issueUpdate: (issue: Partial<TIssue>) => void;
issueDelete: () => Promise<void>;
issueReactionCreate: (reaction: string) => void;
issueReactionRemove: (reaction: string) => void;
issueCommentCreate: (comment: any) => void;
issueCommentUpdate: (comment: any) => void;
issueCommentRemove: (commentId: string) => void;
issueCommentReactionCreate: (commentId: string, reaction: string) => void;
issueCommentReactionRemove: (commentId: string, reaction: string) => void;
issueSubscriptionCreate: () => void;
issueSubscriptionRemove: () => void;
disableUserActions?: boolean;
showCommentAccessSpecifier?: boolean;
issueOperations: any;
is_archived: boolean;
disabled?: boolean;
issueOperations: TIssueOperations;
}
type TPeekModes = "side-peek" | "modal" | "full-screen";
@ -72,79 +54,68 @@ const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
];
export const IssueView: FC<IIssueView> = observer((props) => {
const {
workspaceSlug,
projectId,
issueId,
issue,
isLoading,
isArchived,
handleCopyText,
redirectToIssueDetail,
issueUpdate,
issueReactionCreate,
issueReactionRemove,
issueCommentCreate,
issueCommentUpdate,
issueCommentRemove,
issueCommentReactionCreate,
issueCommentReactionRemove,
issueSubscriptionCreate,
issueSubscriptionRemove,
issueDelete,
disableUserActions = false,
showCommentAccessSpecifier = false,
issueOperations,
} = props;
const { workspaceSlug, projectId, issueId, isLoading, is_archived, disabled = false, issueOperations } = props;
// router
const router = useRouter();
// states
const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
// ref
const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
// store hooks
const {
activity,
reaction,
subscription,
setPeekIssue,
isAnyModalOpen,
isDeleteIssueModalOpen,
toggleDeleteIssueModal,
} = useIssueDetail();
const { activity, setPeekIssue, isAnyModalOpen, isDeleteIssueModalOpen, toggleDeleteIssueModal } = useIssueDetail();
const { currentUser } = useUser();
const {
issue: { getIssueById },
} = useIssueDetail();
const { setToastAlert } = useToast();
// derived values
const issueActivity = activity.getActivitiesByIssueId(issueId);
const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
const issue = getIssueById(issueId);
const removeRoutePeekId = () => {
setPeekIssue(undefined);
};
const issueReactions = reaction.getReactionsByIssueId(issueId) || [];
const issueActivity = activity.getActivitiesByIssueId(issueId);
const issueSubscription = subscription.getSubscriptionByIssueId(issueId) || {};
const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
useOutsideClickDetector(issuePeekOverviewRef, () => !isAnyModalOpen && removeRoutePeekId());
const redirectToIssueDetail = () => {
router.push({
pathname: `/${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`,
});
};
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
e.preventDefault();
copyUrlToClipboard(
`${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`
).then(() => {
setToastAlert({
type: "success",
title: "Link Copied!",
message: "Issue link copied to clipboard.",
});
});
};
return (
<>
{issue && !isArchived && (
{issue && !is_archived && (
<DeleteIssueModal
isOpen={isDeleteIssueModalOpen}
handleClose={() => toggleDeleteIssueModal(false)}
data={issue}
onSubmit={issueDelete}
onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
/>
)}
{issue && isArchived && (
{issue && is_archived && (
<DeleteArchivedIssueModal
data={issue}
isOpen={isDeleteIssueModalOpen}
handleClose={() => toggleDeleteIssueModal(false)}
onSubmit={issueDelete}
onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
/>
)}
@ -208,27 +179,18 @@ export const IssueView: FC<IIssueView> = observer((props) => {
<div className="flex items-center gap-x-4">
<IssueUpdateStatus isSubmitting={isSubmitting} />
<div className="flex items-center gap-4">
{issue?.created_by !== currentUser?.id &&
!issue?.assignee_ids.includes(currentUser?.id ?? "") &&
!issue?.archived_at && (
<Button
size="sm"
prependIcon={<Bell className="h-3 w-3" />}
variant="outline-primary"
className="hover:!bg-custom-primary-100/20"
onClick={() =>
issueSubscription && issueSubscription.subscribed
? issueSubscriptionRemove()
: issueSubscriptionCreate()
}
>
{issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
</Button>
)}
{currentUser && !is_archived && (
<IssueSubscription
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
currentUserId={currentUser?.id}
/>
)}
<button onClick={handleCopyText}>
<Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
</button>
{!disableUserActions && (
{!disabled && (
<button onClick={() => toggleDeleteIssueModal(true)}>
<Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
</button>
@ -248,29 +210,29 @@ export const IssueView: FC<IIssueView> = observer((props) => {
<>
{["side-peek", "modal"].includes(peekMode) ? (
<div className="relative flex flex-col gap-3 px-8 py-5">
{isArchived && (
{is_archived && (
<div className="absolute left-0 top-0 z-[9] flex h-full min-h-full w-full items-center justify-center bg-custom-background-100 opacity-60" />
)}
<PeekOverviewIssueDetails
setIsSubmitting={(value) => setIsSubmitting(value)}
isSubmitting={isSubmitting}
workspaceSlug={workspaceSlug}
issue={issue}
issueUpdate={issueUpdate}
issueReactions={issueReactions}
user={currentUser}
issueReactionCreate={issueReactionCreate}
issueReactionRemove={issueReactionRemove}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
is_archived={is_archived}
disabled={disabled}
isSubmitting={isSubmitting}
setIsSubmitting={(value) => setIsSubmitting(value)}
/>
<PeekOverviewProperties
issue={issue}
issueUpdate={issueUpdate}
disableUserActions={disableUserActions}
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
disabled={disabled}
/>
<IssueActivity
{/* <IssueActivity
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
@ -282,25 +244,24 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issueCommentReactionCreate={issueCommentReactionCreate}
issueCommentReactionRemove={issueCommentReactionRemove}
showCommentAccessSpecifier={showCommentAccessSpecifier}
/>
/> */}
</div>
) : (
<div className={`flex h-full w-full overflow-auto ${isArchived ? "opacity-60" : ""}`}>
<div className={`flex h-full w-full overflow-auto ${is_archived ? "opacity-60" : ""}`}>
<div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
<div className={isArchived ? "pointer-events-none" : ""}>
<div className={is_archived ? "pointer-events-none" : ""}>
<PeekOverviewIssueDetails
setIsSubmitting={(value) => setIsSubmitting(value)}
isSubmitting={isSubmitting}
workspaceSlug={workspaceSlug}
issue={issue}
issueReactions={issueReactions}
issueUpdate={issueUpdate}
user={currentUser}
issueReactionCreate={issueReactionCreate}
issueReactionRemove={issueReactionRemove}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
is_archived={is_archived}
disabled={disabled}
isSubmitting={isSubmitting}
setIsSubmitting={(value) => setIsSubmitting(value)}
/>
<IssueActivity
{/* <IssueActivity
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
@ -312,19 +273,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issueCommentReactionCreate={issueCommentReactionCreate}
issueCommentReactionRemove={issueCommentReactionRemove}
showCommentAccessSpecifier={showCommentAccessSpecifier}
/>
/> */}
</div>
</div>
<div
className={`h-full !w-[400px] flex-shrink-0 border-l border-custom-border-200 p-4 py-5 ${
isArchived ? "pointer-events-none" : ""
is_archived ? "pointer-events-none" : ""
}`}
>
<PeekOverviewProperties
issue={issue}
issueUpdate={issueUpdate}
disableUserActions={disableUserActions}
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
issueOperations={issueOperations}
disabled={disabled}
/>
</div>
</div>

199
web/components/issues/sub-issues/issue-list-item.tsx Normal file
View File

@ -0,0 +1,199 @@
import React from "react";
import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
// components
import { IssueList } from "./issues-list";
import { IssueProperty } from "./properties";
// ui
import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
// types
import { TIssue } from "@plane/types";
import { TSubIssueOperations } from "./root";
// import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
import { useIssueDetail, useProject, useProjectState } from "hooks/store";
import { observer } from "mobx-react-lite";
export interface ISubIssues {
workspaceSlug: string;
projectId: string;
parentIssueId: string;
spacingLeft: number;
disabled: boolean;
handleIssueCrudState: (
key: "create" | "existing" | "update" | "delete",
issueId: string,
issue?: TIssue | null
) => void;
subIssueOperations: TSubIssueOperations;
issueId: string;
}
export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
const {
workspaceSlug,
projectId,
parentIssueId,
spacingLeft = 10,
disabled,
handleIssueCrudState,
subIssueOperations,
issueId,
} = props;
const {
setPeekIssue,
issue: { getIssueById },
subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
} = useIssueDetail();
const project = useProject();
const { getProjectStates } = useProjectState();
const issue = getIssueById(issueId);
const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
const currentIssueStateDetail =
(issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
undefined;
const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId);
const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug &&
issue &&
issue.project_id &&
issue.id &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
if (!issue) return <></>;
return (
<div key={issueId}>
{issue && (
<div
className="group relative flex h-full w-full items-center gap-2 border-b border-custom-border-100 px-2 py-1 transition-all hover:bg-custom-background-90"
style={{ paddingLeft: `${spacingLeft}px` }}
>
<div className="h-[22px] w-[22px] flex-shrink-0">
{issue?.sub_issues_count > 0 && (
<>
{subIssueHelpers.preview_loader.includes(issue.id) ? (
<div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-sm bg-custom-background-80 transition-all">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="flex h-full w-full cursor-pointer items-center justify-center rounded-sm transition-all hover:bg-custom-background-80"
onClick={() => {
setSubIssueHelpers(parentIssueId, "preview_loader", issue.id);
setSubIssueHelpers(parentIssueId, "issue_visibility", issue.id);
}}
>
{subIssueHelpers.issue_visibility.includes(issue.id) ? (
<ChevronDown width={14} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
)}
</>
)}
</div>
<div className="flex w-full cursor-pointer items-center gap-2">
<div
className="h-[6px] w-[6px] flex-shrink-0 rounded-full"
style={{
backgroundColor: currentIssueStateDetail?.color,
}}
/>
<div className="flex-shrink-0 text-xs text-custom-text-200">
{projectDetail?.identifier}-{issue?.sequence_id}
</div>
<ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
>
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
</ControlLink>
</div>
<div className="flex-shrink-0 text-sm">
<IssueProperty
workspaceSlug={workspaceSlug}
parentIssueId={parentIssueId}
issueId={issueId}
disabled={disabled}
subIssueOperations={subIssueOperations}
/>
</div>
<div className="flex-shrink-0 text-sm">
<CustomMenu width="auto" placement="bottom-end" ellipsis>
{disabled && (
<CustomMenu.MenuItem onClick={() => handleIssueCrudState("update", parentIssueId, issue)}>
<div className="flex items-center gap-2">
<Pencil className="h-3.5 w-3.5" strokeWidth={2} />
<span>Edit issue</span>
</div>
</CustomMenu.MenuItem>
)}
{disabled && (
<CustomMenu.MenuItem onClick={() => handleIssueCrudState("delete", parentIssueId, issue)}>
<div className="flex items-center gap-2">
<Trash className="h-3.5 w-3.5" strokeWidth={2} />
<span>Delete issue</span>
</div>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem
onClick={() =>
subIssueOperations.copyText(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`)
}
>
<div className="flex items-center gap-2">
<LinkIcon className="h-3.5 w-3.5" strokeWidth={2} />
<span>Copy issue link</span>
</div>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
{disabled && (
<>
{subIssueHelpers.issue_loader.includes(issue.id) ? (
<div className="flex h-[22px] w-[22px] flex-shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-sm transition-all">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="invisible flex h-[22px] w-[22px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80 group-hover:visible"
onClick={() => {
subIssueOperations.removeSubIssue(workspaceSlug, issue.project_id, parentIssueId, issue.id);
}}
>
<X width={14} strokeWidth={2} />
</div>
)}
</>
)}
</div>
)}
{subIssueHelpers.issue_visibility.includes(issueId) && issue.sub_issues_count && issue.sub_issues_count > 0 && (
<IssueList
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
parentIssueId={issue.id}
spacingLeft={spacingLeft + 22}
disabled={disabled}
handleIssueCrudState={handleIssueCrudState}
subIssueOperations={subIssueOperations}
/>
)}
</div>
);
});

192
web/components/issues/sub-issues/issue.tsx
View File

@ -1,192 +0,0 @@
import React from "react";
import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
// components
import { SubIssuesRootList } from "./issues-list";
import { IssueProperty } from "./properties";
// ui
import { CustomMenu, Tooltip } from "@plane/ui";
// types
import { IUser, TIssue, TIssueSubIssues } from "@plane/types";
// import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
import { useIssueDetail, useProject, useProjectState } from "hooks/store";
export interface ISubIssues {
workspaceSlug: string;
projectId: string;
parentIssue: TIssue;
issueId: string;
handleIssue: {
fetchIssues: (issueId: string) => Promise<TIssueSubIssues>;
updateIssue: (issueId: string, data: Partial<TIssue>) => Promise<TIssue>;
removeIssue: (issueId: string) => Promise<any>;
};
spacingLeft?: number;
user: IUser | undefined;
editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: TIssue) => void;
issuesLoader: any; // FIXME: ISubIssuesRootLoaders replace with any
handleIssuesLoader: ({ key, issueId }: any) => void; // FIXME: ISubIssuesRootLoadersHandler replace with any
copyText: (text: string) => void;
handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete",
issueId: string,
issue?: TIssue | null
) => void;
handleUpdateIssue: (issue: TIssue, data: Partial<TIssue>) => void;
}
export const SubIssues: React.FC<ISubIssues> = ({
workspaceSlug,
projectId,
parentIssue,
issueId,
spacingLeft = 0,
user,
editable,
removeIssueFromSubIssues,
issuesLoader,
handleIssuesLoader,
copyText,
handleIssueCrudOperation,
handleUpdateIssue,
}) => {
const {
issue: { getIssueById },
} = useIssueDetail();
const project = useProject();
const { getProjectStates } = useProjectState();
const issue = getIssueById(issueId);
const projectDetail = project.getProjectById(projectId);
const currentIssueStateDetail =
(issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
undefined;
return (
<>
<div>
{issue && (
<div
className="group relative flex h-full w-full items-center gap-2 border-b border-custom-border-100 px-2 py-1 transition-all hover:bg-custom-background-90"
style={{ paddingLeft: `${spacingLeft}px` }}
>
<div className="h-[22px] w-[22px] flex-shrink-0">
{issue?.sub_issues_count > 0 && (
<>
{issuesLoader.sub_issues.includes(issue?.id) ? (
<div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-sm bg-custom-background-80 transition-all">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="flex h-full w-full cursor-pointer items-center justify-center rounded-sm transition-all hover:bg-custom-background-80"
onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
>
{issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
<ChevronDown width={14} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
)}
</>
)}
</div>
<div className="flex w-full cursor-pointer items-center gap-2">
<div
className="h-[6px] w-[6px] flex-shrink-0 rounded-full"
style={{
backgroundColor: currentIssueStateDetail?.color,
}}
/>
<div className="flex-shrink-0 text-xs text-custom-text-200">
{projectDetail?.identifier}-{issue?.sequence_id}
</div>
<Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
<div className="line-clamp-1 pr-2 text-xs text-custom-text-100">{issue?.name}</div>
</Tooltip>
</div>
<div className="flex-shrink-0 text-sm">
<IssueProperty
workspaceSlug={workspaceSlug}
parentIssue={parentIssue}
issue={issue}
editable={editable}
/>
</div>
<div className="flex-shrink-0 text-sm">
<CustomMenu width="auto" placement="bottom-end" ellipsis>
{editable && (
<CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}>
<div className="flex items-center gap-2">
<Pencil className="h-3.5 w-3.5" strokeWidth={2} />
<span>Edit issue</span>
</div>
</CustomMenu.MenuItem>
)}
{editable && (
<CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}>
<div className="flex items-center gap-2">
<Trash className="h-3.5 w-3.5" strokeWidth={2} />
<span>Delete issue</span>
</div>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem
onClick={() => copyText(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`)}
>
<div className="flex items-center gap-2">
<LinkIcon className="h-3.5 w-3.5" strokeWidth={2} />
<span>Copy issue link</span>
</div>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
{editable && (
<>
{issuesLoader.delete.includes(issue?.id) ? (
<div className="flex h-[22px] w-[22px] flex-shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-sm bg-red-200/10 text-red-500 transition-all">
<Loader width={14} strokeWidth={2} className="animate-spin" />
</div>
) : (
<div
className="invisible flex h-[22px] w-[22px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80 group-hover:visible"
onClick={() => {
handleIssuesLoader({ key: "delete", issueId: issue?.id });
removeIssueFromSubIssues(parentIssue?.id, issue);
}}
>
<X width={14} strokeWidth={2} />
</div>
)}
</>
)}
</div>
)}
{issuesLoader.visibility.includes(issueId) && issue?.sub_issues_count && issue?.sub_issues_count > 0 && (
<SubIssuesRootList
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={issue}
spacingLeft={spacingLeft + 22}
user={user}
editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
handleUpdateIssue={handleUpdateIssue}
/>
)}
</div>
</>
);
};

128
web/components/issues/sub-issues/issues-list.tsx
View File

@ -1,84 +1,78 @@
import { useMemo } from "react";
// components
import { SubIssues } from "./issue";
// types
import { IUser, TIssue } from "@plane/types";
// import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
// fetch keys
import { FC } from "react";
import { observer } from "mobx-react-lite";
// hooks
import { useIssueDetail } from "hooks/store";
// components
import { IssueListItem } from "./issue-list-item";
// types
import { TIssue } from "@plane/types";
import { TSubIssueOperations } from "./root";
import useSWR from "swr";
export interface ISubIssuesRootList {
export interface IIssueList {
workspaceSlug: string;
projectId: string;
parentIssue: TIssue;
spacingLeft?: number;
user: IUser | undefined;
editable: boolean;
removeIssueFromSubIssues: (parentIssueId: string, issue: TIssue) => void;
issuesLoader: any; // FIXME: replace ISubIssuesRootLoaders with any
handleIssuesLoader: ({ key, issueId }: any) => void; // FIXME: replace ISubIssuesRootLoadersHandler with any
copyText: (text: string) => void;
handleIssueCrudOperation: (
key: "create" | "existing" | "edit" | "delete",
parentIssueId: string;
spacingLeft: number;
disabled: boolean;
handleIssueCrudState: (
key: "create" | "existing" | "update" | "delete",
issueId: string,
issue?: TIssue | null
) => void;
handleUpdateIssue: (issue: TIssue, data: Partial<TIssue>) => void;
subIssueOperations: TSubIssueOperations;
}
export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
workspaceSlug,
projectId,
parentIssue,
spacingLeft = 10,
user,
editable,
removeIssueFromSubIssues,
issuesLoader,
handleIssuesLoader,
copyText,
handleIssueCrudOperation,
handleUpdateIssue,
}) => {
const issueDetail = useIssueDetail();
issueDetail.subIssues.fetchSubIssues(workspaceSlug, projectId, parentIssue?.id);
export const IssueList: FC<IIssueList> = observer((props) => {
const {
workspaceSlug,
projectId,
parentIssueId,
spacingLeft = 10,
disabled,
handleIssueCrudState,
subIssueOperations,
} = props;
// hooks
const {
subIssues: { subIssuesByIssueId, subIssueHelpersByIssueId },
} = useIssueDetail();
const subIssues = issueDetail.subIssues.subIssuesByIssueId(parentIssue?.id);
const handleIssue = useMemo(
() => ({
fetchIssues: async (issueId: string) => issueDetail.subIssues.fetchSubIssues(workspaceSlug, projectId, issueId),
updateIssue: async (issueId: string, data: Partial<TIssue>) =>
issueDetail.updateIssue(workspaceSlug, projectId, issueId, data),
removeIssue: (issueId: string) => issueDetail.removeIssue(workspaceSlug, projectId, issueId),
}),
[issueDetail, workspaceSlug, projectId]
useSWR(
workspaceSlug && projectId && parentIssueId
? `ISSUE_DETAIL_SUB_ISSUES_${workspaceSlug}_${projectId}_${parentIssueId}`
: null,
async () => {
workspaceSlug &&
projectId &&
parentIssueId &&
(await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, parentIssueId));
}
);
const subIssueIds = subIssuesByIssueId(parentIssueId);
const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId);
return (
<>
{subIssueHelpers.preview_loader.includes(parentIssueId) ? "Loading..." : "Hello"}
<div className="relative">
{subIssues &&
subIssues.length > 0 &&
subIssues.map((issueId: string) => (
<SubIssues
key={`${issueId}`}
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={parentIssue}
issueId={issueId}
handleIssue={handleIssue}
spacingLeft={spacingLeft}
user={user}
editable={editable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
handleUpdateIssue={handleUpdateIssue}
/>
{subIssueIds &&
subIssueIds.length > 0 &&
subIssueIds.map((issueId) => (
<>
<IssueListItem
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssueId={parentIssueId}
spacingLeft={spacingLeft}
disabled={disabled}
handleIssueCrudState={handleIssueCrudState}
subIssueOperations={subIssueOperations}
issueId={issueId}
/>
</>
))}
<div
@ -88,4 +82,4 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
</div>
</>
);
};
});

101
web/components/issues/sub-issues/properties.tsx
View File

@ -1,78 +1,41 @@
import React from "react";
import { mutate } from "swr";
// services
import { IssueService } from "services/issue";
// hooks
import { useIssueDetail } from "hooks/store";
// components
import { PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
// types
import { TIssue } from "@plane/types";
// fetch-keys
import { SUB_ISSUES } from "constants/fetch-keys";
import { TSubIssueOperations } from "./root";
export interface IIssueProperty {
workspaceSlug: string;
parentIssue: TIssue;
issue: TIssue;
editable: boolean;
parentIssueId: string;
issueId: string;
disabled: boolean;
subIssueOperations: TSubIssueOperations;
}
// services
const issueService = new IssueService();
export const IssueProperty: React.FC<IIssueProperty> = (props) => {
const { workspaceSlug, parentIssue, issue, editable } = props;
const { workspaceSlug, parentIssueId, issueId, disabled, subIssueOperations } = props;
// hooks
const {
issue: { getIssueById },
} = useIssueDetail();
const handlePriorityChange = (data: any) => {
partialUpdateIssue({ priority: data });
};
const handleStateChange = (data: string) => {
partialUpdateIssue({
state_id: data,
});
};
const handleAssigneeChange = (data: string[]) => {
partialUpdateIssue({ assignee_ids: data });
};
const partialUpdateIssue = async (data: Partial<TIssue>) => {
mutate(
workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
(elements: any) => {
const _elements = { ...elements };
const _issues = _elements.sub_issues.map((element: TIssue) =>
element.id === issue.id ? { ...element, ...data } : element
);
_elements["sub_issues"] = [..._issues];
return _elements;
},
false
);
const issueResponse = await issueService.patchIssue(workspaceSlug as string, issue.project_id, issue.id, data);
mutate(
SUB_ISSUES(parentIssue.id),
(elements: any) => {
const _elements = elements.sub_issues.map((element: TIssue) =>
element.id === issue.id ? issueResponse : element
);
elements["sub_issues"] = _elements;
return elements;
},
true
);
};
const issue = getIssueById(issueId);
if (!issue) return <></>;
return (
<div className="relative flex items-center gap-2">
<div className="h-5 flex-shrink-0">
<StateDropdown
value={issue?.state_id}
projectId={issue?.project_id}
onChange={handleStateChange}
disabled={!editable}
value={issue.state_id}
projectId={issue.project_id}
onChange={(val) =>
subIssueOperations.updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
state_id: val,
})
}
disabled={!disabled}
buttonVariant="border-with-text"
/>
</div>
@ -80,8 +43,12 @@ export const IssueProperty: React.FC<IIssueProperty> = (props) => {
<div className="h-5 flex-shrink-0">
<PriorityDropdown
value={issue.priority}
onChange={handlePriorityChange}
disabled={!editable}
onChange={(val) =>
subIssueOperations.updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
priority: val,
})
}
disabled={!disabled}
buttonVariant="border-without-text"
buttonClassName="border"
/>
@ -89,10 +56,14 @@ export const IssueProperty: React.FC<IIssueProperty> = (props) => {
<div className="h-5 flex-shrink-0">
<ProjectMemberDropdown
projectId={issue?.project_id}
value={issue?.assignee_ids}
onChange={handleAssigneeChange}
disabled={!editable}
value={issue.assignee_ids}
projectId={issue.project_id}
onChange={(val) =>
subIssueOperations.updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
assignee_ids: val,
})
}
disabled={!disabled}
multiple
buttonVariant={issue.assignee_ids.length > 0 ? "transparent-without-text" : "border-without-text"}
buttonClassName={issue.assignee_ids.length > 0 ? "hover:bg-transparent px-0" : ""}

404
web/components/issues/sub-issues/root.tsx
View File

@ -1,182 +1,263 @@
import React, { useCallback, useMemo, useState } from "react";
import { FC, useMemo, useState } from "react";
import { observer } from "mobx-react-lite";
import { Plus, ChevronRight, ChevronDown } from "lucide-react";
import { Plus, ChevronRight, ChevronDown, Loader } from "lucide-react";
// hooks
import { useIssueDetail, useIssues, useUser } from "hooks/store";
import { useIssueDetail } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import { ExistingIssuesListModal } from "components/core";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { SubIssuesRootList } from "./issues-list";
import { IssueList } from "./issues-list";
import { ProgressBar } from "./progressbar";
// ui
import { CustomMenu } from "@plane/ui";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import { IUser, TIssue, ISearchIssueResponse } from "@plane/types";
// services
import { IssueService } from "services/issue";
// fetch keys
import { SUB_ISSUES } from "constants/fetch-keys";
// constants
import { EUserProjectRoles } from "constants/project";
import { EIssuesStoreType } from "constants/issue";
import { IUser, TIssue } from "@plane/types";
export interface ISubIssuesRoot {
workspaceSlug: string;
projectId: string;
issueId: string;
parentIssueId: string;
currentUser: IUser;
is_archived: boolean;
is_editable: boolean;
disabled: boolean;
}
export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
const { workspaceSlug, projectId, issueId, currentUser, is_archived, is_editable } = props;
export type TSubIssueOperations = {
copyText: (text: string) => void;
fetchSubIssues: (workspaceSlug: string, projectId: string, parentIssueId: string) => Promise<void>;
addSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => Promise<void>;
updateSubIssue: (
workspaceSlug: string,
projectId: string,
parentIssueId: string,
issueId: string,
currentIssue: Partial<TIssue>,
oldIssue?: Partial<TIssue> | undefined,
fromModal?: boolean
) => Promise<void>;
removeSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
deleteSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
};
export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
const { workspaceSlug, projectId, parentIssueId, disabled = false } = props;
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const { setToastAlert } = useToast();
const {
subIssues: { subIssuesByIssueId, subIssuesStateDistribution },
updateIssue,
removeIssue,
issue: { getIssueById },
subIssues: { subIssuesByIssueId, stateDistributionByIssueId, subIssueHelpersByIssueId, setSubIssueHelpers },
fetchSubIssues,
createSubIssues,
updateSubIssue,
removeSubIssue,
deleteSubIssue,
} = useIssueDetail();
// state
const [currentIssue, setCurrentIssue] = useState<TIssue>();
console.log("subIssuesByIssueId", subIssuesByIssueId(issueId));
const copyText = (text: string) => {
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.",
});
});
};
const subIssueOperations = useMemo(
() => ({
fetchSubIssues: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
await fetchSubIssues(workspaceSlug, projectId, issueId);
} catch (error) {}
},
update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
try {
await updateIssue(workspaceSlug, projectId, issueId, data);
setToastAlert({
title: "Issue updated successfully",
type: "success",
message: "Issue updated successfully",
});
} catch (error) {
setToastAlert({
title: "Issue update failed",
type: "error",
message: "Issue update failed",
});
}
},
addSubIssue: async () => {
try {
} catch (error) {}
},
removeSubIssue: async () => {
try {
} catch (error) {}
},
updateIssue: async () => {
try {
} catch (error) {}
},
deleteIssue: async () => {
try {
} catch (error) {}
},
}),
[]
);
const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
// type: "create" | "edit";
create: { toggle: boolean; issueId: string | null };
existing: { toggle: boolean; issueId: string | null };
type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
const [issueCrudState, setIssueCrudState] = useState<{
create: TIssueCrudState;
existing: TIssueCrudState;
update: TIssueCrudState;
delete: TIssueCrudState;
}>({
create: {
toggle: false,
issueId: null,
parentIssueId: undefined,
issue: undefined,
},
existing: {
toggle: false,
issueId: null,
parentIssueId: undefined,
issue: undefined,
},
update: {
toggle: false,
parentIssueId: undefined,
issue: undefined,
},
delete: {
toggle: false,
parentIssueId: undefined,
issue: undefined,
},
});
const handleIssueCrudOperation = (
key: "create" | "existing",
issueId: string | null,
const handleIssueCrudState = (
key: "create" | "existing" | "update" | "delete",
_parentIssueId: string | null,
issue: TIssue | null = null
) => {
setIssueCrudOperation({
...issueCrudOperation,
setIssueCrudState({
...issueCrudState,
[key]: {
toggle: !issueCrudOperation[key].toggle,
issueId: issueId,
toggle: !issueCrudState[key].toggle,
parentIssueId: _parentIssueId,
issue: issue,
},
});
};
const subIssueOperations: TSubIssueOperations = useMemo(
() => ({
copyText: (text: string) => {
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.",
});
});
},
fetchSubIssues: async (workspaceSlug: string, projectId: string, parentIssueId: string) => {
try {
await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
} catch (error) {
setToastAlert({
type: "error",
title: "Error fetching sub-issues",
message: "Error fetching sub-issues",
});
}
},
addSubIssue: async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => {
try {
await createSubIssues(workspaceSlug, projectId, parentIssueId, issueIds);
setToastAlert({
type: "success",
title: "Sub-issues added successfully",
message: "Sub-issues added successfully",
});
} catch (error) {
setToastAlert({
type: "error",
title: "Error adding sub-issue",
message: "Error adding sub-issue",
});
}
},
updateSubIssue: async (
workspaceSlug: string,
projectId: string,
parentIssueId: string,
issueId: string,
currentIssue: Partial<TIssue>,
oldIssue: Partial<TIssue> | undefined = undefined,
fromModal: boolean = false
) => {
try {
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
await updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, currentIssue, oldIssue, fromModal);
setToastAlert({
type: "success",
title: "Sub-issue updated successfully",
message: "Sub-issue updated successfully",
});
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
} catch (error) {
setToastAlert({
type: "error",
title: "Error updating sub-issue",
message: "Error updating sub-issue",
});
}
},
removeSubIssue: async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
try {
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
setToastAlert({
type: "success",
title: "Sub-issue removed successfully",
message: "Sub-issue removed successfully",
});
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
} catch (error) {
setToastAlert({
type: "error",
title: "Error removing sub-issue",
message: "Error removing sub-issue",
});
}
},
deleteSubIssue: async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
try {
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
await deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
setToastAlert({
type: "success",
title: "Issue deleted successfully",
message: "Issue deleted successfully",
});
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
} catch (error) {
setToastAlert({
type: "error",
title: "Error deleting issue",
message: "Error deleting issue",
});
}
},
}),
[fetchSubIssues, createSubIssues, updateSubIssue, removeSubIssue, deleteSubIssue, setToastAlert, setSubIssueHelpers]
);
const issue = getIssueById(parentIssueId);
const subIssuesDistribution = stateDistributionByIssueId(parentIssueId);
const subIssues = subIssuesByIssueId(parentIssueId);
const subIssueHelpers = subIssueHelpersByIssueId(`${parentIssueId}_root`);
if (!issue) return <></>;
return (
<div className="h-full w-full space-y-2">
{/* {!issues && isLoading ? (
{!subIssues ? (
<div className="py-3 text-center text-sm font-medium text-custom-text-300">Loading...</div>
) : (
<>
{issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
{subIssues && subIssues?.length > 0 ? (
<>
<div className="relative flex items-center gap-4 text-xs">
<div
className="flex cursor-pointer select-none items-center gap-1 rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
onClick={() => handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })}
onClick={() => setSubIssueHelpers(`${parentIssueId}_root`, "issue_visibility", parentIssueId)}
>
<div className="flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center">
{issuesLoader.visibility.includes(parentIssue?.id) ? (
{subIssueHelpers.preview_loader.includes(parentIssueId) ? (
<Loader width={14} strokeWidth={2} className="animate-spin" />
) : subIssueHelpers.issue_visibility.includes(parentIssueId) ? (
<ChevronDown width={16} strokeWidth={2} />
) : (
<ChevronRight width={14} strokeWidth={2} />
)}
</div>
<div>Sub-issues</div>
<div>({issues?.sub_issues?.length || 0})</div>
<div>({subIssues?.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)}
total={subIssues?.length || 0}
done={
((subIssuesDistribution?.cancelled ?? []).length || 0) +
((subIssuesDistribution?.completed ?? []).length || 0)
}
/>
</div>
{is_editable && issuesLoader.visibility.includes(parentIssue?.id) && (
{!disabled && (
<div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
<div
className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
onClick={() => handleIssueCrudState("create", parentIssueId, null)}
>
Add sub-issue
</div>
<div
className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
onClick={() => handleIssueCrudState("existing", parentIssueId, null)}
>
Add an existing issue
</div>
@ -184,21 +265,16 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
)}
</div>
{issuesLoader.visibility.includes(parentIssue?.id) && workspaceSlug && projectId && (
{subIssueHelpers.issue_visibility.includes(parentIssueId) && (
<div className="border border-b-0 border-custom-border-100">
<SubIssuesRootList
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
parentIssue={parentIssue}
user={undefined}
editable={is_editable}
removeIssueFromSubIssues={removeIssueFromSubIssues}
issuesLoader={issuesLoader}
handleIssuesLoader={handleIssuesLoader}
copyText={copyText}
handleIssueCrudOperation={handleIssueCrudOperation}
handleUpdateIssue={handleUpdateIssue}
<IssueList
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssueId={parentIssueId}
spacingLeft={10}
disabled={!disabled}
handleIssueCrudState={handleIssueCrudState}
subIssueOperations={subIssueOperations}
/>
</div>
)}
@ -206,10 +282,10 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
<div>
<CustomMenu
label={
<>
<div className="flex items-center gap-1">
<Plus className="h-3 w-3" />
Add sub-issue
</>
</div>
}
buttonClassName="whitespace-nowrap"
placement="bottom-end"
@ -218,14 +294,14 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
>
<CustomMenu.MenuItem
onClick={() => {
handleIssueCrudOperation("create", parentIssue?.id);
handleIssueCrudState("create", parentIssueId, null);
}}
>
Create new
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleIssueCrudOperation("existing", parentIssue?.id);
handleIssueCrudState("existing", parentIssueId, null);
}}
>
Add an existing issue
@ -234,7 +310,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
</div>
</>
) : (
is_editable && (
!disabled && (
<div className="flex items-center justify-between">
<div className="py-2 text-xs italic text-custom-text-300">No Sub-Issues yet</div>
<div>
@ -252,14 +328,14 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
>
<CustomMenu.MenuItem
onClick={() => {
handleIssueCrudOperation("create", parentIssue?.id);
handleIssueCrudState("create", parentIssueId, null);
}}
>
Create new
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleIssueCrudOperation("existing", parentIssue?.id);
handleIssueCrudState("existing", parentIssueId, null);
}}
>
Add an existing issue
@ -270,62 +346,82 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
)
)}
{is_editable && issueCrudOperation?.create?.toggle && (
{/* issue create, add from existing , update and delete modals */}
{issueCrudState?.create?.toggle && issueCrudState?.create?.parentIssueId && (
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.create?.toggle}
isOpen={issueCrudState?.create?.toggle}
data={{
parent_id: issueCrudOperation?.create?.issueId,
parent_id: issueCrudState?.create?.parentIssueId,
}}
onClose={() => {
handleIssueCrudOperation("create", null);
onClose={() => handleIssueCrudState("create", null, null)}
onSubmit={async (_issue: TIssue) => {
await subIssueOperations.addSubIssue(workspaceSlug, projectId, parentIssueId, [_issue.id]);
}}
/>
)}
{is_editable && issueCrudOperation?.existing?.toggle && issueCrudOperation?.existing?.issueId && (
{issueCrudState?.existing?.toggle && issueCrudState?.existing?.parentIssueId && (
<ExistingIssuesListModal
isOpen={issueCrudOperation?.existing?.toggle}
handleClose={() => handleIssueCrudOperation("existing", null)}
searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
handleOnSubmit={addAsSubIssueFromExistingIssues}
isOpen={issueCrudState?.existing?.toggle}
handleClose={() => handleIssueCrudState("existing", null, null)}
searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}
handleOnSubmit={(_issue) =>
subIssueOperations.addSubIssue(
workspaceSlug,
projectId,
parentIssueId,
_issue.map((issue) => issue.id)
)
}
workspaceLevelToggle
/>
)}
{is_editable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
{issueCrudState?.update?.toggle && issueCrudState?.update?.issue && (
<>
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.edit?.toggle}
isOpen={issueCrudState?.update?.toggle}
onClose={() => {
handleIssueCrudOperation("edit", null, null);
handleIssueCrudState("update", null, null);
}}
data={issueCrudState?.update?.issue ?? undefined}
onSubmit={async (_issue: TIssue) => {
await subIssueOperations.updateSubIssue(
workspaceSlug,
projectId,
parentIssueId,
_issue.id,
_issue,
issueCrudState?.update?.issue,
true
);
}}
data={issueCrudOperation?.edit?.issue ?? undefined}
/>
</>
)}
{is_editable &&
workspaceSlug &&
projectId &&
issueCrudOperation?.delete?.issueId &&
issueCrudOperation?.delete?.issue && (
{issueCrudState?.delete?.toggle &&
issueCrudState?.delete?.issue &&
issueCrudState.delete.parentIssueId &&
issueCrudState.delete.issue.id && (
<DeleteIssueModal
isOpen={issueCrudOperation?.delete?.toggle}
isOpen={issueCrudState?.delete?.toggle}
handleClose={() => {
handleIssueCrudOperation("delete", null, null);
}}
data={issueCrudOperation?.delete?.issue}
onSubmit={async () => {
await removeIssue(
workspaceSlug.toString(),
projectId.toString(),
issueCrudOperation?.delete?.issue?.id ?? ""
);
handleIssueCrudState("delete", null, null);
}}
data={issueCrudState?.delete?.issue as TIssue}
onSubmit={async () =>
await subIssueOperations.deleteSubIssue(
workspaceSlug,
projectId,
issueCrudState?.delete?.parentIssueId as string,
issueCrudState?.delete?.issue?.id as string
)
}
/>
)}
</>
)} */}
)}
</div>
);
});

2
web/components/modules/sidebar.tsx
View File

@ -577,7 +577,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="relative h-40 w-80">
<ProgressChart
distribution={moduleDetails.distribution.completion_chart}
distribution={moduleDetails.distribution?.completion_chart}
startDate={moduleDetails.start_date ?? ""}
endDate={moduleDetails.target_date ?? ""}
totalIssues={moduleDetails.total_issues}

2
web/store/issue/cycle/filter.store.ts
View File

@ -138,7 +138,7 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
) => {
try {
if (!cycleId) throw new Error("Cycle id is required");
if (isEmpty(this.filters) || isEmpty(this.filters[projectId]) || isEmpty(filters)) return;
if (isEmpty(this.filters) || isEmpty(this.filters[cycleId]) || isEmpty(filters)) return;
const _filters = {
filters: this.filters[cycleId].filters as IIssueFilterOptions,

4
web/store/issue/issue-details/issue.store.ts
View File

@ -58,8 +58,12 @@ export class IssueStore implements IIssueStore {
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue]);
// store handlers from issue detail
// parent
if (issue && issue?.parent && issue?.parent?.id)
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue?.parent]);
// assignees
// labels
// state
// issue reactions
this.rootIssueDetailStore.reaction.fetchReactions(workspaceSlug, projectId, issueId);

17
web/store/issue/issue-details/root.store.ts
View File

@ -201,17 +201,22 @@ export class IssueDetail implements IIssueDetail {
// sub issues
fetchSubIssues = async (workspaceSlug: string, projectId: string, issueId: string) =>
this.subIssues.fetchSubIssues(workspaceSlug, projectId, issueId);
createSubIssues = async (workspaceSlug: string, projectId: string, issueId: string, data: string[]) =>
this.subIssues.createSubIssues(workspaceSlug, projectId, issueId, data);
createSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string, data: string[]) =>
this.subIssues.createSubIssues(workspaceSlug, projectId, parentIssueId, data);
updateSubIssue = async (
workspaceSlug: string,
projectId: string,
parentIssueId: string,
issueId: string,
data: { oldParentId: string; newParentId: string }
) => this.subIssues.updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, data);
removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) =>
this.subIssues.removeSubIssue(workspaceSlug, projectId, parentIssueId, issueIds);
oldIssue: Partial<TIssue>,
currentIssue?: Partial<TIssue>,
fromModal?: boolean
) =>
this.subIssues.updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, oldIssue, currentIssue, fromModal);
removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) =>
this.subIssues.removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
deleteSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) =>
this.subIssues.deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
// subscription
fetchSubscriptions = async (workspaceSlug: string, projectId: string, issueId: string) =>

163
web/store/issue/issue-details/sub_issues.store.ts
View File

@ -1,5 +1,8 @@
import { action, makeObservable, observable, runInAction } from "mobx";
import set from "lodash/set";
import concat from "lodash/concat";
import update from "lodash/update";
import pull from "lodash/pull";
// services
import { IssueService } from "services/issue";
// types
@ -13,41 +16,46 @@ import {
} from "@plane/types";
export interface IIssueSubIssuesStoreActions {
fetchSubIssues: (workspaceSlug: string, projectId: string, issueId: string) => Promise<TIssueSubIssues>;
fetchSubIssues: (workspaceSlug: string, projectId: string, parentIssueId: string) => Promise<TIssueSubIssues>;
createSubIssues: (
workspaceSlug: string,
projectId: string,
issueId: string,
data: string[]
) => Promise<TIssueSubIssues>;
parentIssueId: string,
issueIds: string[]
) => Promise<void>;
updateSubIssue: (
workspaceSlug: string,
projectId: string,
parentIssueId: string,
issueId: string,
data: { oldParentId: string; newParentId: string }
) => any;
removeSubIssue: (
workspaceSlug: string,
projectId: string,
parentIssueId: string,
issueIds: string[]
) => Promise<TIssueSubIssues>;
currentIssue: Partial<TIssue>,
oldIssue?: Partial<TIssue> | undefined,
fromModal?: boolean
) => Promise<void>;
removeSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
deleteSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
}
type TSubIssueHelpersKeys = "issue_visibility" | "preview_loader" | "issue_loader";
type TSubIssueHelpers = Record<TSubIssueHelpersKeys, string[]>;
export interface IIssueSubIssuesStore extends IIssueSubIssuesStoreActions {
// observables
subIssuesStateDistribution: TIssueSubIssuesStateDistributionMap;
subIssues: TIssueSubIssuesIdMap;
subIssueHelpers: Record<string, TSubIssueHelpers>; // parent_issue_id -> TSubIssueHelpers
// helper methods
stateDistributionByIssueId: (issueId: string) => TSubIssuesStateDistribution | undefined;
subIssuesByIssueId: (issueId: string) => string[] | undefined;
subIssueHelpersByIssueId: (issueId: string) => TSubIssueHelpers;
// actions
setSubIssueHelpers: (parentIssueId: string, key: TSubIssueHelpersKeys, value: string) => void;
}
export class IssueSubIssuesStore implements IIssueSubIssuesStore {
// observables
subIssuesStateDistribution: TIssueSubIssuesStateDistributionMap = {};
subIssues: TIssueSubIssuesIdMap = {};
subIssueHelpers: Record<string, TSubIssueHelpers> = {};
// root store
rootIssueDetailStore: IIssueDetail;
// services
@ -58,11 +66,14 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
// observables
subIssuesStateDistribution: observable,
subIssues: observable,
subIssueHelpers: observable,
// actions
setSubIssueHelpers: action,
fetchSubIssues: action,
createSubIssues: action,
updateSubIssue: action,
removeSubIssue: action,
deleteSubIssue: action,
});
// root store
this.rootIssueDetailStore = rootStore;
@ -81,10 +92,27 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
return this.subIssues[issueId] ?? undefined;
};
subIssueHelpersByIssueId = (issueId: string) => ({
preview_loader: this.subIssueHelpers?.[issueId]?.preview_loader || [],
issue_visibility: this.subIssueHelpers?.[issueId]?.issue_visibility || [],
issue_loader: this.subIssueHelpers?.[issueId]?.issue_loader || [],
});
// actions
fetchSubIssues = async (workspaceSlug: string, projectId: string, issueId: string) => {
setSubIssueHelpers = (parentIssueId: string, key: TSubIssueHelpersKeys, value: string) => {
if (!parentIssueId || !key || !value) return;
update(this.subIssueHelpers, [parentIssueId, key], (subIssueHelpers: string[]) => {
if (!subIssueHelpers || subIssueHelpers.length <= 0) return [value];
else if (subIssueHelpers.includes(value)) pull(subIssueHelpers, value);
else concat(subIssueHelpers, value);
return subIssueHelpers;
});
};
fetchSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string) => {
try {
const response = await this.issueService.subIssues(workspaceSlug, projectId, issueId);
const response = await this.issueService.subIssues(workspaceSlug, projectId, parentIssueId);
const subIssuesStateDistribution = response?.state_distribution ?? {};
const subIssues = (response.sub_issues ?? []) as TIssue[];
@ -92,38 +120,48 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
if (subIssues.length > 0) {
runInAction(() => {
set(this.subIssuesStateDistribution, issueId, subIssuesStateDistribution);
set(this.subIssuesStateDistribution, parentIssueId, subIssuesStateDistribution);
set(
this.subIssues,
issueId,
parentIssueId,
subIssues.map((issue) => issue.id)
);
});
}
return response;
} catch (error) {
throw error;
}
};
createSubIssues = async (workspaceSlug: string, projectId: string, issueId: string, data: string[]) => {
createSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => {
try {
const response = await this.issueService.addSubIssues(workspaceSlug, projectId, issueId, { sub_issue_ids: data });
const response = await this.issueService.addSubIssues(workspaceSlug, projectId, parentIssueId, {
sub_issue_ids: issueIds,
});
const subIssuesStateDistribution = response?.state_distribution;
const subIssues = response.sub_issues as TIssue[];
this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
runInAction(() => {
Object.keys(subIssuesStateDistribution).forEach((key) => {
const stateGroup = key as keyof TSubIssuesStateDistribution;
set(this.subIssuesStateDistribution, [issueId, key], subIssuesStateDistribution[stateGroup]);
update(this.subIssuesStateDistribution, [parentIssueId, stateGroup], (stateDistribution) => {
if (!stateDistribution) return subIssuesStateDistribution[stateGroup];
return concat(stateDistribution, subIssuesStateDistribution[stateGroup]);
});
});
const issueIds = subIssues.map((issue) => issue.id);
update(this.subIssues, [parentIssueId], (issues) => {
if (!issues) return issueIds;
return concat(issues, issueIds);
});
set(this.subIssuesStateDistribution, issueId, data);
});
return response;
this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
return;
} catch (error) {
throw error;
}
@ -134,45 +172,70 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
projectId: string,
parentIssueId: string,
issueId: string,
data: { oldParentId: string; newParentId: string }
currentIssue: Partial<TIssue>,
oldIssue: Partial<TIssue> | undefined = undefined,
fromModal: boolean = false
) => {
try {
const oldIssueParentId = data.oldParentId;
const newIssueParentId = data.newParentId;
if (!fromModal)
await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(
workspaceSlug,
projectId,
issueId,
currentIssue
);
// const issue = this.rootIssueDetailStore.rootIssueStore.issues.getIssueById(issueId);
if (!oldIssue) return;
// runInAction(() => {
// Object.keys(subIssuesStateDistribution).forEach((key) => {
// const stateGroup = key as keyof TSubIssuesStateDistribution;
// set(this.subIssuesStateDistribution, [issueId, key], subIssuesStateDistribution[stateGroup]);
// });
// set(this.subIssuesStateDistribution, issueId, data);
// });
if (currentIssue.state_id != oldIssue.state_id) {
}
return {} as any;
if (currentIssue.parent_id != oldIssue.parent_id) {
}
// const updateResponse = await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(
// workspaceSlug,
// projectId,
// issueId,
// oldIssue
// );
// console.log("---");
// console.log("parentIssueId", parentIssueId);
// console.log("fromModal", fromModal);
// console.log("updateResponse", updateResponse);
// console.log("---");
return;
} catch (error) {
throw error;
}
};
removeSubIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: string[]) => {
removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
try {
const response = await this.issueService.addSubIssues(workspaceSlug, projectId, issueId, { sub_issue_ids: data });
const subIssuesStateDistribution = response?.state_distribution;
const subIssues = response.sub_issues as TIssue[];
this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
runInAction(() => {
Object.keys(subIssuesStateDistribution).forEach((key) => {
const stateGroup = key as keyof TSubIssuesStateDistribution;
set(this.subIssuesStateDistribution, [issueId, key], subIssuesStateDistribution[stateGroup]);
});
set(this.subIssuesStateDistribution, issueId, data);
await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, {
parent_id: null,
});
return response;
runInAction(() => {
pull(this.subIssues[parentIssueId], issueId);
});
return;
} catch (error) {
throw error;
}
};
deleteSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
try {
await this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
runInAction(() => {
pull(this.subIssues[parentIssueId], issueId);
});
return;
} catch (error) {
throw error;
}

18
web/store/issue/project/issue.store.ts
View File

@ -1,5 +1,8 @@
import { action, makeObservable, observable, runInAction, computed } from "mobx";
import set from "lodash/set";
import update from "lodash/update";
import pull from "lodash/pull";
import concat from "lodash/concat";
// base class
import { IssueHelperStore } from "../helpers/issue-helper.store";
// services
@ -120,14 +123,16 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
const response = await this.issueService.createIssue(workspaceSlug, projectId, data);
runInAction(() => {
this.issues[projectId].push(response.id);
update(this.issues, [projectId], (issueIds) => {
if (!issueIds) return [response.id];
return concat(issueIds, response.id);
});
});
this.rootStore.issues.addIssue([response]);
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation");
throw error;
}
};
@ -148,16 +153,13 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
try {
const response = await this.issueService.deleteIssue(workspaceSlug, projectId, issueId);
const issueIndex = this.issues[projectId].findIndex((_issueId) => _issueId === issueId);
if (issueIndex >= 0)
runInAction(() => {
this.issues[projectId].splice(issueIndex, 1);
});
runInAction(() => {
pull(this.issues[projectId], issueId);
});
this.rootStore.issues.removeIssue(issueId);
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation");
throw error;
}
};