diff --git a/.github/workflows/storybook-chromatic.yml b/.github/workflows/storybook-chromatic.yml index b81ecfe4a6ae2..1b38f6545cbb7 100644 --- a/.github/workflows/storybook-chromatic.yml +++ b/.github/workflows/storybook-chromatic.yml @@ -61,7 +61,7 @@ jobs: env: SHARD_COUNT: '2' CYPRESS_INSTALL_BINARY: '0' - NODE_OPTIONS: --max-old-space-size=4096 + NODE_OPTIONS: --max-old-space-size=6144 JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE: '1' # Remove obsolete snapshots outputs: # The below have to be manually listed unfortunately, as GitHub Actions doesn't allow matrix-dependent outputs diff --git a/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png b/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png index 8a16749795afe..74b1e5937fd9e 100644 Binary files a/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png and b/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png differ diff --git a/frontend/__snapshots__/components-hogqleditor--no-value-person-properties-disabled.png b/frontend/__snapshots__/components-hogqleditor--no-value-person-properties-disabled.png index bdcad894e4864..7da0948fbd1d8 100644 Binary files a/frontend/__snapshots__/components-hogqleditor--no-value-person-properties-disabled.png and b/frontend/__snapshots__/components-hogqleditor--no-value-person-properties-disabled.png differ diff --git a/frontend/__snapshots__/components-hogqleditor--no-value.png b/frontend/__snapshots__/components-hogqleditor--no-value.png index f27f10293ba20..8965859c27297 100644 Binary files a/frontend/__snapshots__/components-hogqleditor--no-value.png and b/frontend/__snapshots__/components-hogqleditor--no-value.png differ diff --git a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png index a37947e52a7e1..5e462cd310395 100644 Binary files a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png and b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png differ diff --git a/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png b/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png index c3021189edc9f..91180a58d399b 100644 Binary files a/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png and b/frontend/__snapshots__/filters-propertygroupfilters--group-property-filters.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png new file mode 100644 index 0000000000000..a754ff56348c5 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png new file mode 100644 index 0000000000000..a781cd184fa15 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..279761c8bf979 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png new file mode 100644 index 0000000000000..27453449cec79 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png new file mode 100644 index 0000000000000..bab72d2a781fc Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png new file mode 100644 index 0000000000000..51e01b9dc58fb Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png new file mode 100644 index 0000000000000..c34a68c250e5f Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png new file mode 100644 index 0000000000000..07d00fdcab9e3 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..d43321308e0ae Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png new file mode 100644 index 0000000000000..549167134dfbf Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png new file mode 100644 index 0000000000000..3a05824b102e9 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png new file mode 100644 index 0000000000000..501f5f28e3827 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png new file mode 100644 index 0000000000000..22810493f19e1 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png new file mode 100644 index 0000000000000..0844f1ea22547 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..5d3fbd5051d84 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png new file mode 100644 index 0000000000000..3789b32185a96 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png new file mode 100644 index 0000000000000..e2a08a2a1e7a4 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit.png new file mode 100644 index 0000000000000..e8ba2684093a4 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--retention-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png new file mode 100644 index 0000000000000..cef9eb6374173 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png b/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png new file mode 100644 index 0000000000000..4cf9fdd2cc8a5 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..08a23b45ab0a1 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png new file mode 100644 index 0000000000000..a40f9088b9ed1 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png new file mode 100644 index 0000000000000..f95264f0dd1b7 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png new file mode 100644 index 0000000000000..f90de59a864f9 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..13b9b21a7ed46 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png new file mode 100644 index 0000000000000..79148edca8b96 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png new file mode 100644 index 0000000000000..4a7684af9caae Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png new file mode 100644 index 0000000000000..1d0545d25c9e2 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..2c81f7207cbe7 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png new file mode 100644 index 0000000000000..25dff9588739f Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png new file mode 100644 index 0000000000000..6e57854eaa117 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png new file mode 100644 index 0000000000000..dc14bdf992db8 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png new file mode 100644 index 0000000000000..c43a186a65cd1 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png new file mode 100644 index 0000000000000..d71ccbc385cca Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..bcd34a5ce9e9a Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png new file mode 100644 index 0000000000000..a69df06ed2844 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png new file mode 100644 index 0000000000000..a2bfe01ced6b3 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png new file mode 100644 index 0000000000000..16b124f3940e6 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..3049ffd542f64 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png new file mode 100644 index 0000000000000..1eec025dd0e01 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png new file mode 100644 index 0000000000000..61be58645f00e Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png new file mode 100644 index 0000000000000..8957ffa2629ce Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png new file mode 100644 index 0000000000000..2dc99506eeb33 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png new file mode 100644 index 0000000000000..e7e9f76ec33d7 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png new file mode 100644 index 0000000000000..a5749e7f40b1d Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png new file mode 100644 index 0000000000000..7953c8fe1efbd Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png new file mode 100644 index 0000000000000..8bcf18512332a Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png new file mode 100644 index 0000000000000..6ce864f8157f2 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png new file mode 100644 index 0000000000000..759e7262243e3 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png b/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png new file mode 100644 index 0000000000000..a83402802678b Binary files /dev/null and b/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png differ diff --git a/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx b/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx index 66d6e43aab3f7..5bd82be0e9449 100644 --- a/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx +++ b/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react' import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' import { CLICK_OUTSIDE_BLOCK_CLASS } from 'lib/hooks/useOutsideClickHandler' import { LemonButton } from 'lib/lemon-ui/LemonButton' +import { IconInfo } from 'lib/lemon-ui/icons' export interface HogQLEditorProps { onChange: (value: string) => void @@ -43,7 +44,7 @@ export function HogQLEditor({ } onPressCmdEnter={disableCmdEnter ? undefined : () => onChange(localValue)} className={`font-mono ${CLICK_OUTSIDE_BLOCK_CLASS}`} - minRows={6} + minRows={3} maxRows={6} placeholder={ placeholder ?? @@ -53,6 +54,7 @@ export function HogQLEditor({ } /> onChange(localValue)} @@ -63,11 +65,18 @@ export function HogQLEditor({
{disablePersonProperties ? ( -
- Note: person.properties can't be used here. +
+ + + person.properties can't be used here. +
) : null} -
+
Learn more about HogQL diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss index 3be71227dbcda..0470d5da983f5 100644 --- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss +++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss @@ -2,7 +2,7 @@ display: flex; gap: 0.5rem; - .PropertyFilters-content { + .PropertyFilters__content { flex: 1; display: flex; flex-wrap: wrap; @@ -10,7 +10,7 @@ overflow: hidden; } - .PropertyFilters-prefix { + .PropertyFilters__prefix { color: #c4c4c4; font-size: 18px; user-select: none; @@ -18,7 +18,6 @@ } .logical-row-divider { - color: var(--primary-alt); font-weight: 600; font-size: 12px; text-transform: uppercase; diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx index fd83f6f3fb9c3..3c51a8c69fb9e 100644 --- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx +++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx @@ -57,8 +57,8 @@ export function PropertyFilters({ return (
- {showNestedArrow && !disablePopover &&
{<>↳}
} -
+ {showNestedArrow && !disablePopover &&
{<>↳}
} +
{filtersWithNew.map((item: AnyPropertyFilter, index: number) => { return ( diff --git a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx index 69bf0c8368e13..372df407f0f8f 100644 --- a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx @@ -53,11 +53,7 @@ export const FilterRow = React.memo(function FilterRow({ <> diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx index 4cddfd6f315f5..a7d2beeee4aed 100644 --- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx @@ -131,16 +131,8 @@ export function TaxonomicPropertyFilter({ {orFiltering ? ( <> {propertyGroupType && index !== 0 && filter?.key && ( -
- {propertyGroupType === FilterLogicalOperator.And ? ( - - {'&'} - - ) : ( - - {propertyGroupType} - - )} +
+ {propertyGroupType === FilterLogicalOperator.And ? '&' : propertyGroupType}
)} diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx index 4ef9465a087f6..6bbca8fae0909 100644 --- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx @@ -115,12 +115,12 @@ CustomElement.args = { options: [ { value: 1, - labelInMenuExtra:  (Surprised), + labelInMenu: Wow (Surprised), label: 'Wow', }, { value: 2, - labelInMenuExtra:  (Blushing), + labelInMenu: Ohh (Blushing), label: 'Ohh', }, ], diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx index 67b1538642054..5a2a279eb4f01 100644 --- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx +++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx @@ -16,18 +16,22 @@ import { isLemonMenuSection, } from '../LemonMenu/LemonMenu' -type LemonSelectOptionBase = Omit // Select handles active state internally +// Select options are basically menu items that handle onClick and active state internally +interface LemonSelectOptionBase extends Omit { + /** Support this option if it already is selected, but otherwise don't allow selecting it by hiding it. */ + hidden?: boolean +} +type LemonSelectCustomControl = ({ onSelect }: { onSelect: OnSelect }) => JSX.Element export interface LemonSelectOptionLeaf extends LemonSelectOptionBase { value: T - /** Extra element shown next to the label in the select menu. */ - labelInMenuExtra?: React.ReactElement /** - * If you really need something more advanced than a button, you can provide a custom control component. - * This will be displayed instead of the label in the select menu. - * Can be for example a textarea with a "Use custom expression" button hooked up to `onSelect`. + * Label for display inside the dropdown menu. + * + * If you really need something more advanced than a button, this also allows providing a custom control component, + * which takes an `onSelect` prop. Can be for example a textarea with an "Apply value" button. Use this sparingly! */ - CustomControl?: ({ onSelect }: { onSelect: OnSelect }) => JSX.Element + labelInMenu?: JSX.Element | LemonSelectCustomControl } export interface LemonSelectOptionNode extends LemonSelectOptionBase { @@ -174,9 +178,9 @@ function convertSelectOptionsToMenuItems( onSelect: OnSelect ): [(LemonMenuItem | LemonMenuSection)[], LemonSelectOptionLeaf[]] { const leafOptionsAccumulator: LemonSelectOptionLeaf[] = [] - const items: (LemonMenuItem | LemonMenuSection)[] = options.map((option) => - convertToMenuSingle(option, activeValue, onSelect, leafOptionsAccumulator) - ) + const items = options + .map((option) => convertToMenuSingle(option, activeValue, onSelect, leafOptionsAccumulator)) + .filter(Boolean) as (LemonMenuItem | LemonMenuSection)[] return [items, leafOptionsAccumulator] } @@ -185,37 +189,51 @@ function convertToMenuSingle( activeValue: T | null, onSelect: OnSelect, acc: LemonSelectOptionLeaf[] -): LemonMenuItem | LemonMenuSection { +): LemonMenuItem | LemonMenuSection | null { if (isLemonSelectSection(option)) { const { options: childOptions, ...section } = option + const items = option.options.map((o) => convertToMenuSingle(o, activeValue, onSelect, acc)).filter(Boolean) + if (!items.length) { + // Add hidden options to the accumulator (by calling convertToMenuSingle), but don't show + return null + } return { ...section, - items: option.options.map((o) => convertToMenuSingle(o, activeValue, onSelect, acc)), + items, } as LemonMenuSection } else if (isLemonSelectOptionNode(option)) { const { options: childOptions, ...node } = option + const items = childOptions.map((o) => convertToMenuSingle(o, activeValue, onSelect, acc)).filter(Boolean) + if (option.hidden) { + // Add hidden options to the accumulator (by calling convertToMenuSingle), but don't show + return null + } return { ...node, active: doOptionsContainActiveValue(childOptions, activeValue), - items: childOptions.map((o) => convertToMenuSingle(o, activeValue, onSelect, acc)), + items, } as LemonMenuItemNode } else { acc.push(option) - const { value, label, labelInMenuExtra, CustomControl, ...leaf } = option + if (option.hidden) { + // Add hidden options to the accumulator, but don't show + return null + } + const { value, label, labelInMenu, ...leaf } = option + let CustomControl: LemonSelectCustomControl | undefined + if (typeof labelInMenu === 'function') { + CustomControl = labelInMenu + } return { ...leaf, - label: CustomControl ? ( - function LabelWrapped() { - return - } - ) : labelInMenuExtra ? ( - <> - {label} - {labelInMenuExtra} - - ) : ( - label - ), + label: CustomControl + ? function LabelWrapped() { + if (!CustomControl) { + throw new Error('CustomControl became undefined') + } + return + } + : labelInMenu || label, active: value === activeValue, onClick: () => onSelect(value), } as LemonMenuItemLeaf diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx index ed4dea5f7fd4f..dc4356caecf75 100644 --- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx +++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx @@ -28,10 +28,10 @@ export function AndOrFilterSelect({ { label: 'all', value: FilterLogicalOperator.And, - labelInMenuExtra: ( + labelInMenu: ( @@ -40,10 +40,10 @@ export function AndOrFilterSelect({ { label: 'any', value: FilterLogicalOperator.Or, - labelInMenuExtra: ( + labelInMenu: ( @@ -67,13 +67,13 @@ type SelectOptionProps = { const SelectOption = ({ title, description, value, selectedValue }: SelectOptionProps): JSX.Element => (
{value}
-
+
{title}
{description}
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx index a3b73af07722b..ab995e2e34d4b 100644 --- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx +++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx @@ -78,19 +78,21 @@ export function PropertyGroupFilters({ } value={group.type} /> - - } - status="primary-alt" - onClick={() => duplicateFilterGroup(propertyGroupIndex)} - size="small" - /> - } - status="primary-alt" - onClick={() => removeFilterGroup(propertyGroupIndex)} - size="small" - /> + +
+ } + status="primary-alt" + onClick={() => duplicateFilterGroup(propertyGroupIndex)} + size="small" + /> + } + status="primary-alt" + onClick={() => removeFilterGroup(propertyGroupIndex)} + size="small" + /> +
{ - if (value !== null) { - setFilters({ - breakdown_attribution_type: BreakdownAttributionType.Step, - breakdown_attribution_value: value, - }) - } - }} - placeholder={`Step ${ - breakdown_attribution_value ? breakdown_attribution_value + 1 : 1 - }`} - options={steps.map((_, idx) => ({ value: idx, label: `Step ${idx + 1}` }))} - /> - ), - }, + { + value: BreakdownAttributionType.Step, + label: 'Any step', + hidden: funnel_order_type !== StepOrderValue.UNORDERED, + }, + { + label: 'Specific step', + options: Array(FUNNEL_STEP_COUNT_LIMIT) + .fill(null) + .map((_, stepIndex) => ({ + value: `${BreakdownAttributionType.Step}/${stepIndex}`, + label: `Step ${stepIndex + 1}`, + hidden: stepIndex >= steps.length, + })), + hidden: funnel_order_type === StepOrderValue.UNORDERED, + }, ]} onChange={(value) => { + const [breakdownAttributionType, breakdownAttributionValue] = (value || '').split('/') if (value) { setFilters({ - breakdown_attribution_type: value, - breakdown_attribution_value: breakdown_attribution_value || 0, + breakdown_attribution_type: breakdownAttributionType as BreakdownAttributionType, + breakdown_attribution_value: breakdownAttributionValue + ? parseInt(breakdownAttributionValue) + : 0, }) } }} diff --git a/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx b/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx index a5e27f130be6a..f5829b8bc2f61 100644 --- a/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx +++ b/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx @@ -20,7 +20,7 @@ import { FunnelsQuery } from '~/queries/schema' import { isStepsEmpty } from 'scenes/funnels/funnelUtils' import { isInsightQueryNode } from '~/queries/utils' -const FUNNEL_STEP_COUNT_LIMIT = 20 +export const FUNNEL_STEP_COUNT_LIMIT = 20 export function FunnelsQueryStepsDataExploration({ insightProps }: QueryEditorFilterProps): JSX.Element | null { const { querySource, series } = useValues(funnelDataLogic(insightProps)) diff --git a/frontend/src/scenes/insights/Insights.stories.tsx b/frontend/src/scenes/insights/Insights.stories.tsx index 8cc50d4df1f55..60cf9f1e6b74c 100644 --- a/frontend/src/scenes/insights/Insights.stories.tsx +++ b/frontend/src/scenes/insights/Insights.stories.tsx @@ -34,86 +34,163 @@ export const TrendsLine = createInsightStory(require('./__mocks__/trendsLine.jso TrendsLine.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const TrendsLineEdit = createInsightStory(require('./__mocks__/trendsLine.json'), 'edit') +TrendsLineEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} export const TrendsLineBreakdown = createInsightStory(require('./__mocks__/trendsLineBreakdown.json')) TrendsLineBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const TrendsLineBreakdownEdit = createInsightStory(require('./__mocks__/trendsLineBreakdown.json'), 'edit') +TrendsLineBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} export const TrendsBar = createInsightStory(require('./__mocks__/trendsBar.json')) TrendsBar.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const TrendsBarEdit = createInsightStory(require('./__mocks__/trendsBar.json'), 'edit') +TrendsBarEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} export const TrendsBarBreakdown = createInsightStory(require('./__mocks__/trendsBarBreakdown.json')) TrendsBarBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const TrendsBarBreakdownEdit = createInsightStory(require('./__mocks__/trendsBarBreakdown.json'), 'edit') +TrendsBarBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} export const TrendsValue = createInsightStory(require('./__mocks__/trendsValue.json')) TrendsValue.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-bar-value-graph] > canvas' }, } +export const TrendsValueEdit = createInsightStory(require('./__mocks__/trendsValue.json'), 'edit') +TrendsValueEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-bar-value-graph] > canvas' }, +} export const TrendsValueBreakdown = createInsightStory(require('./__mocks__/trendsValueBreakdown.json')) TrendsValueBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-bar-value-graph] > canvas' }, } +export const TrendsValueBreakdownEdit = createInsightStory(require('./__mocks__/trendsValueBreakdown.json'), 'edit') +TrendsValueBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-bar-value-graph] > canvas' }, +} + export const TrendsArea = createInsightStory(require('./__mocks__/trendsArea.json')) TrendsArea.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const TrendsAreaEdit = createInsightStory(require('./__mocks__/trendsArea.json'), 'edit') +TrendsAreaEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} export const TrendsAreaBreakdown = createInsightStory(require('./__mocks__/trendsAreaBreakdown.json')) TrendsAreaBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const TrendsAreaBreakdownEdit = createInsightStory(require('./__mocks__/trendsAreaBreakdown.json'), 'edit') +TrendsAreaBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} export const TrendsNumber = createInsightStory(require('./__mocks__/trendsNumber.json')) TrendsNumber.parameters = { testOptions: { waitForLoadersToDisappear: '.BoldNumber__value' } } +export const TrendsNumberEdit = createInsightStory(require('./__mocks__/trendsNumber.json'), 'edit') +TrendsNumberEdit.parameters = { testOptions: { waitForLoadersToDisappear: '.BoldNumber__value' } } export const TrendsTable = createInsightStory(require('./__mocks__/trendsTable.json')) TrendsTable.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=insights-table-graph] td' } } +export const TrendsTableEdit = createInsightStory(require('./__mocks__/trendsTable.json'), 'edit') +TrendsTableEdit.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=insights-table-graph] td' } } export const TrendsTableBreakdown = createInsightStory(require('./__mocks__/trendsTableBreakdown.json')) TrendsTableBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=insights-table-graph] td' } } +export const TrendsTableBreakdownEdit = createInsightStory(require('./__mocks__/trendsTableBreakdown.json'), 'edit') +TrendsTableBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=insights-table-graph] td' }, +} export const TrendsPie = createInsightStory(require('./__mocks__/trendsPie.json')) TrendsPie.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-pie-graph] > canvas' } } +export const TrendsPieEdit = createInsightStory(require('./__mocks__/trendsPie.json'), 'edit') +TrendsPieEdit.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-pie-graph] > canvas' } } export const TrendsPieBreakdown = createInsightStory(require('./__mocks__/trendsPieBreakdown.json')) TrendsPieBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-pie-graph] > canvas' } } +export const TrendsPieBreakdownEdit = createInsightStory(require('./__mocks__/trendsPieBreakdown.json'), 'edit') +TrendsPieBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-pie-graph] > canvas' }, +} export const TrendsWorldMap = createInsightStory(require('./__mocks__/trendsWorldMap.json')) TrendsWorldMap.parameters = { testOptions: { waitForLoadersToDisappear: '.WorldMap' } } +export const TrendsWorldMapEdit = createInsightStory(require('./__mocks__/trendsWorldMap.json'), 'edit') +TrendsWorldMapEdit.parameters = { testOptions: { waitForLoadersToDisappear: '.WorldMap' } } // Funnels export const FunnelLeftToRight = createInsightStory(require('./__mocks__/funnelLeftToRight.json')) FunnelLeftToRight.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .StepBar' } } +export const FunnelLeftToRightEdit = createInsightStory(require('./__mocks__/funnelLeftToRight.json'), 'edit') +FunnelLeftToRightEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .StepBar' }, +} export const FunnelLeftToRightBreakdown = createInsightStory(require('./__mocks__/funnelLeftToRightBreakdown.json')) FunnelLeftToRightBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .StepBar' }, } +export const FunnelLeftToRightBreakdownEdit = createInsightStory( + require('./__mocks__/funnelLeftToRightBreakdown.json'), + 'edit' +) +FunnelLeftToRightBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .StepBar' }, +} export const FunnelTopToBottom = createInsightStory(require('./__mocks__/funnelTopToBottom.json')) FunnelTopToBottom.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .funnel-bar' }, } +export const FunnelTopToBottomEdit = createInsightStory(require('./__mocks__/funnelTopToBottom.json'), 'edit') +FunnelTopToBottomEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .funnel-bar' }, +} export const FunnelTopToBottomBreakdown = createInsightStory(require('./__mocks__/funnelTopToBottomBreakdown.json')) FunnelTopToBottomBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .funnel-bar' }, } +export const FunnelTopToBottomBreakdownEdit = createInsightStory( + require('./__mocks__/funnelTopToBottomBreakdown.json'), + 'edit' +) +FunnelTopToBottomBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-bar-graph] .funnel-bar' }, +} export const FunnelHistoricalTrends = createInsightStory(require('./__mocks__/funnelHistoricalTrends.json')) FunnelHistoricalTrends.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph-funnel] > canvas' }, } +export const FunnelHistoricalTrendsEdit = createInsightStory(require('./__mocks__/funnelHistoricalTrends.json'), 'edit') +FunnelHistoricalTrendsEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph-funnel] > canvas' }, +} export const FunnelTimeToConvert = createInsightStory(require('./__mocks__/funnelTimeToConvert.json')) FunnelTimeToConvert.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-histogram] svg' } } +export const FunnelTimeToConvertEdit = createInsightStory(require('./__mocks__/funnelTimeToConvert.json'), 'edit') +FunnelTimeToConvertEdit.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=funnel-histogram] svg' } } // Retention @@ -121,11 +198,19 @@ export const Retention = createInsightStory(require('./__mocks__/retention.json' Retention.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const RetentionEdit = createInsightStory(require('./__mocks__/retention.json'), 'edit') +RetentionEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} export const RetentionBreakdown = createInsightStory(require('./__mocks__/retentionBreakdown.json')) RetentionBreakdown.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const RetentionBreakdownEdit = createInsightStory(require('./__mocks__/retentionBreakdown.json'), 'edit') +RetentionBreakdownEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} // Lifecycle @@ -133,6 +218,10 @@ export const Lifecycle = createInsightStory(require('./__mocks__/lifecycle.json' Lifecycle.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const LifecycleEdit = createInsightStory(require('./__mocks__/lifecycle.json'), 'edit') +LifecycleEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} // Stickiness @@ -140,9 +229,15 @@ export const Stickiness = createInsightStory(require('./__mocks__/stickiness.jso Stickiness.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, } +export const StickinessEdit = createInsightStory(require('./__mocks__/stickiness.json'), 'edit') +StickinessEdit.parameters = { + testOptions: { waitForLoadersToDisappear: '[data-attr=trend-line-graph] > canvas' }, +} // User Paths export const UserPaths = createInsightStory(require('./__mocks__/userPaths.json')) UserPaths.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=paths-viz] > svg' } } +export const UserPathsEdit = createInsightStory(require('./__mocks__/userPaths.json'), 'edit') +UserPathsEdit.parameters = { testOptions: { waitForLoadersToDisappear: '[data-attr=paths-viz] > svg' } } /* eslint-enable @typescript-eslint/no-var-requires */ diff --git a/frontend/src/scenes/insights/__mocks__/createInsightScene.tsx b/frontend/src/scenes/insights/__mocks__/createInsightScene.tsx index dda87fab74a73..dd9987094734a 100644 --- a/frontend/src/scenes/insights/__mocks__/createInsightScene.tsx +++ b/frontend/src/scenes/insights/__mocks__/createInsightScene.tsx @@ -7,7 +7,7 @@ import { FEATURE_FLAGS } from 'lib/constants' import type { Story } from '@storybook/react' let shortCounter = 0 -export function createInsightStory(insight: Partial): Story { +export function createInsightStory(insight: Partial, mode: 'view' | 'edit' = 'view'): Story { const count = shortCounter++ return function InsightStory() { useStorybookMocks({ @@ -27,7 +27,7 @@ export function createInsightStory(insight: Partial): Story { useFeatureFlags([FEATURE_FLAGS.RETENTION_BREAKDOWN]) useEffect(() => { - router.actions.push(`/insights/${insight.short_id}${count}`) + router.actions.push(`/insights/${insight.short_id}${count}${mode === 'edit' ? '/edit' : ''}`) }, []) return diff --git a/frontend/src/scenes/insights/__mocks__/trendsLine.json b/frontend/src/scenes/insights/__mocks__/trendsLine.json index d0731610ed5a6..1521a1b7fa0e2 100644 --- a/frontend/src/scenes/insights/__mocks__/trendsLine.json +++ b/frontend/src/scenes/insights/__mocks__/trendsLine.json @@ -18,7 +18,15 @@ "interval": "day", "properties": { "type": "AND", - "values": [] + "values": [ + { + "type": "AND", + "values": [ + { "key": "$browser", "value": ["Chrome"], "operator": "exact", "type": "event" }, + { "key": "utm_source", "value": ["google"], "operator": "exact", "type": "event" } + ] + } + ] }, "filter_test_accounts": false }, diff --git a/frontend/src/scenes/insights/filters/AggregationSelect.tsx b/frontend/src/scenes/insights/filters/AggregationSelect.tsx index 5dcead0159f9c..1b29f25a4993c 100644 --- a/frontend/src/scenes/insights/filters/AggregationSelect.tsx +++ b/frontend/src/scenes/insights/filters/AggregationSelect.tsx @@ -166,7 +166,7 @@ function AggregationSelectComponent({ // set a custom value (because actually _all_ the options are HogQL) value: !value || baseValues.includes(value) ? '' : value, label: {value}, - CustomControl: function CustomHogQLOptionWrapped({ onSelect }) { + labelInMenu: function CustomHogQLOptionWrapped({ onSelect }) { return (
-  –  + Step ${stepIndex + 1} –  ), diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss index dd46ab026a983..a918deca591d9 100644 --- a/frontend/src/styles/vars.scss +++ b/frontend/src/styles/vars.scss @@ -15,7 +15,7 @@ $screens: ( ); $tiny_spaces: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20; -$humongous_spaces: 30, 40, 60, 80, 100, 120, 140, 160, 180, 200; +$humongous_spaces: 30, 32, 40, 60, 80, 100, 120, 140, 160, 180, 200; $all_spaces: list.join($tiny_spaces, $humongous_spaces); $leadings: 3, 4, 5, 6, 7, 8, 9, 10; $sides: 'top', 'right', 'bottom', 'left';