Skip to content

feat: Flags table coverage header #3912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

feat: Flags table coverage header #3912

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
86e149c
Improve coverage % on flags table
spalmurray Jul 15, 2025
073809d
Fix test
spalmurray Jul 15, 2025
e6b61dc
Verbose tho
spalmurray Jul 15, 2025
2c920b1
Fr tho
spalmurray Jul 15, 2025
a0b7824
Tweak copy
spalmurray Jul 15, 2025
f297c9b
Revert verbose
spalmurray Jul 15, 2025
efa0405
Add link to overview tab
spalmurray Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/pages/RepoPage/CoverageTab/FlagsTab/subroute/FlagsTable/FlagsTable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ describe('FlagsTable', () => {
const flags = await screen.findByText('Flags')
expect(flags).toBeInTheDocument()

const coverage = await screen.findByText('Coverage %')
const coverage = await screen.findByText('Average coverage %')
expect(coverage).toBeInTheDocument()

const trend = await screen.findByText('Trend')
Expand Down
27 changes: 26 additions & 1 deletion src/pages/RepoPage/CoverageTab/FlagsTab/subroute/FlagsTable/FlagsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import A from 'ui/A'
import CoverageProgress from 'ui/CoverageProgress'
import Icon from 'ui/Icon'
import Spinner from 'ui/Spinner'
import { Tooltip } from 'ui/Tooltip'

import DeleteFlagModal from './DeleteFlagModal'
import useRepoFlagsTable from './hooks'
Expand All @@ -38,7 +39,31 @@ const columns = [
cell: ({ renderValue }) => renderValue(),
}),
columnHelper.accessor('coverage', {
header: () => 'Coverage %',
header: () => (
<div className="flex items-center gap-1">
Average coverage %
<Tooltip delayDuration={0} skipDelayDuration={100}>
<Tooltip.Root>
<Tooltip.Trigger>
<div className="text-ds-gray-tertiary dark:text-ds-gray-quinary">
<Icon name="informationCircle" size="sm" />
</div>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
side="right"
className="w-64 rounded-md bg-ds-gray-primary p-3 text-xs text-ds-gray-octonary"
>
This is the average flag coverage over the selected time period.
To view current coverage % for a given flag, navigate to the
Overview tab and filter by flag.
Copy link
Contributor

@adrianviquez adrianviquez Jul 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional, not sure if a link to the overview tab would be helpful here

Copy link
Contributor Author

@spalmurray spalmurray Jul 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably

<Tooltip.Arrow className="size-4 fill-gray-100" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip>
</div>
),
cell: ({ renderValue }) => renderValue(),
enableSorting: false,
}),
Expand Down