Merge branch 'master' into chore/persons-query-rename

ee/api/test/__snapshots__/test_time_to_see_data.ambr

@@ -17,6 +17,7 @@
           "user": {
               "distinct_id": "",
               "first_name": "",
+              "last_name": "",
               "email": "",
               "is_email_verified": false
           }

ee/billing/quota_limiting.py

@@ -147,12 +147,12 @@ def set_org_usage_summary(
     new_usage = copy.deepcopy(new_usage)
 
     for field in ["events", "recordings", "rows_synced"]:
-        resource_usage = new_usage[field]  # type: ignore
+        resource_usage = new_usage.get(field, {"limit": None, "usage": 0, "todays_usage": 0})
         if not resource_usage:
             continue
 
         if todays_usage:
-            resource_usage["todays_usage"] = todays_usage[field]  # type: ignore
+            resource_usage["todays_usage"] = todays_usage.get(field, 0)
         else:
             # TRICKY: If we are not explictly setting todays_usage, we want to reset it to 0 IF the incoming new_usage is different
             if (organization.usage or {}).get(field, {}).get("usage") != resource_usage.get("usage"):

frontend/src/layout/navigation-3000/components/MinimalNavigation.tsx

@@ -51,7 +51,7 @@ export function MinimalNavigation(): JSX.Element {
                 <LemonButton
                     type="tertiary"
                     status="muted"
-                    icon={<ProfilePicture name={user?.first_name} email={user?.email} size="md" />}
+                    icon={<ProfilePicture user={user} size="md" />}
                     onClick={toggleSitePopover}
                 >
                     {user?.first_name || user?.email}

frontend/src/layout/navigation-3000/components/Navbar.tsx

@@ -107,7 +107,7 @@ export function Navbar(): JSX.Element {
                                 className="min-w-70"
                             >
                                 <NavbarButton
-                                    icon={<ProfilePicture name={user?.first_name} email={user?.email} size="md" />}
+                                    icon={<ProfilePicture user={user} size="md" />}
                                     identifier="me"
                                     title={`Hi${user?.first_name ? `, ${user?.first_name}` : ''}!`}
                                     shortTitle={user?.first_name || user?.email}

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx

@@ -1,4 +1,4 @@
-import { IconExternal } from '@posthog/icons'
+import { IconExternal, IconHome } from '@posthog/icons'
 import { LemonButton, LemonSelect, LemonSkeleton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -28,29 +28,6 @@ function SidePanelDocsSkeleton(): JSX.Element {
     )
 }
 
-function Menu({
-    menu,
-    activeMenuName,
-    onChange,
-}: {
-    menu: Menu[]
-    activeMenuName: string | null
-    onChange: (newValue: string | null) => void
-}): JSX.Element {
-    return (
-        <div className="mr-auto">
-            <LemonSelect
-                placeholder="Navigate"
-                dropdownMatchSelectWidth={false}
-                onChange={onChange}
-                size="small"
-                value={activeMenuName}
-                options={menu.map(({ name }) => ({ label: name, value: name }))}
-            />
-        </div>
-    )
-}
-
 export const SidePanelDocs = (): JSX.Element => {
     const { iframeSrc, currentUrl } = useValues(sidePanelDocsLogic)
     const { updatePath, unmountIframe, closeSidePanel, handleExternalUrl } = useActions(sidePanelDocsLogic)
@@ -131,7 +108,33 @@ export const SidePanelDocs = (): JSX.Element => {
     return (
         <>
             <SidePanelPaneHeader>
-                {menu && <Menu menu={menu} activeMenuName={activeMenuName} onChange={handleMenuChange} />}
+                <LemonButton
+                    size="small"
+                    sideIcon={<IconHome />}
+                    type="secondary"
+                    onClick={() => {
+                        ref.current?.contentWindow?.postMessage(
+                            {
+                                type: 'navigate',
+                                url: '/docs',
+                            },
+                            '*'
+                        )
+                    }}
+                />
+
+                {menu && (
+                    <LemonSelect
+                        placeholder="Navigate"
+                        dropdownMatchSelectWidth={false}
+                        onChange={handleMenuChange}
+                        size="small"
+                        value={activeMenuName}
+                        options={menu.map(({ name }) => ({ label: name, value: name }))}
+                    />
+                )}
+
+                <div className="flex-1" />
                 <LemonButton
                     size="small"
                     sideIcon={<IconExternal />}

frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelDocsLogic.ts

@@ -1,7 +1,6 @@
-import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { router } from 'kea-router'
-
-import { SidePanelTab } from '~/types'
+import { sceneLogic } from 'scenes/sceneLogic'
 
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
 import type { sidePanelDocsLogicType } from './sidePanelDocsLogicType'
@@ -26,10 +25,10 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelDocsLogic']),
     connect({
         actions: [sidePanelStateLogic, ['openSidePanel', 'closeSidePanel']],
+        values: [sceneLogic, ['sceneConfig']],
     }),
 
     actions({
-        openDocsPage: (urlOrPath: string) => ({ urlOrPath }),
         updatePath: (path: string) => ({ path }),
         setInitialPath: (path: string) => ({ path }),
         unmountIframe: true,
@@ -68,9 +67,11 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
     }),
 
     listeners(({ actions, values }) => ({
-        openDocsPage: ({ urlOrPath }) => {
-            actions.setInitialPath(getPathFromUrl(urlOrPath))
-            actions.openSidePanel(SidePanelTab.Docs)
+        openSidePanel: ({ options }) => {
+            if (options) {
+                const initialPath = getPathFromUrl(options)
+                actions.setInitialPath(initialPath)
+            }
         },
 
         unmountIframe: () => {
@@ -82,4 +83,14 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
             router.actions.push(getPathFromUrl(urlOrPath))
         },
     })),
+
+    afterMount(({ actions, values }) => {
+        if (values.sceneConfig?.defaultDocsPath) {
+            actions.setInitialPath(values.sceneConfig?.defaultDocsPath)
+        }
+    }),
+
+    beforeUnmount(({ actions, values }) => {
+        actions.setInitialPath(values.currentPath ?? '/docs')
+    }),
 ])

frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx

@@ -114,7 +114,7 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                     breadcrumbs.push({
                         key: 'me',
                         name: user.first_name,
-                        symbol: <ProfilePicture name={user.first_name} email={user.email} size="md" />,
+                        symbol: <ProfilePicture user={user} size="md" />,
                     })
                 }
                 // Instance

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -74,7 +74,7 @@ function AccountInfo(): JSX.Element {
                 tooltipPlacement="left"
                 sideIcon={<IconSettings className="text-2xl" />}
             >
-                <ProfilePicture name={user?.first_name} email={user?.email} size="xl" />
+                <ProfilePicture user={user} size="xl" />
                 <div className="AccountInfo__identification SitePopover__main-info font-sans font-normal">
                     <div className="font-semibold mb-1">{user?.first_name}</div>
                     <div className="supplement" title={user?.email}>
@@ -320,7 +320,7 @@ export function SitePopover(): JSX.Element {
         >
             <div className="SitePopover__crumb" onClick={toggleSitePopover} data-attr="top-menu-toggle">
                 <div className="SitePopover__profile-picture" title="Potential system issue">
-                    <ProfilePicture name={user?.first_name} email={user?.email} size="md" />
+                    <ProfilePicture user={user} size="md" />
                     {!systemStatusHealthy && <IconExclamation className="SitePopover__danger" />}
                 </div>
                 <IconChevronDown />

frontend/src/lib/components/ActivityLog/ActivityLog.tsx

@@ -73,9 +73,11 @@ export const ActivityLogRow = ({
         <div className={clsx('ActivityLogRow', logItem.unread && 'ActivityLogRow--unread')}>
             <ProfilePicture
                 showName={false}
-                name={logItem.isSystem ? logItem.name : undefined}
+                user={{
+                    first_name: logItem.isSystem ? logItem.name : undefined,
+                    email: logItem.email ?? undefined,
+                }}
                 type={logItem.isSystem ? 'system' : 'person'}
-                email={logItem.email ?? undefined}
                 size={'xl'}
             />
             <div className="ActivityLogRow__details">

frontend/src/lib/components/ActivityLog/humanizeActivity.tsx

@@ -1,4 +1,5 @@
 import { dayjs } from 'lib/dayjs'
+import { fullName } from 'lib/utils'
 
 import { InsightShortId, PersonType } from '~/types'
 
@@ -110,7 +111,7 @@ export function humanize(
         if (description !== null) {
             logLines.push({
                 email: logItem.user?.email,
-                name: logItem.user?.first_name,
+                name: logItem.user ? fullName(logItem.user) : undefined,
                 isSystem: logItem.is_system,
                 description,
                 extendedDescription,
@@ -126,5 +127,5 @@ export function userNameForLogItem(logItem: ActivityLogItem): string {
     if (logItem.is_system) {
         return 'PostHog'
     }
-    return logItem.user?.first_name ?? 'A user'
+    return logItem.user ? fullName(logItem.user) : 'A user'
 }

frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx

@@ -258,8 +258,9 @@ function AnnotationCard({ annotation }: { annotation: AnnotationType }): JSX.Ele
             <div className="mt-1">{annotation.content}</div>
             <div className="leading-6 mt-2">
                 <ProfilePicture
-                    name={annotation.creation_type === 'GIT' ? 'GitHub automation' : annotation.created_by?.first_name}
-                    email={annotation.creation_type === 'GIT' ? undefined : annotation.created_by?.email}
+                    user={
+                        annotation.creation_type === 'GIT' ? { first_name: 'GitHub automation' } : annotation.created_by
+                    }
                     showName
                     size="md"
                     type={annotation.creation_type === 'GIT' ? 'bot' : 'person'}

frontend/src/lib/components/Cards/InsightCard/InsightDetails.tsx

@@ -333,19 +333,13 @@ function InsightDetailsInternal({ insight }: { insight: InsightModel }, ref: Rea
                 <div>
                     <h5>Created by</h5>
                     <section>
-                        <ProfilePicture name={created_by?.first_name} email={created_by?.email} showName size="md" />{' '}
-                        <TZLabel time={created_at} />
+                        <ProfilePicture user={created_by} showName size="md" /> <TZLabel time={created_at} />
                     </section>
                 </div>
                 <div>
                     <h5>Last modified by</h5>
                     <section>
-                        <ProfilePicture
-                            name={insight.last_modified_by?.first_name}
-                            email={insight.last_modified_by?.email}
-                            showName
-                            size="md"
-                        />{' '}
+                        <ProfilePicture user={insight.last_modified_by} showName size="md" />{' '}
                         <TZLabel time={insight.last_modified_at} />
                     </section>
                 </div>

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -689,9 +689,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                         },
                     },
                     {
-                        icon: () => (
-                            <ProfilePicture name={values.user?.first_name} email={values.user?.email} size="xs" />
-                        ),
+                        icon: () => <ProfilePicture user={values.user} size="xs" />,
                         display: 'Go to User settings',
                         synonyms: ['account', 'profile'],
                         executor: () => {

frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx

@@ -185,7 +185,7 @@ function Owner({ user }: { user?: UserBasicType | null }): JSX.Element {
         <>
             {user?.uuid ? (
                 <div className="flex items-center flex-row">
-                    <ProfilePicture name={user.first_name} email={user.email} size="sm" />
+                    <ProfilePicture user={user} size="sm" />
                     <span className="pl-2 inline-flex font-semibold pl-1 whitespace-nowrap">{user.first_name}</span>
                 </div>
             ) : (

frontend/src/lib/components/MemberSelect.tsx

@@ -1,5 +1,6 @@
 import { LemonButton, LemonButtonProps, LemonDropdown, LemonInput, ProfilePicture } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
+import { fullName } from 'lib/utils'
 import { useMemo, useState } from 'react'
 import { membersLogic } from 'scenes/organization/membersLogic'
 
@@ -79,17 +80,11 @@ export function MemberSelect({
                                     fullWidth
                                     role="menuitem"
                                     size="small"
-                                    icon={
-                                        <ProfilePicture
-                                            size="md"
-                                            name={member.user.first_name}
-                                            email={member.user.email}
-                                        />
-                                    }
+                                    icon={<ProfilePicture size="md" user={member.user} />}
                                     onClick={() => _onChange(member.user)}
                                 >
                                     <span className="flex items-center justify-between gap-2 flex-1">
-                                        <span>{member.user.first_name}</span>
+                                        <span>{fullName(member.user)}</span>
                                         <span className="text-muted-alt">
                                             {meFirstMembers[0] === member && `(you)`}
                                         </span>
@@ -112,7 +107,7 @@ export function MemberSelect({
                     selectedMember
                 ) : selectedMember ? (
                     <span>
-                        {selectedMember.first_name}
+                        {fullName(selectedMember)}
                         {meFirstMembers[0].user.uuid === selectedMember.uuid ? ` (you)` : ''}
                     </span>
                 ) : (

frontend/src/lib/components/Table/Table.tsx

@@ -31,9 +31,7 @@ export function createdByColumn<T extends Record<string, any> = Record<string, a
         render: function Render(_: any, item: any) {
             return (
                 <div className="flex items-center flex-nowrap">
-                    {item.created_by && (
-                        <ProfilePicture name={item.created_by.first_name} email={item.created_by.email} size="md" />
-                    )}
+                    {item.created_by && <ProfilePicture user={item.created_by} size="md" />}
                     {/* eslint-disable-next-line react/forbid-dom-props */}
                     <div style={{ maxWidth: 250, width: 'auto', verticalAlign: 'middle', marginLeft: 8 }}>
                         {item.created_by ? item.created_by.first_name || item.created_by.email : '-'}

frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.tsx

@@ -27,7 +27,7 @@ export function UserActivityIndicator({
                 {at && <TZLabel time={at} />}
                 {by && <span> by</span>}
             </div>
-            {by && <ProfilePicture name={by.first_name} email={by.email} showName size="md" />}
+            {by && <ProfilePicture user={by} showName size="md" />}
         </div>
     ) : null
 }

frontend/src/lib/components/UserSelectItem.tsx

@@ -10,7 +10,7 @@ export interface UserSelectItemProps {
 export function UserSelectItem({ user }: UserSelectItemProps): JSX.Element {
     return (
         <span className="flex gap-2 items-center">
-            <ProfilePicture name={user.first_name} email={user.email} size="sm" />
+            <ProfilePicture user={user} size="sm" />
             <span>
                 {user.first_name} <b>{`<${user.email}>`}</b>
             </span>

frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.stories.tsx

@@ -16,7 +16,13 @@ const meta: Meta<typeof LemonSelectMultiple> = {
                 [`user-${i}`]: {
                     labelComponent: (
                         <span className="flex gap-2 items-center">
-                            <ProfilePicture name={x} email={`${x}@posthog.com`} size="sm" />
+                            <ProfilePicture
+                                user={{
+                                    first_name: x,
+                                    email: `${x}@posthog.com`,
+                                }}
+                                size="sm"
+                            />
                             <span>
                                 {capitalizeFirstLetter(x)} <b>{`<${x}@posthog.com>`}</b>
                             </span>

frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.stories.tsx

@@ -44,7 +44,7 @@ export const ComplexContent: Story = BasicTemplate.bind({})
 ComplexContent.args = {
     children: (
         <span className="flex gap-2 items-center">
-            <ProfilePicture email="ben@posthog.com" size="sm" />
+            <ProfilePicture name="ben" size="sm" />
             <span>
                 Look at me I'm <b>bold!</b>
             </span>

frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx

@@ -39,9 +39,7 @@ export function createdByColumn<T extends { created_by?: UserBasicType | null }>
             const { created_by } = item
             return (
                 <div className={'flex flex-row items-center flex-nowrap'}>
-                    {created_by && (
-                        <ProfilePicture name={created_by.first_name} email={created_by.email} size="md" showName />
-                    )}
+                    {created_by && <ProfilePicture user={created_by} size="md" showName />}
                 </div>
             )
         },

frontend/src/lib/lemon-ui/Link/Link.tsx

@@ -86,7 +86,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
 
         // NOTE: Temporarily disabled - owner @corywatilo
         // const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
-        // const { openDocsPage } = useActions(sidePanelDocsLogic)
+        // const { openSidePanel } = useActions(sidePanelStateLogic)
 
         const onClick = (event: React.MouseEvent<HTMLElement>): void => {
             if (event.metaKey || event.ctrlKey) {
@@ -104,7 +104,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
             // NOTE: Temporarily disabled - owner @corywatilo
             // if (typeof to === 'string' && is3000 && isPostHogComDocs(to)) {
             //     event.preventDefault()
-            //     openDocsPage(to)
+            //     openSidePanel(SidePanelTab.Docs, to)
             //     return
             // }