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

refactor: issue peek overview (#3001)

Browse Source 
* refactor: peek overview components

* fix: issue reactions

* chore: update comment types

* fix: access sepcifier value

* chore: remove unused vars

* fix: build errors

* build-error: build error resolved

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: gurusainath <gurusainath007@gmail.com>
This commit is contained in:
Aaryan Khandelwal 2023-12-07 18:13:27 +05:30 committed by sriram veeraghanta
parent c455f03ced
commit 539c7a3455
55 changed files with 526 additions and 455 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/inbox/issue-activity.tsx
View File

@ -10,7 +10,7 @@ import { IssueService, IssueCommentService } from "services/issue";
// hooks
import useToast from "hooks/use-toast";
// types
import { IIssue, IIssueComment } from "types";
import { IIssue, IIssueActivity } from "types";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
@ -41,7 +41,7 @@ export const InboxIssueActivity: React.FC<Props> = observer(({ issueDetails }) =
const user = userStore.currentUser;
const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
const handleCommentUpdate = async (commentId: string, data: Partial<any>) => {
if (!workspaceSlug || !projectId || !issueDetails.id || !user) return;
await issueCommentService
@ -86,7 +86,7 @@ export const InboxIssueActivity: React.FC<Props> = observer(({ issueDetails }) =
});
};
const handleAddComment = async (formData: IIssueComment) => {
const handleAddComment = async (formData: IIssueActivity) => {
if (!workspaceSlug || !issueDetails || !user) return;
await issueCommentService

18
web/components/inbox/main-content.tsx
View File

@ -37,13 +37,10 @@ export const InboxMainContent: React.FC = observer(() => {
const {
inboxIssues: inboxIssuesStore,
inboxIssueDetails: inboxIssueDetailsStore,
user: userStore,
user: { currentUser, currentProjectRole },
projectState: { states },
} = useMobxStore();
const user = userStore.currentUser;
const userRole = userStore.currentProjectRole;
const { reset, control, watch } = useForm<IIssue>({
defaultValues,
});
@ -156,7 +153,7 @@ export const InboxMainContent: React.FC = observer(() => {
</div>
);
const isAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
return (
<>
@ -249,12 +246,17 @@ export const InboxMainContent: React.FC = observer(() => {
id: issueDetails.id,
}}
handleFormSubmit={submitChanges}
isAllowed={isAllowed || user?.id === issueDetails.created_by}
isAllowed={isAllowed || currentUser?.id === issueDetails.created_by}
/>
</div>
<IssueReaction projectId={projectId} workspaceSlug={workspaceSlug} issueId={issueDetails.id} />
{workspaceSlug && projectId && (
<IssueReaction
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={issueDetails.id}
/>
)}
<InboxIssueActivity issueDetails={issueDetails} />
</div>

6
web/components/issues/activity.tsx
View File

@ -11,12 +11,12 @@ import { Loader, Tooltip } from "@plane/ui";
// helpers
import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
// types
import { IIssueActivity, IIssueComment } from "types";
import { IIssueActivity } from "types";
import { History } from "lucide-react";
type Props = {
activity: IIssueActivity[] | undefined;
handleCommentUpdate: (commentId: string, data: Partial<IIssueComment>) => Promise<void>;
handleCommentUpdate: (commentId: string, data: Partial<IIssueActivity>) => Promise<void>;
handleCommentDelete: (commentId: string) => Promise<void>;
showAccessSpecifier?: boolean;
};
@ -130,7 +130,7 @@ export const IssueActivitySection: React.FC<Props> = ({
return (
<div key={activityItem.id} className="mt-4">
<CommentCard
comment={activityItem as IIssueComment}
comment={activityItem as IIssueActivity}
handleCommentDeletion={handleCommentDelete}
onSubmit={handleCommentUpdate}
showAccessSpecifier={showAccessSpecifier}

12
web/components/issues/comment/add-comment.tsx
View File

@ -11,17 +11,17 @@ import { Button } from "@plane/ui";
import { Globe2, Lock } from "lucide-react";
// types
import type { IIssueComment } from "types";
import type { IIssueActivity } from "types";
import useEditorSuggestions from "hooks/use-editor-suggestions";
const defaultValues: Partial<IIssueComment> = {
const defaultValues: Partial<IIssueActivity> = {
access: "INTERNAL",
comment_html: "",
};
type Props = {
disabled?: boolean;
onSubmit: (data: IIssueComment) => Promise<void>;
onSubmit: (data: IIssueActivity) => Promise<void>;
showAccessSpecifier?: boolean;
};
@ -59,9 +59,9 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
formState: { isSubmitting },
handleSubmit,
reset,
} = useForm<IIssueComment>({ defaultValues });
} = useForm<IIssueActivity>({ defaultValues });
const handleAddComment = async (formData: IIssueComment) => {
const handleAddComment = async (formData: IIssueActivity) => {
if (!formData.comment_html || isSubmitting) return;
await onSubmit(formData).then(() => {
@ -96,7 +96,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
commentAccessSpecifier={
showAccessSpecifier
? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
? { accessValue: accessValue ?? "INTERNAL", onAccessChange, showAccessSpecifier, commentAccess }
: undefined
}
mentionSuggestions={editorSuggestions.mentionSuggestions}

19
web/components/issues/comment/comment-card.tsx
View File

@ -14,16 +14,16 @@ import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-te
// helpers
import { timeAgo } from "helpers/date-time.helper";
// types
import type { IIssueComment } from "types";
import type { IIssueActivity } from "types";
import useEditorSuggestions from "hooks/use-editor-suggestions";
// services
const fileService = new FileService();
type Props = {
comment: IIssueComment;
comment: IIssueActivity;
handleCommentDeletion: (comment: string) => void;
onSubmit: (commentId: string, data: Partial<IIssueComment>) => void;
onSubmit: (commentId: string, data: Partial<IIssueActivity>) => void;
showAccessSpecifier?: boolean;
workspaceSlug: string;
};
@ -50,11 +50,11 @@ export const CommentCard: React.FC<Props> = ({
setFocus,
watch,
setValue,
} = useForm<IIssueComment>({
} = useForm<IIssueActivity>({
defaultValues: comment,
});
const onEnter = (formData: Partial<IIssueComment>) => {
const onEnter = (formData: Partial<IIssueActivity>) => {
if (isSubmitting) return;
setIsEditing(false);
@ -110,13 +110,10 @@ export const CommentCard: React.FC<Props> = ({
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
ref={editorRef}
value={watch("comment_html")}
value={watch("comment_html") ?? ""}
debouncedUpdatesEnabled={false}
customClassName="min-h-[50px] p-3 shadow-sm"
onChange={(comment_json: Object, comment_html: string) => {
setValue("comment_json", comment_json);
setValue("comment_html", comment_html);
}}
onChange={(comment_json: Object, comment_html: string) => setValue("comment_html", comment_html)}
mentionSuggestions={editorSuggestions.mentionSuggestions}
mentionHighlights={editorSuggestions.mentionHighlights}
/>
@ -147,7 +144,7 @@ export const CommentCard: React.FC<Props> = ({
)}
<LiteReadOnlyEditorWithRef
ref={showEditorRef}
value={comment.comment_html}
value={comment.comment_html ?? ""}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
mentionHighlights={editorSuggestions.mentionHighlights}
/>

2
web/components/issues/draft-issue-modal.tsx
View File

@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { IssueService, IssueDraftService } from "services/issue";
import { IssueService } from "services/issue";
import { ModuleService } from "services/module.service";
// hooks
import useToast from "hooks/use-toast";

2
web/components/issues/index.ts
View File

@ -7,7 +7,7 @@ export * from "./delete-issue-modal";
export * from "./description-form";
export * from "./form";
export * from "./issue-layouts";
export * from "./issue-peek-overview";
export * from "./peek-overview";
export * from "./main-content";
export * from "./modal";
export * from "./parent-issues-list-modal";

14
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -31,9 +31,9 @@ interface IBaseCalendarRoot {
calendarViewStore: IIssueCalendarViewStore;
QuickActions: FC<IQuickActionProps>;
issueActions: {
[EIssueActions.DELETE]: (issue: IIssue) => void;
[EIssueActions.UPDATE]?: (issue: IIssue) => void;
[EIssueActions.REMOVE]?: (issue: IIssue) => void;
[EIssueActions.DELETE]: (issue: IIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: IIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
};
viewId?: string;
handleDragDrop: (source: any, destination: any, issues: any, issueWithIds: any) => void;
@ -64,9 +64,9 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
};
const handleIssues = useCallback(
(date: string, issue: IIssue, action: EIssueActions) => {
async (date: string, issue: IIssue, action: EIssueActions) => {
if (issueActions[action]) {
issueActions[action]!(issue);
await issueActions[action]!(issue);
}
},
[issueActions]
@ -108,8 +108,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={(issueToUpdate) =>
handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, EIssueActions.UPDATE)
handleIssue={async (issueToUpdate) =>
await handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, EIssueActions.UPDATE)
}
/>
)}

36
web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
View File

@ -14,46 +14,50 @@ export const CycleCalendarLayout: React.FC = observer(() => {
cycleIssues: cycleIssueStore,
cycleIssuesFilter: cycleIssueFilterStore,
cycleIssueCalendarView: cycleIssueCalendarViewStore,
calendarHelpers: calendarHelperStore,
calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query as {
workspaceSlug: string;
projectId: string;
cycleId: string;
};
const { workspaceSlug, projectId, cycleId } = router.query;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
if (!workspaceSlug || !cycleId || !projectId || !issue.bridge_id) return;
await cycleIssueStore.removeIssueFromCycle(
workspaceSlug.toString(),
issue.project,
cycleId.toString(),
issue.id,
issue.bridge_id
);
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
if (calendarHelperStore.handleDragDrop)
calendarHelperStore.handleDragDrop(
if (workspaceSlug && projectId && cycleId)
handleCalenderDragDrop(
source,
destination,
workspaceSlug,
projectId,
workspaceSlug.toString(),
projectId.toString(),
cycleIssueStore,
issues,
issueWithIds,
cycleId
cycleId.toString()
);
};
if (!cycleId) return null;
return (
<BaseCalendarRoot
issueStore={cycleIssueStore}
@ -61,7 +65,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
calendarViewStore={cycleIssueCalendarViewStore}
QuickActions={CycleIssueQuickActions}
issueActions={issueActions}
viewId={cycleId}
viewId={cycleId.toString()}
handleDragDrop={handleDragDrop}
/>
);

35
web/components/issues/issue-layouts/calendar/roots/module-root.tsx
View File

@ -14,7 +14,7 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
moduleIssues: moduleIssueStore,
moduleIssuesFilter: moduleIssueFilterStore,
moduleIssueCalendarView: moduleIssueCalendarViewStore,
calendarHelpers: calendarHelperStore,
calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
} = useMobxStore();
const router = useRouter();
@ -25,32 +25,31 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
};
const issueActions = {
[EIssueActions.UPDATE]: (issue: IIssue) => {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
await moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
},
[EIssueActions.DELETE]: (issue: IIssue) => {
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
await moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
},
[EIssueActions.REMOVE]: (issue: IIssue) => {
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
await moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
if (calendarHelperStore.handleDragDrop)
calendarHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,
projectId,
moduleIssueStore,
issues,
issueWithIds,
moduleId
);
handleCalenderDragDrop(
source,
destination,
workspaceSlug,
projectId,
moduleIssueStore,
issues,
issueWithIds,
moduleId
);
};
return (

16
web/components/issues/issue-layouts/calendar/roots/project-root.tsx
View File

@ -10,35 +10,35 @@ import { useRouter } from "next/router";
export const CalendarLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId } = router.query;
const {
projectIssues: issueStore,
issueCalendarView: issueCalendarViewStore,
projectIssuesFilter: projectIssueFiltersStore,
calendarHelpers: calendarHelperStore,
calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
} = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
await issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
await issueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
if (calendarHelperStore.handleDragDrop)
calendarHelperStore.handleDragDrop(
if (workspaceSlug && projectId)
handleCalenderDragDrop(
source,
destination,
workspaceSlug,
projectId,
workspaceSlug.toString(),
projectId.toString(),
issueStore,
issues,
issueWithIds

16
web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
View File

@ -14,32 +14,32 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
viewIssues: projectViewIssuesStore,
viewIssuesFilter: projectIssueViewFiltersStore,
projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
calendarHelpers: calendarHelperStore,
calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId } = router.query;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
projectViewIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
await projectViewIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
projectViewIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
await projectViewIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
},
};
const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
if (calendarHelperStore.handleDragDrop)
calendarHelperStore.handleDragDrop(
if (workspaceSlug && projectId)
handleCalenderDragDrop(
source,
destination,
workspaceSlug,
projectId,
workspaceSlug.toString(),
projectId.toString(),
projectViewIssuesStore,
issues,
issueWithIds

2
web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
View File

@ -1,6 +1,5 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
@ -26,7 +25,6 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
projectState: projectStateStore,
projectMember: { projectMembers },
projectViews: projectViewsStore,
projectViewFilters: projectViewFiltersStore,
viewIssuesFilter: { issueFilters, updateFilters },
} = useMobxStore();

8
web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
View File

@ -54,11 +54,11 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
const issues = issueIds.map((id) => issuesResponse?.[id]);
const updateIssue = (issue: IIssue, payload: IBlockUpdateData) => {
const updateIssue = async (issue: IIssue, payload: IBlockUpdateData) => {
if (!workspaceSlug) return;
//Todo fix sort order in the structure
issueStore.updateIssue(
await issueStore.updateIssue(
workspaceSlug.toString(),
issue.project,
issue.id,
@ -101,9 +101,9 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={(issueToUpdate) => {
handleIssue={async (issueToUpdate) => {
// TODO: update the logic here
updateIssue(issueToUpdate as IIssue, {});
await updateIssue(issueToUpdate as IIssue, {});
}}
/>
)}

12
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -52,9 +52,9 @@ export interface IBaseKanBanLayout {
kanbanViewStore: IIssueKanBanViewStore;
QuickActions: FC<IQuickActionProps>;
issueActions: {
[EIssueActions.DELETE]: (issue: IIssue) => void;
[EIssueActions.UPDATE]?: (issue: IIssue) => void;
[EIssueActions.REMOVE]?: (issue: IIssue) => void;
[EIssueActions.DELETE]: (issue: IIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: IIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
};
showLoader?: boolean;
viewId?: string;
@ -169,7 +169,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const handleIssues = useCallback(
async (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => {
if (issueActions[action]) {
issueActions[action]!(issue);
await issueActions[action]!(issue);
}
},
[issueActions]
@ -345,8 +345,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={(issueToUpdate) =>
handleIssues(sub_group_by, group_by, issueToUpdate as IIssue, EIssueActions.UPDATE)
handleIssue={async (issueToUpdate) =>
await handleIssues(sub_group_by, group_by, issueToUpdate as IIssue, EIssueActions.UPDATE)
}
/>
)}

34
web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View File

@ -17,11 +17,7 @@ export interface ICycleKanBanLayout {}
export const CycleKanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query as {
workspaceSlug: string;
projectId: string;
cycleId: string;
};
const { workspaceSlug, projectId, cycleId } = router.query;
// store
const {
@ -35,15 +31,23 @@ export const CycleKanBanLayout: React.FC = observer(() => {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
await cycleIssueStore.removeIssueFromCycle(
workspaceSlug.toString(),
issue.project,
cycleId.toString(),
issue.id,
issue.bridge_id
);
},
};
@ -55,18 +59,18 @@ export const CycleKanBanLayout: React.FC = observer(() => {
issues: IIssueResponse | undefined,
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
if (workspaceSlug && projectId && cycleId)
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,
projectId,
workspaceSlug.toString(),
projectId.toString(),
cycleIssueStore,
subGroupBy,
groupBy,
issues,
issueWithIds,
cycleId
cycleId.toString()
);
};
@ -78,10 +82,12 @@ export const CycleKanBanLayout: React.FC = observer(() => {
kanbanViewStore={cycleIssueKanBanViewStore}
showLoader={true}
QuickActions={CycleIssueQuickActions}
viewId={cycleId}
viewId={cycleId?.toString() ?? ""}
currentStore={EProjectStore.CYCLE}
handleDragDrop={handleDragDrop}
addIssuesToView={(issues: string[]) => cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, issues)}
addIssuesToView={(issues: string[]) =>
cycleIssueStore.addIssueToCycle(workspaceSlug?.toString() ?? "", cycleId?.toString() ?? "", issues)
}
/>
);
});

6
web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
View File

@ -14,7 +14,7 @@ export interface IKanBanLayout {}
export const DraftKanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string };
const { workspaceSlug } = router.query;
const {
projectDraftIssues: issueStore,
@ -26,12 +26,12 @@ export const DraftKanBanLayout: React.FC = observer(() => {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
await issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
await issueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
},
};

34
web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View File

@ -17,11 +17,7 @@ export interface IModuleKanBanLayout {}
export const ModuleKanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query as {
workspaceSlug: string;
projectId: string;
moduleId: string;
};
const { workspaceSlug, projectId, moduleId } = router.query;
// store
const {
@ -35,15 +31,23 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId);
await moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId.toString());
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
await moduleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, moduleId.toString());
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
await moduleIssueStore.removeIssueFromModule(
workspaceSlug.toString(),
issue.project,
moduleId.toString(),
issue.id,
issue.bridge_id
);
},
};
@ -55,18 +59,18 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
issues: IIssueResponse | undefined,
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
if (workspaceSlug && projectId && moduleId)
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,
projectId,
workspaceSlug.toString(),
projectId.toString(),
moduleIssueStore,
subGroupBy,
groupBy,
issues,
issueWithIds,
moduleId
moduleId.toString()
);
};
return (
@ -77,10 +81,12 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
kanbanViewStore={moduleIssueKanBanViewStore}
showLoader={true}
QuickActions={ModuleIssueQuickActions}
viewId={moduleId}
viewId={moduleId?.toString() ?? ""}
currentStore={EProjectStore.MODULE}
handleDragDrop={handleDragDrop}
addIssuesToView={(issues: string[]) => moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, issues)}
addIssuesToView={(issues: string[]) =>
moduleIssueStore.addIssueToModule(workspaceSlug?.toString() ?? "", moduleId?.toString() ?? "", issues)
}
/>
);
});

26
web/components/issues/issue-layouts/kanban/roots/project-root.tsx
View File

@ -45,20 +45,18 @@ export const KanBanLayout: React.FC = observer(() => {
groupBy: string | null,
issues: IIssueResponse | undefined,
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,
projectId,
issueStore,
subGroupBy,
groupBy,
issues,
issueWithIds
);
};
) =>
await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,
projectId,
issueStore,
subGroupBy,
groupBy,
issues,
issueWithIds
);
return (
<BaseKanBanRoot

26
web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
View File

@ -45,20 +45,18 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
groupBy: string | null,
issues: IIssueResponse | undefined,
issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
) => {
if (kanBanHelperStore.handleDragDrop)
return await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,
projectId,
projectViewIssuesStore,
subGroupBy,
groupBy,
issues,
issueWithIds
);
};
) =>
await kanBanHelperStore.handleDragDrop(
source,
destination,
workspaceSlug,
projectId,
projectViewIssuesStore,
subGroupBy,
groupBy,
issues,
issueWithIds
);
return (
<BaseKanBanRoot

10
web/components/issues/issue-layouts/list/base-list-root.tsx
View File

@ -50,9 +50,9 @@ interface IBaseListRoot {
| IProfileIssuesStore;
QuickActions: FC<IQuickActionProps>;
issueActions: {
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => void;
[EIssueActions.UPDATE]?: (group_by: string | null, issue: IIssue) => void;
[EIssueActions.REMOVE]?: (group_by: string | null, issue: IIssue) => void;
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (group_by: string | null, issue: IIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (group_by: string | null, issue: IIssue) => Promise<void>;
};
getProjects: (projectStore: IProjectStore) => IProject[] | null;
viewId?: string;
@ -105,7 +105,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
const members = projectMembers?.map((m) => m.member) ?? null;
const handleIssues = async (issue: IIssue, action: EIssueActions) => {
if (issueActions[action]) {
issueActions[action]!(group_by, issue);
await issueActions[action]!(group_by, issue);
}
};
@ -160,7 +160,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={(issueToUpdate) => handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
handleIssue={async (issueToUpdate) => await handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
/>
)}
</>

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

@ -21,10 +21,10 @@ export const ArchivedIssueListLayout: FC = observer(() => {
useMobxStore();
const issueActions = {
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
archivedIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
await archivedIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
},
};

15
web/components/issues/issue-layouts/list/roots/cycle-root.tsx
View File

@ -22,17 +22,20 @@ export const CycleListLayout: React.FC = observer(() => {
const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
await cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
},
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
await cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
},
[EIssueActions.REMOVE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.REMOVE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
await cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
},
};
const getProjects = (projectStore: IProjectStore) => {

10
web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
View File

@ -23,13 +23,15 @@ export const DraftIssueListLayout: FC = observer(() => {
const { projectDraftIssuesFilter: projectIssuesFilterStore, projectDraftIssues: projectIssuesStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
await projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
},
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
await projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
},
};

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

@ -22,17 +22,20 @@ export const ModuleListLayout: React.FC = observer(() => {
const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
await moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
},
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
await moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
},
[EIssueActions.REMOVE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.REMOVE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
await moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
},
};

10
web/components/issues/issue-layouts/list/roots/project-root.tsx
View File

@ -23,13 +23,15 @@ export const ListLayout: FC = observer(() => {
const { projectIssuesFilter: projectIssuesFilterStore, projectIssues: projectIssuesStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
await projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
},
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
await projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
},
};

10
web/components/issues/issue-layouts/list/roots/project-view-root.tsx
View File

@ -26,13 +26,15 @@ export const ProjectViewListLayout: React.FC = observer(() => {
if (!workspaceSlug || !projectId) return null;
const issueActions = {
[EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectViewIssueStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
await projectViewIssueStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
},
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
[EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectViewIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
await projectViewIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
},
};

6
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -21,8 +21,8 @@ type Props = {
members?: IUserLite[] | undefined;
labels?: IIssueLabel[] | undefined;
states?: IState[] | undefined;
quickActions: (issue: IIssue,customActionButton?: React.ReactElement) => React.ReactNode;
handleIssues: (issue: IIssue, action: EIssueActions) => void;
quickActions: (issue: IIssue, customActionButton: any) => React.ReactNode; // TODO: replace any with type
handleIssues: (issue: IIssue, action: EIssueActions) => Promise<void>;
openIssuesListModal?: (() => void) | null;
quickAddCallback?: (
workspaceSlug: string,
@ -189,7 +189,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={(issueToUpdate: any) => handleIssues(issueToUpdate, EIssueActions.UPDATE)}
handleIssue={async (issueToUpdate: any) => await handleIssues(issueToUpdate, EIssueActions.UPDATE)}
/>
)}
</div>

1
web/components/issues/issue-peek-overview/index.ts
View File

@ -1 +0,0 @@
export * from "./root";

25
web/components/issues/issue-reaction.tsx
View File

@ -1,22 +1,25 @@
// hooks
import useUserAuth from "hooks/use-user-auth";
import useIssueReaction from "hooks/use-issue-reaction";
// components
import { ReactionSelector } from "components/core";
// string helpers
import { renderEmoji } from "helpers/emoji.helper";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// types
type Props = {
workspaceSlug?: string | string[];
projectId?: string | string[];
issueId?: string | string[];
workspaceSlug: string;
projectId: string;
issueId: string;
};
export const IssueReaction: React.FC<Props> = (props) => {
export const IssueReaction: React.FC<Props> = observer((props) => {
const { workspaceSlug, projectId, issueId } = props;
const { user } = useUserAuth();
const {
user: { currentUser },
} = useMobxStore();
const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction(
workspaceSlug,
@ -27,7 +30,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
const handleReactionClick = (reaction: string) => {
if (!workspaceSlug || !projectId || !issueId) return;
const isSelected = reactions?.some((r) => r.actor === user?.id && r.reaction === reaction);
const isSelected = reactions?.some((r) => r.actor === currentUser?.id && r.reaction === reaction);
if (isSelected) {
handleReactionDelete(reaction);
@ -41,7 +44,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
<ReactionSelector
size="md"
position="top"
value={reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []}
value={reactions?.filter((reaction) => reaction.actor === currentUser?.id).map((r) => r.reaction) || []}
onSelect={handleReactionClick}
/>
@ -56,7 +59,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
}}
key={reaction}
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
reactions?.some((r) => r.actor === currentUser?.id && r.reaction === reaction)
? "bg-custom-primary-100/10"
: "bg-custom-background-80"
}`}
@ -64,7 +67,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
<span>{renderEmoji(reaction)}</span>
<span
className={
reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
reactions?.some((r) => r.actor === currentUser?.id && r.reaction === reaction)
? "text-custom-primary-100"
: ""
}
@ -76,4 +79,4 @@ export const IssueReaction: React.FC<Props> = (props) => {
)}
</div>
);
};
});

37
web/components/issues/main-content.tsx
View File

@ -24,9 +24,10 @@ import { SubIssuesRoot } from "./sub-issues";
// ui
import { CustomMenu, LayersIcon, StateGroupIcon } from "@plane/ui";
// types
import { IIssue, IIssueComment } from "types";
import { IIssue, IIssueActivity } from "types";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
type Props = {
@ -41,24 +42,22 @@ const issueCommentService = new IssueCommentService();
export const IssueMainContent: React.FC<Props> = observer((props) => {
const { issueDetails, submitChanges, uneditable = false } = props;
// states
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
// router
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
// toast alert
const { setToastAlert } = useToast();
// mobx store
const {
user: userStore,
user: { currentUser, currentProjectRole },
project: projectStore,
projectState: { states },
trackEvent: { postHogEventTracker },
workspace: { currentWorkspace }
} = useMobxStore();
const user = userStore.currentUser ?? undefined;
const userRole = userStore.currentProjectRole;
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : undefined;
const currentIssueState = projectId
? states[projectId.toString()]?.find((s) => s.id === issueDetails.state)
@ -67,7 +66,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
const { data: siblingIssues } = useSWR(
workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
workspaceSlug && projectId && issueDetails?.parent
? () => issueService.subIssues(workspaceSlug as string, projectId as string, issueDetails.parent ?? "")
? () => issueService.subIssues(workspaceSlug.toString(), projectId.toString(), issueDetails.parent ?? "")
: null
);
const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
@ -79,7 +78,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
: null
);
const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
const handleCommentUpdate = async (commentId: string, data: Partial<IIssueActivity>) => {
if (!workspaceSlug || !projectId || !issueId) return;
await issueCommentService
@ -103,7 +102,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
};
const handleCommentDelete = async (commentId: string) => {
if (!workspaceSlug || !projectId || !issueId || !user) return;
if (!workspaceSlug || !projectId || !issueId || !currentUser) return;
mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
@ -126,8 +125,8 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
);
};
const handleAddComment = async (formData: IIssueComment) => {
if (!workspaceSlug || !issueDetails || !user) return;
const handleAddComment = async (formData: IIssueActivity) => {
if (!workspaceSlug || !issueDetails || !currentUser) return;
await issueCommentService
.createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData)
@ -155,7 +154,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
);
};
const isAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
return (
<>
@ -238,10 +237,16 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
isAllowed={isAllowed || !uneditable}
/>
<IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
{workspaceSlug && projectId && (
<IssueReaction
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={issueDetails.id}
/>
)}
<div className="mt-2 space-y-2">
<SubIssuesRoot parentIssue={issueDetails} user={user} />
<SubIssuesRoot parentIssue={issueDetails} user={currentUser ?? undefined} />
</div>
</div>
<div className="flex flex-col gap-3 py-3">

34
web/components/issues/issue-peek-overview/activity/card.tsx → web/components/issues/peek-overview/activity/card.tsx
View File

@ -2,32 +2,34 @@ import { FC } from "react";
import Link from "next/link";
import { History } from "lucide-react";
// packages
import { Tooltip } from "@plane/ui";
import { Loader, Tooltip } from "@plane/ui";
// components
import { ActivityIcon, ActivityMessage } from "components/core";
import { IssueCommentCard } from "./comment-card";
// helpers
import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
// types
import { IIssueActivity, IUser } from "types";
interface IssueActivityCard {
interface IIssueActivityCard {
workspaceSlug: string;
projectId: string;
issueId: string;
user: any;
issueComments: any;
user: IUser | null;
issueActivity: IIssueActivity[] | null;
issueCommentUpdate: (comment: any) => void;
issueCommentRemove: (commentId: string) => void;
issueCommentReactionCreate: (commentId: string, reaction: string) => void;
issueCommentReactionRemove: (commentId: string, reaction: string) => void;
}
export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
export const IssueActivityCard: FC<IIssueActivityCard> = (props) => {
const {
workspaceSlug,
projectId,
issueId,
user,
issueComments,
issueActivity,
issueCommentUpdate,
issueCommentRemove,
issueCommentReactionCreate,
@ -37,9 +39,9 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
return (
<div className="flow-root">
<ul role="list" className="-mb-4">
{issueComments &&
issueComments.length > 0 &&
issueComments.map((activityItem: any, index: any) => {
{issueActivity ? (
issueActivity.length > 0 &&
issueActivity.map((activityItem, index) => {
// determines what type of action is performed
const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
@ -47,7 +49,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
return (
<li key={activityItem.id}>
<div className="relative pb-1">
{issueComments.length > 1 && index !== issueComments.length - 1 ? (
{issueActivity.length > 1 && index !== issueActivity.length - 1 ? (
<span
className="absolute top-5 left-5 -ml-[1.5px] h-full w-0.5 bg-custom-background-100"
aria-hidden="true"
@ -114,7 +116,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
</div>
</li>
);
} else if ("comment_json" in activityItem)
} else if ("comment_html" in activityItem)
return (
<div key={activityItem.id} className="mt-4">
<IssueCommentCard
@ -131,7 +133,15 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
/>
</div>
);
})}
})
) : (
<Loader className="space-y-3 mb-3">
<Loader.Item height="20px" />
<Loader.Item height="20px" />
<Loader.Item height="20px" />
<Loader.Item height="20px" />
</Loader>
)}
</ul>
</div>
);

21
web/components/issues/issue-peek-overview/activity/comment-card.tsx → web/components/issues/peek-overview/activity/comment-card.tsx
View File

@ -12,20 +12,20 @@ import { IssueCommentReaction } from "./comment-reaction";
// helpers
import { timeAgo } from "helpers/date-time.helper";
// types
import type { IIssueComment } from "types";
import type { IIssueActivity, IUser } from "types";
// services
const fileService = new FileService();
type IIssueCommentCard = {
comment: IIssueComment;
comment: IIssueActivity;
handleCommentDeletion: (comment: string) => void;
onSubmit: (data: Partial<IIssueComment>) => void;
onSubmit: (data: Partial<IIssueActivity>) => void;
showAccessSpecifier?: boolean;
workspaceSlug: string;
projectId: string;
issueId: string;
user: any;
user: IUser | null;
issueCommentReactionCreate: (commentId: string, reaction: string) => void;
issueCommentReactionRemove: (commentId: string, reaction: string) => void;
};
@ -57,11 +57,11 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
setFocus,
watch,
setValue,
} = useForm<IIssueComment>({
} = useForm<IIssueActivity>({
defaultValues: comment,
});
const formSubmit = (formData: Partial<IIssueComment>) => {
const formSubmit = (formData: Partial<IIssueActivity>) => {
if (isSubmitting) return;
setIsEditing(false);
@ -119,13 +119,10 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
ref={editorRef}
value={watch("comment_html")}
value={watch("comment_html") ?? ""}
debouncedUpdatesEnabled={false}
customClassName="min-h-[50px] p-3 shadow-sm"
onChange={(comment_json: Object, comment_html: string) => {
setValue("comment_json", comment_json);
setValue("comment_html", comment_html);
}}
onChange={(comment_json: Object, comment_html: string) => setValue("comment_html", comment_html)}
mentionSuggestions={editorSuggestions.mentionSuggestions}
mentionHighlights={editorSuggestions.mentionHighlights}
/>
@ -158,7 +155,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
)}
<LiteReadOnlyEditorWithRef
ref={showEditorRef}
value={comment.comment_html}
value={comment.comment_html ?? ""}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
mentionHighlights={editorSuggestions.mentionHighlights}
/>

12
web/components/issues/issue-peek-overview/activity/comment-editor.tsx → web/components/issues/peek-overview/activity/comment-editor.tsx
View File

@ -11,16 +11,16 @@ import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
// ui
import { Button } from "@plane/ui";
// types
import type { IIssueComment } from "types";
import type { IIssueActivity } from "types";
const defaultValues: Partial<IIssueComment> = {
const defaultValues: Partial<IIssueActivity> = {
access: "INTERNAL",
comment_html: "",
};
type IIssueCommentEditor = {
disabled?: boolean;
onSubmit: (data: IIssueComment) => Promise<void>;
onSubmit: (data: IIssueActivity) => Promise<void>;
showAccessSpecifier?: boolean;
};
@ -60,9 +60,9 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
formState: { isSubmitting },
handleSubmit,
reset,
} = useForm<IIssueComment>({ defaultValues });
} = useForm<IIssueActivity>({ defaultValues });
const handleAddComment = async (formData: IIssueComment) => {
const handleAddComment = async (formData: IIssueActivity) => {
if (!formData.comment_html || isSubmitting) return;
await onSubmit(formData).then(() => {
@ -99,7 +99,7 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
commentAccessSpecifier={
showAccessSpecifier
? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
? { accessValue: accessValue ?? "INTERNAL", onAccessChange, showAccessSpecifier, commentAccess }
: undefined
}
submitButton={

4
web/components/issues/issue-peek-overview/activity/comment-reaction.tsx → web/components/issues/peek-overview/activity/comment-reaction.tsx
View File

@ -2,7 +2,7 @@ import { FC } from "react";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// components
import { IssueReaction } from "../reactions";
import { IssuePeekOverviewReactions } from "components/issues";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// types
@ -49,7 +49,7 @@ export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props)
return (
<div>
<IssueReaction
<IssuePeekOverviewReactions
issueReactions={issueReactions}
user={user}
issueReactionCreate={handleCommentReactionCreate}

4
web/components/issues/issue-peek-overview/activity/index.ts → web/components/issues/peek-overview/activity/index.ts
View File

@ -1,5 +1,5 @@
export * from "./view";
export * from "./card";
export * from "./comment-card";
export * from "./comment-editor";
export * from "./comment-reaction";
export * from "./view";

19
web/components/issues/issue-peek-overview/activity/view.tsx → web/components/issues/peek-overview/activity/view.tsx
View File

@ -1,29 +1,30 @@
import { FC } from "react";
// components
import { IssueActivityCard } from "./card";
import { IssueCommentEditor } from "./comment-editor";
import { IssueActivityCard, IssueCommentEditor } from "components/issues";
// types
import { IIssueActivity, IUser } from "types";
interface IIssueComment {
type Props = {
workspaceSlug: string;
projectId: string;
issueId: string;
user: any;
issueComments: any;
user: IUser | null;
issueActivity: IIssueActivity[] | null;
issueCommentCreate: (comment: any) => void;
issueCommentUpdate: (comment: any) => void;
issueCommentRemove: (commentId: string) => void;
issueCommentReactionCreate: (commentId: string, reaction: string) => void;
issueCommentReactionRemove: (commentId: string, reaction: string) => void;
showCommentAccessSpecifier: boolean;
}
};
export const IssueComment: FC<IIssueComment> = (props) => {
export const IssueActivity: FC<Props> = (props) => {
const {
workspaceSlug,
projectId,
issueId,
user,
issueComments,
issueActivity,
issueCommentCreate,
issueCommentUpdate,
issueCommentRemove,
@ -47,7 +48,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
projectId={projectId}
issueId={issueId}
user={user}
issueComments={issueComments}
issueActivity={issueActivity}
issueCommentUpdate={issueCommentUpdate}
issueCommentRemove={issueCommentRemove}
issueCommentReactionCreate={issueCommentReactionCreate}

6
web/components/issues/peek-overview/index.ts Normal file
View File

@ -0,0 +1,6 @@
export * from "./activity";
export * from "./reactions";
export * from "./issue-detail";
export * from "./properties";
export * from "./root";
export * from "./view";

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

@ -1,19 +1,22 @@
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";
// components
import { TextArea } from "@plane/ui";
import { IssueReaction } from "./reactions";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import debounce from "lodash/debounce";
import useReloadConfirmations from "hooks/use-reload-confirmation";
import useEditorSuggestions from "hooks/use-editor-suggestions";
// components
import { IssuePeekOverviewReactions } from "components/issues";
// ui
import { TextArea } from "@plane/ui";
// types
import { IIssue } from "types";
import { IIssue, IUser } from "types";
// services
import { FileService } from "services/file.service";
import { useMobxStore } from "lib/mobx/store-provider";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
const fileService = new FileService();
@ -22,7 +25,7 @@ interface IPeekOverviewIssueDetails {
workspaceSlug: string;
issue: IIssue;
issueReactions: any;
user: any;
user: IUser | null;
issueUpdate: (issue: Partial<IIssue>) => void;
issueReactionCreate: (reaction: string) => void;
issueReactionRemove: (reaction: string) => void;
@ -89,7 +92,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
setLocalTitleValue(issue.name);
}
}, [issue.id]);
}, [issue.id, issue.description_html, issue.name]);
const debouncedFormSave = debounce(async () => {
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
@ -104,7 +107,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
} else if (isSubmitting === "submitting") {
setShowAlert(true);
}
}, [isSubmitting, setShowAlert]);
}, [isSubmitting, setShowAlert, setIsSubmitting]);
// reset form values
useEffect(() => {
@ -165,7 +168,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
render={({ field: { onChange } }) => (
<RichTextEditor
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
@ -190,7 +193,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
)}
/>
</div>
<IssueReaction
<IssuePeekOverviewReactions
issueReactions={issueReactions}
user={user}
issueReactionCreate={issueReactionCreate}

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

@ -47,8 +47,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
const {
user: { currentProjectRole },
cycleIssues: cycleIssueStore,
moduleIssues: { addIssueToModule },
issueDetail: { fetchPeekIssueDetails },
} = useMobxStore();

2
web/components/issues/issue-peek-overview/reactions/index.ts → web/components/issues/peek-overview/reactions/index.ts
View File

@ -1,3 +1,3 @@
export * from "./preview";
export * from "./root";
export * from "./selector";
export * from "./preview";

0
web/components/issues/issue-peek-overview/reactions/preview.tsx → web/components/issues/peek-overview/reactions/preview.tsx
View File

8
web/components/issues/issue-peek-overview/reactions/root.tsx → web/components/issues/peek-overview/reactions/root.tsx
View File

@ -1,16 +1,18 @@
import { FC } from "react";
// components
import { IssueReactionPreview, IssueReactionSelector } from "./";
import { IssueReactionPreview, IssueReactionSelector } from "components/issues";
// types
import { IUser } from "types";
interface IIssueReaction {
issueReactions: any;
user: any;
user: IUser | null;
issueReactionCreate: (reaction: string) => void;
issueReactionRemove: (reaction: string) => void;
position?: "top" | "bottom";
}
export const IssueReaction: FC<IIssueReaction> = (props) => {
export const IssuePeekOverviewReactions: FC<IIssueReaction> = (props) => {
const { issueReactions, user, issueReactionCreate, issueReactionRemove, position = "bottom" } = props;
const handleReaction = (reaction: string) => {

0
web/components/issues/issue-peek-overview/reactions/selector.tsx → web/components/issues/peek-overview/reactions/selector.tsx
View File

91
web/components/issues/issue-peek-overview/root.tsx → web/components/issues/peek-overview/root.tsx
View File

@ -1,17 +1,17 @@
import { FC, Fragment, ReactNode, useEffect } from "react";
import { FC, Fragment, ReactNode, useCallback, useEffect } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// components
import { IssueView } from "./view";
import { IssueView } from "components/issues";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IIssue } from "types";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
interface IIssuePeekOverview {
@ -30,27 +30,45 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const { peekIssueId } = router.query;
const {
user: userStore,
issue: issueStore,
issueDetail: issueDetailStore,
archivedIssueDetail: archivedIssueDetailStore,
archivedIssues: archivedIssuesStore,
project: projectStore,
user: { currentProjectRole },
issue: { removeIssueFromStructure },
issueDetail: {
createIssueComment,
updateIssueComment,
removeIssueComment,
creationIssueCommentReaction,
removeIssueCommentReaction,
createIssueReaction,
removeIssueReaction,
createIssueSubscription,
removeIssueSubscription,
getIssue,
loader,
fetchPeekIssueDetails,
setPeekId,
fetchIssueActivity,
},
archivedIssueDetail: {
getIssue: getArchivedIssue,
loader: archivedIssueLoader,
fetchPeekIssueDetails: fetchArchivedPeekIssueDetails,
},
archivedIssues: { deleteArchivedIssue },
project: { currentProjectDetails },
} = useMobxStore();
const { setToastAlert } = useToast();
const fetchIssueDetail = async () => {
const fetchIssueDetail = useCallback(async () => {
if (workspaceSlug && projectId && peekIssueId) {
if (isArchived)
await archivedIssueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
else await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
if (isArchived) await fetchArchivedPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
else await fetchPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
}
};
}, [fetchArchivedPeekIssueDetails, fetchPeekIssueDetails, workspaceSlug, projectId, peekIssueId, isArchived]);
useEffect(() => {
fetchIssueDetail();
}, [workspaceSlug, projectId, peekIssueId]);
}, [workspaceSlug, projectId, peekIssueId, fetchIssueDetail]);
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
@ -72,44 +90,43 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
});
};
const issue = isArchived ? archivedIssueDetailStore.getIssue : issueDetailStore.getIssue;
const isLoading = isArchived ? archivedIssueDetailStore.loader : issueDetailStore.loader;
const issue = isArchived ? getArchivedIssue : getIssue;
const isLoading = isArchived ? archivedIssueLoader : loader;
const issueUpdate = (_data: Partial<IIssue>) => {
if (handleIssue) handleIssue(_data);
const issueUpdate = async (_data: Partial<IIssue>) => {
if (handleIssue) {
await handleIssue(_data);
fetchIssueActivity(workspaceSlug, projectId, issueId);
}
};
const issueReactionCreate = (reaction: string) =>
issueDetailStore.createIssueReaction(workspaceSlug, projectId, issueId, reaction);
const issueReactionCreate = (reaction: string) => createIssueReaction(workspaceSlug, projectId, issueId, reaction);
const issueReactionRemove = (reaction: string) =>
issueDetailStore.removeIssueReaction(workspaceSlug, projectId, issueId, reaction);
const issueReactionRemove = (reaction: string) => removeIssueReaction(workspaceSlug, projectId, issueId, reaction);
const issueCommentCreate = (comment: any) =>
issueDetailStore.createIssueComment(workspaceSlug, projectId, issueId, comment);
const issueCommentCreate = (comment: any) => createIssueComment(workspaceSlug, projectId, issueId, comment);
const issueCommentUpdate = (comment: any) =>
issueDetailStore.updateIssueComment(workspaceSlug, projectId, issueId, comment?.id, comment);
updateIssueComment(workspaceSlug, projectId, issueId, comment?.id, comment);
const issueCommentRemove = (commentId: string) =>
issueDetailStore.removeIssueComment(workspaceSlug, projectId, issueId, commentId);
const issueCommentRemove = (commentId: string) => removeIssueComment(workspaceSlug, projectId, issueId, commentId);
const issueCommentReactionCreate = (commentId: string, reaction: string) =>
issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
const issueCommentReactionRemove = (commentId: string, reaction: string) =>
issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
const issueSubscriptionCreate = () => issueDetailStore.createIssueSubscription(workspaceSlug, projectId, issueId);
const issueSubscriptionCreate = () => createIssueSubscription(workspaceSlug, projectId, issueId);
const issueSubscriptionRemove = () => issueDetailStore.removeIssueSubscription(workspaceSlug, projectId, issueId);
const issueSubscriptionRemove = () => removeIssueSubscription(workspaceSlug, projectId, issueId);
const handleDeleteIssue = async () => {
if (isArchived) await archivedIssuesStore.deleteArchivedIssue(workspaceSlug, projectId, issue!);
else await issueStore.removeIssueFromStructure(workspaceSlug, projectId, issue!);
if (isArchived) await deleteArchivedIssue(workspaceSlug, projectId, issue!);
else removeIssueFromStructure(workspaceSlug, projectId, issue!);
const { query } = router;
if (query.peekIssueId) {
issueDetailStore.setPeekId(null);
setPeekId(null);
delete query.peekIssueId;
delete query.peekProjectId;
router.push({
@ -119,7 +136,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
}
};
const userRole = userStore.currentProjectRole ?? EUserWorkspaceRoles.GUEST;
const userRole = currentProjectRole ?? EUserWorkspaceRoles.GUEST;
return (
<Fragment>
@ -144,7 +161,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
issueSubscriptionRemove={issueSubscriptionRemove}
handleDeleteIssue={handleDeleteIssue}
disableUserActions={[5, 10].includes(userRole)}
showCommentAccessSpecifier={projectStore.currentProjectDetails?.is_deployed}
showCommentAccessSpecifier={currentProjectDetails?.is_deployed}
>
{children}
</IssueView>

67
web/components/issues/issue-peek-overview/view.tsx → web/components/issues/peek-overview/view.tsx
View File

@ -3,16 +3,21 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { PeekOverviewIssueDetails } from "./issue-detail";
import { PeekOverviewProperties } from "./properties";
import { IssueComment } from "./activity";
import {
DeleteArchivedIssueModal,
DeleteIssueModal,
IssueActivity,
IssueUpdateStatus,
PeekOverviewIssueDetails,
PeekOverviewProperties,
} from "components/issues";
// ui
import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
import { DeleteIssueModal, DeleteArchivedIssueModal, IssueUpdateStatus } from "components/issues/";
// types
import { IIssue } from "types";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
interface IIssueView {
workspaceSlug: string;
@ -41,7 +46,7 @@ interface IIssueView {
type TPeekModes = "side-peek" | "modal" | "full-screen";
const peekOptions: { key: TPeekModes; icon: any; title: string }[] = [
const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
{
key: "side-peek",
icon: SidePanelIcon,
@ -86,9 +91,12 @@ export const IssueView: FC<IIssueView> = observer((props) => {
} = props;
const router = useRouter();
const { peekIssueId } = router.query as { peekIssueId: string };
const { peekIssueId } = router.query;
const { user: userStore, issueDetail: issueDetailStore } = useMobxStore();
const {
user: { currentUser },
issueDetail: { fetchIssueSubscription, getIssueActivity, getIssueReactions, getIssueSubscription, setPeekId },
} = useMobxStore();
const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@ -96,7 +104,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
const updateRoutePeekId = () => {
if (issueId != peekIssueId) {
issueDetailStore.setPeekId(issueId);
setPeekId(issueId);
const { query } = router;
router.push({
pathname: router.pathname,
@ -104,10 +112,13 @@ export const IssueView: FC<IIssueView> = observer((props) => {
});
}
};
const removeRoutePeekId = () => {
const { query } = router;
if (query.peekIssueId) {
issueDetailStore.setPeekId(null);
setPeekId(null);
delete query.peekIssueId;
delete query.peekProjectId;
router.push({
@ -123,18 +134,16 @@ export const IssueView: FC<IIssueView> = observer((props) => {
: null,
async () => {
if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
await issueDetailStore.fetchIssueSubscription(workspaceSlug, projectId, issueId);
await fetchIssueSubscription(workspaceSlug, projectId, issueId);
}
}
);
const issueReactions = issueDetailStore.getIssueReactions || [];
const issueComments = issueDetailStore.getIssueComments || [];
const issueSubscription = issueDetailStore.getIssueSubscription || [];
const issueReactions = getIssueReactions || [];
const issueActivity = getIssueActivity;
const issueSubscription = getIssueSubscription || [];
const user = userStore?.currentUser;
const currentMode = peekOptions.find((m) => m.key === peekMode);
const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
return (
<>
@ -198,7 +207,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
</button>
}
>
{peekOptions.map((mode) => (
{PEEK_OPTIONS.map((mode) => (
<CustomSelect.Option key={mode.key} value={mode.key}>
<div
className={`flex items-center gap-1.5 ${
@ -219,8 +228,8 @@ 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 !== user?.id &&
!issue?.assignees.includes(user?.id ?? "") &&
{issue?.created_by !== currentUser?.id &&
!issue?.assignees.includes(currentUser?.id ?? "") &&
!router.pathname.includes("[archivedIssueId]") && (
<Button
size="sm"
@ -269,7 +278,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issue={issue}
issueUpdate={issueUpdate}
issueReactions={issueReactions}
user={user}
user={currentUser}
issueReactionCreate={issueReactionCreate}
issueReactionRemove={issueReactionRemove}
/>
@ -280,12 +289,12 @@ export const IssueView: FC<IIssueView> = observer((props) => {
disableUserActions={disableUserActions}
/>
<IssueComment
<IssueActivity
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
user={user}
issueComments={issueComments}
user={currentUser}
issueActivity={issueActivity}
issueCommentCreate={issueCommentCreate}
issueCommentUpdate={issueCommentUpdate}
issueCommentRemove={issueCommentRemove}
@ -305,17 +314,17 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issue={issue}
issueReactions={issueReactions}
issueUpdate={issueUpdate}
user={user}
user={currentUser}
issueReactionCreate={issueReactionCreate}
issueReactionRemove={issueReactionRemove}
/>
<IssueComment
<IssueActivity
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
user={user}
issueComments={issueComments}
user={currentUser}
issueActivity={issueActivity}
issueCommentCreate={issueCommentCreate}
issueCommentUpdate={issueCommentUpdate}
issueCommentRemove={issueCommentRemove}

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

@ -65,7 +65,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
workspaceSlug={workspaceSlug}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={(issueToUpdate) => handleUpdateIssue(issue, { ...issue, ...issueToUpdate })}
handleIssue={async (issueToUpdate) => await handleUpdateIssue(issue, { ...issue, ...issueToUpdate })}
/>
)}
<div>

2
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -26,7 +26,7 @@ import { NextPageWithLayout } from "types/app";
import { IPage, IIssue } from "types";
// fetch-keys
import { PAGE_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
import { IssuePeekOverview } from "components/issues/issue-peek-overview";
import { IssuePeekOverview } from "components/issues/peek-overview";
import { IssueService } from "services/issue";
import useToast from "hooks/use-toast";
import useReloadConfirmations from "hooks/use-reload-confirmation";

6
web/services/issue/issue_comment.service.ts
View File

@ -1,6 +1,6 @@
import { APIService } from "services/api.service";
// types
import { IIssueComment } from "types";
import { IIssueActivity } from "types";
// helper
import { API_BASE_URL } from "helpers/common.helper";
@ -21,7 +21,7 @@ export class IssueCommentService extends APIService {
workspaceSlug: string,
projectId: string,
issueId: string,
data: Partial<IIssueComment>
data: Partial<IIssueActivity>
): Promise<any> {
return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`, data)
.then((response) => response?.data)
@ -35,7 +35,7 @@ export class IssueCommentService extends APIService {
projectId: string,
issueId: string,
commentId: string,
data: Partial<IIssueComment>
data: Partial<IIssueActivity>
): Promise<any> {
return this.patch(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,

4
web/services/issue/issue_reaction.service.ts
View File

@ -2,7 +2,7 @@ import { API_BASE_URL } from "helpers/common.helper";
// services
import { APIService } from "services/api.service";
// types
import type { IssueReaction, IssueCommentReaction, IssueReactionForm, IssueCommentReactionForm } from "types";
import type { IssueCommentReaction, IssueReactionForm, IssueCommentReactionForm, IIssueReaction } from "types";
export class IssueReactionService extends APIService {
constructor() {
@ -22,7 +22,7 @@ export class IssueReactionService extends APIService {
});
}
async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<IssueReaction[]> {
async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssueReaction[]> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`)
.then((response) => response?.data)
.catch((error) => {

2
web/store/archived-issues/issue_detail.store.ts
View File

@ -173,7 +173,7 @@ export class ArchivedIssueDetailStore implements IArchivedIssueDetailStore {
try {
const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
await this.rootStore.issueDetail.fetchIssueReactions(workspaceSlug, projectId, issueId);
await this.rootStore.issueDetail.fetchIssueComments(workspaceSlug, projectId, issueId);
await this.rootStore.issueDetail.fetchIssueActivity(workspaceSlug, projectId, issueId);
runInAction(() => {
this.loader = false;

4
web/store/event-tracker.store.ts
View File

@ -34,7 +34,6 @@ export class TrackEventStore implements ITrackEventStore {
group?: { isGrouping: boolean | null; groupType: string | null; gorupId: string | null } | null
) => {
try {
console.log("POSTHOG_EVENT: ", eventName);
let extras: any = {
workspace_name: this.rootStore.workspace.currentWorkspace?.name ?? "",
workspace_id: this.rootStore.workspace.currentWorkspace?.id ?? "",
@ -70,9 +69,8 @@ export class TrackEventStore implements ITrackEventStore {
element: this.trackElement ?? "",
});
}
console.log(payload);
} catch (error) {
console.log(error);
throw error;
}
this.setTrackElement("");
};

157
web/store/issue/issue_detail.store.ts
View File

@ -4,7 +4,7 @@ import { IssueService, IssueReactionService, IssueCommentService } from "service
import { NotificationService } from "services/notification.service";
// types
import { RootStore } from "../root";
import { IIssue } from "types";
import type { IIssue, IIssueActivity } from "types";
// constants
import { groupReactionEmojis } from "constants/issue";
@ -16,18 +16,18 @@ export interface IIssueDetailStore {
issues: {
[issueId: string]: IIssue;
};
issue_reactions: {
issueReactions: {
[issueId: string]: any;
};
issue_comments: {
[issueId: string]: any;
issueActivity: {
[issueId: string]: IIssueActivity[];
};
issue_comment_reactions: {
issueCommentReactions: {
[issueId: string]: {
[comment_id: string]: any;
};
};
issue_subscription: {
issueSubscription: {
[issueId: string]: any;
};
@ -36,7 +36,7 @@ export interface IIssueDetailStore {
// computed
getIssue: IIssue | null;
getIssueReactions: any | null;
getIssueComments: any | null;
getIssueActivity: IIssueActivity[] | null;
getIssueCommentReactions: any | null;
getIssueSubscription: any | null;
@ -51,7 +51,7 @@ export interface IIssueDetailStore {
createIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
removeIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
fetchIssueComments: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
fetchIssueActivity: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
createIssueComment: (workspaceSlug: string, projectId: string, issueId: string, data: any) => Promise<void>;
updateIssueComment: (
workspaceSlug: string,
@ -96,16 +96,16 @@ export class IssueDetailStore implements IIssueDetailStore {
issues: {
[issueId: string]: IIssue;
} = {};
issue_reactions: {
issueReactions: {
[issueId: string]: any;
} = {};
issue_comments: {
issueActivity: {
[issueId: string]: IIssueActivity[];
} = {};
issueCommentReactions: {
[issueId: string]: any;
} = {};
issue_comment_reactions: {
[issueId: string]: any;
} = {};
issue_subscription: {
issueSubscription: {
[issueId: string]: any;
} = {};
@ -125,14 +125,14 @@ export class IssueDetailStore implements IIssueDetailStore {
peekId: observable.ref,
issues: observable.ref,
issue_reactions: observable.ref,
issue_comments: observable.ref,
issue_comment_reactions: observable.ref,
issue_subscription: observable.ref,
issueReactions: observable.ref,
issueActivity: observable.ref,
issueCommentReactions: observable.ref,
issueSubscription: observable.ref,
getIssue: computed,
getIssueReactions: computed,
getIssueComments: computed,
getIssueActivity: computed,
getIssueCommentReactions: computed,
getIssueSubscription: computed,
@ -147,7 +147,7 @@ export class IssueDetailStore implements IIssueDetailStore {
createIssueReaction: action,
removeIssueReaction: action,
fetchIssueComments: action,
fetchIssueActivity: action,
createIssueComment: action,
updateIssueComment: action,
removeIssueComment: action,
@ -196,25 +196,25 @@ export class IssueDetailStore implements IIssueDetailStore {
get getIssueReactions() {
if (!this.peekId) return null;
const _reactions = this.issue_reactions[this.peekId];
const _reactions = this.issueReactions[this.peekId];
return _reactions || null;
}
get getIssueComments() {
get getIssueActivity() {
if (!this.peekId) return null;
const _comments = this.issue_comments[this.peekId];
return _comments || null;
const activity = this.issueActivity[this.peekId];
return activity || null;
}
get getIssueCommentReactions() {
if (!this.peekId) return null;
const _commentReactions = this.issue_comment_reactions[this.peekId];
const _commentReactions = this.issueCommentReactions[this.peekId];
return _commentReactions || null;
}
get getIssueSubscription() {
if (!this.peekId) return null;
const _commentSubscription = this.issue_subscription[this.peekId];
const _commentSubscription = this.issueSubscription[this.peekId];
return _commentSubscription || null;
}
@ -292,7 +292,7 @@ export class IssueDetailStore implements IIssueDetailStore {
const issueDetailsResponse = await this.issueService.retrieve(workspaceSlug, projectId, issueId);
await this.fetchIssueReactions(workspaceSlug, projectId, issueId);
await this.fetchIssueComments(workspaceSlug, projectId, issueId);
await this.fetchIssueActivity(workspaceSlug, projectId, issueId);
runInAction(() => {
this.loader = false;
@ -319,13 +319,13 @@ export class IssueDetailStore implements IIssueDetailStore {
try {
const _reactions = await this.issueReactionService.listIssueReactions(workspaceSlug, projectId, issueId);
const _issue_reactions = {
...this.issue_reactions,
const _issueReactions = {
...this.issueReactions,
[issueId]: groupReactionEmojis(_reactions),
};
runInAction(() => {
this.issue_reactions = _issue_reactions;
this.issueReactions = _issueReactions;
});
} catch (error) {
console.warn("error creating the issue reaction", error);
@ -346,15 +346,15 @@ export class IssueDetailStore implements IIssueDetailStore {
};
runInAction(() => {
this.issue_reactions = {
...this.issue_reactions,
this.issueReactions = {
...this.issueReactions,
[issueId]: _currentReactions,
};
});
} catch (error) {
runInAction(() => {
this.issue_reactions = {
...this.issue_reactions,
this.issueReactions = {
...this.issueReactions,
[issueId]: _currentReactions,
};
});
@ -375,8 +375,8 @@ export class IssueDetailStore implements IIssueDetailStore {
};
runInAction(() => {
this.issue_reactions = {
...this.issue_reactions,
this.issueReactions = {
...this.issueReactions,
[issueId]: _currentReactions,
};
});
@ -385,8 +385,8 @@ export class IssueDetailStore implements IIssueDetailStore {
}
} catch (error) {
runInAction(() => {
this.issue_reactions = {
...this.issue_reactions,
this.issueReactions = {
...this.issueReactions,
[issueId]: _currentReactions,
};
});
@ -395,24 +395,25 @@ export class IssueDetailStore implements IIssueDetailStore {
}
};
// comments
fetchIssueComments = async (workspaceSlug: string, projectId: string, issueId: string) => {
fetchIssueActivity = async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
const _issueCommentResponse = await this.issueService.getIssueActivities(workspaceSlug, projectId, issueId);
const issueActivityResponse = await this.issueService.getIssueActivities(workspaceSlug, projectId, issueId);
const _issueComments = {
...this.issue_comments,
[issueId]: [..._issueCommentResponse],
...this.issueActivity,
[issueId]: [...issueActivityResponse],
};
runInAction(() => {
this.issue_comments = _issueComments;
this.issueActivity = _issueComments;
});
} catch (error) {
console.warn("error creating the issue comment", error);
throw error;
}
};
// comments
createIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
try {
const _issueCommentResponse = await this.issueCommentService.createIssueComment(
@ -423,18 +424,19 @@ export class IssueDetailStore implements IIssueDetailStore {
);
const _issueComments = {
...this.issue_comments,
[issueId]: [...this.issue_comments[issueId], _issueCommentResponse],
...this.issueActivity,
[issueId]: [...this.issueActivity[issueId], _issueCommentResponse],
};
runInAction(() => {
this.issue_comments = _issueComments;
this.issueActivity = _issueComments;
});
} catch (error) {
console.warn("error creating the issue comment", error);
throw error;
}
};
updateIssueComment = async (
workspaceSlug: string,
projectId: string,
@ -452,31 +454,32 @@ export class IssueDetailStore implements IIssueDetailStore {
);
const _issueComments = {
...this.issue_comments,
[issueId]: this.issue_comments[issueId].map((comment: any) =>
...this.issueActivity,
[issueId]: this.issueActivity[issueId].map((comment) =>
comment.id === commentId ? _issueCommentResponse : comment
),
};
runInAction(() => {
this.issue_comments = _issueComments;
this.issueActivity = _issueComments;
});
} catch (error) {
console.warn("error updating the issue comment", error);
throw error;
}
};
removeIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
try {
const _issueComments = {
...this.issue_comments,
[issueId]: this.issue_comments[issueId].filter((comment: any) => comment.id != commentId),
...this.issueActivity,
[issueId]: this.issueActivity[issueId]?.filter((comment) => comment.id != commentId),
};
await this.issueCommentService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId);
runInAction(() => {
this.issue_comments = _issueComments;
this.issueActivity = _issueComments;
});
} catch (error) {
console.warn("error removing the issue comment", error);
@ -484,27 +487,28 @@ export class IssueDetailStore implements IIssueDetailStore {
}
};
// comment reaction
// comment reactions
fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
try {
const _reactions = await this.issueReactionService.listIssueCommentReactions(workspaceSlug, projectId, commentId);
const _issue_comment_reactions = {
...this.issue_comment_reactions,
const _issueCommentReactions = {
...this.issueCommentReactions,
[issueId]: {
...this.issue_comment_reactions[issueId],
...this.issueCommentReactions[issueId],
[commentId]: groupReactionEmojis(_reactions),
},
};
runInAction(() => {
this.issue_comment_reactions = _issue_comment_reactions;
this.issueCommentReactions = _issueCommentReactions;
});
} catch (error) {
console.warn("error removing the issue comment", error);
throw error;
}
};
creationIssueCommentReaction = async (
workspaceSlug: string,
projectId: string,
@ -530,22 +534,23 @@ export class IssueDetailStore implements IIssueDetailStore {
[reaction]: [..._currentReactions?.[reaction], { ..._reaction }],
};
const _issue_comment_reactions = {
...this.issue_comment_reactions,
const _issueCommentReactions = {
...this.issueCommentReactions,
[issueId]: {
...this.issue_comment_reactions[issueId],
...this.issueCommentReactions[issueId],
[commentId]: _currentReactions,
},
};
runInAction(() => {
this.issue_comment_reactions = _issue_comment_reactions;
this.issueCommentReactions = _issueCommentReactions;
});
} catch (error) {
console.warn("error removing the issue comment", error);
throw error;
}
};
removeIssueCommentReaction = async (
workspaceSlug: string,
projectId: string,
@ -565,16 +570,16 @@ export class IssueDetailStore implements IIssueDetailStore {
[reaction]: [..._currentReactions?.[reaction].filter((r: any) => r.actor !== user.id)],
};
const _issue_comment_reactions = {
...this.issue_comment_reactions,
const _issueCommentReactions = {
...this.issueCommentReactions,
[issueId]: {
...this.issue_comment_reactions[issueId],
...this.issueCommentReactions[issueId],
[commentId]: _currentReactions,
},
};
runInAction(() => {
this.issue_comment_reactions = _issue_comment_reactions;
this.issueCommentReactions = _issueCommentReactions;
});
await this.issueReactionService.deleteIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
@ -585,7 +590,7 @@ export class IssueDetailStore implements IIssueDetailStore {
}
};
// subscription
// subscriptions
fetchIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
const _subscription = await this.notificationService.getIssueNotificationSubscriptionStatus(
@ -594,13 +599,13 @@ export class IssueDetailStore implements IIssueDetailStore {
issueId
);
const _issue_subscription = {
...this.issue_subscription,
const _issueSubscription = {
...this.issueSubscription,
[issueId]: _subscription,
};
runInAction(() => {
this.issue_subscription = _issue_subscription;
this.issueSubscription = _issueSubscription;
});
} catch (error) {
console.warn("error fetching the issue subscription", error);
@ -611,13 +616,13 @@ export class IssueDetailStore implements IIssueDetailStore {
try {
await this.notificationService.subscribeToIssueNotifications(workspaceSlug, projectId, issueId);
const _issue_subscription = {
...this.issue_subscription,
const _issueSubscription = {
...this.issueSubscription,
[issueId]: { subscribed: true },
};
runInAction(() => {
this.issue_subscription = _issue_subscription;
this.issueSubscription = _issueSubscription;
});
} catch (error) {
console.warn("error creating the issue subscription", error);
@ -626,13 +631,13 @@ export class IssueDetailStore implements IIssueDetailStore {
};
removeIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
const _issue_subscription = {
...this.issue_subscription,
const _issueSubscription = {
...this.issueSubscription,
[issueId]: { subscribed: false },
};
runInAction(() => {
this.issue_subscription = _issue_subscription;
this.issueSubscription = _issueSubscription;
});
await this.notificationService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);

15
web/types/issues.d.ts vendored
View File

@ -181,18 +181,20 @@ export interface IIssueLabelTree extends IIssueLabel {
}
export interface IIssueActivity {
access?: "EXTERNAL" | "INTERNAL";
actor: string;
actor_detail: IUserLite;
attachments: any[];
comment: string;
comment?: string;
comment_html?: string;
comment_stripped?: string;
created_at: Date;
created_by: string;
field: string | null;
id: string;
issue: string | null;
issue_comment: string | null;
issue_comment?: string | null;
issue_detail: {
description: any;
description_html: string;
id: string;
name: string;
@ -212,13 +214,6 @@ export interface IIssueActivity {
workspace_detail?: IWorkspaceLite;
}
export interface IIssueComment extends IIssueActivity {
access: "EXTERNAL" | "INTERNAL";
comment_html: string;
comment_json: any;
comment_stripped: string;
}
export interface IIssueLite {
id: string;
name: string;

21
web/types/reaction.d.ts vendored
View File

@ -1,14 +1,17 @@
export interface IssueReaction {
id: string;
created_at: Date;
updated_at: Date;
reaction: string;
created_by: string;
updated_by: string;
project: string;
workspace: string;
import { IUserLite } from "./users";
export interface IIssueReaction {
actor: string;
actor_detail: IUserLite;
created_at: Date;
created_by: string;
id: string;
issue: string;
project: string;
reaction: string;
updated_at: Date;
updated_by: string;
workspace: string;
}
export interface IssueReactionForm {