From 48af9bced181ff5e02b3070567a0aaea4d8fd37a Mon Sep 17 00:00:00 2001
From: DaneEveritt <dane@daneeveritt.com>
Date: Thu, 30 Jun 2022 21:06:50 -0400
Subject: [PATCH] Fix activity log rendering; closes #4208

---
 .../Api/Client/ActivityLogTransformer.php     |  5 +++
 .../elements/activity/ActivityLogEntry.tsx    | 39 ++++++++++---------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/app/Transformers/Api/Client/ActivityLogTransformer.php b/app/Transformers/Api/Client/ActivityLogTransformer.php
index 8518b59da..090527a37 100644
--- a/app/Transformers/Api/Client/ActivityLogTransformer.php
+++ b/app/Transformers/Api/Client/ActivityLogTransformer.php
@@ -55,6 +55,11 @@ class ActivityLogTransformer extends BaseClientTransformer
                 }
 
                 if (!is_array($value)) {
+                    // Perform some directory normalization at this point.
+                    if ($key === 'directory') {
+                        $value = str_replace('//', '/', '/' . trim($value, '/') . '/');
+                    }
+
                     return [$key => $value];
                 }
 
diff --git a/resources/scripts/components/elements/activity/ActivityLogEntry.tsx b/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
index 87ac64f78..d6f751572 100644
--- a/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
+++ b/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
@@ -8,37 +8,40 @@ import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMet
 import { TerminalIcon } from '@heroicons/react/solid';
 import classNames from 'classnames';
 import style from './style.module.css';
-import { isObject } from '@/lib/objects';
 import Avatar from '@/components/Avatar';
 import useLocationHash from '@/plugins/useLocationHash';
+import { getObjectKeys, isObject } from '@/lib/objects';
 
 interface Props {
     activity: ActivityLog;
     children?: React.ReactNode;
 }
 
-const formatProperties = (properties: Record<string, unknown>): Record<string, unknown> => {
-    return Object.keys(properties).reduce((obj, key) => {
-        const value = properties[key];
-        // noinspection SuspiciousTypeOfGuard
-        const isCount = key === 'count' || (typeof key === 'string' && key.endsWith('_count'));
+function wrapProperties(value: unknown): any {
+    if (value === null || typeof value === 'string' || typeof value === 'number') {
+        return `<strong>${String(value)}</strong>`;
+    }
 
-        return {
-            ...obj,
-            [key]:
-                isCount || typeof value !== 'string'
-                    ? isObject(value)
-                        ? formatProperties(value)
-                        : value
-                    : `<strong>${value}</strong>`,
-        };
-    }, {});
-};
+    if (isObject(value)) {
+        return getObjectKeys(value).reduce((obj, key) => {
+            if (key === 'count' || (typeof key === 'string' && key.endsWith('_count'))) {
+                return { ...obj, [key]: value[key] };
+            }
+            return { ...obj, [key]: wrapProperties(value[key]) };
+        }, {} as Record<string, unknown>);
+    }
+
+    if (Array.isArray(value)) {
+        return value.map(wrapProperties);
+    }
+
+    return value;
+}
 
 export default ({ activity, children }: Props) => {
     const { pathTo } = useLocationHash();
     const actor = activity.relationships.actor;
-    const properties = formatProperties(activity.properties);
+    const properties = wrapProperties(activity.properties);
 
     return (
         <div className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0 group'}>