Integrate Flaky Badge & Tooltip into Specs List

[mike-plummer]

https://www.figma.com/file/DgeFrhaX8N9ufrzvxzLnPg/app-cloud-int%3A-flake-tooltip?node-id=2456%3A49923

Display Flaky Badge & Tooltip as inline row data within Specs Explorer list

Work Items

1. Combine Flaky Badge and Flaky Badge tooltip content into a component that can be rendered as an actionable popper
2. Update Spec List props & data flow to determine whether to render flaky indicator (see Integrate new Flaky API data via GQL #22656)
3. Display flaky badge when spec row is indicated as flaky
4. Ensure offline state is handled (no errors when cloud data not available)

Acceptance Criteria

1. Validate accessibility and keyboard navigation
2. Validate contrast, spacing, and responsiveness at smaller viewport widths
3. Flaky badge is only displayed for flaky spec rows
4. Tooltip displays on hover of badge and displays appropriate content
5. Badge & tooltip update accordingly when cloud recordings update (including hiding/showing badge dynamically as flaky status changes)
6. Badge and tooltip are both navigable - take user to flaky portion of dashboard
7. Component and E2E tests are updated to validate behavior for non-flaky and flaky spec combinations

[baus]

Hey team! Please add your planning poker estimate with ZenHub @astone123 @lmiller1990 @marktnoonan @mike-plummer @ZachJW34

[mike-plummer]

Resolved by #23049

[cypress-bot]

Released in 10.5.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.5.0, please open a new issue.