improvement: enhance activity components and types modularity (#6262)

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<TActivityBlockComponent> = (props) => {
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-center gap-3 text-xs ${
-        ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
+      className={`relative flex items-center gap-2 text-xs ${
+        ends === "top" ? `pb-3` : ends === "bottom" ? `pt-3` : `py-3`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
+      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-start mt-0.5 z-[4] text-custom-text-200">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
       <div className="w-full truncate text-custom-text-200">
@@ -40,7 +43,7 @@ export const ActivityBlockComponent: FC<TActivityBlockComponent> = (props) => {
             isMobile={isMobile}
             tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
           >
-            <span className="whitespace-nowrap text-custom-text-350 font-medium">
+            <span className="whitespace-nowrap text-custom-text-350 font-medium cursor-help">
               {calculateTimeAgo(activity.created_at)}
             </span>
           </Tooltip>

web/core/components/common/activity/activity-item.tsx

@@ -19,6 +19,8 @@ export const ActivityItem: FC<TActivityItem> = 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;
 

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
             </span>
             {verb !== "removed" ? (
               <a
-                href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+                href={`/${workspaceDetail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-flex font-medium text-custom-text-100"
@@ -273,7 +275,7 @@ export const messages = (activity: TProjectActivity): { message: string | ReactN
       };
     default:
       return {
-        message: `${verb} ${activityType.replace(/_/g, " ")} `,
+        message: `${verb} ${activityType?.replace(/_/g, " ")} `,
       };
   }
 };

web/core/components/common/activity/user.tsx

@@ -1,27 +1,37 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
-import { TProjectActivity } from "@/plane-web/types";
+// types
+import { TWorkspaceBaseActivity } from "@plane/types";
+// store hooks
+import { useMember, useWorkspace } from "@/hooks/store";
 
 type TUser = {
-  activity: TProjectActivity;
+  activity: TWorkspaceBaseActivity;
   customUserName?: string;
 };
 
-export const User: FC<TUser> = (props) => {
+export const User: FC<TUser> = 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") ? (
         <span className="text-custom-text-100 font-medium">{customUserName || "Plane"}</span>
       ) : (
         <Link
-          href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
+          href={`/${workspaceDetail?.slug}/profile/${actorDetail?.id}`}
           className="hover:underline text-custom-text-100 font-medium"
         >
-          {activity.actor_detail?.display_name}
+          {actorDetail?.display_name}
         </Link>
       )}
     </>
   );
-};
+});