From d8fc06dad36669be9cb8e60a8ffb58634e2ef2e0 Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Mon, 23 Dec 2024 16:22:31 +0530 Subject: [PATCH] improvement: enhance activity components and types modularity --- packages/types/src/activity.d.ts | 36 +++++++++++++++++++ packages/types/src/enums.ts | 6 ++-- packages/types/src/index.d.ts | 1 + web/ce/types/projects/project-activity.ts | 28 ++------------- .../common/activity/activity-block.tsx | 19 +++++----- .../common/activity/activity-item.tsx | 2 ++ .../components/common/activity/helper.tsx | 8 +++-- web/core/components/common/activity/user.tsx | 24 +++++++++---- 8 files changed, 77 insertions(+), 47 deletions(-) create mode 100644 packages/types/src/activity.d.ts diff --git a/packages/types/src/activity.d.ts b/packages/types/src/activity.d.ts new file mode 100644 index 00000000000..98d54dabc44 --- /dev/null +++ b/packages/types/src/activity.d.ts @@ -0,0 +1,36 @@ +export type TBaseActivity< + TFieldKey extends string = string, + TVerbKey extends string = string, +> = { + id: string; + field: TFieldKey | undefined; + epoch: number; + verb: TVerbKey; + comment: string | undefined; + // updates + old_value: string | undefined; + new_value: string | undefined; + old_identifier: string | undefined; + new_identifier: string | undefined; + // actor detail + actor: string; + // timestamp + created_at: string; + updated_at: string; +}; + +export type TWorkspaceBaseActivity< + K extends string = string, + V extends string = string, +> = TBaseActivity & { + workspace: string; +}; + +export type TProjectBaseActivity< + K extends string = string, + V extends string = string, +> = TWorkspaceBaseActivity & { + project: string; +}; + +export type TBaseActivityVerbs = "created" | "updated" | "deleted"; diff --git a/packages/types/src/enums.ts b/packages/types/src/enums.ts index 92de9a7405c..854c0c61405 100644 --- a/packages/types/src/enums.ts +++ b/packages/types/src/enums.ts @@ -4,10 +4,7 @@ export enum EUserPermissions { GUEST = 5, } -export type TUserPermissions = - | EUserPermissions.ADMIN - | EUserPermissions.MEMBER - | EUserPermissions.GUEST; +export type TUserPermissions = EUserPermissions.ADMIN | EUserPermissions.MEMBER | EUserPermissions.GUEST; // project pages export enum EPageAccess { @@ -62,4 +59,5 @@ export enum EFileAssetType { TEAM_SPACE_DESCRIPTION = "TEAM_SPACE_DESCRIPTION", INITIATIVE_DESCRIPTION = "INITIATIVE_DESCRIPTION", PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION", + TEAM_SPACE_COMMENT_DESCRIPTION = "TEAM_SPACE_COMMENT_DESCRIPTION", } diff --git a/packages/types/src/index.d.ts b/packages/types/src/index.d.ts index fa4bf05a8ab..43cc3084a39 100644 --- a/packages/types/src/index.d.ts +++ b/packages/types/src/index.d.ts @@ -35,3 +35,4 @@ export * from "./file"; export * from "./workspace-draft-issues/base"; export * from "./command-palette"; export * from "./timezone"; +export * from "./activity"; diff --git a/web/ce/types/projects/project-activity.ts b/web/ce/types/projects/project-activity.ts index ed75a6b9c81..d060b4cc88a 100644 --- a/web/ce/types/projects/project-activity.ts +++ b/web/ce/types/projects/project-activity.ts @@ -1,25 +1,3 @@ -export interface TProjectActivity { - id: string; - content: string; - createdAt: string; - updatedAt: string; - userId: string; - projectId: string; - created_at: string; - field: string; - verb: string; - actor_detail: { - display_name: string; - id: string; - }; - workspace_detail: { - slug: string; - }; - project_detail: { - name: string; - }; - new_value: string; - old_value: string; - project: string; - new_identifier?: string; -} +import { TProjectBaseActivity } from "@plane/types"; + +export type TProjectActivity = TProjectBaseActivity; diff --git a/web/core/components/common/activity/activity-block.tsx b/web/core/components/common/activity/activity-block.tsx index 84f2dc9a479..0f1c2429f4a 100644 --- a/web/core/components/common/activity/activity-block.tsx +++ b/web/core/components/common/activity/activity-block.tsx @@ -2,16 +2,20 @@ import { FC, ReactNode } from "react"; import { Network } from "lucide-react"; -// hooks +// types +import { TWorkspaceBaseActivity } from "@plane/types"; +// ui import { Tooltip } from "@plane/ui"; +// helpers import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "@/helpers/date-time.helper"; +// hooks import { usePlatformOS } from "@/hooks/use-platform-os"; -import { TProjectActivity } from "@/plane-web/types"; +// local components import { User } from "./user"; type TActivityBlockComponent = { icon?: ReactNode; - activity: TProjectActivity; + activity: TWorkspaceBaseActivity; ends: "top" | "bottom" | undefined; children: ReactNode; customUserName?: string; @@ -25,12 +29,11 @@ export const ActivityBlockComponent: FC = (props) => { if (!activity) return <>; return (
-
-
+
{icon ? icon : }
@@ -40,7 +43,7 @@ export const ActivityBlockComponent: FC = (props) => { isMobile={isMobile} tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`} > - + {calculateTimeAgo(activity.created_at)} diff --git a/web/core/components/common/activity/activity-item.tsx b/web/core/components/common/activity/activity-item.tsx index 2bf6ef5442b..643d8973838 100644 --- a/web/core/components/common/activity/activity-item.tsx +++ b/web/core/components/common/activity/activity-item.tsx @@ -19,6 +19,8 @@ export const ActivityItem: FC = observer((props) => { if (!activity) return null; const activityType = activity.field; + if (!activityType) return null; + const { message, customUserName } = messages(activity); const icon = iconsMap[activityType] || iconsMap.default; diff --git a/web/core/components/common/activity/helper.tsx b/web/core/components/common/activity/helper.tsx index dda68477ddc..54ccd56e2ba 100644 --- a/web/core/components/common/activity/helper.tsx +++ b/web/core/components/common/activity/helper.tsx @@ -26,6 +26,7 @@ import { // components import { ArchiveIcon, DoubleCircleIcon, ContrastIcon, DiceIcon, Intake } from "@plane/ui"; +import { store } from "@/lib/store-context"; import { TProjectActivity } from "@/plane-web/types"; type ActivityIconMap = { @@ -70,8 +71,9 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN const newValue = activity.new_value; const oldValue = activity.old_value; const verb = activity.verb; + const workspaceDetail = store.workspaceRoot.getWorkspaceById(activity.workspace); - const getBooleanActionText = (value: string) => { + const getBooleanActionText = (value: string | undefined) => { if (value === "true") return "enabled"; if (value === "false") return "disabled"; return verb; @@ -170,7 +172,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN {verb !== "removed" ? ( = (props) => { +export const User: FC = observer((props) => { const { activity, customUserName } = props; + // store hooks + const { getUserDetails } = useMember(); + const { getWorkspaceById } = useWorkspace(); + // derived values + const actorDetail = getUserDetails(activity.actor); + const workspaceDetail = getWorkspaceById(activity.workspace); return ( <> - {customUserName || activity.actor_detail?.display_name.includes("-intake") ? ( + {customUserName || actorDetail?.display_name.includes("-intake") ? ( {customUserName || "Plane"} ) : ( - {activity.actor_detail?.display_name} + {actorDetail?.display_name} )} ); -}; +});