fix(scorecard): fix tooltip display and error title clipping for some languages

[Eswaraiahsapram]

User description

Hey, I just made a Pull Request!

Fixes

• https://issues.redhat.com/browse/RHDHBUGS-2679
• https://issues.redhat.com/browse/RHDHBUGS-2677

Description

This PR addresses two issues affecting Scorecard metric cards:

• The error title "Metric data unavailable" was partially truncated in certain locales (e.g., Spanish and French). The layout has been updated to ensure the full text is visible across supported languages.
• The hover target has been expanded to cover the entire donut chart area for homepage aggregated KPIs when in error states (Error, Missing Permission, or No Data), as well as on the Entity Overview page. This ensures consistent tooltip triggering and improved usability.

Screenshots

Entity overview page - French

Homepage - French

Screen recording

Screen.Recording.2026-02-19.at.11.30.37.AM.mov

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

---

PR Type

Bug fix

---

Description

• Fix tooltip display positioning and error title text clipping

• Refactor center label rendering into reusable component

• Improve error state handling with dynamic text layout

• Replace custom tooltip with new ErrorTooltip component

• Reorder translation keys for consistency

---

Diagram Walkthrough

flowchart LR
  A["Scorecard Component"] -->|uses| B["ScorecardCenterLabel"]
  A -->|uses| C["ErrorTooltip"]
  D["EmptyStatePanel"] -->|uses| C
  D -->|uses| E["ResponsivePieChart"]
  E -->|uses| C
  B -->|handles| F["Dynamic Text Layout"]
  C -->|displays| G["Positioned Tooltip"]

Loading

File Walkthrough

	Relevant files
Configuration changes	report-alpha.api.md Reorder translation keys for consistency                                  workspaces/scorecard/plugins/scorecard/report-alpha.api.md Reordered translation keys for emptyState section Reordered translation keys for permissionRequired section Reordered translation keys for thresholds section +3/-3
Enhancement	ErrorTooltip.tsx New ErrorTooltip component for error display                          workspaces/scorecard/plugins/scorecard/src/components/Common/ErrorTooltip.tsx New component for displaying positioned error tooltips Uses Material-UI Tooltip with absolute positioning Accepts title and tooltip position as props Provides hidden anchor element for tooltip placement +40/-0    ResponsivePieChart.tsx Add error state tooltip triggering mechanism                          workspaces/scorecard/plugins/scorecard/src/components/ScorecardHomepageSection/ResponsivePieChart.tsx Add coordinate property to PieTooltipContentProps interface Add isErrorState and setIsInsidePieCircle props Implement transparent circle overlay for error state tooltip triggering Add mouse event handlers to Pie component for hover detection Enable coordinate-based tooltip positioning +32/-0
Bug fix	Scorecard.tsx Refactor tooltip and error label rendering logic                  workspaces/scorecard/plugins/scorecard/src/components/Scorecard/Scorecard.tsx Extract center label rendering into ScorecardCenterLabel component Add dynamic text layout calculation for error states Implement transparent circle overlay for tooltip triggering Replace MuiTooltip with new ErrorTooltip component Add state management for pie area hover detection Improve error label positioning with useLayoutEffect +198/-74 EmptyStatePanel.tsx Update tooltip handling and add hover states                          workspaces/scorecard/plugins/scorecard/src/components/ScorecardHomepageSection/EmptyStatePanel.tsx Replace CustomTooltip with ErrorTooltip component Add mouse event handlers to CenterLabel for hover detection Add state management for label hover and pie circle detection Update tooltip content rendering with coordinate-based positioning Add cursor: pointer style to label for better UX +32/-9

---

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
app	workspaces/scorecard/packages/app	none	v0.0.0
@red-hat-developer-hub/backstage-plugin-scorecard	workspaces/scorecard/plugins/scorecard	patch	v2.3.5

[rhdh-qodo-merge]

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
🟢	No codebase code duplication found New Components Detected: - ErrorTooltip - getYOffset - getHeight
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	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: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation 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: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities 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: Error detail exposure: The UI tooltip displays raw metricDataError/thresholdError strings which may include internal implementation details depending on the upstream error source. Referred Code let errorTooltipTitle: string | undefined; if (isMetricDataError) { errorTooltipTitle = metricDataError; } else if (isThresholdError) { errorTooltipTitle = thresholdError; } else { errorTooltipTitle = undefined; } if (!isPieAreaActive || coordinate === undefined) return null; return ( <ErrorTooltip title={errorTooltipTitle} tooltipPosition={{ x: coordinate.x - 25, y: coordinate?.y - 16, }} /> Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

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

[rhdh-qodo-merge]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Improve text clipping fix for robustness Replace the switch statements in getYOffset and getHeight with dynamic calculations based on lineCount to robustly handle error messages of any length and prevent text clipping. workspaces/scorecard/plugins/scorecard/src/components/Scorecard/Scorecard.tsx [83-103] const getYOffset = (lineCount: number) => { - switch (lineCount) { - case 2: - return -17; - case 3: - return -24; - default: - return -8; - } + // Base offset for 1 line is -8. Each additional line shifts it up. + // The shift per line is not constant, but we can approximate from the pattern. + // For 1->2 lines, diff is -9. For 2->3 lines, diff is -7. + // Let's use an average or a calculation based on line height. + // A simpler formula that fits the pattern: + if (lineCount <= 1) return -8; + if (lineCount === 2) return -17; + return -17 - (lineCount - 2) * 8; // -24 for 3 lines, -32 for 4, etc. }; const getHeight = (lineCount: number) => { - switch (lineCount) { - case 2: - return 48; - case 3: - return 56; - default: - return 40; - } + // Height for 1 line is 40. Each additional line adds 8px. + return 40 + Math.max(0, lineCount - 1) * 8; }; Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies that the hardcoded switch statements are a brittle fix and proposes a more robust, dynamic calculation that better aligns with the PR's goal of preventing text clipping.	Low
	Prevent potential runtime error in event handler Use optional chaining for e.stopPropagation() in the onMouseLeave handler to match the onMouseEnter handler, preventing potential runtime errors and ensuring consistency. workspaces/scorecard/plugins/scorecard/src/components/ScorecardHomepageSection/ResponsivePieChart.tsx [82-89] onMouseEnter={e => { setIsInsidePieCircle?.(true); e.stopPropagation?.(); }} onMouseLeave={e => { setIsInsidePieCircle?.(false); - e.stopPropagation(); + e.stopPropagation?.(); }} Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly points out an inconsistency and potential runtime error, proposing a simple change to improve code robustness and consistency, which is a good practice.	Low
Update

[HusneShabbir]

/lgtm, works as expected

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud