refactor(admin): shadcn component migration and sonner toasts across admin - #225
Merged
Conversation
cl8dep
marked this pull request as ready for review
July 25, 2026 15:41
Migrate the checks pages (list, detail, form, logs) to shared shadcn primitives and extract inline JSX into one-component-per-file units, following the project conventions. - ChecksPage: unified stats bar, PageHeader, PageContainer; extract ChecksStatsBar/Table/SearchBar (+ skeletons); human-readable check type via useCheckTypeLabel; navigable service name. - CheckDetailPage: extract GeneralSettingsSection and ConfigurationSection; ConfigurationSection uses react-hook-form (useWatch) so Save disables until dirty; PageContainer + normalized export default. - CheckFormPage: useCheckTypes hook, useWatch instead of watch, seed config in useEffect (not during render), extract CheckTypeSelect. - CheckLogsPage: shadcn Table/Select/Pagination/Empty; extract LogsTable/Filters/Pagination (+ skeleton); PageHeader breadcrumbs; reuse AutoRefreshButton in RecentLogsActions. - Add useCheckTypes/useCheckTypeMeta/useCheckTypeLabel hooks; dedupe the CHECK_TYPES query across pages and ChecksSection. - Add reusable PageContainer component. - Reorganize features/checks/components into list/form/detail/logs/shared subfolders.
…imitives Apply the same refactor pass to the alerts feature. - AlertsPage: normalize export default, empty state via shadcn Empty, wrap in PageContainer. - AlertDetailPage: reduce to an orchestrator — extract AlertField, AlertStatusActions, AlertOverviewSection, AlertTriggerCriteriaSection, AlertIncidentSection, EscalationLogsTable, and AttachIncidentDialog; migrate the native escalation-logs table to shadcn Table (+ Empty) and the status pills to shadcn Badge; wrap in PageContainer. - Add useFormattedDate().formatDateTimeOrDash to replace the duplicated nullish-to-em-dash formatDate helper in both pages.
… primitives Apply the same refactor pass to the incidents feature (4 pages). - Shared: IncidentStatusBadge (dedupes the tripled STATUS_BADGE map via shadcn Badge), incidentTimeline helpers (SYSTEM_EVENT_ICON + describeSystemEvent, previously duplicated in Detail and Timeline), and an IncidentField label/control wrapper. - IncidentsPage: shadcn Pagination, TableSkeleton, Empty, Badge, PageContainer; fix the status filter showing the raw value instead of its label. - IncidentTimelinePage: status/visibility pills -> Badge, Empty, PageContainer, shared timeline helpers. - IncidentFormPage: extract IncidentField, use shared IMPACT_OPTIONS, shadcn Checkbox, move toDateTimeLocalValue to @/utils/date, PageContainer. - IncidentDetailPage (623 -> ~310 lines): extract IncidentStatusActions, IncidentTitleCard, IncidentTimelineSection, PostUpdateDialog, IncidentImpactSection, IncidentVisibilitySection; native checkbox -> shadcn Checkbox; both native confirm() calls -> WarningConfirmDialog. - Add shadcn Checkbox primitive; normalize export default across pages.
…dcn primitives Apply the same refactor pass to the maintenances feature (3 pages). - Shared: MaintenanceStatusBadge (dedupes the STATUS_BADGE map via shadcn Badge, fixes the raw indigo colors that broke dark mode) and maintenanceHelpers (isOneTime, formatMaintenanceDuration). - MaintenancesPage: native table -> shadcn Table, native select -> Select, hand-rolled pagination -> Pagination, add PageHeader + PageContainer, TableSkeleton, tokenized hardcoded gray/indigo colors; richer Empty state with icon, filter-aware copy, and a New action. - MaintenanceFormPage: hand-rolled breadcrumb -> PageHeader, hand-rolled toggle -> Switch, native radios -> RadioGroup, native checkboxes -> Checkbox, buttons -> FormActions, extract MaintenanceField, move toDateTimeLocalValue usage to @/utils/date, PageContainer. - MaintenanceDetailPage: PageContainer, shared MaintenanceStatusBadge, shared isOneTime. - Add shadcn RadioGroup primitive; normalize export default across pages.
Replace the plain 'No incidents found' text with a full shadcn Empty: Siren icon, filter-aware title/description (active / all / a specific status), and a New Incident action.
Apply the refactor pass to the on-call feature (2 pages). - Shared: apiErrorMessage util (deduped from the detail page + GeneralSettingsSection), scheduleRange helpers with a UTC range formatter (formatUtcDate in @/utils/date, replacing a raw toLocaleDateString in fmtRange), a member-color constants module, and a ScheduleCoverageBadge. - OnCallSchedulesPage: extract CreateScheduleModal onto shadcn Dialog with Input/Textarea/Button; richer Empty state; PageContainer; export default at bottom. - OnCallScheduleDetailPage (460 -> ~300 lines): extract ScheduleRangeToolbar, StagedOverridesList; status pill -> ScheduleCoverageBadge; native buttons -> Button; PageContainer with Empty for the not-found state; fmtRange via the UTC formatter. - Normalize AddLayerModal/AddOverrideModal (props not destructured inline) and route the member fallback color through the shared const.
sonner (the shadcn toast) was already the dominant toast system and its Toaster was mounted alongside react-toastify's ToastContainer. Finish the migration and drop toastify entirely. - Switch the remaining toast imports to sonner across alerts, escalation, on-call, configuration and notification-subscriptions. The severity API (toast.success/error/warning) is identical, so call sites are unchanged. - Delete the unused src/utils/toastify.ts helper (no callers). - Remove the ToastContainer from App.tsx (only the sonner Toaster remains). - Drop the react-toastify dependency.
The header already showed an on-call Siren icon, but only after the body banner was dismissed. Remove the banner and show the icon whenever the user is on-call, so there's a single, unobtrusive indicator. - Delete OnCallNowBanner and its useOnCallNowDismissal hook (dead once the banner is gone). - AdminLayout: showOnCallIcon is now driven purely by current on-call status; the Siren + tooltip in the header is the only indication.
Match the incidents/maintenances treatment: replace the plain 'No alerts recorded yet' text with a full shadcn Empty — BellRing icon, filter-aware title/description (no results vs. no alerts). No action button, since alerts are system-generated, not user-created.
cl8dep
force-pushed
the
refactor/admin-checks-shadcn
branch
from
July 25, 2026 15:44
bf9195f to
77ae0bb
Compare
cl8dep
added a commit
that referenced
this pull request
Jul 25, 2026
refactor(admin): shadcn component migration and sonner toasts across admin
cl8dep
added a commit
that referenced
this pull request
Jul 27, 2026
refactor(admin): shadcn component migration and sonner toasts across admin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A broad refactor of the admin panel toward shadcn primitives and a consistent component structure. It audits the checks, alerts, incidents, maintenances, and on-call features page by page, extracts inline JSX into one-component-per-file pieces under each feature's
components/folder, and standardizes on shadcn UI primitives. It also replaces react-toastify with sonner across the whole app and adds richer empty states to the incidents and alerts lists.No behavior or API changes: this is a structural and visual refactor of existing admin screens.
Changes
toastifyutil and the on-call-now dismissal hook that is no longer needed.apiError,date,useFormattedDatetweaks.Testing
pnpm exec tsc -bpasses inapps/adminScreenshots
UI refactor across several admin screens. Please drag before/after images of the main touched pages (checks, alerts, incidents, maintenances, on-call schedules) into this section.
Suggested captions:
Checklist
.env/appsettings.*.jsonvalues committed