Fix

PostHog · Jan 2, 2024 · 524c245 · 524c245
1 parent a2050b8
commit 524c245
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 20 deletions.
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivity.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivity.tsx
@@ -2,9 +2,11 @@ import { IconNotification } from '@posthog/icons'
 import {
     LemonBanner,
     LemonButton,
+    LemonCheckbox,
     LemonSelect,
     LemonSelectOption,
     LemonSkeleton,
+    LemonSwitch,
     LemonTabs,
     Link,
     Spinner,
@@ -51,9 +53,17 @@ export const SidePanelActivity = (): JSX.Element => {
         hasUnread,
         filters,
         filtersForCurrentPage,
+        showDetails,
     } = useValues(sidePanelActivityLogic)
-    const { togglePolling, setActiveTab, maybeLoadOlderActivity, markAllAsRead, loadImportantChanges, setFilters } =
-        useActions(sidePanelActivityLogic)
+    const {
+        togglePolling,
+        setActiveTab,
+        maybeLoadOlderActivity,
+        markAllAsRead,
+        loadImportantChanges,
+        setFilters,
+        toggleShowDetails,
+    } = useActions(sidePanelActivityLogic)
 
     usePageVisibility((pageIsVisible) => {
         togglePolling(pageIsVisible)
@@ -99,6 +109,13 @@ export const SidePanelActivity = (): JSX.Element => {
             label: `This ${humanizeScope(filtersForCurrentPage.scope, true)}`,
         })
     }
+
+    const toggleExtendedDescription = (
+        <>
+            <LemonSwitch bordered label="Show details" checked={showDetails} onChange={toggleShowDetails} />
+        </>
+    )
+
     return (
         <div className="flex flex-col overflow-hidden flex-1">
             <SidePanelPaneHeader title="Activity" />
@@ -133,17 +150,19 @@ export const SidePanelActivity = (): JSX.Element => {
                                 else should be here!
                             </LemonBanner>
 
-                            {hasUnread ? (
-                                <div className="flex justify-end mb-2">
+                            <div className="flex items-center justify-between gap-2">
+                                {toggleExtendedDescription}
+                                {hasUnread ? (
                                     <LemonButton type="secondary" onClick={() => markAllAsRead()}>
                                         Mark all as read
                                     </LemonButton>
-                                </div>
-                            ) : null}
+                                ) : null}
+                            </div>
                         </>
                     ) : activeTab === SidePanelActivityTab.All ? (
                         <div className="flex items-center justify-between gap-2">
                             <div className="flex items-center gap-2">
+                                {toggleExtendedDescription}
                                 {allActivityResponseLoading ? <Spinner textColored /> : null}
                             </div>
 
@@ -189,7 +208,11 @@ export const SidePanelActivity = (): JSX.Element => {
                                     <LemonSkeleton className="my-2 h-12" repeat={10} fade />
                                 ) : hasNotifications ? (
                                     notifications.map((logItem, index) => (
-                                        <ActivityLogRow logItem={logItem} key={index} showExtendedDescription={false} />
+                                        <ActivityLogRow
+                                            logItem={logItem}
+                                            key={index}
+                                            showExtendedDescription={showDetails}
+                                        />
                                     ))
                                 ) : (
                                     <div className="border rounded text-center border-dashed p-6 text-muted-alt">
@@ -207,7 +230,7 @@ export const SidePanelActivity = (): JSX.Element => {
                                             <ActivityLogRow
                                                 logItem={logItem}
                                                 key={index}
-                                                showExtendedDescription={false}
+                                                showExtendedDescription={showDetails}
                                             />
                                         ))}
 

diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/activity/sidePanelActivityLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/activity/sidePanelActivityLogic.tsx
@@ -48,6 +48,7 @@ export const sidePanelActivityLogic = kea<sidePanelActivityLogicType>([
         loadImportantChanges: (onlyUnread = true) => ({ onlyUnread }),
         setFilters: (filters: ActivityFilters | null) => ({ filters }),
         setFiltersForCurrentPage: (filters: ActivityFilters | null) => ({ filters }),
+        toggleShowDetails: (showing?: boolean) => ({ showing }),
     }),
     reducers({
         activeTab: [
@@ -76,6 +77,13 @@ export const sidePanelActivityLogic = kea<sidePanelActivityLogicType>([
                 setFiltersForCurrentPage: (_, { filters }) => filters,
             },
         ],
+        showDetails: [
+            false,
+            { persist: true },
+            {
+                toggleShowDetails: (state, { showing }) => showing ?? !state,
+            },
+        ],
     }),
     loaders(({ actions, values, cache }) => ({
         importantChanges: [

diff --git a/frontend/src/lib/components/ActivityLog/humanizeActivity.tsx b/frontend/src/lib/components/ActivityLog/humanizeActivity.tsx
@@ -1,4 +1,5 @@
 import { dayjs } from 'lib/dayjs'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 import { fullName } from 'lib/utils'
 
 import { ActivityScope, InsightShortId, PersonType } from '~/types'
@@ -151,24 +152,32 @@ export function defaultDescriber(
         }
     }
 
-    if (logItem.activity == 'commented' && logItem.scope === 'Comment') {
-        return {
-            description: (
+    if (logItem.activity == 'commented') {
+        let description: JSX.Element | string
+
+        if (logItem.scope === 'Comment') {
+            description = (
                 <>
                     <strong>{userNameForLogItem(logItem)}</strong> replied to a {humanizeScope(logItem.scope, true)}
                 </>
-            ),
-        }
-    }
-
-    if (logItem.activity == 'commented') {
-        return {
-            description: (
+            )
+        } else {
+            description = (
                 <>
                     <strong>{userNameForLogItem(logItem)}</strong> commented
                     {asNotification ? <> on a {humanizeScope(logItem.scope, true)}</> : null}
                 </>
-            ),
+            )
+        }
+        const commentContent = logItem.detail.changes?.[0].after as string | undefined
+
+        return {
+            description,
+            extendedDescription: commentContent ? (
+                <div className="border rounded bg-bg-light p-4">
+                    <LemonMarkdown lowKeyHeadings>{commentContent}</LemonMarkdown>
+                </div>
+            ) : undefined,
         }
     }
 

diff --git a/posthog/models/comment.py b/posthog/models/comment.py
@@ -47,7 +47,7 @@ def log_comment_activity(sender, instance: Comment, created: bool, **kwargs):
         # 3. Pass only the URL which allows us to say "X commented on insight/1234"
 
         # If it is a reply, the scope is the original comment
-        item_id = instance.source_comment_id or instance.item_id
+        item_id: str = instance.source_comment_id or instance.item_id
         scope = "Comment" if instance.source_comment_id else instance.scope
 
         log_activity(