diff --git a/frontend/__snapshots__/lemon-ui-lemon-radio--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-radio--default--dark.png index 010038b5e46e2..702d82b54061e 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-radio--default--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-radio--default--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-radio--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-radio--default--light.png index 08bb5df2550b6..0d7d53f307cda 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-radio--default--light.png and b/frontend/__snapshots__/lemon-ui-lemon-radio--default--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-radio--disabled--dark.png b/frontend/__snapshots__/lemon-ui-lemon-radio--disabled--dark.png deleted file mode 100644 index d4012929ad46e..0000000000000 Binary files a/frontend/__snapshots__/lemon-ui-lemon-radio--disabled--dark.png and /dev/null differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-radio--disabled--light.png b/frontend/__snapshots__/lemon-ui-lemon-radio--disabled--light.png deleted file mode 100644 index b0fe97b8b18dc..0000000000000 Binary files a/frontend/__snapshots__/lemon-ui-lemon-radio--disabled--light.png and /dev/null differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-radio--with-descriptions--dark.png b/frontend/__snapshots__/lemon-ui-lemon-radio--with-descriptions--dark.png new file mode 100644 index 0000000000000..01861d76d91c6 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-radio--with-descriptions--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-radio--with-descriptions--light.png b/frontend/__snapshots__/lemon-ui-lemon-radio--with-descriptions--light.png new file mode 100644 index 0000000000000..a6fc13b45d2f3 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-radio--with-descriptions--light.png differ diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project--dark.png b/frontend/__snapshots__/scenes-other-settings--settings-project--dark.png index 590018b5bb972..11fc6299690cb 100644 Binary files a/frontend/__snapshots__/scenes-other-settings--settings-project--dark.png and b/frontend/__snapshots__/scenes-other-settings--settings-project--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project--light.png b/frontend/__snapshots__/scenes-other-settings--settings-project--light.png index ca0129c142913..7a8aa4e6bf58f 100644 Binary files a/frontend/__snapshots__/scenes-other-settings--settings-project--light.png and b/frontend/__snapshots__/scenes-other-settings--settings-project--light.png differ diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--dark.png b/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--dark.png index 93664d73e81c0..c69f84375b54a 100644 Binary files a/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--dark.png and b/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--light.png b/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--light.png index 669235e490e46..ad8e01fdf3917 100644 Binary files a/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--light.png and b/frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--feature-flags--dark.png b/frontend/__snapshots__/scenes-other-toolbar--feature-flags--dark.png index 0f7ca8acfa5fb..66c0535112aa7 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--feature-flags--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--feature-flags--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png b/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png index a993d1895a5c0..40d0e68b311f1 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png and b/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png b/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png index 27f03e5866262..34ebc871a8801 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--light.png b/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--light.png index c5a9b5a84d56a..5adaf44598b63 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--light.png and b/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--light.png differ diff --git a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.stories.tsx b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.stories.tsx index 49ea410cac639..7410def053da0 100644 --- a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.stories.tsx @@ -21,7 +21,7 @@ const meta: Meta = { options: [ { value: 'calendar', label: 'Calendar' }, { value: 'calculator', label: 'Calculator' }, - { value: 'banana', label: 'Banana' }, + { value: 'banana', label: 'Banana', disabledReason: 'Bananas are not allowed on pizza' }, { value: 'settings', label: 'Settings' }, ] as LemonRadioOption[], }, @@ -38,11 +38,17 @@ const Template: StoryFn = (props: Omit, export const Default: Story = Template.bind({}) Default.args = {} -export const Disabled: Story = Template.bind({}) -Disabled.args = { +export const WithDescriptions: Story = Template.bind({}) +WithDescriptions.args = { options: [ { value: 'calendar', label: 'Calendar' }, - { value: 'calculator', label: 'Calculator' }, - { value: 'banana', label: 'Banana', disabledReason: 'Bananas are not allowed' }, + { value: 'calculator', label: 'Calculator', description: '2.1 + 2.01 = 4.109999999999999' }, + { + value: 'banana', + label: 'Banana', + disabledReason: 'Bananas are not allowed on pizza', + description: + 'Note: The banana addon ships from Costa Rica, which will add 2 working days of a delay to your order.', + }, ], } diff --git a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx index badc2cb919b12..fba801de2a8e2 100644 --- a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx +++ b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx @@ -3,6 +3,7 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip' export interface LemonRadioOption { label: string | JSX.Element + description?: string | JSX.Element value: T disabledReason?: string 'data-attr'?: string @@ -25,12 +26,12 @@ export function LemonRadio({ }: LemonRadioProps): JSX.Element { return (
- {options.map(({ value, label, disabledReason, ...optionProps }) => { + {options.map(({ value, label, disabledReason, description, ...optionProps }) => { const content = ( ) diff --git a/frontend/src/scenes/settings/project/PersonsOnEvents.tsx b/frontend/src/scenes/settings/project/PersonsOnEvents.tsx index 366432e13bf9e..b9bdfb306070b 100644 --- a/frontend/src/scenes/settings/project/PersonsOnEvents.tsx +++ b/frontend/src/scenes/settings/project/PersonsOnEvents.tsx @@ -1,3 +1,4 @@ +import { LemonTag, Link } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonRadio, LemonRadioOption } from 'lib/lemon-ui/LemonRadio' @@ -9,39 +10,38 @@ import { HogQLQueryModifiers } from '~/queries/schema' type PoEMode = NonNullable -const poeOptions: LemonRadioOption[] = [ +const POE_OPTIONS: LemonRadioOption[] = [ { - value: 'person_id_no_override_properties_on_events', + value: 'person_id_override_properties_on_events', label: ( + + Use person properties from the time of the eventRECOMMENDED + + ), + description: ( <> -
Use person ids and properties from the time of the event.
-
- May show higher unique user counts due to not using latest person ids. You probably want one of the - other options. Fastest queries. -
+ Fast queries. If the person property is updated, query results on past data won't change. ), }, { - value: 'person_id_override_properties_on_events', - label: ( + value: 'person_id_override_properties_joined', + label: 'Use person properties as of running the query', + description: ( <> -
Use person properties from the time of the event.
-
- Fast queries. If person property is updated, then query results on past data won't change. -
+ Slower queries. If the person property is updated, query results on past data will change + accordingly. ), }, { - value: 'person_id_override_properties_joined', - label: ( + value: 'person_id_no_override_properties_on_events', + label: 'Use person IDs and person properties from the time of the event', + description: ( <> -
Use latest person properties.
-
- Slower queries. If person property is updated, then query results on past data will change to - reflect it. -
+ Fastest queries,{' '} + but funnels and unique user counts will be inaccurate. If the person + property is updated, query results on past data won't change. ), }, @@ -51,7 +51,7 @@ export function PersonsOnEvents(): JSX.Element { const { updateCurrentTeam } = useActions(teamLogic) const { reportPoEModeUpdated } = useActions(eventUsageLogic) const { currentTeam } = useValues(teamLogic) - const savedPoEMode = + const savedPoEMode: PoEMode = currentTeam?.modifiers?.personsOnEventsMode ?? currentTeam?.default_modifiers?.personsOnEventsMode ?? 'disabled' const [poeMode, setPoeMode] = useState(savedPoEMode) @@ -62,8 +62,16 @@ export function PersonsOnEvents(): JSX.Element { return ( <> -

Choose how to query your event data with person filters.

- +

+ Choose the behavior of person property filters.{' '} + + Learn about the details in our docs. + +

+