binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WIKI-551] refactor: work item activity logic #7417

Browse source
This commit is contained in:
Aaryan Khandelwal 2025-07-15 20:49:20 +05:30 • committed by GitHub
parent 2058f06b8a
commit df762afaef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 56 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/web/ce/store/issue/issue-details/activity.store.ts
View file

@ -43,7 +43,7 @@ export interface IIssueActivityStore extends IIssueActivityStoreActions {
// helper methods // helper methods
getActivitiesByIssueId: (issueId: string) => string[] | undefined; getActivitiesByIssueId: (issueId: string) => string[] | undefined;
getActivityById: (activityId: string) => TIssueActivity | undefined; getActivityById: (activityId: string) => TIssueActivity | undefined;
getActivityCommentByIssueId: (issueId: string, sortOrder: E_SORT_ORDER) => TIssueActivityComment[] | undefined; getActivityAndCommentsByIssueId: (issueId: string, sortOrder: E_SORT_ORDER) => TIssueActivityComment[] | undefined;
} }
export class IssueActivityStore implements IIssueActivityStore { export class IssueActivityStore implements IIssueActivityStore {
@ -84,7 +84,7 @@ export class IssueActivityStore implements IIssueActivityStore {
return this.activityMap[activityId] ?? undefined; return this.activityMap[activityId] ?? undefined;
}; };
getActivityCommentByIssueId = computedFn((issueId: string, sortOrder: E_SORT_ORDER) => { getActivityAndCommentsByIssueId = computedFn((issueId: string, sortOrder: E_SORT_ORDER) => {
if (!issueId) return undefined; if (!issueId) return undefined;
let activityComments: TIssueActivityComment[] = []; let activityComments: TIssueActivityComment[] = [];
@ -92,10 +92,12 @@ export class IssueActivityStore implements IIssueActivityStore {
const currentStore = const currentStore =
this.serviceType === EIssueServiceType.EPICS ? this.store.issue.epicDetail : this.store.issue.issueDetail; this.serviceType === EIssueServiceType.EPICS ? this.store.issue.epicDetail : this.store.issue.issueDetail;
const activities = this.getActivitiesByIssueId(issueId) || []; const activities = this.getActivitiesByIssueId(issueId);
const comments = currentStore.comment.getCommentsByIssueId(issueId) || []; const comments = currentStore.comment.getCommentsByIssueId(issueId);
activities.forEach((activityId) => { if (!activities || !comments) return undefined;
activities?.forEach((activityId) => {
const activity = this.getActivityById(activityId); const activity = this.getActivityById(activityId);
if (!activity) return; if (!activity) return;
activityComments.push({ activityComments.push({
@ -105,7 +107,7 @@ export class IssueActivityStore implements IIssueActivityStore {
}); });
}); });
comments.forEach((commentId) => { comments?.forEach((commentId) => {
const comment = currentStore.comment.getCommentById(commentId); const comment = currentStore.comment.getCommentById(commentId);
if (!comment) return; if (!comment) return;
activityComments.push({ activityComments.push({

30
apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
View file

@ -1,16 +1,18 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// constants // plane imports
import { E_SORT_ORDER, TActivityFilters, filterActivityOnSelectedFilters } from "@plane/constants"; import { E_SORT_ORDER, TActivityFilters, filterActivityOnSelectedFilters } from "@plane/constants";
// hooks
import { TCommentsOperations } from "@plane/types"; import { TCommentsOperations } from "@plane/types";
// components
import { CommentCard } from "@/components/comments/card/root"; import { CommentCard } from "@/components/comments/card/root";
// hooks
import { useIssueDetail } from "@/hooks/store"; import { useIssueDetail } from "@/hooks/store";
// plane web components // plane web components
import { IssueAdditionalPropertiesActivity } from "@/plane-web/components/issues"; import { IssueAdditionalPropertiesActivity } from "@/plane-web/components/issues";
import { IssueActivityWorklog } from "@/plane-web/components/issues/worklog/activity/root"; import { IssueActivityWorklog } from "@/plane-web/components/issues/worklog/activity/root";
// components // local imports
import { IssueActivityItem } from "./activity/activity-list"; import { IssueActivityItem } from "./activity/activity-list";
import { IssueActivityLoader } from "./loader";
type TIssueActivityCommentRoot = { type TIssueActivityCommentRoot = {
workspaceSlug: string; workspaceSlug: string;
@ -34,21 +36,23 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
disabled, disabled,
sortOrder, sortOrder,
} = props; } = props;
// hooks // store hooks
const { const {
activity: { getActivityCommentByIssueId }, activity: { getActivityAndCommentsByIssueId },
comment: { getCommentById }, comment: { getCommentById },
} = useIssueDetail(); } = useIssueDetail();
// derived values
const activityAndComments = getActivityAndCommentsByIssueId(issueId, sortOrder);
const activityComments = getActivityCommentByIssueId(issueId, sortOrder); if (!activityAndComments) return <IssueActivityLoader />;
if (!activityComments || (activityComments && activityComments.length <= 0)) return <></>; if (activityAndComments.length <= 0) return null;
const filteredActivityComments = filterActivityOnSelectedFilters(activityComments, selectedFilters); const filteredActivityAndComments = filterActivityOnSelectedFilters(activityAndComments, selectedFilters);
return ( return (
<div> <div>
{filteredActivityComments.map((activityComment, index) => { {filteredActivityAndComments.map((activityComment, index) => {
const comment = getCommentById(activityComment.id); const comment = getCommentById(activityComment.id);
return activityComment.activity_type === "COMMENT" ? ( return activityComment.activity_type === "COMMENT" ? (
<CommentCard <CommentCard
@ -56,7 +60,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
comment={comment} comment={comment}
activityOperations={activityOperations} activityOperations={activityOperations}
ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined} ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
showAccessSpecifier={!!showAccessSpecifier} showAccessSpecifier={!!showAccessSpecifier}
showCopyLinkOption showCopyLinkOption
disabled={disabled} disabled={disabled}
@ -65,12 +69,12 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
) : activityComment.activity_type === "ACTIVITY" ? ( ) : activityComment.activity_type === "ACTIVITY" ? (
<IssueActivityItem <IssueActivityItem
activityId={activityComment.id} activityId={activityComment.id}
ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined} ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
/> />
) : activityComment.activity_type === "ISSUE_ADDITIONAL_PROPERTIES_ACTIVITY" ? ( ) : activityComment.activity_type === "ISSUE_ADDITIONAL_PROPERTIES_ACTIVITY" ? (
<IssueAdditionalPropertiesActivity <IssueAdditionalPropertiesActivity
activityId={activityComment.id} activityId={activityComment.id}
ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined} ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
/> />
) : activityComment.activity_type === "WORKLOG" ? ( ) : activityComment.activity_type === "WORKLOG" ? (
<IssueActivityWorklog <IssueActivityWorklog
@ -78,7 +82,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
projectId={projectId} projectId={projectId}
issueId={issueId} issueId={issueId}
activityComment={activityComment} activityComment={activityComment}
ends={index === 0 ? "top" : index === filteredActivityComments.length - 1 ? "bottom" : undefined} ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
/> />
) : ( ) : (
<></> <></>

31
apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx Normal file
View file

@ -0,0 +1,31 @@
// plane imports
import { Loader } from "@plane/ui";
export const IssueActivityLoader = () => (
<Loader className="space-y-8">
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="60%" />
<Loader.Item height="8px" width="40%" />
<Loader.Item height="10px" width="100%" />
</div>
</div>
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="40%" />
<Loader.Item height="8px" width="60%" />
<Loader.Item height="10px" width="80%" />
</div>
</div>
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="60%" />
<Loader.Item height="8px" width="40%" />
<Loader.Item height="10px" width="100%" />
</div>
</div>
</Loader>
);