diff --git a/.eslintrc.js b/.eslintrc.js index 7989f4d9c471e..3d730b9f777bc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -147,6 +147,10 @@ module.exports = { element: 'a', message: 'use instead', }, + { + element: 'ReactMarkdown', + message: 'use instead', + }, ], }, ], @@ -175,9 +179,9 @@ module.exports = { message: 'use instead', }, { - element:'MonacoEditor', + element: 'MonacoEditor', message: 'use instead', - } + }, ], }, ], diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts index 9327e29f625a3..ed720a36e1ba5 100644 --- a/.storybook/test-runner.ts +++ b/.storybook/test-runner.ts @@ -72,7 +72,7 @@ module.exports = { const storyContext = (await getStoryContext(page, context)) as StoryContext const { skip = false, snapshotBrowsers = ['chromium'] } = storyContext.parameters?.testOptions ?? {} - browserContext.setDefaultTimeout(3000) // Reduce the default timeout from 30 s to 3 s to pre-empt Jest timeouts + browserContext.setDefaultTimeout(5000) // Reduce the default timeout from 30 s to 5 s to pre-empt Jest timeouts if (!skip) { const currentBrowser = browserContext.browser()!.browserType().name() as SupportedBrowserName if (snapshotBrowsers.includes(currentBrowser)) { diff --git a/frontend/__snapshots__/components-cards-text-card--template.png b/frontend/__snapshots__/components-cards-text-card--template.png index 3e37496f1f7d9..ef9d5e2dfdf91 100644 Binary files a/frontend/__snapshots__/components-cards-text-card--template.png and b/frontend/__snapshots__/components-cards-text-card--template.png differ diff --git a/frontend/__snapshots__/components-editable-field--default.png b/frontend/__snapshots__/components-editable-field--default.png new file mode 100644 index 0000000000000..2d16114431388 Binary files /dev/null and b/frontend/__snapshots__/components-editable-field--default.png differ diff --git a/frontend/__snapshots__/components-editable-field--multiline-with-markdown.png b/frontend/__snapshots__/components-editable-field--multiline-with-markdown.png new file mode 100644 index 0000000000000..540e64f10339e Binary files /dev/null and b/frontend/__snapshots__/components-editable-field--multiline-with-markdown.png differ diff --git a/frontend/__snapshots__/components-errors-error-display--anonymous-error-with-stack-trace.png b/frontend/__snapshots__/components-errors-error-display--anonymous-error-with-stack-trace.png index 2b399cfb52884..dd5f974f0ff1c 100644 Binary files a/frontend/__snapshots__/components-errors-error-display--anonymous-error-with-stack-trace.png and b/frontend/__snapshots__/components-errors-error-display--anonymous-error-with-stack-trace.png differ diff --git a/frontend/__snapshots__/components-errors-error-display--importing-module.png b/frontend/__snapshots__/components-errors-error-display--importing-module.png index e624c68948256..7c9dfe5d3523d 100644 Binary files a/frontend/__snapshots__/components-errors-error-display--importing-module.png and b/frontend/__snapshots__/components-errors-error-display--importing-module.png differ diff --git a/frontend/__snapshots__/components-errors-error-display--resize-observer-loop-limit-exceeded.png b/frontend/__snapshots__/components-errors-error-display--resize-observer-loop-limit-exceeded.png index 12b8c9628a105..a8b33b29f5111 100644 Binary files a/frontend/__snapshots__/components-errors-error-display--resize-observer-loop-limit-exceeded.png and b/frontend/__snapshots__/components-errors-error-display--resize-observer-loop-limit-exceeded.png differ diff --git a/frontend/__snapshots__/components-errors-error-display--safari-script-error.png b/frontend/__snapshots__/components-errors-error-display--safari-script-error.png index 7625b1fe6efe7..aca86b037f7c8 100644 Binary files a/frontend/__snapshots__/components-errors-error-display--safari-script-error.png and b/frontend/__snapshots__/components-errors-error-display--safari-script-error.png differ diff --git a/frontend/__snapshots__/exporter-exporter--dashboard.png b/frontend/__snapshots__/exporter-exporter--dashboard.png index 9701d6fb63866..d46039284491f 100644 Binary files a/frontend/__snapshots__/exporter-exporter--dashboard.png and b/frontend/__snapshots__/exporter-exporter--dashboard.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--actions.png b/frontend/__snapshots__/filters-taxonomic-filter--actions.png index 282e7fecdd257..fff1fa4ce40b4 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--actions.png and b/frontend/__snapshots__/filters-taxonomic-filter--actions.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-free.png b/frontend/__snapshots__/filters-taxonomic-filter--events-free.png index 67ce48f256785..c1dd6086c9749 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-free.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-free.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-premium.png b/frontend/__snapshots__/filters-taxonomic-filter--events-premium.png index d167e296b1cb8..417734adb3807 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-premium.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-premium.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--properties.png b/frontend/__snapshots__/filters-taxonomic-filter--properties.png index 684cec6d7bca8..6166356899a25 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--properties.png and b/frontend/__snapshots__/filters-taxonomic-filter--properties.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png b/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png index 8f354b12f2b73..e81dc1cf31bbc 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png and b/frontend/__snapshots__/lemon-ui-lemon-file-input--default.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-markdown--default.png b/frontend/__snapshots__/lemon-ui-lemon-markdown--default.png new file mode 100644 index 0000000000000..b33258fa4950c Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-markdown--default.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-markdown--low-key-headings.png b/frontend/__snapshots__/lemon-ui-lemon-markdown--low-key-headings.png new file mode 100644 index 0000000000000..b870d48717d93 Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-markdown--low-key-headings.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-text-area--lemon-text-markdown.png b/frontend/__snapshots__/lemon-ui-lemon-text-area--lemon-text-markdown.png index de65bbdb2cfd7..8d0ee116d05ee 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-text-area--lemon-text-markdown.png and b/frontend/__snapshots__/lemon-ui-lemon-text-area--lemon-text-markdown.png differ diff --git a/frontend/__snapshots__/scenes-app-dashboards--edit.png b/frontend/__snapshots__/scenes-app-dashboards--edit.png index d8df084f0b727..6389702cb99c5 100644 Binary files a/frontend/__snapshots__/scenes-app-dashboards--edit.png and b/frontend/__snapshots__/scenes-app-dashboards--edit.png differ diff --git a/frontend/__snapshots__/scenes-app-dashboards--show.png b/frontend/__snapshots__/scenes-app-dashboards--show.png index d1aeb4350f6df..4aaadd263a2a6 100644 Binary files a/frontend/__snapshots__/scenes-app-dashboards--show.png and b/frontend/__snapshots__/scenes-app-dashboards--show.png differ diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png index 19c18d8c07666..153a93af4a41a 100644 Binary files a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png differ diff --git a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png index 3fd4539ca2827..ac1f227514773 100644 Binary files a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.png index d5e21ff466ce3..04f3d65e359ee 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends--webkit.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 index 55a8d66037312..21e554f56ab8e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png 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 index fec89fd6ab2dc..9574d6e03d310 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png index 3d8b801d0f7ac..a0bef56dc2724 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png index b0e9092477022..0874beff87993 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png index 8e5c541cb9582..4b24320571880 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.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 index c7f7d20533d1a..abf96cf1c2c1d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png 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 index c701498693b9a..ca136afb5c010 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png 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-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png index 2609257c6b1a3..b6d6f129d5e66 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.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 index 62cade73f3285..cc7a5e5bc6233 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png 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 index efe17f5e08795..afe5f32e5f79b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png index 07e5a65dc34cd..6e392b8df0d66 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.png index 729d241639c48..2fd2ddfd0735c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert--webkit.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 index 9a86cb9f9c545..e4de49978fb59 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit--webkit.png 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 index f9d430d61bb50..ade798e8b8585 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png index 8267c7120b225..97187756246b5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png and b/frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png index f1a9e173682f5..acc10d101122d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png index b3c9d3a3b4ce9..607f6f853a18a 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.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 index ead27a6b6ed58..eea650b28efaf 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--webkit.png 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 index 2d7f9f2c91a3b..6414315f95b96 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png 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-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png index 70b1c0d62928a..bb468c41d7099 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.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 index 8b1c53c47f5ea..12e046675a97c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png 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 index f349c2d4ebe8c..4a767b6971349 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png index 0c40f9ad52881..63cf76f8cfa5d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png b/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png index 16693f43e01fc..fd423f1f7e19e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png index 3d7921c62f64f..dd0aec35f1f09 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit--webkit.png 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 index 4dbce40bf0e19..15c56dfa56a59 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--lifecycle.png b/frontend/__snapshots__/scenes-app-insights--lifecycle.png index 8028d8f042b92..2ab70086dee61 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--lifecycle.png and b/frontend/__snapshots__/scenes-app-insights--lifecycle.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention--webkit.png index fb87e41b665c4..2e7368c06bb1e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention--webkit.png and b/frontend/__snapshots__/scenes-app-insights--retention--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.png index 77c2f6447b18e..402402919e7ae 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown--webkit.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 index 258ae400390f0..385f05ea6589b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit--webkit.png 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 index fca1587e44247..97fa118d79f56 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png b/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png index 2e2cf79187652..121d0b324adcd 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--retention-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png index 44f67fcbe4004..c8ede7b9fd30c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-edit--webkit.png 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 index cdc6ffe95c0ca..ae71eec088987 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention-edit.png and b/frontend/__snapshots__/scenes-app-insights--retention-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--retention.png b/frontend/__snapshots__/scenes-app-insights--retention.png index 091d0c0869206..e90937f466eef 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--retention.png and b/frontend/__snapshots__/scenes-app-insights--retention.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png b/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png index 56900048c8d45..eaf977559e8f2 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png and b/frontend/__snapshots__/scenes-app-insights--stickiness--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png index ab6e8cb04a5de..62e04313ddc65 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness-edit--webkit.png 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 index 201ac3ffde766..29db39c34e2c8 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png and b/frontend/__snapshots__/scenes-app-insights--stickiness-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--stickiness.png b/frontend/__snapshots__/scenes-app-insights--stickiness.png index 38528945400b9..885c792dbff15 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--stickiness.png and b/frontend/__snapshots__/scenes-app-insights--stickiness.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png index 26ffb8ab301f7..56216f518af65 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.png index c8dbde3f7a571..b5c8307dea666 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown--webkit.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 index a51360f6820f2..9905ed61d7a89 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png 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 index 5b0d3fe919d7d..18e8183ddefb1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.png index 4ad1ee2377671..f412b05f949a1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-breakdown.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 index b440fd4dc1dd8..1c9bae1872eee 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-edit--webkit.png 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 index a1314f53ff959..2513bc614a783 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-area-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area.png b/frontend/__snapshots__/scenes-app-insights--trends-area.png index 07a14dd5c487c..693bb117d362c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-area.png and b/frontend/__snapshots__/scenes-app-insights--trends-area.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png index 6c4a88f6a1598..029db225e47ab 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.png index 1379e0418168a..7a047299abaef 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown--webkit.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 index cd4d8513f726f..aa1a85fbbf26f 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png 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 index 1535db5abeb7c..42115a622a205 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.png index 9fd5ca2cebc20..b76b6e7a17d98 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown.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 index 58b481326617c..adb88102026c6 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit--webkit.png 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 index 765cd6350b050..1b81ed4977ff1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-bar.png b/frontend/__snapshots__/scenes-app-insights--trends-bar.png index 511b168b8bf52..cb863bb9c9bb6 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-bar.png and b/frontend/__snapshots__/scenes-app-insights--trends-bar.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png index 42977de5e5098..7814a705e190d 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.png index 61359c68e75ae..5dd79e1bb0217 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown--webkit.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 index 1dc4f0ec8923f..2779891938055 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png 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 index a48332e677519..370cd4a4c10a2 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.png index 41cb4446a312a..1ec537b3468ad 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-breakdown.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 index 23a9edff296e8..9324b2235c046 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--webkit.png 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 index 57362c17debe0..7bb39aaff2b5c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line.png b/frontend/__snapshots__/scenes-app-insights--trends-line.png index 18676e1d52235..b47fdcfa793e0 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line.png and b/frontend/__snapshots__/scenes-app-insights--trends-line.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.png index 432bd0c3bf4c5..fcf0496097bfc 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-number--webkit.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 index 526c04b338271..2a5f905f2d2cb 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number-edit--webkit.png 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 index fe0bcf496b57f..25d7659b28b81 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-number-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-number.png b/frontend/__snapshots__/scenes-app-insights--trends-number.png index a6348d35d2af9..c4b27d87904c5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-number.png and b/frontend/__snapshots__/scenes-app-insights--trends-number.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png index fd48c50e52abd..d7d9d4334e44b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png index f7e26559e417e..9926ab50ea419 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown--webkit.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 index ca2c8c2c02b22..5163ac5fdb238 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png 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 index 45a6e052b19a5..e020cb76a7760 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png index f34bec7fb925f..e396c60572415 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown.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 index b287382a43cd1..af5c8b64103fe 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit--webkit.png 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 index b01e399a2b526..0a8ebe4751399 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-pie.png b/frontend/__snapshots__/scenes-app-insights--trends-pie.png index dcc567929263b..5f83bed8ef407 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-pie.png and b/frontend/__snapshots__/scenes-app-insights--trends-pie.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png index 9c5ea39db2de7..9b85c727a05ab 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.png index e4eff45c48f5d..90f6c74468cec 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown--webkit.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 index 42a52ceb9abd6..4196d96dfbd67 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png 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 index f998019bf447d..8ae256c8199bf 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.png index 41a8d37374837..1d66d872793ef 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-breakdown.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 index 108f5c8c9050c..a8ef498debcd6 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--webkit.png 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 index 2531352703251..35e186b20d96c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table.png b/frontend/__snapshots__/scenes-app-insights--trends-table.png index 66e2ff923a707..83727bad0e64a 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table.png and b/frontend/__snapshots__/scenes-app-insights--trends-table.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png index b2fca73f9873c..a350461bf3689 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.png index 3980597d676b3..8af97f329f0d5 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown--webkit.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 index 538155e5a40c3..c626cb8402ae2 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit--webkit.png 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 index 2dc48470ffb05..f45c73c45217e 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.png b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.png index a1aa07087d84e..98d682c860521 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-breakdown.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 index 50225163c439d..48b1f53b59bfb 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-edit--webkit.png 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 index 8ac43bccc823c..bdb269d4562ee 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-value-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-value.png b/frontend/__snapshots__/scenes-app-insights--trends-value.png index f1aa7ebba9539..24e25225e9902 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-value.png and b/frontend/__snapshots__/scenes-app-insights--trends-value.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.png index 865ba04c0b785..1ae8bc9fccb15 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map--webkit.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 index b4feed5f4c9df..709a2698bae3b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png 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 index 48bfcb56e7441..0462e9cfedd78 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-world-map.png b/frontend/__snapshots__/scenes-app-insights--trends-world-map.png index c7dce61d12139..e76857963a4de 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-world-map.png and b/frontend/__snapshots__/scenes-app-insights--trends-world-map.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.png b/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.png index e9041e787e53f..e990fa30da8b9 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.png and b/frontend/__snapshots__/scenes-app-insights--user-paths--webkit.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 index c10fbd9a66423..25086a8cbda7f 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths-edit--webkit.png 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 index 0ec60139a4c49..1c01944a7c95c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png and b/frontend/__snapshots__/scenes-app-insights--user-paths-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--user-paths.png b/frontend/__snapshots__/scenes-app-insights--user-paths.png index 2cd749ffe0568..ca4c44785108f 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--user-paths.png and b/frontend/__snapshots__/scenes-app-insights--user-paths.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--headings.png b/frontend/__snapshots__/scenes-app-notebooks--headings.png index 8df9288063084..435b7c638c07d 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--headings.png and b/frontend/__snapshots__/scenes-app-notebooks--headings.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png index 768016f6149e4..ae06ad761790f 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png and b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--text-formats.png b/frontend/__snapshots__/scenes-app-notebooks--text-formats.png index ecf666a2c4f96..ec6cf87e153ed 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--text-formats.png and b/frontend/__snapshots__/scenes-app-notebooks--text-formats.png differ diff --git a/frontend/__snapshots__/scenes-app-recordings--recent-recordings.png b/frontend/__snapshots__/scenes-app-recordings--recent-recordings.png index f4060d584e979..edcf79a87d9ad 100644 Binary files a/frontend/__snapshots__/scenes-app-recordings--recent-recordings.png and b/frontend/__snapshots__/scenes-app-recordings--recent-recordings.png differ diff --git a/frontend/__snapshots__/scenes-app-recordings--recordings-list.png b/frontend/__snapshots__/scenes-app-recordings--recordings-list.png index f4060d584e979..edcf79a87d9ad 100644 Binary files a/frontend/__snapshots__/scenes-app-recordings--recordings-list.png and b/frontend/__snapshots__/scenes-app-recordings--recordings-list.png differ diff --git a/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png b/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png index f6899d7e36d1d..c6fbd48b974c5 100644 Binary files a/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png and b/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png differ diff --git a/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-with-pinned-recordings.png b/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-with-pinned-recordings.png index fc2cd7d3326f9..5026277f808c0 100644 Binary files a/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-with-pinned-recordings.png and b/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-with-pinned-recordings.png differ diff --git a/frontend/__snapshots__/scenes-app-recordings--second-recording-in-list.png b/frontend/__snapshots__/scenes-app-recordings--second-recording-in-list.png index 5927803f6a537..afede51513048 100644 Binary files a/frontend/__snapshots__/scenes-app-recordings--second-recording-in-list.png and b/frontend/__snapshots__/scenes-app-recordings--second-recording-in-list.png differ diff --git a/frontend/src/layout/navigation/TopBar/Announcement.tsx b/frontend/src/layout/navigation/TopBar/Announcement.tsx index e5bbd1f1507a5..24b0d3e73ec6b 100644 --- a/frontend/src/layout/navigation/TopBar/Announcement.tsx +++ b/frontend/src/layout/navigation/TopBar/Announcement.tsx @@ -6,7 +6,7 @@ import { NewFeatureBanner } from 'lib/introductions/NewFeatureBanner' import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' import { LemonButton, Link } from '@posthog/lemon-ui' import { IconClose } from 'lib/lemon-ui/icons' -import ReactMarkdown from 'react-markdown' +import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown' window.process = MOCK_NODE_PROCESS @@ -37,7 +37,7 @@ export function Announcement(): JSX.Element | null { ) } else if (shownAnnouncementType === AnnouncementType.CloudFlag && cloudAnnouncement) { - message = {cloudAnnouncement} + message = {cloudAnnouncement} } else if (shownAnnouncementType === AnnouncementType.NewFeature) { message = } diff --git a/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx b/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx index 3b80c5f5039ff..cc11a0c436539 100644 --- a/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx +++ b/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx @@ -7,8 +7,8 @@ import { ActivityLogItem, humanize, HumanizedActivityLogItem } from 'lib/compone import type { notificationsLogicType } from './notificationsLogicType' import { describerFor } from 'lib/components/ActivityLog/activityLogLogic' import { dayjs } from 'lib/dayjs' -import ReactMarkdown from 'react-markdown' import posthog from 'posthog-js' +import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown' const POLL_TIMEOUT = 5 * 60 * 1000 const MARK_READ_TIMEOUT = 2500 @@ -156,11 +156,7 @@ export const notificationsLogic = kea([ email: 'joe@posthog.com', name: 'Joe', isSystem: true, - description: ( - <> - {changelogNotification.markdown} - - ), + description: {changelogNotification.markdown}, created_at: changelogNotification.notificationDate, unread: changeLogIsUnread, } diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.tsx b/frontend/src/lib/components/Cards/TextCard/TextCard.tsx index 5c54f515dbea8..61d6eaee91c93 100644 --- a/frontend/src/lib/components/Cards/TextCard/TextCard.tsx +++ b/frontend/src/lib/components/Cards/TextCard/TextCard.tsx @@ -6,10 +6,10 @@ import { LemonButton, LemonButtonWithDropdown, LemonDivider } from '@posthog/lem import { useActions, useValues } from 'kea' import { router } from 'kea-router' import { urls } from 'scenes/urls' -import ReactMarkdown from 'react-markdown' import { dashboardsModel } from '~/models/dashboardsModel' import React, { useState } from 'react' import { CardMeta, Resizeable } from 'lib/components/Cards/CardMeta' +import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown' interface TextCardProps extends React.HTMLAttributes, Resizeable { dashboardId?: string | number @@ -33,7 +33,7 @@ export function TextContent({ text, closeDetails, style, className }: TextCardBo return ( // eslint-disable-next-line react/forbid-dom-props
closeDetails?.()} style={style}> - {text} + {text}
) } diff --git a/frontend/src/lib/components/Cards/TextCard/TextCardModal.tsx b/frontend/src/lib/components/Cards/TextCard/TextCardModal.tsx index f1e9c7a9f46ad..a29655f96afba 100644 --- a/frontend/src/lib/components/Cards/TextCard/TextCardModal.tsx +++ b/frontend/src/lib/components/Cards/TextCard/TextCardModal.tsx @@ -4,7 +4,7 @@ import { useActions, useValues } from 'kea' import { LemonModal } from 'lib/lemon-ui/LemonModal' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { Field, Form } from 'kea-forms' -import { LemonTextMarkdown } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' +import { LemonTextAreaMarkdown } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini' import { userLogic } from 'scenes/userLogic' @@ -71,7 +71,7 @@ export function TextCardModal({ > - + diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss b/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss index 87a256ecda539..f7d40aaf1a9b5 100644 --- a/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss +++ b/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss @@ -1,21 +1,21 @@ .CodeSnippet { position: relative; + font-size: 0.875rem; + &.CodeSnippet--compact { + font-size: 0.8125rem; + .CodeSnippet__actions { + top: 0.375rem; + right: 0.375rem; + } + } .CodeSnippet__actions { position: absolute; display: flex; top: 0.25rem; right: 0.25rem; gap: 0.5rem; - font-size: 1.5rem; - - // NOTE: This is not ideal as we should not override core components styles but... - .LemonButton { - background: transparent !important; - box-shadow: transparent !important; - - .LemonIcon { - color: #fff; - } + .LemonButton .LemonIcon { + color: #fff; } } } diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx b/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx index 3af750522f305..180ac9e794838 100644 --- a/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx +++ b/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx @@ -28,6 +28,7 @@ import { useValues } from 'kea' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { FEATURE_FLAGS } from 'lib/constants' import { useState } from 'react' +import clsx from 'clsx' export enum Language { Text = 'text', @@ -83,6 +84,7 @@ export interface CodeSnippetProps { children: string language?: Language wrap?: boolean + compact?: boolean actions?: Action[] style?: React.CSSProperties /** What is being copied. @example 'link' */ @@ -95,6 +97,7 @@ export function CodeSnippet({ children: text, language = Language.Text, wrap = false, + compact = false, style, actions, thing = 'snippet', @@ -109,15 +112,20 @@ export function CodeSnippet({ return ( // eslint-disable-next-line react/forbid-dom-props -
+
{actions && actions.map(({ icon, callback, popconfirmProps, title }, index) => !popconfirmProps ? ( - + ) : ( - + ) )} @@ -127,6 +135,7 @@ export function CodeSnippet({ onClick={async () => { text && (await copyToClipboard(text, thing)) }} + size={compact ? 'small' : 'medium'} />
= { title: 'Components/Editable Field', component: EditableFieldComponent, + tags: ['autodocs'], } export default meta -export function EditableField_(): JSX.Element { - const [savedTitle, setSavedTitle] = useState('Foo') - const [savedDescription, setSavedDescription] = useState('Lorem ipsum dolor sit amet.') +const Template: StoryFn = (args) => { + const [value, setValue] = useState(args.value ?? 'Lorem ipsum') return ( - setSavedTitle(value)} />} - caption={ - setSavedDescription(value)} - multiline - /> - } - /> +
+ setValue(value)} /> +
) } + +export const Default = Template.bind({}) + +export const MultilineWithMarkdown = Template.bind({}) +MultilineWithMarkdown.args = { + multiline: true, + markdown: true, + value: 'Lorem ipsum **dolor** sit amet, consectetur adipiscing _elit_.', +} diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx index 3360c872f608d..f30517c7e08d1 100644 --- a/frontend/src/lib/components/EditableField/EditableField.tsx +++ b/frontend/src/lib/components/EditableField/EditableField.tsx @@ -1,13 +1,14 @@ import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import './EditableField.scss' -import { IconEdit } from 'lib/lemon-ui/icons' +import { IconEdit, IconMarkdown } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import TextareaAutosize from 'react-textarea-autosize' import clsx from 'clsx' import { pluralize } from 'lib/utils' import { Tooltip } from 'lib/lemon-ui/Tooltip' +import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown' -interface EditableFieldProps { +export interface EditableFieldProps { /** What this field stands for. */ name: string value: string @@ -19,6 +20,8 @@ interface EditableFieldProps { maxLength?: number autoFocus?: boolean multiline?: boolean + /** Whether to render the content as Markdown in view mode. */ + markdown?: boolean compactButtons?: boolean /** Whether this field should be gated behind a "paywall". */ paywall?: boolean @@ -46,6 +49,7 @@ export function EditableField({ maxLength, autoFocus = true, multiline = false, + markdown = false, compactButtons = false, paywall = false, mode, @@ -116,7 +120,7 @@ export function EditableField({ : undefined } > -
+
{isEditing ? ( <> {multiline ? ( @@ -151,7 +155,12 @@ export function EditableField({ /> )} {!mode && ( - <> +
+ {markdown && ( + + + + )} {saveButtonText} - +
)} ) : ( <> - {tentativeValue || {placeholder}} + {tentativeValue && markdown ? ( + {tentativeValue} + ) : ( + tentativeValue || {placeholder} + )} {!mode && ( - } - size={compactButtons ? 'small' : undefined} - onClick={() => setLocalIsEditing(true)} - data-attr={`edit-prop-${name}`} - disabled={paywall} - noPadding - /> +
+ } + size={compactButtons ? 'small' : undefined} + onClick={() => setLocalIsEditing(true)} + data-attr={`edit-prop-${name}`} + disabled={paywall} + noPadding + /> +
)} )} diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx index c60a2fd9eb933..25cf4daf6e04d 100644 --- a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx +++ b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx @@ -136,13 +136,15 @@ export const LemonFileInput = ({ Click or drag and drop to upload {accept ? ` ${acceptToDisplayName(accept)}` : ''} -
- {files.map((x, i) => ( - : undefined}> - {x.name} - - ))} -
+ {files.length > 0 && ( +
+ {files.map((x, i) => ( + : undefined}> + {x.name} + + ))} +
+ )}
) diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss new file mode 100644 index 0000000000000..1858e38e78e92 --- /dev/null +++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss @@ -0,0 +1,30 @@ +.LemonMarkdown { + > * { + margin: 0 0 0.5em 0; + &:last-child { + margin-bottom: 0; + } + } + ol, + ul, + dl { + padding-left: 1.5em; + } + ol { + list-style-type: decimal; + } + ul { + list-style-type: disc; + } + strong[level] { + // Low-key headings + display: block; + } + hr { + margin: 1em 0; + } + h1 { + margin-bottom: 0.25em; + font-weight: 600; + } +} diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx new file mode 100644 index 0000000000000..89c4b786360e6 --- /dev/null +++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx @@ -0,0 +1,46 @@ +import { Meta, StoryFn, StoryObj } from '@storybook/react' +import { LemonMarkdown as LemonMarkdownComponent, LemonMarkdownProps } from './LemonMarkdown' + +type Story = StoryObj +const meta: Meta = { + title: 'Lemon UI/Lemon Markdown', + component: LemonMarkdownComponent, + tags: ['autodocs'], +} +export default meta + +const Template: StoryFn = (props: LemonMarkdownProps) => { + return +} + +export const Default: Story = Template.bind({}) +Default.args = { + children: `# Lorem ipsum + +## Linguae despexitque sine sua tibi + +Lorem markdownum et, dant officio siquid indigenae. Spectatrix contigit tellus, sum [summos](http://sim.org/sit), suis. + +- Quattuor creditur +- Veniebat patriaeque cavatur +- En anguem tamen + +\`\`\`python +print("X") +\`\`\` + +--- + +1. Quattuor creditur +2. Veniebat patriaeque cavatu +3. En anguem tamen`, +} + +export const LowKeyHeadings: Story = Template.bind({}) +LowKeyHeadings.args = { + children: `# Level 1 +## Level 2 + +**Strong** and *emphasized* text.`, + lowKeyHeadings: true, +} diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx new file mode 100644 index 0000000000000..df3215e2831b4 --- /dev/null +++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx @@ -0,0 +1,42 @@ +import ReactMarkdown from 'react-markdown' +import './LemonMarkdown.scss' +import { Link } from '../Link' +import { CodeSnippet, Language } from 'lib/components/CodeSnippet' +import clsx from 'clsx' + +export interface LemonMarkdownProps { + children: string + /** Whether headings should just be text. Recommended for item descriptions. */ + lowKeyHeadings?: boolean + className?: string +} + +/** Beautifully rendered Markdown. */ +export function LemonMarkdown({ children, lowKeyHeadings = false, className }: LemonMarkdownProps): JSX.Element { + return ( +
+ ( + + {children} + + ), + code: ({ language, value }) => ( + + {value} + + ), + ...(lowKeyHeadings + ? { + heading: 'strong', + } + : {}), + }} + disallowedTypes={['html']} // Don't want to deal with the security considerations of HTML + > + {children} + +
+ ) +} diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/index.ts b/frontend/src/lib/lemon-ui/LemonMarkdown/index.ts new file mode 100644 index 0000000000000..0ed0a63f5e870 --- /dev/null +++ b/frontend/src/lib/lemon-ui/LemonMarkdown/index.ts @@ -0,0 +1 @@ +export { LemonMarkdown, type LemonMarkdownProps } from './LemonMarkdown' diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx index 842e900a6262c..ea0f7ee62571a 100644 --- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx @@ -1,7 +1,7 @@ import { useState } from 'react' import { Meta, StoryFn, StoryObj } from '@storybook/react' -import { LemonTextArea, LemonTextAreaProps, LemonTextMarkdown as _LemonTextMarkdown } from './LemonTextArea' +import { LemonTextArea, LemonTextAreaProps, LemonTextAreaMarkdown as _LemonTextMarkdown } from './LemonTextArea' type Story = StoryObj const meta: Meta = { diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx index 4cfbf6bd7648f..80544bf071426 100644 --- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx +++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx @@ -62,14 +62,14 @@ export const LemonTextArea = React.forwardRef void placeholder?: string 'data-attr'?: string } -export function LemonTextMarkdown({ value, onChange, ...editAreaProps }: LemonTextMarkdownProps): JSX.Element { +export function LemonTextAreaMarkdown({ value, onChange, ...editAreaProps }: LemonTextAreaMarkdownProps): JSX.Element { const { objectStorageAvailable } = useValues(preflightLogic) const [isPreviewShown, setIsPreviewShown] = useState(false) diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss index 8bc3dcca89708..556b5b293a68b 100644 --- a/frontend/src/lib/lemon-ui/Link/Link.scss +++ b/frontend/src/lib/lemon-ui/Link/Link.scss @@ -22,6 +22,6 @@ } > .LemonIcon { - margin-left: 0.3em; + margin-left: 0.15em; } } diff --git a/frontend/src/lib/lemon-ui/Link/Link.tsx b/frontend/src/lib/lemon-ui/Link/Link.tsx index 92dea9fac774a..1eeb3d487e6d2 100644 --- a/frontend/src/lib/lemon-ui/Link/Link.tsx +++ b/frontend/src/lib/lemon-ui/Link/Link.tsx @@ -25,6 +25,11 @@ export type LinkProps = Pick, 'target' | 'cla disabled?: boolean /** Like plain `disabled`, except we enforce a reason to be shown in the tooltip. */ disabledReason?: string | null | false + /** + * Whether an "open in new" icon should be shown if target is `_blank`. + * This is true by default if `children` is a string. + */ + targetBlankIcon?: boolean } // Some URLs we want to enforce a full reload such as billing which is redirected by Django @@ -56,6 +61,7 @@ export const Link: React.FC> = Reac children, disabled, disabledReason, + targetBlankIcon = typeof children === 'string', ...props }, ref @@ -101,7 +107,7 @@ export const Link: React.FC> = Reac {...draggableProps} > {children} - {typeof children === 'string' && target === '_blank' ? : null} + {targetBlankIcon && target === '_blank' ? : null} ) : ( diff --git a/frontend/src/scenes/data-management/definition/DefinitionView.tsx b/frontend/src/scenes/data-management/definition/DefinitionView.tsx index bc07eba43fe68..bf3ef6a9abb07 100644 --- a/frontend/src/scenes/data-management/definition/DefinitionView.tsx +++ b/frontend/src/scenes/data-management/definition/DefinitionView.tsx @@ -83,6 +83,7 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element { ( - {fieldConfig.markdown && ( - - )} + {fieldConfig.markdown && {fieldConfig.markdown}} {fieldConfig.type && isValidField(fieldConfig) ? (