Merge branch 'master' into ch-24.3

* master:
  fix(replay-templates): show event selector button, diff mobile filter (#25739)
  feat(replay): add "what to watch" screen (#25717)
  fix(events): Fix PostHog property filtering (#25732)
  fix(api): Apply org/team key scoping more narrowly (#25634)
  feat(Experiments): UX feedback from private beta of no-code experiments. (#25694)
  fix: playlist should track current session id (#25730)
  chore(data-warehouse): Set the stripe version when listing objects (#25729)
  chore(data-warehouse): Added extra props for hubspot syncs (#25728)
  revert: perf: Speed up filtering persons pt 2 (#25731)
  chore(deps): Update posthog-js to 1.174.3 (#25724)
  perf: Speed up filtering persons pt 2 (#25718)
  feat(alerts): toggle alert threshold lines (#25700)
  feat: watch next and sort different (#25701)
  feat(cdp): add microsoft teams template (#25652)

frontend/src/lib/actionUtils.ts

@@ -20,7 +20,6 @@ export const EXPERIMENT_TARGETS = [
     'del',
     'details',
     'dfn',
-    'div',
     'footer',
     'header',
     'ol',

frontend/src/lib/components/Alerts/insightAlertsLogic.ts

@@ -35,6 +35,7 @@ export const insightAlertsLogic = kea<insightAlertsLogicType>([
 
     connect((props: InsightAlertsLogicProps) => ({
         actions: [insightVizDataLogic(props.insightLogicProps), ['setQuery']],
+        values: [insightVizDataLogic(props.insightLogicProps), ['showAlertThresholdLines']],
     })),
 
     loaders(({ props }) => ({
@@ -62,10 +63,11 @@ export const insightAlertsLogic = kea<insightAlertsLogicType>([
 
     selectors({
         alertThresholdLines: [
-            (s) => [s.alerts],
-            (alerts: AlertType[]): GoalLine[] =>
+            (s) => [s.alerts, s.showAlertThresholdLines],
+            (alerts: AlertType[], showAlertThresholdLines: boolean): GoalLine[] =>
                 alerts.flatMap((alert) => {
                     if (
+                        !showAlertThresholdLines ||
                         alert.threshold.configuration.type !== InsightThresholdType.ABSOLUTE ||
                         alert.condition.type !== AlertConditionType.ABSOLUTE_VALUE ||
                         !alert.threshold.configuration.bounds
@@ -76,14 +78,14 @@ export const insightAlertsLogic = kea<insightAlertsLogicType>([
                     const bounds = alert.threshold.configuration.bounds
 
                     const thresholds = []
-                    if (bounds?.upper !== undefined) {
+                    if (bounds?.upper != null) {
                         thresholds.push({
                             label: `${alert.name} Upper Threshold`,
                             value: bounds?.upper,
                         })
                     }
 
-                    if (bounds?.lower !== undefined) {
+                    if (bounds?.lower != null) {
                         thresholds.push({
                             label: `${alert.name} Lower Threshold`,
                             value: bounds?.lower,

frontend/src/lib/components/Alerts/views/Alerts.tsx

@@ -3,6 +3,7 @@ import { IconCheck } from '@posthog/icons'
 import { Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
+import { FeedbackNotice } from 'lib/components/FeedbackNotice'
 import { DetectiveHog } from 'lib/components/hedgehogs'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
@@ -104,6 +105,8 @@ export function Alerts({ alertId }: AlertsProps): JSX.Element {
     // TODO: add info here to sign up for alerts early access
     return (
         <>
+            <FeedbackNotice text="Alerts are in closed alpha. Thanks for taking part! We'd love to hear what you think." />
+
             {alertsSortedByState.length === 0 && !alertsLoading && (
                 <ProductIntroduction
                     productName="Alerts"

frontend/src/lib/components/CompactList/CompactList.tsx

@@ -10,7 +10,7 @@ import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { EmptyMessage, EmptyMessageProps } from '../EmptyMessage/EmptyMessage'
 
 interface CompactListProps {
-    title: string
+    title: string | JSX.Element
     viewAllURL?: string
     loading: boolean
     items: any[]
@@ -34,7 +34,7 @@ export function CompactList({
             style={theme?.boxStyle}
         >
             <div className="CompactList__header">
-                <h3 className="px-2 truncate" title={title}>
+                <h3 className="px-2 truncate" title={typeof title === 'string' ? title : undefined}>
                     {title}
                 </h3>
                 {viewAllURL && <LemonButton to={viewAllURL}>View all</LemonButton>}

frontend/src/lib/components/Playlist/Playlist.tsx

@@ -44,6 +44,7 @@ export type PlaylistProps<T> = {
     onChangeSections?: (activeKeys: string[]) => void
     'data-attr'?: string
     activeItemId?: string
+    controls?: JSX.Element | null
 }
 
 const CounterBadge = ({ children }: { children: React.ReactNode }): JSX.Element => (
@@ -70,6 +71,7 @@ export function Playlist<
     onSelect,
     onChangeSections,
     'data-attr': dataAttr,
+    controls,
 }: PlaylistProps<T>): JSX.Element {
     const [controlledActiveItemId, setControlledActiveItemId] = useState<T['id'] | null>(
         selectInitialItem && sections[0].items[0] ? sections[0].items[0].id : null
@@ -115,6 +117,7 @@ export function Playlist<
                         setActiveItemId={onChangeActiveItem}
                         onChangeSections={onChangeSections}
                         emptyState={listEmptyState}
+                        controls={controls}
                     />
                 )}
                 <Resizer
@@ -154,6 +157,7 @@ function List<
     onScrollListEdge,
     loading,
     emptyState,
+    controls,
 }: {
     title: PlaylistProps<T>['title']
     notebooksHref: PlaylistProps<T>['notebooksHref']
@@ -166,6 +170,7 @@ function List<
     onScrollListEdge: PlaylistProps<T>['onScrollListEdge']
     loading: PlaylistProps<T>['loading']
     emptyState: PlaylistProps<T>['listEmptyState']
+    controls?: JSX.Element | null
 }): JSX.Element {
     const [activeHeaderActionKey, setActiveHeaderActionKey] = useState<string | null>(null)
     const lastScrollPositionRef = useRef(0)
@@ -203,42 +208,49 @@ function List<
     return (
         <div className="flex flex-col w-full bg-bg-light overflow-hidden border-r h-full">
             <DraggableToNotebook href={notebooksHref}>
-                <div className="shrink-0 relative flex justify-between items-center p-1 gap-1 whitespace-nowrap border-b">
-                    <LemonButton size="small" icon={<IconCollapse className="rotate-90" />} onClick={onClickCollapse} />
-                    <span className="py-1 flex flex-1 gap-2">
-                        {title ? (
-                            <span className="font-bold uppercase text-xs my-1 tracking-wide flex gap-1 items-center">
-                                {title}
-                            </span>
-                        ) : null}
-                        <Tooltip
-                            placement="bottom"
-                            title={
-                                <>
-                                    Showing {itemsCount} results.
-                                    <br />
-                                    Scrolling to the bottom or the top of the list will load older or newer results
-                                    respectively.
-                                </>
-                            }
-                        >
-                            <span>
-                                <CounterBadge>{Math.min(999, itemsCount)}+</CounterBadge>
-                            </span>
-                        </Tooltip>
-                    </span>
-                    {headerActions.map(({ key, icon, tooltip, children }) => (
+                <div className="flex flex-col gap-1">
+                    <div className="shrink-0 relative flex justify-between items-center p-1 gap-1 whitespace-nowrap border-b">
                         <LemonButton
-                            key={key}
-                            icon={icon}
-                            tooltip={tooltip}
                             size="small"
-                            active={activeHeaderActionKey === key}
-                            onClick={() => setActiveHeaderActionKey(activeHeaderActionKey === key ? null : key)}
-                        >
-                            {children}
-                        </LemonButton>
-                    ))}
+                            icon={<IconCollapse className="rotate-90" />}
+                            onClick={onClickCollapse}
+                        />
+                        <span className="py-1 flex flex-1 gap-2">
+                            {title ? (
+                                <span className="font-bold uppercase text-xs my-1 tracking-wide flex gap-1 items-center">
+                                    {title}
+                                </span>
+                            ) : null}
+                            <Tooltip
+                                placement="bottom"
+                                title={
+                                    <>
+                                        Showing {itemsCount} results.
+                                        <br />
+                                        Scrolling to the bottom or the top of the list will load older or newer results
+                                        respectively.
+                                    </>
+                                }
+                            >
+                                <span>
+                                    <CounterBadge>{Math.min(999, itemsCount)}+</CounterBadge>
+                                </span>
+                            </Tooltip>
+                        </span>
+                        {headerActions.map(({ key, icon, tooltip, children }) => (
+                            <LemonButton
+                                key={key}
+                                icon={icon}
+                                tooltip={tooltip}
+                                size="small"
+                                active={activeHeaderActionKey === key}
+                                onClick={() => setActiveHeaderActionKey(activeHeaderActionKey === key ? null : key)}
+                            >
+                                {children}
+                            </LemonButton>
+                        ))}
+                    </div>
+                    {controls ? <div className="w-full border-b">{controls}</div> : null}
                     <LemonTableLoader loading={loading} />
                 </div>
             </DraggableToNotebook>

frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx

@@ -1,4 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react'
+import { useActions } from 'kea'
+import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
+import { useEffect } from 'react'
 
 import { PropertyDefinitionType } from '~/types'
 
@@ -46,7 +49,7 @@ export const DollarPropertiesOnEvent: StoryFn = () => {
     return <PropertiesTableComponent type={PropertyDefinitionType.Event} properties={properties} />
 }
 
-export const DollarPropertiesOnPerson: StoryFn = () => {
+export const DollarPropertiesOnPersonSearchable: StoryFn = () => {
     const properties = {
         pineapple_enjoyment_score: 3,
         $browser: 'Chrome',
@@ -56,5 +59,24 @@ export const DollarPropertiesOnPerson: StoryFn = () => {
         $initial_utm_campaign: 'summer_sale',
         $initial_geoip_country_code: 'US',
     }
-    return <PropertiesTableComponent type={PropertyDefinitionType.Person} properties={properties} />
+    return <PropertiesTableComponent type={PropertyDefinitionType.Person} properties={properties} searchable />
+}
+
+export const DollarPropertiesOnPersonHidden: StoryFn = () => {
+    const { setHidePostHogPropertiesInTable } = useActions(userPreferencesLogic)
+
+    useEffect(() => setHidePostHogPropertiesInTable(true), [])
+
+    const properties = {
+        pineapple_enjoyment_score: 3,
+        $browser: 'Chrome',
+        utm_campaign: 'summer_sale',
+        $geoip_country_code: 'US',
+        $initial_browser: 'Chrome',
+        $initial_utm_campaign: 'summer_sale',
+        $initial_geoip_country_code: 'US',
+    }
+    return (
+        <PropertiesTableComponent type={PropertyDefinitionType.Person} properties={properties} searchable filterable />
+    )
 }

frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx

@@ -9,9 +9,9 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonTable, LemonTableColumns, LemonTableProps } from 'lib/lemon-ui/LemonTable'
 import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
 import {
+    CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS,
     CORE_FILTER_DEFINITIONS_BY_GROUP,
     getCoreFilterDefinition,
-    NON_DOLLAR_POSTHOG_PROPERTY_KEYS,
     PROPERTY_KEYS,
 } from 'lib/taxonomy'
 import { isURL } from 'lib/utils'
@@ -249,8 +249,8 @@ export function PropertiesTable({
 
         if (filterable && hidePostHogPropertiesInTable) {
             entries = entries.filter(([key]) => {
-                const isPostHogProperty = key.startsWith('$') && PROPERTY_KEYS.includes(key)
-                const isNonDollarPostHogProperty = isCloudOrDev && NON_DOLLAR_POSTHOG_PROPERTY_KEYS.includes(key)
+                const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key)
+                const isNonDollarPostHogProperty = isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
                 return !isPostHogProperty && !isNonDollarPostHogProperty
             })
         }
@@ -410,9 +410,10 @@ export function PropertiesTable({
                             {searchable && (
                                 <LemonInput
                                     type="search"
-                                    placeholder="Search for property keys and values"
+                                    placeholder="Search property keys and values"
                                     value={searchTerm || ''}
                                     onChange={setSearchTerm}
+                                    className="max-w-full w-64"
                                 />
                             )}
 

frontend/src/lib/components/UniversalFilters/UniversalFilterButton.tsx

@@ -11,12 +11,11 @@ import React from 'react'
 
 import { cohortsModel } from '~/models/cohortsModel'
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { ActionFilter, AnyPropertyFilter } from '~/types'
+import { ActionFilter, AnyPropertyFilter, FeaturePropertyFilter, UniversalFilterValue } from '~/types'
 
 import { EntityFilterInfo } from '../EntityFilterInfo'
 import { formatPropertyLabel } from '../PropertyFilters/utils'
-import { UniversalFilterValue } from './UniversalFilters'
-import { isActionFilter, isEditableFilter, isEventFilter } from './utils'
+import { isActionFilter, isEditableFilter, isEventFilter, isFeatureFlagFilter } from './utils'
 
 export interface UniversalFilterButtonProps {
     onClick?: () => void
@@ -33,7 +32,7 @@ export const UniversalFilterButton = React.forwardRef<HTMLElement, UniversalFilt
         const isEditable = isEditableFilter(filter)
         const isAction = isActionFilter(filter)
         const isEvent = isEventFilter(filter)
-
+        const isFeatureFlag = isFeatureFlagFilter(filter)
         const button = (
             <div
                 ref={ref as any}
@@ -48,6 +47,8 @@ export const UniversalFilterButton = React.forwardRef<HTMLElement, UniversalFilt
                     <EventLabel filter={filter} onClick={onClick} />
                 ) : isAction ? (
                     <EntityFilterInfo filter={filter} />
+                ) : isFeatureFlag ? (
+                    <FeatureFlagLabel filter={filter} />
                 ) : (
                     <PropertyLabel filter={filter} />
                 )}
@@ -116,3 +117,7 @@ const EventLabel = ({
         </div>
     )
 }
+
+const FeatureFlagLabel = ({ filter }: { filter: FeaturePropertyFilter }): JSX.Element => {
+    return <div>{filter.key}</div>
+}

frontend/src/lib/components/UniversalFilters/UniversalFilters.tsx

@@ -3,7 +3,7 @@ import { LemonButton, LemonButtonProps, LemonDropdown, Popover } from '@posthog/
 import { BindLogic, useActions, useValues } from 'kea'
 import { useState } from 'react'
 
-import { ActionFilter, AnyPropertyFilter, FilterLogicalOperator } from '~/types'
+import { UniversalFiltersGroup, UniversalFilterValue } from '~/types'
 
 import { TaxonomicPropertyFilter } from '../PropertyFilters/components/TaxonomicPropertyFilter'
 import { PropertyFilters } from '../PropertyFilters/PropertyFilters'
@@ -14,14 +14,6 @@ import { UniversalFilterButton } from './UniversalFilterButton'
 import { universalFiltersLogic } from './universalFiltersLogic'
 import { isEditableFilter, isEventFilter } from './utils'
 
-export interface UniversalFiltersGroup {
-    type: FilterLogicalOperator
-    values: UniversalFiltersGroupValue[]
-}
-
-export type UniversalFiltersGroupValue = UniversalFiltersGroup | UniversalFilterValue
-export type UniversalFilterValue = AnyPropertyFilter | ActionFilter
-
 type UniversalFiltersProps = {
     rootKey: string
     group: UniversalFiltersGroup | null
@@ -160,7 +152,7 @@ const AddFilterButton = (props: Omit<LemonButtonProps, 'onClick' | 'sideAction'
                 onClick={() => setDropdownOpen(!dropdownOpen)}
                 {...props}
             >
-                Add filter
+                {props?.title || 'Add filter'}
             </LemonButton>
         </LemonDropdown>
     )

frontend/src/lib/components/UniversalFilters/universalFiltersLogic.test.ts

@@ -1,10 +1,15 @@
 import { expectLogic } from 'kea-test-utils'
 
 import { initKeaTests } from '~/test/init'
-import { AnyPropertyFilter, FilterLogicalOperator, PropertyFilterType, PropertyOperator } from '~/types'
+import {
+    AnyPropertyFilter,
+    FilterLogicalOperator,
+    PropertyFilterType,
+    PropertyOperator,
+    UniversalFiltersGroup,
+} from '~/types'
 
 import { TaxonomicFilterGroup, TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
-import { UniversalFiltersGroup } from './UniversalFilters'
 import { universalFiltersLogic } from './universalFiltersLogic'
 
 const propertyFilter: AnyPropertyFilter = {