[CORRUPTED] Synthetic Benchmark PR #102980 - breadcrumbs: remove styled and simplify

[tomerqodo]

User description

Benchmark PR getsentry#102980

Type: Corrupted (contains bugs)

Original PR Title: breadcrumbs: remove styled and simplify
Original PR Description: Simplify breadcrumb component and add amplitude logging.

• Removed optional key prop
• Use layout and text components for styling
• Improve prop types so that null labels cannot be passed to components
• Add amplitude event tracking so we can gauge how many folks interact with our breadcrumbs
  Original PR URL: breadcrumbs: remove styled and simplify getsentry/sentry#102980

---

PR Type

Enhancement, Bug fix

---

Description

• Simplify breadcrumbs component by removing styled-components and using layout/text components

• Remove optional key prop and linkLastItem prop for cleaner API

• Add amplitude analytics tracking for breadcrumb interactions

• Improve prop types to enforce non-null labels and fix prop bleed issues

• Update test selectors to use role-based queries instead of text matching

---

Diagram Walkthrough

flowchart LR
  A["Breadcrumbs Component"] -->|Remove styled| B["Use Layout/Text Components"]
  A -->|Simplify Props| C["Remove key and linkLastItem"]
  A -->|Add Tracking| D["Analytics Events"]
  B -->|Improve Styling| E["Container and Flex Layout"]
  D -->|Track Interactions| F["breadcrumbs.link.clicked"]
  D -->|Track Menu| G["breadcrumbs.menu.opened"]

Loading

File Walkthrough

	Relevant files
Enhancement	8 files breadcrumbs.tsx Refactor breadcrumbs to use layout components                        +70/-90  breadcrumbsAnalyticsEvents.tsx Add breadcrumbs analytics event definitions                            +12/-0    analytics.tsx Register breadcrumbs analytics events                                        +4/-0      buildCompareHeaderContent.tsx Add translations and null-safe labels                                        +3/-3      index.tsx Add analytics tracking to breadcrumb links                              +9/-1      organizationCrumb.tsx Track menu open analytics event                                                    +6/-0      projectCrumb.tsx Track menu open analytics event                                                    +4/-0      teamCrumb.tsx Track menu open analytics event                                                    +6/-0
Documentation	1 files breadcrumbs.stories.tsx Update storybook examples and remove stories                          +8/-22
Miscellaneous	1 files chevron.tsx Remove custom chevron component                                                    +0/-90
Bug fix	2 files landing.tsx Remove key props from breadcrumbs                                                +0/-2      replayDetailsPageBreadcrumbs.tsx Add fallback translation for null project                                +3/-1
Tests	2 files landing.spec.tsx Update test to use role selector                                                  +1/-1      results.spec.tsx Update test to use role selector                                                  +1/-1

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Minimal Audit Data: The new analytics events for breadcrumb interactions are emitted without user or org context (organization is explicitly null), which may limit audit usefulness depending on broader instrumentation. Referred Code function onBreadcrumbLinkClick() { trackAnalytics('breadcrumbs.link.clicked', {organization: null}); } Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing Edge Checks: The breadcrumb click handler and link rendering assume valid to and label props without defensive checks or error handling, which may cause runtime issues if inputs are malformed. Referred Code <BreadcrumbLink to={props.crumb.to} data-test-id="breadcrumb-link" onClick={onBreadcrumbLinkClick} {...styleProps} > <Text ellipsis variant={props.variant}> {props.crumb.label} </Text> </BreadcrumbLink> ) : ( <Text ellipsis variant={props.variant} data-test-id="breadcrumb-item" {...styleProps} > {props.crumb.label} </Text> ); Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Analytics Context: Analytics events are emitted with {organization: null} and no user identifier, which may reflect missing auth/context propagation; verify this does not bypass expected validation/attribution requirements. Referred Code export type BreadcrumbsAnalyticsEventParameters = { 'breadcrumbs.link.clicked': {organization: null}; 'breadcrumbs.menu.opened': {organization: null}; }; Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Fix incomplete analytics event tracking The analytics events for breadcrumb interactions are tracked with organization: null, limiting data usefulness. Update the implementation to pass the actual organization object, which is available in context. Examples: static/app/components/breadcrumbs.tsx [76-78] function onBreadcrumbLinkClick() { trackAnalytics('breadcrumbs.link.clicked', {organization: null}); } static/app/views/settings/components/settingsBreadcrumb/organizationCrumb.tsx [80-84] onOpenChange={open => { if (open) { trackAnalytics('breadcrumbs.menu.opened', {organization: null}); } }} Solution Walkthrough: Before: // in breadcrumbs.tsx function BreadCrumbItem(props) { function onBreadcrumbLinkClick() { trackAnalytics('breadcrumbs.link.clicked', {organization: null}); } // ... } // in some other component e.g. organizationCrumb.tsx function OrganizationCrumb({ ... }) { const organization = useOrganization(); // ... return ( <BreadcrumbDropdown onOpenChange={open => { if (open) { trackAnalytics('breadcrumbs.menu.opened', {organization: null}); } }} // ... /> ); } After: // in breadcrumbs.tsx function BreadCrumbItem(props) { const organization = useOrganization(); function onBreadcrumbLinkClick() { trackAnalytics('breadcrumbs.link.clicked', {organization}); } // ... } // in some other component e.g. organizationCrumb.tsx function OrganizationCrumb({ ... }) { const organization = useOrganization(); // ... return ( <BreadcrumbDropdown onOpenChange={open => { if (open) { trackAnalytics('breadcrumbs.menu.opened', {organization}); } }} // ... /> ); } Suggestion importance[1-10]: 9 __ Why: This suggestion correctly identifies a significant flaw across all new analytics events, where organization: null is passed even when the organization object is available, severely diminishing the value of the collected data.	High
Possible issue	Fix incorrect analytics tracking logic Add a condition to the onOpenChange callback to only track the 'breadcrumbs.menu.opened' analytics event when the menu is opened, not when it is closed. static/app/views/settings/components/settingsBreadcrumb/projectCrumb.tsx [69-71] onOpenChange={open => { - trackAnalytics('breadcrumbs.menu.opened', {organization: null}); + if (open) { + trackAnalytics('breadcrumbs.menu.opened', {organization: null}); + } }} Apply / Chat Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies an analytics bug where an event is fired on both open and close, and provides a fix that is consistent with other similar components in the PR.	Low
General	Avoid repeating the same condition Avoid repeating the index === crumbs.length - 1 condition by storing its result in a variable and reusing it. static/app/components/breadcrumbs.tsx [54-57] -<BreadCrumbItem - crumb={{...crumb, to: index === crumbs.length - 1 ? null : crumb.to}} - variant={index === crumbs.length - 1 ? 'primary' : 'muted'} -/> +const isLast = index === crumbs.length - 1; +return ( + <Fragment key={index}> + <BreadCrumbItem + crumb={{...crumb, to: isLast ? null : crumb.to}} + variant={isLast ? 'primary' : 'muted'} + /> + {!isLast ? ( + <Flex align="center" justify="center" flexShrink={0}> + <IconChevron size="xs" direction="right" color="subText" /> + </Flex> + ) : null} + </Fragment> +); Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion improves code readability and maintainability by extracting a repeated condition into a variable, which is a good practice.	Low
More