feat: Activity log for uploading attachments (closes #354) (#366)

* feat: Activity log for uploading attachments (closes #354)

* chore: fix coding style

* revert: upload spinning icon patch

* refactor: add fallbacks, extended card_activity

apps/web/src/pages/api/upload/attachment.ts

@@ -2,16 +2,16 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { Upload } from "@aws-sdk/lib-storage";
 
 import { createNextApiContext } from "@kan/api/trpc";
+import { assertPermission } from "@kan/api/utils/permissions";
+import { withRateLimit } from "@kan/api/utils/rateLimit";
 import * as cardRepo from "@kan/db/repository/card.repo";
 import * as cardActivityRepo from "@kan/db/repository/cardActivity.repo";
 import * as cardAttachmentRepo from "@kan/db/repository/cardAttachment.repo";
-import { generateUID } from "@kan/shared/utils";
+import { createS3Client, generateUID } from "@kan/shared/utils";
 
 import { env } from "~/env";
-import { withRateLimit } from "@kan/api/utils/rateLimit";
-import { createS3Client } from "@kan/shared/utils";
-import { assertPermission } from "@kan/api/utils/permissions";
 
+// FIXME: Respect the environment variable: NEXT_API_BODY_SIZE_LIMIT
 const MAX_SIZE_BYTES = 50 * 1024 * 1024; // 50MB
 
 export const config = {
@@ -115,9 +115,15 @@ export default withRateLimit(
         createdBy: user.id,
       });
 
+      if (!attachment) {
+        return res.status(500).json({ error: "Failed to create attachment" });
+      }
+
       await cardActivityRepo.create(db, {
         type: "card.updated.attachment.added",
         cardId: card.id,
+        attachmentId: attachment.id,
+        toTitle: originalFilenameHeader,
         createdBy: user.id,
       });
 
@@ -128,4 +134,3 @@ export default withRateLimit(
     }
   },
 );
-

apps/web/src/views/card/components/ActivityList.tsx

@@ -8,6 +8,7 @@ import {
   HiOutlineArrowRight,
   HiOutlineCheckCircle,
   HiOutlineClock,
+  HiOutlinePaperClip,
   HiOutlinePencil,
   HiOutlinePlus,
   HiOutlineTag,
@@ -31,6 +32,16 @@ import Comment from "./Comment";
 type ActivityType =
   NonNullable<GetCardByIdOutput>["activities"][number]["type"];
 
+type ActivityWithMergedLabels =
+  GetCardActivitiesOutput["activities"][number] & {
+    mergedLabels?: string[];
+    attachment?: {
+      publicId: string;
+      filename: string;
+      originalFilename: string;
+    } | null;
+  };
+
 const truncate = (value: string | null, maxLength = 50) => {
   if (!value) return value;
   return value.length > maxLength ? `${value.slice(0, maxLength - 1)}…` : value;
@@ -57,6 +68,7 @@ const getActivityText = ({
   toDueDate,
   dateLocale,
   mergedLabels,
+  attachmentName,
 }: {
   type: ActivityType;
   toTitle: string | null;
@@ -71,6 +83,7 @@ const getActivityText = ({
   toDueDate?: Date | null;
   dateLocale: DateFnsLocale;
   mergedLabels?: string[];
+  attachmentName?: string | null;
 }) => {
   const displayName = memberName ?? memberEmail ?? t`Member`;
   const TextHighlight = ({ children }: { children: React.ReactNode }) => (
@@ -124,6 +137,8 @@ const getActivityText = ({
     "card.updated.checklist.item.completed": t`completed a checklist item`,
     "card.updated.checklist.item.uncompleted": t`marked a checklist item as incomplete`,
     "card.updated.checklist.item.deleted": t`deleted a checklist item`,
+    "card.updated.attachment.added": t`added an attachment`,
+    "card.updated.attachment.removed": t`removed an attachment`,
     "card.updated.dueDate.added": t`set the due date`,
     "card.updated.dueDate.updated": t`updated the due date`,
     "card.updated.dueDate.removed": t`removed the due date`,
@@ -256,6 +271,27 @@ const getActivityText = ({
     );
   }
 
+  if (type === "card.updated.attachment.added") {
+    const filename = attachmentName ?? toTitle;
+    if (!filename) return baseText;
+    return (
+      <Trans>
+        added an attachment <TextHighlight>{truncate(filename)}</TextHighlight>
+      </Trans>
+    );
+  }
+
+  if (type === "card.updated.attachment.removed") {
+    const filename = attachmentName ?? fromTitle;
+    if (!filename) return baseText;
+    return (
+      <Trans>
+        removed an attachment{" "}
+        <TextHighlight>{truncate(filename)}</TextHighlight>
+      </Trans>
+    );
+  }
+
   if (type === "card.updated.dueDate.added" && toDueDate) {
     const showYear = !isSameYear(toDueDate, new Date());
     const formattedDate = format(
@@ -308,6 +344,8 @@ const ACTIVITY_ICON_MAP: Partial<Record<ActivityType, React.ReactNode | null>> =
     "card.updated.checklist.item.completed": <HiOutlineCheckCircle />,
     "card.updated.checklist.item.uncompleted": <HiOutlineCheckCircle />,
     "card.updated.checklist.item.deleted": <HiOutlineTrash />,
+    "card.updated.attachment.added": <HiOutlinePaperClip />,
+    "card.updated.attachment.removed": <HiOutlinePaperClip />,
     "card.updated.dueDate.added": <HiOutlineClock />,
     "card.updated.dueDate.updated": <HiOutlineClock />,
     "card.updated.dueDate.removed": <HiOutlineClock />,
@@ -341,7 +379,7 @@ const ActivityList = ({
   isAdmin?: boolean;
   isViewOnly?: boolean;
 }) => {
-  const { dateLocale, locale } = useLocalisation();
+  const { dateLocale } = useLocalisation();
   const { data: sessionData } = authClient.useSession();
   const utils = api.useUtils();
   const [allActivities, setAllActivities] = useState<
@@ -391,25 +429,21 @@ const ActivityList = ({
               cursor: nextCursor,
             });
 
-            if (nextPage) {
-              const existingIds = new Set(
-                currentActivities.map((a) => a.publicId),
-              );
-              const newActivities = nextPage.activities.filter(
-                (a: { publicId: string }) => !existingIds.has(a.publicId),
-              );
-              currentActivities = [...currentActivities, ...newActivities];
-              currentHasMore = nextPage.hasMore;
-            } else {
-              break;
-            }
+            const existingIds = new Set(
+              currentActivities.map((a) => a.publicId),
+            );
+            const newActivities = nextPage.activities.filter(
+              (a: { publicId: string }) => !existingIds.has(a.publicId),
+            );
+            currentActivities = [...currentActivities, ...newActivities];
+            currentHasMore = nextPage.hasMore;
           }
 
           setAllActivities(currentActivities);
           setHasMore(false);
         };
 
-        fetchAllRemaining();
+        void fetchAllRemaining();
       } else {
         setAllActivities(firstPageData.activities);
         setHasMore(firstPageData.hasMore);
@@ -436,17 +470,15 @@ const ActivityList = ({
         cursor: nextCursor,
       });
 
-      if (nextPage) {
-        const existingIds = new Set(allActivities.map((a) => a.publicId));
-        const newActivities = nextPage.activities.filter(
-          (a: { publicId: string }) => !existingIds.has(a.publicId),
-        );
-        setAllActivities((prev) => [...prev, ...newActivities]);
-        setHasMore(nextPage.hasMore);
+      const existingIds = new Set(allActivities.map((a) => a.publicId));
+      const newActivities = nextPage.activities.filter(
+        (a: { publicId: string }) => !existingIds.has(a.publicId),
+      );
+      setAllActivities((prev) => [...prev, ...newActivities]);
+      setHasMore(nextPage.hasMore);
 
-        if (!nextPage.hasMore) {
-          isFullyExpandedRef.current = true;
-        }
+      if (!nextPage.hasMore) {
+        isFullyExpandedRef.current = true;
       }
     } finally {
       setIsLoadingMore(false);
@@ -473,7 +505,10 @@ const ActivityList = ({
           fromDueDate: activity.fromDueDate ?? null,
           toDueDate: activity.toDueDate ?? null,
           dateLocale: dateLocale,
-          mergedLabels: (activity as any).mergedLabels,
+          mergedLabels: (activity as ActivityWithMergedLabels).mergedLabels,
+          attachmentName:
+            (activity as ActivityWithMergedLabels).attachment?.originalFilename ??
+            null,
         });
 
         if (activity.type === "card.updated.comment.added")