From 7aed6d45bc31155e4e6d96f83e0bfa0ee4acf571 Mon Sep 17 00:00:00 2001 From: Calvin Yau Date: Tue, 4 Nov 2025 15:57:12 -0800 Subject: [PATCH 1/4] fix(codecov): Fix line coverage legend edge cases and coloring --- .../crashContent/exception/content.tsx | 19 ++++--------------- .../exception/lineCoverageLegend.tsx | 18 +++++++++++------- .../crashContent/exception/mechanism.tsx | 10 +++++++++- .../interfaces/frame/contextLineNumber.tsx | 6 +++--- 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/static/app/components/events/interfaces/crashContent/exception/content.tsx b/static/app/components/events/interfaces/crashContent/exception/content.tsx index d3a1d8881de7df..431ee53269f231 100644 --- a/static/app/components/events/interfaces/crashContent/exception/content.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/content.tsx @@ -2,7 +2,6 @@ import {Fragment, useState} from 'react'; import styled from '@emotion/styled'; import {Button} from 'sentry/components/core/button'; -import {Flex} from 'sentry/components/core/layout/flex'; import {Tooltip} from 'sentry/components/core/tooltip'; import ErrorBoundary from 'sentry/components/errorBoundary'; import {StacktraceBanners} from 'sentry/components/events/interfaces/crashContent/exception/banners/stacktraceBanners'; @@ -205,17 +204,11 @@ function InnerContent({ - {exception.mechanism || hasCoverageData ? ( - - {exception.mechanism && ( - - )} - {hasCoverageData ? : null} - + + {exception.mechanism ? ( + ) : null} + {hasCoverageData ? : null} p.theme.space.xl}; } `; - -const RowWrapper = styled(Flex)` - margin: ${p => p.theme.space.xl} 0 ${p => p.theme.space.xs} 0; -`; diff --git a/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx b/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx index 66a4a5a65cf26f..9d9b135d1326df 100644 --- a/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx @@ -1,12 +1,13 @@ import styled from '@emotion/styled'; import {Flex} from 'sentry/components/core/layout/flex'; +import {Text} from 'sentry/components/core/text/text'; import {coverageText as COVERAGE_TEXT} from 'sentry/components/events/interfaces/frame/contextLineNumber'; import {Coverage} from 'sentry/types/integrations'; export function LineCoverageLegend() { return ( - + {COVERAGE_TEXT[Coverage.COVERED]} {COVERAGE_TEXT[Coverage.NOT_COVERED]} {COVERAGE_TEXT[Coverage.PARTIAL]} @@ -14,20 +15,23 @@ export function LineCoverageLegend() { ); } -const CoveredLine = styled('div')` +const CoveredLine = styled(Text)` padding-right: ${p => p.theme.space.md}; - border-right: 3px solid ${p => p.theme.tokens.content.success}; + border-right: 3px solid ${p => p.theme.green400}; white-space: nowrap; + font-size: ${p => p.theme.fontSize.sm}; `; -const UncoveredLine = styled('div')` +const UncoveredLine = styled(Text)` padding-right: ${p => p.theme.space.md}; - border-right: 3px solid ${p => p.theme.tokens.content.danger}; + border-right: 3px solid ${p => p.theme.red300}; white-space: nowrap; + font-size: ${p => p.theme.fontSize.sm}; `; -const PartiallyCoveredLine = styled('div')` +const PartiallyCoveredLine = styled(Text)` padding-right: ${p => p.theme.space.md}; - border-right: 3px dashed ${p => p.theme.tokens.content.warning}; + border-right: 3px dashed ${p => p.theme.yellow300}; white-space: nowrap; + font-size: ${p => p.theme.fontSize.sm}; `; diff --git a/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx b/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx index 765c25dabcd5ad..011a26cf496242 100644 --- a/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx @@ -98,9 +98,17 @@ export function Mechanism({data: mechanism, meta: mechanismMeta}: Props) { } }); - return {pills}; + return ( + + {pills} + + ); } +const Wrapper = styled('div')` + margin: ${p => p.theme.space.xl} 0 ${p => p.theme.space.xs} 0; +`; + const iconStyle = (p: {theme: Theme}) => css` transition: 0.1s linear color; color: ${p.theme.gray300}; diff --git a/static/app/components/events/interfaces/frame/contextLineNumber.tsx b/static/app/components/events/interfaces/frame/contextLineNumber.tsx index 44d066da4b0e18..a078ab7afd0926 100644 --- a/static/app/components/events/interfaces/frame/contextLineNumber.tsx +++ b/static/app/components/events/interfaces/frame/contextLineNumber.tsx @@ -69,17 +69,17 @@ const Wrapper = styled('div')` &.covered .line-number { background: ${p => p.theme.green100}; - border-right: 3px solid ${p => p.theme.tokens.content.success}; + border-right: 3px solid ${p => p.theme.green400}; } &.uncovered .line-number { background: ${p => p.theme.red100}; - border-right: 3px solid ${p => p.theme.tokens.content.danger}; + border-right: 3px solid ${p => p.theme.red300}; } &.partial .line-number { background: ${p => p.theme.yellow100}; - border-right: 3px dashed ${p => p.theme.tokens.content.warning}; + border-right: 3px dashed ${p => p.theme.yellow300}; } &.active { From 63e47aa43273f301e407a8c48dcf7bc06e0643b4 Mon Sep 17 00:00:00 2001 From: Calvin Yau Date: Thu, 6 Nov 2025 00:55:14 -0800 Subject: [PATCH 2/4] fix(codecov): Update component structuring review changes --- .../crashContent/exception/content.tsx | 12 ++++-- .../exception/lineCoverageLegend.tsx | 41 ++++++++----------- .../crashContent/exception/mechanism.tsx | 10 +---- 3 files changed, 28 insertions(+), 35 deletions(-) diff --git a/static/app/components/events/interfaces/crashContent/exception/content.tsx b/static/app/components/events/interfaces/crashContent/exception/content.tsx index 431ee53269f231..88a53caf1642a6 100644 --- a/static/app/components/events/interfaces/crashContent/exception/content.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/content.tsx @@ -2,6 +2,7 @@ import {Fragment, useState} from 'react'; import styled from '@emotion/styled'; import {Button} from 'sentry/components/core/button'; +import {Container} from 'sentry/components/core/layout'; import {Tooltip} from 'sentry/components/core/tooltip'; import ErrorBoundary from 'sentry/components/errorBoundary'; import {StacktraceBanners} from 'sentry/components/events/interfaces/crashContent/exception/banners/stacktraceBanners'; @@ -204,11 +205,16 @@ function InnerContent({ - {exception.mechanism ? ( - + + + + ) : null} + {hasCoverageData ? ( + + + ) : null} - {hasCoverageData ? : null} - {COVERAGE_TEXT[Coverage.COVERED]} - {COVERAGE_TEXT[Coverage.NOT_COVERED]} - {COVERAGE_TEXT[Coverage.PARTIAL]} + + + {COVERAGE_TEXT[Coverage.COVERED]} + + + + + {COVERAGE_TEXT[Coverage.NOT_COVERED]} + + + + + {COVERAGE_TEXT[Coverage.PARTIAL]} + + ); } -const CoveredLine = styled(Text)` - padding-right: ${p => p.theme.space.md}; - border-right: 3px solid ${p => p.theme.green400}; - white-space: nowrap; - font-size: ${p => p.theme.fontSize.sm}; -`; - -const UncoveredLine = styled(Text)` - padding-right: ${p => p.theme.space.md}; - border-right: 3px solid ${p => p.theme.red300}; - white-space: nowrap; - font-size: ${p => p.theme.fontSize.sm}; -`; - -const PartiallyCoveredLine = styled(Text)` - padding-right: ${p => p.theme.space.md}; - border-right: 3px dashed ${p => p.theme.yellow300}; - white-space: nowrap; - font-size: ${p => p.theme.fontSize.sm}; +const LegendEntry = styled(Container)` + border-right-width: 3px; `; diff --git a/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx b/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx index 011a26cf496242..765c25dabcd5ad 100644 --- a/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/mechanism.tsx @@ -98,17 +98,9 @@ export function Mechanism({data: mechanism, meta: mechanismMeta}: Props) { } }); - return ( - - {pills} - - ); + return {pills}; } -const Wrapper = styled('div')` - margin: ${p => p.theme.space.xl} 0 ${p => p.theme.space.xs} 0; -`; - const iconStyle = (p: {theme: Theme}) => css` transition: 0.1s linear color; color: ${p.theme.gray300}; From 43e145a4bfa5fafcb1bc18b52104ce531681c286 Mon Sep 17 00:00:00 2001 From: Calvin Yau Date: Thu, 6 Nov 2025 01:14:45 -0800 Subject: [PATCH 3/4] fix(codecov): Update frame line number indication colors --- .../events/interfaces/frame/contextLineNumber.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/app/components/events/interfaces/frame/contextLineNumber.tsx b/static/app/components/events/interfaces/frame/contextLineNumber.tsx index a078ab7afd0926..f5f49b0420924a 100644 --- a/static/app/components/events/interfaces/frame/contextLineNumber.tsx +++ b/static/app/components/events/interfaces/frame/contextLineNumber.tsx @@ -69,17 +69,17 @@ const Wrapper = styled('div')` &.covered .line-number { background: ${p => p.theme.green100}; - border-right: 3px solid ${p => p.theme.green400}; + border-right: 3px solid ${p => p.theme.tokens.border.success}; } &.uncovered .line-number { background: ${p => p.theme.red100}; - border-right: 3px solid ${p => p.theme.red300}; + border-right: 3px solid ${p => p.theme.tokens.border.danger}; } &.partial .line-number { background: ${p => p.theme.yellow100}; - border-right: 3px dashed ${p => p.theme.yellow300}; + border-right: 3px dashed ${p => p.theme.tokens.border.warning}; } &.active { From e9a40c33c2bc377aac7dd5edb270c9a16b0b0b04 Mon Sep 17 00:00:00 2001 From: Calvin Yau Date: Thu, 6 Nov 2025 08:51:27 -0800 Subject: [PATCH 4/4] fix(codecov): Add back dash styling --- .../exception/lineCoverageLegend.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx b/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx index ba0d7a15250a0e..7d76dfade8238a 100644 --- a/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/lineCoverageLegend.tsx @@ -8,25 +8,31 @@ import {Coverage} from 'sentry/types/integrations'; export function LineCoverageLegend() { return ( - + {COVERAGE_TEXT[Coverage.COVERED]} - - + + {COVERAGE_TEXT[Coverage.NOT_COVERED]} - - + + {COVERAGE_TEXT[Coverage.PARTIAL]} - + ); } -const LegendEntry = styled(Container)` +const SolidLegendEntry = styled(Container)` border-right-width: 3px; + border-right-style: solid; +`; + +const DashedLegendEntry = styled(Container)` + border-right-width: 3px; + border-right-style: dashed; `;