diff --git a/.eslintrc.js b/.eslintrc.js index d3d6deb301d6f..a2db223beffc0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -113,11 +113,7 @@ module.exports = { { name: 'dayjs', message: 'Do not directly import dayjs. Only import the dayjs exported from lib/dayjs.', - }, - { - name: '@ant-design/icons', - message: 'Please use icons from the @posthog/icons package instead', - }, + } ], }, ], diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark--webkit.png index ec10f0387e504..eb0e2b6898835 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png index 086476ba716c0..0ddf6883a14b9 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light--webkit.png index fd76db27712b0..2083ec1e7d2f6 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png index 1072316bf304a..6271cc120bbfd 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png differ diff --git a/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--dark.png b/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--dark.png index 30382a3ae33cd..b18a4b155ef7a 100644 Binary files a/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--dark.png and b/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--light.png b/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--light.png index 6a3903bcfb483..fbfb753facedc 100644 Binary files a/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--light.png and b/frontend/__snapshots__/scenes-app-insights-error-empty-states--funnel-single-step--light.png differ diff --git a/frontend/src/lib/components/Cards/CardMeta.tsx b/frontend/src/lib/components/Cards/CardMeta.tsx index fb335097463bb..b8a6656e09e5d 100644 --- a/frontend/src/lib/components/Cards/CardMeta.tsx +++ b/frontend/src/lib/components/Cards/CardMeta.tsx @@ -1,10 +1,13 @@ import './CardMeta.scss' +import { IconPieChart } from '@posthog/icons' import clsx from 'clsx' import { useResizeObserver } from 'lib/hooks/useResizeObserver' import { IconRefresh, IconSubtitles, IconSubtitlesOff } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { More } from 'lib/lemon-ui/LemonButton/More' +import { Tooltip } from 'lib/lemon-ui/Tooltip' +import React from 'react' import { Transition } from 'react-transition-group' import { InsightColor } from '~/types' @@ -28,7 +31,7 @@ export interface CardMetaProps extends Pick metaDetails?: JSX.Element | null moreButtons?: JSX.Element | null topHeading?: JSX.Element | null - samplingNotice?: JSX.Element | null + samplingFactor?: number | null } export function CardMeta({ @@ -44,7 +47,7 @@ export function CardMeta({ areDetailsShown, setAreDetailsShown, className, - samplingNotice, + samplingFactor, }: CardMetaProps): JSX.Element { const { ref: primaryRef, width: primaryWidth } = useResizeObserver() const { ref: detailsRef, height: detailsHeight } = useResizeObserver() @@ -68,7 +71,20 @@ export function CardMeta({ )}
-
{topHeading}
+
+ {topHeading} + {samplingFactor && samplingFactor < 1 && ( + + + + )} +
{showDetailsControls && setAreDetailsShown && ( )} - {samplingNotice ? samplingNotice : null} {showEditingControls && }
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx index 20b1bf0987078..54297dde88a41 100644 --- a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx +++ b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx @@ -1,5 +1,3 @@ -// eslint-disable-next-line no-restricted-imports -import { PieChartFilled } from '@ant-design/icons' import { useValues } from 'kea' import { CardMeta } from 'lib/components/Cards/CardMeta' import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading' @@ -128,13 +126,7 @@ export function InsightMeta({ } metaDetails={} - samplingNotice={ - samplingFactor && samplingFactor < 1 ? ( - - - - ) : null - } + samplingFactor={samplingFactor} moreButtons={ <> <> diff --git a/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx b/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx index 1149bb6dbe7b0..f2f8994434f69 100644 --- a/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx +++ b/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx @@ -1,5 +1,4 @@ -// eslint-disable-next-line no-restricted-imports -import { FundOutlined } from '@ant-design/icons' +import { IconPulse } from '@posthog/icons' import { LemonSelect } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { insightLogic } from 'scenes/insights/insightLogic' @@ -25,7 +24,8 @@ export function SmoothingFilter(): JSX.Element | null { label: value === smoothingIntervals ? ( <> - {label} + + {label} ) : ( label diff --git a/frontend/src/lib/components/TZLabel/index.tsx b/frontend/src/lib/components/TZLabel/index.tsx index 8da75e0ccd3c2..0f237f21db989 100644 --- a/frontend/src/lib/components/TZLabel/index.tsx +++ b/frontend/src/lib/components/TZLabel/index.tsx @@ -1,8 +1,6 @@ import './index.scss' -// eslint-disable-next-line no-restricted-imports -import { LaptopOutlined, ProjectOutlined } from '@ant-design/icons' -import { IconGear } from '@posthog/icons' +import { IconGear, IconHome, IconLaptop } from '@posthog/icons' import { LemonButton, LemonDivider, LemonDropdown, LemonDropdownProps } from '@posthog/lemon-ui' import clsx from 'clsx' import { useActions, useValues } from 'kea' @@ -57,7 +55,7 @@ const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
- +
Your device
{shortTimeZone(undefined, time.toDate())}
@@ -66,7 +64,7 @@ const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({ {currentTeam && (
- +
Project
{shortTimeZone(currentTeam.timezone, time.toDate())}
diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx index 9231c69380628..c50d7bbdf153c 100644 --- a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx +++ b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx @@ -289,7 +289,7 @@ export function EditorFilters({ query, showing, embedded }: EditorFiltersProps):
{shouldShowSessionAnalysisWarning ? ( - + When using sessions and session properties, events without session IDs will be excluded from the set of results.{' '} Learn more about sessions. diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx index 9e3b25bc2bddc..0c268dee77e6e 100644 --- a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx +++ b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx @@ -1,8 +1,14 @@ import './EmptyStates.scss' -// eslint-disable-next-line no-restricted-imports -import { PlusCircleOutlined, ThunderboltFilled } from '@ant-design/icons' -import { IconArchive, IconInfo, IconPlus, IconWarning } from '@posthog/icons' +import { + IconArchive, + IconInfo, + IconPieChart, + IconPlus, + IconPlusSmall, + IconPlusSquare, + IconWarning, +} from '@posthog/icons' import { LemonButton } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { AnimationType } from 'lib/animations/animations' @@ -69,7 +75,7 @@ function SamplingLink({ insightProps }: { insightProps: InsightLogicProps }): JS }) }} > - {suggestedSamplingPercentage}% sampling + {suggestedSamplingPercentage}% sampling ) @@ -341,10 +347,10 @@ export function FunnelSingleStepState({ actionable = true }: FunnelSingleStepSta
- +

Add another step!

-

+

You’re almost there! Funnels require at least two steps before calculating. {actionable && ' Once you have two steps defined, additional changes will recalculate automatically.'} @@ -480,7 +486,7 @@ export function SavedInsightsEmptyState(): JSX.Element { } + icon={} className="add-insight-button" > New insight diff --git a/frontend/src/scenes/saved-insights/SavedInsights.scss b/frontend/src/scenes/saved-insights/SavedInsights.scss index 768d883c174eb..bc9f2a281daaf 100644 --- a/frontend/src/scenes/saved-insights/SavedInsights.scss +++ b/frontend/src/scenes/saved-insights/SavedInsights.scss @@ -42,11 +42,6 @@ line-height: 1.7rem; color: var(--muted); } - - button.add-insight-button { - height: 50px; - padding: 0 3rem; - } } } } diff --git a/package.json b/package.json index f6837fc45cf67..5c6ca11470e6e 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "mypy-baseline-sync": "mypy -p posthog | mypy-baseline sync" }, "dependencies": { - "@ant-design/icons": "^4.7.0", "@babel/runtime": "^7.24.0", "@dnd-kit/core": "^6.0.8", "@dnd-kit/modifiers": "^6.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 653bfb354e482..71187b5c6bff3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,9 +19,6 @@ patchedDependencies: path: patches/rrweb@2.0.0-alpha.13.patch dependencies: - '@ant-design/icons': - specifier: ^4.7.0 - version: 4.7.0(react-dom@18.2.0)(react@18.2.0) '@babel/runtime': specifier: ^7.24.0 version: 7.24.0 @@ -374,7 +371,7 @@ dependencies: optionalDependencies: fsevents: specifier: ^2.3.2 - version: 2.3.2 + version: 2.3.3 devDependencies: '@babel/core': @@ -855,32 +852,6 @@ packages: '@jridgewell/gen-mapping': 0.1.1 '@jridgewell/trace-mapping': 0.3.17 - /@ant-design/colors@6.0.0: - resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==} - dependencies: - '@ctrl/tinycolor': 3.4.1 - dev: false - - /@ant-design/icons-svg@4.2.1: - resolution: {integrity: sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==} - dev: false - - /@ant-design/icons@4.7.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-aoB4Z7JA431rt6d4u+8xcNPPCrdufSRMUOpxa1ab6mz1JCQZOEVolj2WVs/tDFmN62zzK30mNelEsprLYsSF3g==} - engines: {node: '>=8'} - peerDependencies: - react: '>=16.0.0' - react-dom: '>=16.0.0' - dependencies: - '@ant-design/colors': 6.0.0 - '@ant-design/icons-svg': 4.2.1 - '@babel/runtime': 7.24.0 - classnames: 2.3.2 - rc-util: 5.24.4(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /@aw-web-design/x-default-browser@1.4.126: resolution: {integrity: sha512-Xk1sIhyNC/esHGGVjL/niHLowM0csl/kFO5uawBy4IrWwy0o1G8LGt3jP6nmWGz+USxeeqbihAmp/oVZju6wug==} hasBin: true @@ -4142,11 +4113,6 @@ packages: postcss-selector-parser: 6.0.15 dev: false - /@ctrl/tinycolor@3.4.1: - resolution: {integrity: sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==} - engines: {node: '>=10'} - dev: false - /@cypress/request@3.0.1: resolution: {integrity: sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==} engines: {node: '>= 6'} @@ -13077,6 +13043,7 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] requiresBuild: true + dev: true optional: true /fsevents@2.3.3: @@ -18298,7 +18265,7 @@ packages: react: '>=15' dependencies: react: 18.2.0 - unlayer-types: 1.75.0 + unlayer-types: 1.77.0 dev: false /react-error-boundary@3.1.4(react@18.2.0): @@ -20832,8 +20799,8 @@ packages: resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==} engines: {node: '>= 10.0.0'} - /unlayer-types@1.75.0: - resolution: {integrity: sha512-yB4TeimlZPKkAGIIE3Acs9e5YHjCpeGcoybq/E8w4lzNTI5EybI9Z9rwIBXhNK0miNarxEIO7rJUWB+Yeve80g==} + /unlayer-types@1.77.0: + resolution: {integrity: sha512-/eIyHiGWO/EFb3GuD7FqD+jV9sXAj2FMhwn3QTVaio2FUz30RRAh8kQS+qNwPKIcLEZWKzfH41SBi3afudEVAA==} dev: false /unpipe@1.0.0: