Skip to content

feat: Use names instead of id for component dropdown #3955

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

Draft
calvin-codecov wants to merge 1 commit into
base: main
Choose a base branch
from
+1 −1
Draft

feat: Use names instead of id for component dropdown #3955

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/ComponentsTab/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const Header = ({
})

const componentNames = componentsData?.components?.map(
(component) => component?.id
(component) => component?.name
Comment on lines 47 to +48
Copy link

@sentry sentry bot Nov 25, 2025

Choose a reason for hiding this comment

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

Bug: Type mismatch in MultiSelect component: items are strings, selectedItemsOverride are objects, causing isEqual to fail.
Severity: CRITICAL | Confidence: High

🔍 Detailed Analysis

The MultiSelect component receives an array of strings (component?.name) for its items prop, but an array of Component objects ({name, id}) for its selectedItemsOverride prop. The internal isItemSelected function uses lodash.isEqual to compare these, which returns false when comparing a string (e.g., 'Component 1') with an object (e.g., {name: 'Component 1', id: 'component1'}). This type mismatch prevents correct item selection matching, causing all dropdown items to appear as unselected, leading to visual duplicates and a broken selection UI. A related test in Header.test.tsx will also fail as it expects to find the component's id.

💡 Suggested Fix

Ensure the items prop passed to MultiSelect is an array of Component objects ({name, id}) to match the type of selectedItemsOverride and the onChange handler's expected input. This can be achieved by mapping componentNames to the full Component objects instead of just their name property.

🤖 Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: src/pages/RepoPage/CoverageTab/ComponentsTab/Header/Header.tsx#L47-L48

Potential issue: The `MultiSelect` component receives an array of strings
(`component?.name`) for its `items` prop, but an array of `Component` objects (`{name,
id}`) for its `selectedItemsOverride` prop. The internal `isItemSelected` function uses
`lodash.isEqual` to compare these, which returns `false` when comparing a string (e.g.,
'Component 1') with an object (e.g., `{name: 'Component 1', id: 'component1'}`). This
type mismatch prevents correct item selection matching, causing all dropdown items to
appear as unselected, leading to visual duplicates and a broken selection UI. A related
test in `Header.test.tsx` will also fail as it expects to find the component's `id`.

Did we get this right? 👍 / 👎 to inform future reviews.
Reference ID: 3339232

Copy link

@cursor cursor bot Nov 25, 2025

Choose a reason for hiding this comment

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

Bug: Component filter uses names instead of IDs for API

The change from component?.id to component?.name updates what's displayed in the dropdown, but the selected values are also used for API filtering via updateParams({ components }). The selected names flow to useRepoComponentsTable where they're passed as filters: { components: params?.components } to useRepoComponents. Test data shows id and name are distinct values (e.g., { name: 'foo', id: '1' }). If the GraphQL ComponentMeasurementsSetFilters expects component IDs for filtering, passing names will break the filter functionality. The dropdown needs to display names while still passing IDs for filtering.

Fix in Cursor Fix in Web

)

const value = TimeOptions.find(
Expand Down
Loading