refactor(ui-react): extract shared Alert component

[luannmoreira]

What

Added a shared Alert primitive to src/components/common/Alert.tsx and replaced 27 duplicated inline alert blocks across 22 files with it.

Why

Every page that needed to show an error, warning, or status message implemented its own <div> with duplicated Tailwind classes, icon imports, and inconsistent (or missing) ARIA attributes. Several success alerts used role="alert" when they should use role="status", and several others had no live-region semantics at all.

Changes

• Alert.tsx: supports error | success | warning | info variants. Each variant maps to a colour token, icon, role, and aria-live value — error/warning use role=alert/assertive, success/info use role=status/polite. Accepts an optional onDismiss callback that renders a dismiss button with type="button" and aria-label="Dismiss alert". className is for layout overrides only (margins, display).

• 22 consumer files: removed per-file ExclamationCircleIcon, CheckCircleIcon, and ExclamationTriangleIcon imports that existed solely to serve the inline alert block. Icons retained where they are used elsewhere in the file (e.g. ExclamationCircleIcon in MfaResetComplete for the expired-token error page, ExclamationTriangleIcon in Sessions for the table decorator).

• Alert.test.tsx: 33 tests covering variant classes (bg/border/text), ARIA role and aria-live per variant, icon count, dismiss button presence/absence/click/type, className passthrough, and base layout classes.

Testing

./bin/docker-compose exec ui-react sh -c 'cd /src/apps/console && npx vitest run'
./bin/docker-compose exec ui-react sh -c 'cd /src/apps/console && npx tsc --noEmit'
./bin/docker-compose exec ui-react sh -c 'cd /src/apps/console && npx eslint src/'
./bin/docker-compose exec ui-react npm run build

All pass. Two visual edge cases worth checking in the browser:

• /signup?email=test@example.com&sig=fakesig — invite warning (was items-start/py-3/rounded-lg; now standardised to items-center/py-2.5/rounded-md)
• /profile → MFA → Disable → wrong OTP — error alert now includes animate-slide-down which the original block lacked

[github-actions]

Claude finished @luannmoreira's task in 9m 39s —— View job

---

Code Review Complete

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

The Alert component is well-structured: clean variant config pattern, proper ARIA semantics (role="alert"/"status" with matching aria-live), optional dismiss callback with correct type="button", and className for layout overrides. The 197-line test suite covers all variants, roles, content rendering, icon presence, dismiss behavior, and class passthrough. The 22 consumer migrations are faithful replacements of the previous inline markup — and several pages gain ARIA roles they were previously missing.

Note on merge: this branch was created before 39ed6aa landed on master. A rebase before merge will avoid any conflicts with the encoding utility changes on master.

---

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

[gustavosbarreto]

/review

[github-actions]

Claude finished @gustavosbarreto's task in 1m 44s —— View job

---

Code Review Complete

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

The Alert component is well-structured: clean variant config pattern, proper ARIA semantics (role="alert"/"status" with matching aria-live), optional dismiss callback with correct type="button", and className for layout overrides. The 197-line test suite covers all variants, roles, content rendering, icon presence, dismiss behavior, and class passthrough. The 22 consumer migrations are faithful replacements of the previous inline markup — and several pages gain ARIA roles they were previously missing. All retained icon imports in consumer files are confirmed to be used elsewhere in their respective files.

Note on merge: this branch was created before 39ed6aa landed on master. A rebase before merge will avoid any conflicts with the encoding utility changes on master.

---

If you've addressed the feedback and want a new review, tag @shellhub-io/admin and a team member can trigger it.