Merge branch 'master' into tailwind

PostHog · Dec 5, 2023 · 7639da0 · 7639da0
2 parents 72f638c + e391387
commit 7639da0
Show file tree

Hide file tree

Showing 90 changed files with 541 additions and 3,960 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -71,6 +71,7 @@
                 "SKIP_SERVICE_VERSION_REQUIREMENTS": "1",
                 "PRINT_SQL": "1",
                 "REPLAY_EVENTS_NEW_CONSUMER_RATIO": "1.0",
+                "AUTO_LOGIN": "True",
                 "BILLING_SERVICE_URL": "https://billing.dev.posthog.dev"
             },
             "console": "integratedTerminal",

diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx
@@ -43,7 +43,7 @@ export const sidePanelSettingsLogic = kea<sidePanelSettingsLogicType>([
 
     listeners(({ actions, values }) => ({
         openSettingsPanel: ({ settingsLogicProps }) => {
-            if (!values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'control') {
                 LemonDialog.open({
                     title: 'Settings',
                     content: <Settings {...settingsLogicProps} hideSections logicKey="modal" />,

diff --git a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
@@ -32,8 +32,8 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
     selectors({
         enabledTabs: [
-            (s) => [s.featureFlags, s.isCloudOrDev],
-            (featureFlags, isCloudOrDev) => {
+            (s) => [s.featureFlags, s.isCloudOrDev, s.isReady, s.hasCompletedAllTasks],
+            (featureFlags, isCloudOrDev, isReady, hasCompletedAllTasks) => {
                 const tabs: SidePanelTab[] = []
 
                 if (featureFlags[FEATURE_FLAGS.NOTEBOOKS]) {
@@ -46,7 +46,9 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
                 tabs.push(SidePanelTab.Docs)
                 tabs.push(SidePanelTab.Settings)
-                tabs.push(SidePanelTab.Activation)
+                if (isReady && !hasCompletedAllTasks) {
+                    tabs.push(SidePanelTab.Activation)
+                }
                 tabs.push(SidePanelTab.Activity)
 
                 if (featureFlags[FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON]) {
@@ -59,7 +61,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
         visibleTabs: [
             (s) => [s.enabledTabs, s.selectedTab, s.sidePanelOpen, s.isReady, s.hasCompletedAllTasks],
-            (enabledTabs, selectedTab, sidePanelOpen, isReady, hasCompletedAllTasks): SidePanelTab[] => {
+            (enabledTabs, selectedTab, sidePanelOpen): SidePanelTab[] => {
                 return enabledTabs.filter((tab: any) => {
                     if (tab === selectedTab && sidePanelOpen) {
                         return true
@@ -70,10 +72,6 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                         return false
                     }
 
-                    if (tab === SidePanelTab.Activation && (!isReady || hasCompletedAllTasks)) {
-                        return false
-                    }
-
                     return true
                 })
             },

diff --git a/frontend/src/layout/navigation-3000/themeLogic.ts b/frontend/src/layout/navigation-3000/themeLogic.ts
@@ -36,7 +36,7 @@ export const themeLogic = kea<themeLogicType>([
                 }
                 // Dark mode is a PostHog 3000 feature
                 // User-saved preference is used when set, oterwise we fall back to the system value
-                return featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+                return featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
                     ? user?.theme_mode
                         ? user.theme_mode === 'dark'
                         : darkModeSystemPreference

diff --git a/frontend/src/layout/navigation/TopBar/NotebookButton.tsx b/frontend/src/layout/navigation/TopBar/NotebookButton.tsx
@@ -7,7 +7,7 @@ import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanel
 export function NotebookButton(): JSX.Element {
     const { visibility } = useValues(notebookPanelLogic)
     const { toggleVisibility } = useActions(notebookPanelLogic)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const overrides3000: Partial<LemonButtonWithSideActionProps> = is3000
         ? {

diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -300,7 +300,7 @@ export function SitePopoverOverlay(): JSX.Element {
                 </SitePopoverSection>
             )}
             <SitePopoverSection>
-                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000}>
+                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000} match="test">
                     <ThemeSwitcher />
                 </FlaggedFeature>
                 <LemonButton

diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx b/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx
@@ -142,7 +142,7 @@ export function CodeSnippet({
                 />
             </div>
             <SyntaxHighlighter
-                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? synthwave84 : okaidia}
+                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? synthwave84 : okaidia}
                 language={language}
                 wrapLines={wrap}
                 lineProps={{ style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } }}

diff --git a/frontend/src/lib/components/CommandPalette/CommandPalette.tsx b/frontend/src/lib/components/CommandPalette/CommandPalette.tsx
@@ -17,7 +17,7 @@ import { CommandResults } from './CommandResults'
 export function CommandPalette(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
 
     if (isUsingCmdKSearch) {
         return <CommandBar />

diff --git a/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx b/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx
@@ -46,7 +46,7 @@ import { actions, connect, events, kea, listeners, path, reducers, selectors } f
 import { router } from 'kea-router'
 import api from 'lib/api'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { IconFlare } from 'lib/lemon-ui/icons'
+import { IconClose, IconFlare } from 'lib/lemon-ui/icons'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isMobile, isURL, uniqueBy } from 'lib/utils'
@@ -59,6 +59,9 @@ import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
+import { SidePanelTabs } from '~/layout/navigation-3000/sidepanel/SidePanel'
+import { sidePanelLogic } from '~/layout/navigation-3000/sidepanel/sidePanelLogic'
+import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 import { dashboardsModel } from '~/models/dashboardsModel'
 import { DashboardType, InsightType } from '~/types'
 
@@ -148,6 +151,8 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             ['setHedgehogModeEnabled'],
             commandBarLogic,
             ['setCommandBar'],
+            sidePanelStateLogic,
+            ['openSidePanel', 'closeSidePanel'],
         ],
         values: [
             teamLogic,
@@ -158,6 +163,10 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             ['featureFlags'],
             hedgehogbuddyLogic,
             ['hedgehogModeEnabled'],
+            sidePanelLogic,
+            ['enabledTabs'],
+            sidePanelStateLogic,
+            ['sidePanelOpen'],
         ],
         logic: [preflightLogic],
     }),
@@ -242,7 +251,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
     selectors({
         isUsingCmdKSearch: [
             (selectors) => [selectors.featureFlags],
-            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000],
+            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test',
         ],
         isSqueak: [
             (selectors) => [selectors.input],
@@ -963,6 +972,34 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                 },
             }
 
+            const sidepanel: Command = {
+                key: 'sidepanel',
+                scope: GLOBAL_COMMAND_SCOPE,
+                resolver: [
+                    ...values.enabledTabs.map((tab) => {
+                        const { Icon, label } = SidePanelTabs[tab]
+                        return {
+                            icon: Icon,
+                            display: `Open ${label} side panel`,
+                            executor: () => {
+                                actions.openSidePanel(tab)
+                            },
+                        }
+                    }),
+                    ...(values.sidePanelOpen
+                        ? [
+                              {
+                                  icon: IconClose,
+                                  display: 'Close side panel',
+                                  executor: () => {
+                                      actions.closeSidePanel()
+                                  },
+                              },
+                          ]
+                        : []),
+                ],
+            }
+
             actions.registerCommand(goTo)
             actions.registerCommand(openUrls)
             actions.registerCommand(debugClickhouseQueries)
@@ -971,10 +1008,11 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             actions.registerCommand(createDashboard)
             actions.registerCommand(shareFeedback)
             actions.registerCommand(debugCopySessionRecordingURL)
-            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                 actions.registerCommand(toggleTheme)
                 actions.registerCommand(toggleHedgehogMode)
                 actions.registerCommand(shortcuts)
+                actions.registerCommand(sidepanel)
             }
         },
         beforeUnmount: () => {
@@ -989,6 +1027,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             actions.deregisterCommand('toggle-theme')
             actions.deregisterCommand('toggle-hedgehog-mode')
             actions.deregisterCommand('shortcuts')
+            actions.deregisterCommand('sidepanel')
         },
     })),
 ])
diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -1,17 +1,19 @@
+import clsx from 'clsx'
 import { IconCopy } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
-import { HTMLProps } from 'react'
 
-interface InlinePropsBase extends HTMLProps<HTMLSpanElement> {
+interface InlinePropsBase {
     description?: string
     /** Makes text selectable instead of copying on click anywhere */
     selectable?: boolean
     isValueSensitive?: boolean
     tooltipMessage?: string | null
     iconStyle?: Record<string, string | number>
     iconPosition?: 'end' | 'start'
+    className?: string
+    /** @deprecated */
     style?: React.CSSProperties
 }
 interface InlinePropsWithStringInside extends InlinePropsBase {
@@ -33,41 +35,49 @@ export function CopyToClipboardInline({
     tooltipMessage = null,
     iconStyle,
     iconPosition = 'end',
+    className,
     style,
     ...props
 }: InlineProps): JSX.Element {
     const copy = async (): Promise<boolean> => await copyToClipboard((explicitValue ?? children) as string, description)
 
-    const content = (
-        <span
-            className={isValueSensitive ? 'ph-no-capture' : ''}
-            // eslint-disable-next-line react/forbid-dom-props
-            style={{
-                position: 'relative',
-                overflow: 'hidden',
-                cursor: selectable ? 'text' : 'pointer',
-                display: 'inline-flex',
-                alignItems: 'center',
-                flexDirection: iconPosition === 'end' ? 'row' : 'row-reverse',
-                flexWrap: 'nowrap',
-                width: 'fit-content',
-                wordBreak: 'break-all',
-                ...style,
-            }}
-            onClick={!selectable ? copy : undefined}
-            {...props}
-        >
-            {children && <span className={iconPosition === 'start' ? 'grow-1' : undefined}>{children}</span>}
-            <LemonButton
-                size="small"
-                icon={<IconCopy style={{ ...iconStyle }} />}
-                noPadding
-                className="ml-1"
-                data-attr="copy-icon"
-                onClick={!selectable ? undefined : copy}
-            />
-        </span>
+    let content = (
+        <LemonButton
+            size="small"
+            icon={<IconCopy style={{ ...iconStyle }} />}
+            noPadding
+            className="ml-1"
+            data-attr="copy-icon"
+            onClick={!selectable ? undefined : copy}
+        />
     )
+
+    if (children) {
+        content = (
+            <span
+                className={clsx(
+                    'relative truncate inline-flex items-center flex-nowrap w-fit break-all',
+                    selectable ? 'cursor-text' : 'cursor-pointer',
+                    iconPosition === 'end' ? 'flex-row' : 'flex-row-reverse',
+                    isValueSensitive && 'ph-no-capture',
+                    className
+                )}
+                style={style}
+                onClick={!selectable ? copy : undefined}
+                {...props}
+            >
+                <span className={iconPosition === 'start' ? 'grow-1' : undefined}>{children}</span>
+                <LemonButton
+                    size="small"
+                    icon={<IconCopy style={{ ...iconStyle }} />}
+                    noPadding
+                    className="ml-1"
+                    data-attr="copy-icon"
+                    onClick={!selectable ? undefined : copy}
+                />
+            </span>
+        )
+    }
     return !selectable || tooltipMessage !== null ? (
         <Tooltip title={tooltipMessage || 'Click to copy'}>{content}</Tooltip>
     ) : (

diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
@@ -27,12 +27,13 @@ export function PageHeader({
     delimited,
     notebookProps,
 }: PageHeaderProps): JSX.Element | null {
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
     const { actionsContainer } = useValues(breadcrumbsLogic)
 
     return (
         <>
             {!is3000 && (
+                // eslint-disable-next-line react/forbid-dom-props
                 <div className="page-title-row flex justify-between" style={style}>
                     <div className="min-w-0">
                         {!is3000 &&

diff --git a/frontend/src/lib/components/Support/supportLogic.ts b/frontend/src/lib/components/Support/supportLogic.ts
@@ -336,7 +336,7 @@ export const supportLogic = kea<supportLogicType>([
     actionToUrl(({ values }) => {
         return {
             closeSupportForm: () => {
-                if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+                if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                     return
                 }
 

diff --git a/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.tsx b/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.tsx
@@ -22,11 +22,10 @@ export function UserActivityIndicator({
 }: UserActivityIndicatorProps): JSX.Element | null {
     return at || by ? (
         <div className={clsx('UserActivityIndicator', className)}>
-            <div>
-                {prefix}
-                {at && ' '}
+            <div className="flex gap-x-1">
+                <span>{prefix}</span>
                 {at && <TZLabel time={at} />}
-                {by && ' by'}
+                {by && <span> by</span>}
             </div>
             {by && <ProfilePicture name={by.first_name} email={by.email} showName size="md" />}
         </div>

diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -142,7 +142,7 @@ export const FEATURE_FLAGS = {
     POSTHOG_3000_NAV: 'posthog-3000-nav', // owner: @Twixes
     ENABLE_PROMPTS: 'enable-prompts', // owner: @lharries
     FEEDBACK_SCENE: 'feedback-scene', // owner: @lharries
-    NOTEBOOKS: 'notebooks', // owner: #team-monitoring
+    NOTEBOOKS: 'notebooks', // owner: #team-replay
     EARLY_ACCESS_FEATURE_SITE_BUTTON: 'early-access-feature-site-button', // owner: @neilkakkar
     HEDGEHOG_MODE_DEBUG: 'hedgehog-mode-debug', // owner: @benjackwhite
     GENERIC_SIGNUP_BENEFITS: 'generic-signup-benefits', // experiment, owner: @raquelmsmith
@@ -160,25 +160,26 @@ export const FEATURE_FLAGS = {
     PRODUCT_SPECIFIC_ONBOARDING: 'product-specific-onboarding', // owner: @raquelmsmith
     REDIRECT_SIGNUPS_TO_INSTANCE: 'redirect-signups-to-instance', // owner: @raquelmsmith
     APPS_AND_EXPORTS_UI: 'apps-and-exports-ui', // owner: @benjackwhite
-    SESSION_REPLAY_CORS_PROXY: 'session-replay-cors-proxy', // owner: #team-monitoring
+    SESSION_REPLAY_CORS_PROXY: 'session-replay-cors-proxy', // owner: #team-replay
     HOGQL_INSIGHTS_LIFECYCLE: 'hogql-insights-lifecycle', // owner: @mariusandra
     HOGQL_INSIGHTS_TRENDS: 'hogql-insights-trends', // owner: @Gilbert09
     HOGQL_INSIGHT_LIVE_COMPARE: 'hogql-insight-live-compare', // owner: @mariusandra
     BI_VIZ: 'bi_viz', // owner: @Gilbert09
     WEBHOOKS_DENYLIST: 'webhooks-denylist', // owner: #team-pipeline
     SURVEYS_RESULTS_VISUALIZATIONS: 'surveys-results-visualizations', // owner: @jurajmajerik
     SURVEYS_PAYGATES: 'surveys-paygates',
-    CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-monitoring
+    CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-replay
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
     PIPELINE_UI: 'pipeline-ui', // owner: #team-pipeline
-    NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-monitoring
-    SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-monitoring
+    NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-replay
+    SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-replay
     PERSON_FEED_CANVAS: 'person-feed-canvas', // owner: #project-canvas
     MULTI_PROJECT_FEATURE_FLAGS: 'multi-project-feature-flags', // owner: @jurajmajerik #team-feature-success
-    NETWORK_PAYLOAD_CAPTURE: 'network-payload-capture', // owner: #team-monitoring
+    NETWORK_PAYLOAD_CAPTURE: 'network-payload-capture', // owner: #team-replay
     FEATURE_FLAG_COHORT_CREATION: 'feature-flag-cohort-creation', // owner: @neilkakkar #team-feature-success
     INSIGHT_HORIZONTAL_CONTROLS: 'insight-horizontal-controls', // owner: @benjackwhite
     ALWAYS_SHOW_SEEKBAR_PREVIEW: 'always-show-seekbar-preview', // owner: @pauldambra
+    SESSION_REPLAY_MOBILE: 'session-replay-mobile', // owner: #team-replay
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

diff --git a/frontend/src/lib/hooks/use3000Body.ts b/frontend/src/lib/hooks/use3000Body.ts
@@ -6,7 +6,7 @@ import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { useFeatureFlag } from './useFeatureFlag'
 
 export function use3000Body(): void {
-    const is3000 = !!useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
     const { isDarkModeOn } = useValues(themeLogic)
 
     useEffect(() => {