refactor(ui-react): decompose DeviceDetails into focused sub-components

[luannmoreira]

Summary

• DeviceDetails.tsx was 816 lines, mixing device info display, tag CRUD, rename, custom fields, and delete modal in one file
• Extract four sub-components under src/pages/devices/:
  • InfoItem — reusable <dt>/<dd> display row with optional clipboard copy
  • TagsSection — tag CRUD (max 3, alphanumeric 3–255 chars), aria-label on add/remove buttons, no pattern=
  • RenameSection — inline rename with Enter=save / Escape=cancel
  • CustomFieldsSection — key-value pairs with inline confirm-to-delete
• Replace the inline delete modal with ConfirmDialog (tracks its own deleteError state, clears on re-open)
• DeviceDetails.tsx drops from 816 → 444 lines

Test plan

• Open any device in the device list → verify name, tags, custom fields, and all detail rows render correctly
• Rename a device (click pencil → type → Enter) → confirm the new name appears
• Add and remove tags → confirm 3-tag limit and alphanumeric validation
• Add and remove custom fields → confirm inline delete confirmation works
• Delete a device → confirm the ConfirmDialog shows, delete succeeds, and navigates to /devices
• Delete a device with a network error → confirm the error message appears in the dialog without closing it
• Run npx vitest run — all 1904 tests pass

[github-actions]

Claude finished @luannmoreira's task in 1m 3s —— View job

---

Code Review Complete

Reviewed 5 files across code quality, security, testing, language patterns, and architecture — no issues found. The code looks good as-is.

The decomposition is clean: sub-components faithfully reproduce the original inline logic, permission checks are preserved in each extracted component, all imports resolve correctly, and existing integration tests continue to cover the extracted behavior. The switch to ConfirmDialog for the delete modal is a nice improvement that reuses an existing shared component with proper error handling.

Minor note (non-blocking)

The LABEL Tailwind class string is now duplicated across 4 files (DeviceDetails.tsx, InfoItem.tsx, TagsSection.tsx, CustomFieldsSection.tsx). Consider extracting it to a shared constants file (e.g. pages/devices/styles.ts) in a follow-up to keep the style in sync — but this is purely a maintenance convenience, not a correctness issue.

---

If you push additional changes and want a new review, tag @shellhub-io/admin and a team member can trigger it.

[otavio]

/review

[github-actions]

Claude finished @otavio's task in 2s —— View job

---

Code Review Complete

Reviewed 5 files across code quality, security, testing, language patterns, and architecture — no issues found. The code looks good as-is.

The decomposition is clean: sub-components faithfully reproduce the original inline logic, permission checks (useHasPermission) are preserved in each extracted component, all imports resolve correctly, and existing integration tests in DeviceDetails.test.tsx continue to cover the extracted behavior. The switch to ConfirmDialog for the delete modal properly uses the shared component's errorMessage prop for inline error display.

---

If you push additional changes and want a new review, tag @shellhub-io/admin and a team member can trigger it.