From 47938a5daa1ed40b63f750818442e03c496c36bf Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Wed, 1 Apr 2026 10:37:10 -0300 Subject: [PATCH 1/9] Update icon color to be accent --- static/app/components/emptyStateWarning.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/emptyStateWarning.tsx b/static/app/components/emptyStateWarning.tsx index eb366294bfaaf3..5d7f479fa4fd7c 100644 --- a/static/app/components/emptyStateWarning.tsx +++ b/static/app/components/emptyStateWarning.tsx @@ -19,13 +19,13 @@ export function EmptyStateWarning({ return small ? ( - {withIcon && } + {withIcon && } {children} ) : ( - {withIcon && } + {withIcon && } {children} ); From 5be52141a9a12e8a8709377e02ccaca29af94630 Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Wed, 1 Apr 2026 10:37:48 -0300 Subject: [PATCH 2/9] Update styles for EmptyStateText --- .../explore/tables/tracesTable/styles.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/static/app/views/explore/tables/tracesTable/styles.tsx b/static/app/views/explore/tables/tracesTable/styles.tsx index 89df37c1715811..5ca36c25818375 100644 --- a/static/app/views/explore/tables/tracesTable/styles.tsx +++ b/static/app/views/explore/tables/tracesTable/styles.tsx @@ -2,7 +2,7 @@ import type {ComponentProps, CSSProperties} from 'react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; -import {Flex} from '@sentry/scraps/layout'; +import {Container, Flex} from '@sentry/scraps/layout'; import {Text} from '@sentry/scraps/text'; import {Panel} from 'sentry/components/panels/panel'; @@ -123,15 +123,23 @@ export const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName: `} `; -export const EmptyStateText = styled('div')<{ +export function EmptyStateText({ + children, + size, + textAlign, +}: { + children: React.ReactNode; size: 'xl' | 'md'; textAlign?: CSSProperties['textAlign']; -}>` - color: ${p => p.theme.tokens.content.secondary}; - font-size: ${p => p.theme.font.size[p.size]}; - padding-bottom: ${p => p.theme.space.md}; - ${p => p.textAlign && `text-align: ${p.textAlign}`}; -`; +}) { + return ( + + + {children} + + + ); +} export const EmptyValueContainer = styled('span')` color: ${p => p.theme.tokens.content.secondary}; From a72c3c97ed1279816b9a9c7dfd089a30ad2739e7 Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Wed, 1 Apr 2026 10:45:29 -0300 Subject: [PATCH 3/9] Update EmptyRenderer to new copy --- .../explore/logs/tables/logsInfiniteTable.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx index 2741399e6abf02..f4daaeec42bc25 100644 --- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx +++ b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx @@ -6,7 +6,7 @@ import type {Virtualizer} from '@tanstack/react-virtual'; import {useVirtualizer, useWindowVirtualizer} from '@tanstack/react-virtual'; import {Button} from '@sentry/scraps/button'; -import {Flex, Stack} from '@sentry/scraps/layout'; +import {Container, Flex, Stack} from '@sentry/scraps/layout'; import {ExternalLink} from '@sentry/scraps/link'; import {Tooltip} from '@sentry/scraps/tooltip'; @@ -666,22 +666,22 @@ function EmptyRenderer({ {t('No logs found yet')} {tct( - 'We scanned [bytesScanned] already but did not find any matching logs yet.[break]You can narrow your time range or you can [continueScanning].', - { - bytesScanned: , - break:
, - continueScanning: ( - - ), - } + 'We scanned [bytesScanned] so far but have not found anything matching your filters', + {bytesScanned: } )} + + {t('We can keep digging or you can narrow down your search.')} + + + + ); From 58606a31f59c296448d64ea2a34176f8825f7e16 Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Tue, 7 Apr 2026 10:13:49 -0300 Subject: [PATCH 4/9] fix(logs): Scope empty state icon accent styling Keep EmptyStateWarning muted by default so other consumers do not inherit logs-specific icon styling. Let the logs table opt into the accent variant explicitly. Refs LOGS-644 Co-Authored-By: GPT-5.4 Made-with: Cursor --- static/app/components/emptyStateWarning.tsx | 6 ++++-- static/app/views/explore/logs/tables/logsInfiniteTable.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/static/app/components/emptyStateWarning.tsx b/static/app/components/emptyStateWarning.tsx index 5d7f479fa4fd7c..fb082c4e05c7f4 100644 --- a/static/app/components/emptyStateWarning.tsx +++ b/static/app/components/emptyStateWarning.tsx @@ -7,11 +7,13 @@ type Props = { children?: React.ReactNode; className?: string; small?: boolean; + variant?: React.ComponentProps['variant']; withIcon?: boolean; }; export function EmptyStateWarning({ small = false, + variant = 'muted', withIcon = true, children, className, @@ -19,13 +21,13 @@ export function EmptyStateWarning({ return small ? ( - {withIcon && } + {withIcon && } {children} ) : ( - {withIcon && } + {withIcon && } {children} ); diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx index f4daaeec42bc25..7e954f6279be7e 100644 --- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx +++ b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx @@ -662,7 +662,7 @@ function EmptyRenderer({ if (bytesScanned && canResumeAutoFetch && resumeAutoFetch) { return ( - + {t('No logs found yet')} {tct( @@ -689,7 +689,7 @@ function EmptyRenderer({ return ( - + {t('No logs found')} {tct( From a7ab716b58b7add1bc8128bc8001c94519053b7b Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Tue, 7 Apr 2026 10:17:18 -0300 Subject: [PATCH 5/9] ref(explore): Use align prop for traces table text Replace the deprecated inline text alignment style with the supported Text align prop for the traces table empty state. Keep the component typed against the responsive align values exposed by scraps. Co-Authored-By: GPT-5.4 Made-with: Cursor --- static/app/views/explore/tables/tracesTable/styles.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/static/app/views/explore/tables/tracesTable/styles.tsx b/static/app/views/explore/tables/tracesTable/styles.tsx index 5ca36c25818375..5d2b13e822f33c 100644 --- a/static/app/views/explore/tables/tracesTable/styles.tsx +++ b/static/app/views/explore/tables/tracesTable/styles.tsx @@ -1,8 +1,8 @@ -import type {ComponentProps, CSSProperties} from 'react'; +import type {ComponentProps} from 'react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; -import {Container, Flex} from '@sentry/scraps/layout'; +import {Container, Flex, type Responsive} from '@sentry/scraps/layout'; import {Text} from '@sentry/scraps/text'; import {Panel} from 'sentry/components/panels/panel'; @@ -130,11 +130,11 @@ export function EmptyStateText({ }: { children: React.ReactNode; size: 'xl' | 'md'; - textAlign?: CSSProperties['textAlign']; + textAlign?: Responsive<'left' | 'center' | 'right' | 'justify'>; }) { return ( - + {children} From 3678ef973fb53a016f9ec346a611c60f54698283 Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Tue, 7 Apr 2026 10:20:11 -0300 Subject: [PATCH 6/9] fix(explore): Restore muted empty state text Preserve the previous secondary text color for traces table empty states. Without the muted variant, the new Text primitive falls back to the primary token and makes the empty state copy appear bolder. Co-Authored-By: GPT-5.4 Made-with: Cursor --- static/app/views/explore/tables/tracesTable/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/explore/tables/tracesTable/styles.tsx b/static/app/views/explore/tables/tracesTable/styles.tsx index 5d2b13e822f33c..af73024811196c 100644 --- a/static/app/views/explore/tables/tracesTable/styles.tsx +++ b/static/app/views/explore/tables/tracesTable/styles.tsx @@ -134,7 +134,7 @@ export function EmptyStateText({ }) { return ( - + {children} From 891c2d828aa38898dd5383a85e31980f1f7122bc Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Tue, 7 Apr 2026 11:01:11 -0300 Subject: [PATCH 7/9] Add period to empty state string --- static/app/views/explore/logs/tables/logsInfiniteTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx index 7e954f6279be7e..ef55e746115331 100644 --- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx +++ b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx @@ -693,7 +693,7 @@ function EmptyRenderer({ {t('No logs found')} {tct( - 'Try adjusting your filters or get started with sending logs by checking these [instructions]', + 'Try adjusting your filters or get started with sending logs by checking these [instructions].', { instructions: ( From b366fc5dac5562f13e65839f1463002098b8d512 Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Tue, 7 Apr 2026 11:02:55 -0300 Subject: [PATCH 8/9] Create explicit icon variant type, and export it --- static/app/components/emptyStateWarning.tsx | 3 ++- static/app/icons/svgIcon.tsx | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/static/app/components/emptyStateWarning.tsx b/static/app/components/emptyStateWarning.tsx index fb082c4e05c7f4..6f2df843fb4606 100644 --- a/static/app/components/emptyStateWarning.tsx +++ b/static/app/components/emptyStateWarning.tsx @@ -2,12 +2,13 @@ import styled from '@emotion/styled'; import {EmptyMessage} from 'sentry/components/emptyMessage'; import {IconSearch} from 'sentry/icons'; +import type {IconVariant} from 'sentry/icons/svgIcon'; type Props = { children?: React.ReactNode; className?: string; small?: boolean; - variant?: React.ComponentProps['variant']; + variant?: IconVariant; withIcon?: boolean; }; diff --git a/static/app/icons/svgIcon.tsx b/static/app/icons/svgIcon.tsx index 8ac1f9d8960eca..d17ba35473e14c 100644 --- a/static/app/icons/svgIcon.tsx +++ b/static/app/icons/svgIcon.tsx @@ -4,6 +4,8 @@ import type {ContentVariant, IconSize} from 'sentry/utils/theme'; import {useIconDefaults} from './useIconDefaults'; +export type IconVariant = ContentVariant | 'muted'; + export interface SVGIconProps extends Omit< React.SVGAttributes, 'color' | 'type' @@ -16,7 +18,7 @@ export interface SVGIconProps extends Omit< legacySize?: string; ref?: React.Ref; size?: IconSize; - variant?: ContentVariant | 'muted'; + variant?: IconVariant; } export function SvgIcon(props: SVGIconProps) { From 958146deb55f9f59f7194a5f7c1fbfd1739a51f4 Mon Sep 17 00:00:00 2001 From: nsdeschenes Date: Tue, 7 Apr 2026 11:08:17 -0300 Subject: [PATCH 9/9] fix(explore): Render empty state text as a block element Render `EmptyStateText` as a `div` so loading states can safely include block-level children like `LoadingIndicator` without invalid HTML. Refs LOGS-644 Co-Authored-By: GPT-5.4 Made-with: Cursor --- static/app/views/explore/tables/tracesTable/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/explore/tables/tracesTable/styles.tsx b/static/app/views/explore/tables/tracesTable/styles.tsx index af73024811196c..42d9d3f68c8e72 100644 --- a/static/app/views/explore/tables/tracesTable/styles.tsx +++ b/static/app/views/explore/tables/tracesTable/styles.tsx @@ -134,7 +134,7 @@ export function EmptyStateText({ }) { return ( - + {children}