Add data-testids to UI elements in Device areas

[talhil-rh]

Summary

This PR introduces stable data-testid hooks across device-related screens and shared form/event components. These hooks enable reliable element targeting for Cypress (and similar tools), eliminating the need for brittle CSS or text-based selectors.

Motivation

End-to-end tests require consistent and predictable selectors for key UI elements such as:

Tabs and tables
Terminal states
Events UI
Approve-device flows

This change ensures test stability by wiring data-testid attributes through existing components without altering any behavior.

Changes
Device Details
Added data-testid to all device details tabs:
device-details-tab-details
device-details-tab-catalog
device-details-tab-yaml
device-details-tab-terminal
device-details-tab-events
Terminal
device-terminal-loading — shown during connecting state
device-terminal-panel — terminal container
Devices List
decommissioned-devices-table — decommissioned devices table
device-update-status-${rowIndex} — update status cell per enrolled device row
Events (Device Context)
events-type-filter-toggle — filter toggle
Filter options:
events-filter-option-all-types
events-filter-option-normal
events-filter-option-warning
device-events-list — events list body
Forms
TextInput (via TextField / RichValidationTextField) uses:
data-testid={fieldId} where applicable
Validation trigger:
${fieldId}-validation-button
Disabled rich-validation fallback:
rich-validation-field-${fieldName}
Approve Device Modal
approve-device-form-cancel — Cancel action

Summary by CodeRabbit

• Tests
  • Added test identifiers to device details tabs (details, catalog, YAML, terminal, events), device tables, event filters, text input fields, and device approval form components to enhance automated testing capabilities across the UI.

[coderabbitai]

Walkthrough

The pull request adds data-testid attributes to UI components across the device management and form sections to improve test targeting. No functional logic or control flow is modified.

Changes

Cohort / File(s)	Summary
Device Details Components libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx, libs/ui-components/src/components/Device/DeviceDetails/TerminalTab.tsx	Added data-testid attributes to Tab components (details, catalog, yaml, terminal, events) and terminal loading/panel containers for improved test targeting.
Device Table Components libs/ui-components/src/components/Device/DevicesPage/DecommissionedDevicesTable.tsx, libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx	Added data-testid attributes to Table and Td elements for deterministic test selectors on device status and table rows.
Events Display libs/ui-components/src/components/Events/EventsCard.tsx	Added data-testid attributes to type filter MenuToggle, filter SelectOptions (all-types, normal, warning), and events list CardBody container.
Form Components libs/ui-components/src/components/form/TextField.tsx, libs/ui-components/src/components/form/RichValidationTextField.tsx	Added data-testid attributes to TextInput elements and validation Button in RichValidationTextField, with deterministic identifiers based on field names and IDs.
Modal Components libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx	Added data-testid="approve-device-form-cancel" to the Cancel button in the approval form.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main change: adding data-testid attributes across Device area UI components for testing purposes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx (1)

97-97: Prefer identity-based test id instead of rowIndex.

Line 97 ties the selector to row order, which may change and reduce test stability. Consider anchoring to device identity (for example, deviceName).

Suggested update

-        <Td dataLabel={t('Update status')} data-testid={`device-update-status-${rowIndex}`}>
+        <Td dataLabel={t('Update status')} data-testid={`device-update-status-${deviceName}`}>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx`
at line 97, The test id for the update status cell is currently tied to rowIndex
which is brittle; update EnrolledDeviceTableRow so the Td with
data-testid={`device-update-status-${rowIndex}`} uses a stable device identity
instead (e.g., data-testid={`device-update-status-${deviceName}`} or
`device-update-status-${deviceId}`) by referencing the component prop/field
(deviceName or deviceId) used elsewhere in the component; ensure you
sanitize/slugify the name if needed to produce a valid id.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx`:
- Line 97: The test id for the update status cell is currently tied to rowIndex
which is brittle; update EnrolledDeviceTableRow so the Td with
data-testid={`device-update-status-${rowIndex}`} uses a stable device identity
instead (e.g., data-testid={`device-update-status-${deviceName}`} or
`device-update-status-${deviceId}`) by referencing the component prop/field
(deviceName or deviceId) used elsewhere in the component; ensure you
sanitize/slugify the name if needed to produce a valid id.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: af95b16b-8274-4396-918b-b50b254b70ab

📥 Commits

Reviewing files that changed from the base of the PR and between dfd1a5e and f4b550c.

📒 Files selected for processing (8)

• libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx
• libs/ui-components/src/components/Device/DeviceDetails/TerminalTab.tsx
• libs/ui-components/src/components/Device/DevicesPage/DecommissionedDevicesTable.tsx
• libs/ui-components/src/components/Device/DevicesPage/EnrolledDeviceTableRow.tsx
• libs/ui-components/src/components/Events/EventsCard.tsx
• libs/ui-components/src/components/form/RichValidationTextField.tsx
• libs/ui-components/src/components/form/TextField.tsx
• libs/ui-components/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx