feat: Discussions panel

frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx

@@ -12,6 +12,7 @@ import { NotebookPanel } from 'scenes/notebooks/NotebookPanel/NotebookPanel'
 import { SidePanelTab } from '~/types'
 
 import { SidePanelActivity, SidePanelActivityIcon } from './panels/activity/SidePanelActivity'
+import { SidePanelDiscussion, SidePanelDiscussionIcon } from './panels/discussion/SidePanelDiscussion'
 import { SidePanelActivation, SidePanelActivationIcon } from './panels/SidePanelActivation'
 import { SidePanelDocs } from './panels/SidePanelDocs'
 import { SidePanelFeaturePreviews } from './panels/SidePanelFeaturePreviews'
@@ -60,6 +61,11 @@ export const SIDE_PANEL_TABS: Record<SidePanelTab, { label: string; Icon: any; C
         Icon: SidePanelActivityIcon,
         Content: SidePanelActivity,
     },
+    [SidePanelTab.Discussion]: {
+        label: 'Discussion',
+        Icon: SidePanelDiscussionIcon,
+        Content: SidePanelDiscussion,
+    },
     [SidePanelTab.Welcome]: {
         label: "What's new?",
         Icon: IconConfetti,

frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivity.tsx

@@ -1,23 +1,37 @@
 import { IconNotification } from '@posthog/icons'
-import { LemonBanner, LemonButton, LemonSkeleton, LemonTabs, Link, Spinner } from '@posthog/lemon-ui'
+import {
+    LemonBanner,
+    LemonButton,
+    LemonSelect,
+    LemonSelectOption,
+    LemonSkeleton,
+    LemonSwitch,
+    LemonTabs,
+    Link,
+    Spinner,
+} from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { ActivityLogRow } from 'lib/components/ActivityLog/ActivityLog'
+import { humanizeScope } from 'lib/components/ActivityLog/humanizeActivity'
+import { MemberSelect } from 'lib/components/MemberSelect'
+import { ScrollableShadows } from 'lib/components/ScrollableShadows/ScrollableShadows'
 import { usePageVisibility } from 'lib/hooks/usePageVisibility'
 import { IconWithCount } from 'lib/lemon-ui/icons'
 import { useEffect, useRef } from 'react'
 import { urls } from 'scenes/urls'
 
 import {
-    notificationsLogic,
+    sidePanelActivityLogic,
     SidePanelActivityTab,
-} from '~/layout/navigation-3000/sidepanel/panels/activity/notificationsLogic'
+} from '~/layout/navigation-3000/sidepanel/panels/activity/sidePanelActivityLogic'
+import { ActivityScope } from '~/types'
 
 import { SidePanelPaneHeader } from '../../components/SidePanelPaneHeader'
 
 const SCROLL_TRIGGER_OFFSET = 100
 
 export const SidePanelActivityIcon = (props: { className?: string }): JSX.Element => {
-    const { unreadCount } = useValues(notificationsLogic)
+    const { unreadCount } = useValues(sidePanelActivityLogic)
 
     return (
         <IconWithCount count={unreadCount} {...props}>
@@ -36,9 +50,19 @@ export const SidePanelActivity = (): JSX.Element => {
         allActivityHasNext,
         importantChangesLoading,
         hasUnread,
-    } = useValues(notificationsLogic)
-    const { togglePolling, setActiveTab, maybeLoadOlderActivity, markAllAsRead, loadImportantChanges } =
-        useActions(notificationsLogic)
+        filters,
+        filtersForCurrentPage,
+        showDetails,
+    } = useValues(sidePanelActivityLogic)
+    const {
+        togglePolling,
+        setActiveTab,
+        maybeLoadOlderActivity,
+        markAllAsRead,
+        loadImportantChanges,
+        setFilters,
+        toggleShowDetails,
+    } = useActions(sidePanelActivityLogic)
 
     usePageVisibility((pageIsVisible) => {
         togglePolling(pageIsVisible)
@@ -67,12 +91,37 @@ export const SidePanelActivity = (): JSX.Element => {
         lastScrollPositionRef.current = e.currentTarget.scrollTop
     }
 
+    const scopeMenuOptions: LemonSelectOption<ActivityScope | null>[] = [
+        { value: null, label: 'All activity' },
+        ...Object.values(ActivityScope).map((x) => ({
+            value: x,
+            label: humanizeScope(x),
+        })),
+    ]
+
+    const activeScopeMenuOption = filters?.scope ? filters.scope + `${filters.item_id ?? ''}` : null
+
+    // Add a special option for the current page context if we have one
+    if (filtersForCurrentPage?.scope && filtersForCurrentPage?.item_id) {
+        scopeMenuOptions.unshift({
+            value: `${filtersForCurrentPage.scope}${filtersForCurrentPage.item_id ?? ''}` as any,
+            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">
+        <div className="flex flex-col overflow-hidden flex-1">
             <SidePanelPaneHeader title="Activity" />
-            <div className="flex flex-col overflow-hidden">
+            <div className="flex flex-col overflow-hidden flex-1">
                 <div className="shrink-0 mx-2">
                     <LemonTabs
+                        inline
                         activeKey={activeTab as SidePanelActivityTab}
                         onChange={(key) => setActiveTab(key)}
                         tabs={[
@@ -88,69 +137,132 @@ export const SidePanelActivity = (): JSX.Element => {
                     />
                 </div>
 
-                <div className="flex-1 overflow-y-auto px-2">
+                {/* Controls */}
+                <div className="shrink-0 space-y-2 p-2">
                     {activeTab === SidePanelActivityTab.Unread ? (
-                        <div className="flex-1 overflow-y-auto space-y-px">
-                            <LemonBanner type="info" className="mb-2">
+                        <>
+                            <LemonBanner type="info" dismissKey="notifications-introduction">
                                 Notifications shows you changes others make to{' '}
                                 <Link to={urls.savedInsights('history')}>Insights</Link> and{' '}
                                 <Link to={urls.featureFlags('history')}>Feature Flags</Link> that you created. Come join{' '}
                                 <Link to={'https://posthog.com/community'}>our community forum</Link> and tell us what
                                 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}
-
-                            {importantChangesLoading && !hasNotifications ? (
-                                <LemonSkeleton className="my-2 h-12" repeat={10} fade />
-                            ) : hasNotifications ? (
-                                notifications.map((logItem, index) => (
-                                    <ActivityLogRow logItem={logItem} key={index} showExtendedDescription={false} />
-                                ))
-                            ) : (
-                                <p>You're all caught up!</p>
-                            )}
+                                ) : 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>
+
+                            <div className="flex items-center gap-2">
+                                <span>Filter for activity on:</span>
+                                <LemonSelect
+                                    size="small"
+                                    options={scopeMenuOptions}
+                                    placeholder="All activity"
+                                    value={(activeScopeMenuOption as ActivityScope) ?? undefined}
+                                    onChange={(value) =>
+                                        setFilters({
+                                            ...filters,
+                                            scope: value ?? undefined,
+                                            item_id: undefined,
+                                        })
+                                    }
+                                    dropdownMatchSelectWidth={false}
+                                />
+
+                                <span>by</span>
+                                <MemberSelect
+                                    value={filters?.user ?? null}
+                                    onChange={(user) =>
+                                        setFilters({
+                                            ...filters,
+                                            user: user?.id ?? undefined,
+                                        })
+                                    }
+                                />
+                            </div>
                         </div>
-                    ) : (
-                        <div className="flex-1 overflow-y-auto space-y-px" ref={contentRef} onScroll={handleScroll}>
-                            {allActivityResponseLoading && !allActivity.length ? (
-                                <LemonSkeleton className="my-2 h-12" repeat={10} fade />
-                            ) : allActivity.length ? (
-                                <>
-                                    {allActivity.map((logItem, index) => (
-                                        <ActivityLogRow logItem={logItem} key={index} showExtendedDescription={false} />
-                                    ))}
-
-                                    <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
-                                        {allActivityResponseLoading ? (
-                                            <>
-                                                <Spinner textColored /> Loading older activity
-                                            </>
-                                        ) : allActivityHasNext ? (
-                                            <LemonButton
-                                                type="secondary"
-                                                fullWidth
-                                                center
-                                                onClick={() => maybeLoadOlderActivity()}
-                                            >
-                                                Load more
+                    ) : null}
+                </div>
+
+                <div className="flex flex-col flex-1 overflow-hidden" ref={contentRef} onScroll={handleScroll}>
+                    <ScrollableShadows direction="vertical" innerClassName="p-2 space-y-px">
+                        {activeTab === SidePanelActivityTab.Unread ? (
+                            <>
+                                {importantChangesLoading && !hasNotifications ? (
+                                    <LemonSkeleton className="my-2 h-12" repeat={10} fade />
+                                ) : hasNotifications ? (
+                                    notifications.map((logItem, index) => (
+                                        <ActivityLogRow
+                                            logItem={logItem}
+                                            key={index}
+                                            showExtendedDescription={showDetails}
+                                        />
+                                    ))
+                                ) : (
+                                    <div className="border rounded text-center border-dashed p-6 text-muted-alt">
+                                        You're all caught up!
+                                    </div>
+                                )}
+                            </>
+                        ) : activeTab === SidePanelActivityTab.All ? (
+                            <>
+                                {allActivityResponseLoading && !allActivity.length ? (
+                                    <LemonSkeleton className="my-2 h-12" repeat={10} fade />
+                                ) : allActivity.length ? (
+                                    <>
+                                        {allActivity.map((logItem, index) => (
+                                            <ActivityLogRow
+                                                logItem={logItem}
+                                                key={index}
+                                                showExtendedDescription={showDetails}
+                                            />
+                                        ))}
+
+                                        <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
+                                            {allActivityResponseLoading ? (
+                                                <>
+                                                    <Spinner textColored /> Loading older activity
+                                                </>
+                                            ) : allActivityHasNext ? (
+                                                <LemonButton
+                                                    type="secondary"
+                                                    fullWidth
+                                                    center
+                                                    onClick={() => maybeLoadOlderActivity()}
+                                                >
+                                                    Load more
+                                                </LemonButton>
+                                            ) : (
+                                                'No more results'
+                                            )}
+                                        </div>
+                                    </>
+                                ) : (
+                                    <div className="border rounded text-center border-dashed p-6 flex flex-col gap-2 items-center">
+                                        <span>No activity yet</span>
+                                        {filters ? (
+                                            <LemonButton type="secondary" onClick={() => setFilters(null)}>
+                                                Clear filters
                                             </LemonButton>
-                                        ) : (
-                                            'No more results'
-                                        )}
+                                        ) : null}
                                     </div>
-                                </>
-                            ) : (
-                                <p>You're all caught up!</p>
-                            )}
-                        </div>
-                    )}
+                                )}
+                            </>
+                        ) : null}
+                    </ScrollableShadows>
                 </div>
             </div>
         </div>

frontend/src/layout/navigation-3000/sidepanel/panels/activity/activityForSceneLogic.ts

@@ -0,0 +1,56 @@
+import { connect, kea, path, selectors } from 'kea'
+import { router } from 'kea-router'
+import { objectsEqual } from 'kea-test-utils'
+import { ActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
+import { sceneLogic } from 'scenes/sceneLogic'
+import { SceneConfig } from 'scenes/sceneTypes'
+
+import { ActivityScope, UserBasicType } from '~/types'
+
+import type { activityForSceneLogicType } from './activityForSceneLogicType'
+
+export type ActivityFilters = {
+    scope?: ActivityScope
+    item_id?: ActivityLogItem['item_id']
+    user?: UserBasicType['id']
+}
+
+export const activityFiltersForScene = (sceneConfig: SceneConfig | null): ActivityFilters | null => {
+    if (sceneConfig?.activityScope) {
+        // NOTE: - HACKY, we are just parsing the item_id from the url optimistically...
+        const pathParts = router.values.currentLocation.pathname.split('/')
+        const item_id = pathParts[2]
+
+        return { scope: sceneConfig.activityScope, item_id }
+    }
+    return null
+}
+
+export const activityForSceneLogic = kea<activityForSceneLogicType>([
+    path(['scenes', 'navigation', 'sidepanel', 'activityForSceneLogic']),
+    connect({
+        values: [sceneLogic, ['sceneConfig']],
+    }),
+    selectors({
+        sceneActivityFilters: [
+            (s) => [
+                // Similar to "breadcrumbs"
+                (state, props) => {
+                    const activeSceneLogic = sceneLogic.selectors.activeSceneLogic(state, props)
+                    const sceneConfig = s.sceneConfig(state, props)
+                    if (activeSceneLogic && 'activityFilters' in activeSceneLogic.selectors) {
+                        const activeLoadedScene = sceneLogic.selectors.activeLoadedScene(state, props)
+                        return activeSceneLogic.selectors.activityFilters(
+                            state,
+                            activeLoadedScene?.paramsToProps?.(activeLoadedScene?.sceneParams) || props
+                        )
+                    } else {
+                        return activityFiltersForScene(sceneConfig)
+                    }
+                },
+            ],
+            (filters): ActivityFilters | null => filters,
+            { equalityCheck: objectsEqual },
+        ],
+    }),
+])