Merge remote-tracking branch 'upstream/master'

* upstream/master: (75 commits)
  Sync and remove all non-FOSS parts
  feat: ScrollableShadows component (#19356)
  feat(web-analytics): Use 'Other' for unknown channel type (#19388)
  fix: no default star background (#19387)
  fix: Minimal response for notebook list api (#19386)
  fix(3000): a bunch of minor fixes (#19354)
  feat(3000): changed color theme ui (#19139)
  fix: kill the plugin-server process if the graphile worker stops unexpectedly (#19363)
  fix: wireframe progress style (#19376)
  fix(web-analytics): Another attempt at channel stats table (#19380)
  fix: Option to redirect app.posthog.com traffic to us.posthog.com (#19377)
  feat(feature flag scheduled changes): connect UI to the API (#19322)
  fix(web-analytics): Fix channel type (#19378)
  fix: style element content replacement (#19373)
  feat(trends): Add "Decimal places" as a Trends viz option (#19330)
  fix(3000): Truncate page titles intelligently (#19366)
  chore(data-warehouse): add charge (#19369)
  feat(web-analytics): Attempt to shore up the stats table broken down by initial channel type (#19362)
  refactor(paths): Remove unused filter mixins (#19286)
  chore(data-warehouse): dont nest imported data schema (#19364)
  ...

frontend/@posthog/ee/types.ts

@@ -5,8 +5,7 @@ import { eventWithTime } from '@rrweb/types'
 export type PostHogEE = {
     enabled: boolean
     mobileReplay?: {
-        // defined as unknown while the mobileEventWithTime type is in the ee folder
-        transformEventToWeb(x: unknown): eventWithTime | null
+        transformEventToWeb(x: unknown, validateTransformation?: boolean): eventWithTime | null
         transformToWeb(x: unknown[]): eventWithTime[]
     }
 }

frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -1,8 +1,8 @@
 import './ErrorBoundary.scss'
 
+import { IconChevronDown } from '@posthog/icons'
 import { ErrorBoundary as SentryErrorBoundary, getCurrentHub } from '@sentry/react'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { IconArrowDropDown } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 
 export function ErrorBoundary({ children }: { children: React.ReactElement }): JSX.Element {
@@ -30,7 +30,7 @@ export function ErrorBoundary({ children }: { children: React.ReactElement }): J
                             : 'Please send over a screenshot of this message, so that we can resolve the issue.'}
                         <HelpButton
                             customComponent={
-                                <LemonButton type="primary" sideIcon={<IconArrowDropDown />}>
+                                <LemonButton type="primary" sideIcon={<IconChevronDown />}>
                                     Contact PostHog
                                 </LemonButton>
                             }

frontend/src/layout/navigation-3000/Navigation.scss

@@ -80,7 +80,8 @@
             --lemon-button-padding-horizontal: 0.25rem !important;
         }
 
-        > * {
+        .Navbar3000__top,
+        .Navbar3000__bottom {
             padding: 0 0.375rem;
         }
 

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

@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
 import { Resizer } from 'lib/components/Resizer/Resizer'
+import { ScrollableShadows } from 'lib/components/ScrollableShadows/ScrollableShadows'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -32,7 +33,7 @@ export function Navbar(): JSX.Element {
         <>
             <nav className={clsx('Navbar3000', !isNavShown && 'Navbar3000--hidden')} ref={containerRef}>
                 <div className="Navbar3000__content">
-                    <div className="Navbar3000__top">
+                    <ScrollableShadows innerClassName="Navbar3000__top" direction="vertical">
                         {navbarItems.map((section, index) => (
                             <ul key={index}>
                                 {section.map((item) =>
@@ -65,7 +66,7 @@ export function Navbar(): JSX.Element {
                                 )}
                             </ul>
                         ))}
-                    </div>
+                    </ScrollableShadows>
                     <div className="Navbar3000__bottom">
                         <ul>
                             <NavbarButton

frontend/src/layout/navigation-3000/components/TopBar.scss

@@ -9,6 +9,11 @@
     height: var(--breadcrumbs-height-full);
     white-space: nowrap;
     pointer-events: none;
+
+    .EditableField__display {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .TopBar3000__content {
@@ -83,6 +88,7 @@
     }
 
     &.TopBar3000__breadcrumb--here {
+        flex-shrink: 1;
         cursor: default;
         visibility: var(--breadcrumbs-title-small-visibility);
 

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

@@ -1,10 +1,11 @@
 import './TopBar.scss'
 
+import { IconChevronDown } from '@posthog/icons'
 import { LemonButton, LemonSkeleton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { EditableField } from 'lib/components/EditableField/EditableField'
-import { IconArrowDropDown, IconMenu } from 'lib/lemon-ui/icons'
+import { IconMenu } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import React, { useLayoutEffect, useState } from 'react'
@@ -163,7 +164,7 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
             to={breadcrumb.path}
         >
             {nameElement}
-            {breadcrumb.popover && <IconArrowDropDown />}
+            {breadcrumb.popover && <IconChevronDown />}
         </Component>
     )
 
@@ -236,6 +237,7 @@ function Here({ breadcrumb }: HereProps): JSX.Element {
                     placeholder="Unnamed"
                     compactButtons="xsmall"
                     editingIndication="underlined"
+                    autoFocus
                 />
             ) : (
                 <span>{breadcrumb.name}</span>

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

@@ -1,10 +1,11 @@
 import './NotificationsBell.scss'
 
+import { IconChevronDown } from '@posthog/icons'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { ActivityLogRow } from 'lib/components/ActivityLog/ActivityLog'
 import { usePageVisibility } from 'lib/hooks/usePageVisibility'
-import { IconArrowDropDown, IconInfo, IconNotification, IconWithCount } from 'lib/lemon-ui/icons'
+import { IconInfo, IconNotification, IconWithCount } from 'lib/lemon-ui/icons'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
 import { Link } from 'lib/lemon-ui/Link'
@@ -62,7 +63,7 @@ export function NotificationBell(): JSX.Element {
                 <IconWithCount count={unreadCount} showZero={true} status={hasUnread ? 'primary' : 'muted'}>
                     <IconNotification />
                 </IconWithCount>
-                <IconArrowDropDown />
+                <IconChevronDown />
             </div>
         </Popover>
     )

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

@@ -125,7 +125,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
     }),
 
     afterMount(({ values }) => {
-        if (values.shouldShowWelcomeAnnouncement) {
+        if (!values.sidePanelOpen && values.shouldShowWelcomeAnnouncement) {
             sidePanelStateLogic.findMounted()?.actions.openSidePanel(SidePanelTab.Welcome)
         }
     }),

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

@@ -1,8 +1,9 @@
 import './Breadcrumbs.scss'
 
+import { IconChevronDown } from '@posthog/icons'
 import clsx from 'clsx'
 import { useValues } from 'kea'
-import { IconArrowDropDown, IconChevronRight } from 'lib/lemon-ui/icons'
+import { IconChevronRight } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import React, { useState } from 'react'
@@ -27,7 +28,7 @@ function Breadcrumb({ breadcrumb, index }: { breadcrumb: IBreadcrumb; index: num
         >
             {breadcrumb.symbol}
             <span>{breadcrumb.name}</span>
-            {breadcrumb.popover && <IconArrowDropDown className="text-muted-alt text-lg" />}
+            {breadcrumb.popover && <IconChevronDown className="text-muted-alt text-lg" />}
         </div>
     )
 

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

@@ -1,10 +1,10 @@
-import { IconDay, IconFeatures, IconLaptop, IconLive, IconNight } from '@posthog/icons'
+import { IconChevronDown, IconDay, IconFeatures, IconLaptop, IconLive, IconNight } from '@posthog/icons'
 import { LemonButtonPropsBase, LemonSelect } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
 import {
-    IconArrowDropDown,
     IconBill,
     IconCheckmark,
     IconCorporate,
@@ -40,9 +40,17 @@ import { userLogic } from '../../../scenes/userLogic'
 import { OrganizationBasicType } from '../../../types'
 import { navigationLogic } from '../navigationLogic'
 
-function SitePopoverSection({ title, children }: { title?: string | JSX.Element; children: any }): JSX.Element {
+function SitePopoverSection({
+    title,
+    className,
+    children,
+}: {
+    title?: string | JSX.Element
+    className?: string
+    children: any
+}): JSX.Element {
     return (
-        <div className="SitePopover__section">
+        <div className={clsx('SitePopover__section', className)}>
             {title && <h5 className="flex items-center">{title}</h5>}
             {children}
         </div>
@@ -223,11 +231,21 @@ function ThemeSwitcher(): JSX.Element {
     return (
         <LemonSelect
             options={[
-                { icon: <IconLaptop />, value: null, label: `Theme synced with system` },
+                { icon: <IconLaptop />, value: null, label: `Sync with system` },
                 { icon: <IconDay />, value: 'light', label: 'Light mode' },
                 { icon: <IconNight />, value: 'dark', label: 'Dark mode' },
             ]}
             value={user?.theme_mode}
+            renderButtonContent={(leaf) => {
+                return (
+                    <>
+                        <span className="flex-1 flex justify-between items-baseline">
+                            <span>Color theme</span>
+                            <span className="font-normal text-xs">{leaf ? leaf.label : 'Sync with system'}</span>
+                        </span>
+                    </>
+                )
+            }}
             onChange={(value) => updateUser({ theme_mode: value })}
             type="tertiary"
             fullWidth
@@ -286,7 +304,7 @@ export function SitePopoverOverlay(): JSX.Element {
                 </SitePopoverSection>
             )}
             {(!(preflight?.cloud || preflight?.demo) || user?.is_staff) && (
-                <SitePopoverSection title="PostHog instance">
+                <SitePopoverSection title="PostHog instance" className="font-title-3000">
                     <SystemStatus />
                     <AsyncMigrations />
                     <InstanceSettings />
@@ -332,7 +350,7 @@ export function SitePopover(): JSX.Element {
                     <ProfilePicture name={user?.first_name} email={user?.email} size="md" />
                     {!systemStatus && <IconExclamation className="SitePopover__danger" />}
                 </div>
-                <IconArrowDropDown />
+                <IconChevronDown />
             </div>
         </Popover>
     )

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

@@ -29,7 +29,7 @@ export function YearInHogButton({ url }: { url: string | null }): JSX.Element |
                 onMouseEnter={() => setIsHovering(true)}
                 onMouseLeave={() => setIsHovering(false)}
             >
-                PostHog unwrapped
+                PostHog Unwrapped
             </LemonButton>
         </div>
     ) : null

frontend/src/lib/api.ts

@@ -29,6 +29,7 @@ import {
     EventType,
     Experiment,
     ExportedAssetType,
+    ExternalDataSourceSchema,
     ExternalDataStripeSource,
     ExternalDataStripeSourceCreatePayload,
     FeatureFlagAssociatedRoleType,
@@ -39,6 +40,7 @@ import {
     IntegrationType,
     MediaUploadResponse,
     NewEarlyAccessFeatureType,
+    NotebookListItemType,
     NotebookNodeResource,
     NotebookType,
     OrganizationFeatureFlags,
@@ -54,6 +56,7 @@ import {
     RoleMemberType,
     RolesListParams,
     RoleType,
+    ScheduledChangeType,
     SearchListParams,
     SearchResponse,
     SessionRecordingPlaylistType,
@@ -511,6 +514,30 @@ class ApiRequest {
         return this.featureFlags(teamId).addPathComponent('activity')
     }
 
+    public featureFlagScheduledChanges(teamId: TeamType['id'], featureFlagId: FeatureFlagType['id']): ApiRequest {
+        return this.projectsDetail(teamId)
+            .addPathComponent('scheduled_changes')
+            .withQueryString(
+                toParams({
+                    model_name: 'FeatureFlag',
+                    record_id: featureFlagId,
+                })
+            )
+    }
+
+    public featureFlagCreateScheduledChange(teamId: TeamType['id']): ApiRequest {
+        return this.projectsDetail(teamId).addPathComponent('scheduled_changes')
+    }
+
+    public featureFlagDeleteScheduledChange(
+        teamId: TeamType['id'],
+        scheduledChangeId: ScheduledChangeType['id']
+    ): ApiRequest {
+        return this.projectsDetail(teamId)
+            .addPathComponent('scheduled_changes')
+            .addPathComponent(`${scheduledChangeId}`)
+    }
+
     // # Features
     public earlyAccessFeatures(teamId?: TeamType['id']): ApiRequest {
         return this.projectsDetail(teamId).addPathComponent('early_access_feature')
@@ -656,6 +683,14 @@ class ApiRequest {
         return this.externalDataSources(teamId).addPathComponent(sourceId)
     }
 
+    public externalDataSchemas(teamId?: TeamType['id']): ApiRequest {
+        return this.projectsDetail(teamId).addPathComponent('external_data_schemas')
+    }
+
+    public externalDataSourceSchema(schemaId: ExternalDataSourceSchema['id'], teamId?: TeamType['id']): ApiRequest {
+        return this.externalDataSchemas(teamId).addPathComponent(schemaId)
+    }
+
     // Request finalization
     public async get(options?: ApiMethodOptions): Promise<any> {
         return await api.get(this.assembleFullUrl(), options)
@@ -754,6 +789,24 @@ const api = {
         async createStaticCohort(id: FeatureFlagType['id']): Promise<{ cohort: CohortType }> {
             return await new ApiRequest().featureFlagCreateStaticCohort(id).create()
         },
+        async getScheduledChanges(
+            teamId: TeamType['id'],
+            featureFlagId: FeatureFlagType['id']
+        ): Promise<CountedPaginatedResponse<ScheduledChangeType>> {
+            return await new ApiRequest().featureFlagScheduledChanges(teamId, featureFlagId).get()
+        },
+        async createScheduledChange(
+            teamId: TeamType['id'],
+            data: any
+        ): Promise<{ scheduled_change: ScheduledChangeType }> {
+            return await new ApiRequest().featureFlagCreateScheduledChange(teamId).create({ data })
+        },
+        async deleteScheduledChange(
+            teamId: TeamType['id'],
+            scheduledChangeId: ScheduledChangeType['id']
+        ): Promise<{ scheduled_change: ScheduledChangeType }> {
+            return await new ApiRequest().featureFlagDeleteScheduledChange(teamId, scheduledChangeId).delete()
+        },
     },
 
     organizationFeatureFlags: {
@@ -1544,7 +1597,7 @@ const api = {
                 offset?: number
                 limit?: number
             } = {}
-        ): Promise<CountedPaginatedResponse<NotebookType>> {
+        ): Promise<CountedPaginatedResponse<NotebookListItemType>> {
             // TODO attrs could be a union of types like NotebookNodeRecordingAttributes
             const apiRequest = new ApiRequest().notebooks()
             const { contains, ...queryParams } = objectClean(params)
@@ -1716,6 +1769,15 @@ const api = {
         },
     },
 
+    externalDataSchemas: {
+        async update(
+            schemaId: ExternalDataSourceSchema['id'],
+            data: Partial<ExternalDataSourceSchema>
+        ): Promise<ExternalDataSourceSchema> {
+            return await new ApiRequest().externalDataSourceSchema(schemaId).update({ data })
+        },
+    },
+
     dataWarehouseViewLinks: {
         async list(): Promise<PaginatedResponse<DataWarehouseViewLink>> {
             return await new ApiRequest().dataWarehouseViewLinks().get()

frontend/src/lib/components/ActivationSidebar/activationLogic.ts

@@ -12,8 +12,9 @@ import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
+import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 import { dashboardsModel } from '~/models/dashboardsModel'
-import { EventDefinitionType, ProductKey, TeamBasicType } from '~/types'
+import { EventDefinitionType, ProductKey, SidePanelTab, TeamBasicType } from '~/types'
 
 import type { activationLogicType } from './activationLogicType'
 
@@ -67,6 +68,8 @@ export const activationLogic = kea<activationLogicType>([
             ['loadPluginsSuccess', 'loadPluginsFailure'],
             navigationLogic,
             ['toggleActivationSideBar', 'showActivationSideBar', 'hideActivationSideBar'],
+            sidePanelStateLogic,
+            ['openSidePanel'],
             eventUsageLogic,
             ['reportActivationSideBarShown'],
             savedInsightsLogic,
@@ -373,6 +376,7 @@ export const activationLogic = kea<activationLogicType>([
         '*': (_, params) => {
             if (params?.onboarding_completed && !values.hasCompletedAllTasks) {
                 actions.toggleActivationSideBar()
+                actions.openSidePanel(SidePanelTab.Activation)
             } else {
                 actions.hideActivationSideBar()
             }