fix(lemon-ui): fix lemon toast overflow (#19391)

frontend/@posthog/lemon-ui/src/index.ts

@@ -1,8 +1,6 @@
 import '../../../src/styles/global.scss'
 
 export * from 'lib/lemon-ui/hooks'
-export * from 'lib/lemon-ui/lemonToast'
-
 export * from 'lib/lemon-ui/LemonActionableTooltip'
 export * from 'lib/lemon-ui/LemonBadge'
 export * from 'lib/lemon-ui/LemonBanner'
@@ -31,6 +29,7 @@ export * from 'lib/lemon-ui/LemonTable'
 export * from 'lib/lemon-ui/LemonTabs'
 export * from 'lib/lemon-ui/LemonTag'
 export * from 'lib/lemon-ui/LemonTextArea'
+export * from 'lib/lemon-ui/LemonToast'
 export * from 'lib/lemon-ui/LemonWidget'
 export * from 'lib/lemon-ui/Lettermark'
 export * from 'lib/lemon-ui/Link'

frontend/src/initKea.ts

@@ -6,7 +6,7 @@ import { routerPlugin } from 'kea-router'
 import { subscriptionsPlugin } from 'kea-subscriptions'
 import { waitForPlugin } from 'kea-waitfor'
 import { windowValuesPlugin } from 'kea-window-values'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { identifierToHuman } from 'lib/utils'
 
 /*

frontend/src/lib/components/AddToDashboard/addToDashboardModalLogic.ts

@@ -1,7 +1,7 @@
 import FuseClass from 'fuse.js'
 import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { router } from 'kea-router'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'

frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.ts

@@ -4,7 +4,7 @@ import { loaders } from 'kea-loaders'
 import api from 'lib/api'
 import { getSingularType } from 'lib/components/DefinitionPopover/utils'
 import { TaxonomicDefinitionTypes, TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { capitalizeFirstLetter } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { urls } from 'scenes/urls'

frontend/src/lib/components/ExportButton/exporter.tsx

@@ -2,7 +2,7 @@ import { AnimationType } from 'lib/animations/animations'
 import api from 'lib/api'
 import { Animation } from 'lib/components/Animation/Animation'
 import { dayjs } from 'lib/dayjs'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
 import { delay } from 'lib/utils'
 import posthog from 'posthog-js'

frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts

@@ -1,7 +1,7 @@
 import { actions, connect, kea, key, listeners, path, props, reducers } from 'kea'
 import { IntervalKeyType, Intervals, intervals } from 'lib/components/IntervalFilter/intervals'
 import { dayjs } from 'lib/dayjs'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { dateMapping, objectsEqual } from 'lib/utils'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'

frontend/src/lib/components/ObjectTags/objectTagsLogic.ts

@@ -1,6 +1,6 @@
 import equal from 'fast-deep-equal'
 import { actions, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 
 import type { objectTagsLogicType } from './objectTagsLogicType'
 

frontend/src/lib/components/Subscriptions/subscriptionLogic.ts

@@ -4,7 +4,7 @@ import { loaders } from 'kea-loaders'
 import { beforeUnload, router, urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { dayjs } from 'lib/dayjs'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { isEmail, isURL } from 'lib/utils'
 import { getInsightId } from 'scenes/insights/utils'
 import { integrationsLogic } from 'scenes/settings/project/integrationsLogic'

frontend/src/lib/components/Support/supportLogic.ts

@@ -4,7 +4,7 @@ import { actions, connect, kea, listeners, path, props, reducers, selectors } fr
 import { forms } from 'kea-forms'
 import { actionToUrl, router, urlToAction } from 'kea-router'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { uuid } from 'lib/utils'
 import posthog from 'posthog-js'

frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx

@@ -6,7 +6,7 @@ import { TextContent } from 'lib/components/Cards/TextCard/TextCard'
 import { useUploadFiles } from 'lib/hooks/useUploadFiles'
 import { IconMarkdown, IconTools } from 'lib/lemon-ui/icons'
 import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import posthog from 'posthog-js'

frontend/src/lib/lemon-ui/LemonToast/LemonToast.stories.tsx

@@ -0,0 +1,127 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { useEffect } from 'react'
+import { Slide, ToastContainer } from 'react-toastify'
+
+import { lemonToast, ToastCloseButton, ToastContent, ToastContentProps } from './LemonToast'
+
+const meta: Meta<typeof ToastContent> = {
+    title: 'Lemon UI/Lemon Toast',
+    component: ToastContent,
+    parameters: {
+        testOptions: {
+            include3000: true,
+            waitForLoadersToDisappear: false,
+            snapshotTargetSelector: '.Toastify__toast-container',
+        },
+    },
+}
+
+type ToastStory = {
+    toasts: ToastContentProps[]
+}
+
+export default meta
+type Story = StoryObj<ToastStory>
+
+export const ToastTypes: Story = {
+    args: {
+        toasts: [
+            {
+                type: 'info',
+                message: 'An info toast',
+            },
+            {
+                type: 'success',
+                message: 'A success toast',
+            },
+            {
+                type: 'warning',
+                message: 'A warning toast',
+            },
+            {
+                type: 'error',
+                message: 'An error toast',
+            },
+        ],
+    },
+    render: (args, { globals }) => {
+        const isDarkModeOn = globals.theme === 'dark'
+
+        useEffect(() => {
+            lemonToast.dismiss()
+            args.toasts.forEach((toast) => {
+                const { type, message, ...rest } = toast
+                lemonToast[type](message, rest)
+            })
+        }, [isDarkModeOn])
+
+        return (
+            <ToastContainer
+                position="top-left" // different from app
+                autoClose={false} // different from app
+                transition={Slide}
+                closeOnClick={false}
+                draggable={false}
+                closeButton={<ToastCloseButton />}
+                theme={isDarkModeOn ? 'dark' : 'light'}
+            />
+        )
+    },
+}
+
+export const BillingError: Story = {
+    ...ToastTypes,
+    args: {
+        toasts: [
+            {
+                type: 'error',
+                message:
+                    'Load experiment failed: This feature is part of the premium PostHog offering. To use it, subscribe to PostHog Cloud with a generous free tier: https://app.posthog.com/organization/billing',
+            },
+        ],
+    },
+}
+
+export const WithButton: Story = {
+    ...ToastTypes,
+    args: {
+        toasts: [
+            {
+                type: 'success',
+                message: 'Insight added to dashboard',
+                button: {
+                    label: 'View dashboard',
+                    action: (): void => {},
+                },
+            },
+        ],
+    },
+}
+
+export const WithProgress: Story = {
+    ...ToastTypes,
+    args: {
+        toasts: [
+            {
+                type: 'info',
+                message: 'An info toast with progress',
+                progress: 0.4,
+            } as ToastContentProps,
+            {
+                type: 'success',
+                message: 'A success toast with progress',
+                progress: 0.4,
+            } as ToastContentProps,
+            {
+                type: 'warning',
+                message: 'A warning toast with progress',
+                progress: 0.4,
+            } as ToastContentProps,
+            {
+                type: 'error',
+                message: 'An error toast with progress',
+                progress: 0.4,
+            } as ToastContentProps,
+        ],
+    },
+}

frontend/src/lib/lemon-ui/lemonToast.tsx → frontend/src/lib/lemon-ui/LemonToast/LemonToast.tsx

@@ -1,9 +1,9 @@
-import { IconCheckmark, IconClose, IconErrorOutline, IconInfo, IconWarning } from 'lib/lemon-ui/icons'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
 import posthog from 'posthog-js'
 import { toast, ToastContentProps as ToastifyRenderProps, ToastOptions } from 'react-toastify'
 
-import { LemonButton } from './LemonButton'
+import { IconCheckmark, IconClose, IconErrorOutline, IconInfo, IconWarning } from '../icons'
+import { LemonButton } from '../LemonButton'
+import { Spinner } from '../Spinner'
 
 export function ToastCloseButton({ closeToast }: { closeToast?: () => void }): JSX.Element {
     return (
@@ -44,7 +44,7 @@ export interface ToastContentProps {
 export function ToastContent({ type, message, button, id }: ToastContentProps): JSX.Element {
     return (
         <div className="flex items-center" data-attr={`${type}-toast`}>
-            <span className="grow">{message}</span>
+            <span className="grow overflow-hidden text-ellipsis">{message}</span>
             {button && (
                 <LemonButton
                     onClick={() => {

frontend/src/lib/lemon-ui/LemonToast/index.ts

@@ -0,0 +1 @@
+export { lemonToast } from './LemonToast'

frontend/src/models/dashboardsModel.tsx

@@ -3,7 +3,7 @@ import { loaders } from 'kea-loaders'
 import { router, urlToAction } from 'kea-router'
 import api, { PaginatedResponse } from 'lib/api'
 import { GENERATED_DASHBOARD_PREFIX } from 'lib/constants'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { idToKey, isUserLoggedIn } from 'lib/utils'
 import { DashboardEventSource, eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { permanentlyMount } from 'lib/utils/kea-logic-builders'

frontend/src/models/insightsModel.tsx

@@ -1,6 +1,6 @@
 import { actions, connect, kea, listeners, path } from 'kea'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { promptLogic } from 'lib/logic/promptLogic'
 import { teamLogic } from 'scenes/teamLogic'
 

frontend/src/queries/QueryEditor/queryEditorLogic.ts

@@ -1,5 +1,5 @@
 import { actions, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 
 import { QueryEditorProps } from '~/queries/QueryEditor/QueryEditor'
 import { Node } from '~/queries/schema'

frontend/src/scenes/App.tsx

@@ -1,7 +1,7 @@
 import { actions, BindLogic, connect, events, kea, path, reducers, selectors, useMountedLogic, useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { use3000Body } from 'lib/hooks/use3000Body'
-import { ToastCloseButton } from 'lib/lemon-ui/lemonToast'
+import { ToastCloseButton } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'

frontend/src/scenes/actions/actionEditLogic.tsx

@@ -3,7 +3,7 @@ import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
 import { beforeUnload, router, urlToAction } from 'kea-router'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { Link } from 'lib/lemon-ui/Link'
 import { uuid } from 'lib/utils'
 import { deleteWithUndo } from 'lib/utils/deleteWithUndo'

frontend/src/scenes/apps/frontendAppsLogic.tsx

@@ -1,6 +1,6 @@
 import { actions, afterMount, connect, defaults, kea, path, reducers } from 'kea'
 import { loaders } from 'kea-loaders'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { getAppContext } from 'lib/utils/getAppContext'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'

frontend/src/scenes/authentication/passwordResetLogic.ts

@@ -3,7 +3,7 @@ import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
 import { urlToAction } from 'kea-router'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 
 import type { passwordResetLogicType } from './passwordResetLogicType'
 

frontend/src/scenes/authentication/signup/verify-email/verifyEmailLogic.ts

@@ -2,7 +2,7 @@ import { actions, kea, path, reducers } from 'kea'
 import { loaders } from 'kea-loaders'
 import { urlToAction } from 'kea-router'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 
 import type { verifyEmailLogicType } from './verifyEmailLogicType'
 

frontend/src/scenes/cohorts/cohortEditLogic.ts

@@ -4,7 +4,7 @@ import { loaders } from 'kea-loaders'
 import { actionToUrl, router } from 'kea-router'
 import api from 'lib/api'
 import { ENTITY_MATCH_TYPE, FEATURE_FLAGS } from 'lib/constants'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { NEW_COHORT, NEW_CRITERIA, NEW_CRITERIA_GROUP } from 'scenes/cohorts/CohortFilters/constants'
 import {

frontend/src/scenes/dashboard/dashboardLogic.tsx

@@ -22,7 +22,7 @@ import {
 } from 'lib/constants'
 import { Dayjs, dayjs, now } from 'lib/dayjs'
 import { captureTimeToSeeData, currentSessionId, TimeToSeeDataPayload } from 'lib/internalMetrics'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { Link } from 'lib/lemon-ui/Link'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { clearDOMTextSelection, isUserLoggedIn, shouldCancelQuery, toParams, uuid } from 'lib/utils'

frontend/src/scenes/dashboard/newDashboardLogic.ts

@@ -3,7 +3,7 @@ import { forms } from 'kea-forms'
 import { router } from 'kea-router'
 import api from 'lib/api'
 import { DashboardRestrictionLevel } from 'lib/constants'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'

frontend/src/scenes/data-management/definition/definitionEditLogic.ts

@@ -2,7 +2,7 @@ import { beforeUnmount, connect, kea, key, path, props } from 'kea'
 import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { capitalizeFirstLetter } from 'lib/utils'
 import {
     definitionLogic,

frontend/src/scenes/data-warehouse/viewLinkLogic.tsx

@@ -2,7 +2,7 @@ import { actions, afterMount, connect, kea, listeners, path, reducers, selectors
 import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { databaseTableListLogic } from 'scenes/data-management/database/databaseTableListLogic'
 
 import { DataWarehouseViewLink } from '~/types'

frontend/src/scenes/events/createActionFromEvent.tsx

@@ -1,7 +1,7 @@
 import { router } from 'kea-router'
 import { CLICK_TARGETS, elementToSelector, matchesDataAttribute } from 'lib/actionUtils'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { Link } from 'lib/lemon-ui/Link'
 import { autoCaptureEventToDescription } from 'lib/utils'
 import { urls } from 'scenes/urls'

frontend/src/scenes/events/eventsSceneLogic.tsx

@@ -1,7 +1,7 @@
 import equal from 'fast-deep-equal'
 import { actions, connect, kea, path, reducers, selectors } from 'kea'
 import { actionToUrl, urlToAction } from 'kea-router'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { objectsEqual } from 'lib/utils'
 import { getDefaultEventsSceneQuery } from 'scenes/events/defaults'
 import { teamLogic } from 'scenes/teamLogic'

frontend/src/scenes/experiments/experimentLogic.tsx

@@ -6,7 +6,7 @@ import api from 'lib/api'
 import { FunnelLayout } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
 import { IconInfo } from 'lib/lemon-ui/icons'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { toParams } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'

frontend/src/scenes/experiments/experimentsLogic.ts

@@ -5,7 +5,7 @@ import { loaders } from 'kea-loaders'
 import { subscriptions } from 'kea-subscriptions'
 import api from 'lib/api'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { userLogic } from 'scenes/userLogic'