feat(ui): add bulk edit notifications modal and floating action bar to uptime monitors by ashu130698 · Pull Request #3448 · bluewave-labs/Checkmate

ashu130698 · 2026-03-27T17:14:55Z

Changes

This PR implements the frontend user interface for bulk-editing monitor notifications, building seamlessly on the backend work from my previous PR (#3376).

As requested by @gorkem-bwl in the issue thread, this introduces a clean, non-intrusive Floating Action Bar pattern that appears only when multiple monitors are selected in the table, rather than a bulky static "bulk edit" button.

Core components introduced:

FloatingActionBar.tsx: A reusable slide-up bar component.
BulkEditNotificationsModal.tsx: A dialog to select the action (add, remove, set) and query your available notification channels via useGet.
UptimeMonitorsTable.tsx Integration: Safely injected a checkbox column to the generic table headers to handle selection states.
Lifted the selectedMonitors array into the Uptime/Monitors/index.tsx page to sync the bar and table.

(Note: Currently applied to the Uptime Monitors page as an MVP to gather feedback on the design. If approved, I will follow up and apply this exact same logic to the Infrastructure and PageSpeed tables!)

Fixes #2320

gorkem-bwl · 2026-03-27T17:47:05Z

LGTM UI wise.

Can you make sure those margins are the same? (the ones on the right are the right margins):

ajhollid

Visually looks great 👍

There are some UX issues that need to be resolved, and most importantly selection is not cleared on page change.

Please see my comments in the code review and revise as needed, thanks!

ajhollid · 2026-03-27T18:12:30Z

+					left: "50%",
+					transform: "translateX(-50%)",
+					zIndex: theme.zIndex.snackbar,
+					padding: theme.spacing(1.5, 3),


Please use the Utils/Theme/constants util for all spacing values

ajhollid · 2026-03-27T18:19:24Z

+	const handleBulkEditSuccess = () => {
+		setIsBulkEditModalOpen(false);
+		setSelectedMonitors([]);
+		refetch();


What about failure? Modal stays open on failure right now.

This hasn't been addressed yet

ajhollid · 2026-03-27T18:23:40Z

@@ -1,5 +1,6 @@
 import Stack from "@mui/material/Stack";


What about all the other monitor pages? Currently only uptime monitors are bulk editable 🤔

EDIT
I see you addressed this in your PR statement, noted 👍

ajhollid · 2026-03-27T18:26:45Z

+	};
+
+	const handleClearSelection = () => {
+		setSelectedMonitors([]);


This should be called on pagination change too

ajhollid · 2026-03-27T18:27:15Z

+					onClick={() => setIsBulkEditModalOpen(true)}
+				>
+					{t("pages.common.monitors.bulkEdit.editButton", {
+						defaultValue: "Edit Notifications",


No need for defaultValue, please remove all these

ajhollid · 2026-03-27T18:29:58Z

+					<Checkbox
+						checked={monitors.length > 0 && selectedMonitors.length === monitors.length}
+						indeterminate={
+							selectedMonitors.length > 0 && selectedMonitors.length < monitors.length
+						}
+						onChange={(e) => {
+							if (e.target.checked) {
+								onSelectAll(monitors.map((m) => m.id));
+							} else {
+								onSelectAll([]);
+							}
+						}}
+						onClick={(e) => e.stopPropagation()}
+					/>
+				),
+				render: (row) => {
+					return (
+						<Checkbox
+							checked={selectedMonitors.includes(row.id)}
+							onChange={() => onSelectMonitor(row.id)}
+							onClick={(e) => e.stopPropagation()}
+						/>
+					);
+				},
+			},


This needs to be adjusted to account for small screen card view:

Please see the table class to see how the cards work on small screens.

…ror alerts, and mobile cards

ashu130698 · 2026-03-28T15:07:39Z

@ajhollid @gorkem-bwl Thank you so much for the detailed review and catching those quirks! I have just pushed an updated commit addressing all of your feedback.

Here is a breakdown of the fixes:

Selection Memory Sink: Pagination state behaves correctly now via a new handleClearSelection() trigger injected safely into page and rows-per-page modification events.
Modal Error Transparency: Integrated a dynamic MUI block inside the bulk-edit modal that gracefully handles usePatch failures, keeping the modal open so users retain their pre-filled selection parameters without hanging ambiguously on a failed spin state.
Spacing Parity: I traced down the discrepancy in padding. I replaced all hardcoded dimensions with Checkmate's globally scaled LAYOUT.MD and LAYOUT.XS constants mapped across the dimensions and internal grouping gaps. It dynamically resolves the UI identically to the 16px constraint in the screenshots.
i18n Housekeeping: Comprehensively audited every newly added component string and cleanly scrubbed all { defaultValue } overrides from t() lookups per your coding guidelines!
Mobile Grid Resizing: Deployed a responsive isSmall boundary (useMediaQuery) in UptimeMonitorsTable.tsx to conditionally swap out the raw checkbox array on smaller viewports. Our small screen cards now render the clean string Selected securely matching your Actions pattern instead of an awkward side-by-side array!

ajhollid

There's an outstanding item from the last review, and two other issues I've noticed

The floating action button doesn't close when the modal opens

and

There doesn't appear to be a "select all" option on mobile, and the checkbox for individual cards should be left aligned, not center aligned.

ajhollid · 2026-03-30T16:45:17Z

+	const handleBulkEditSuccess = () => {
+		setIsBulkEditModalOpen(false);
+		setSelectedMonitors([]);
+		refetch();


This hasn't been addressed yet

…ection state

ashu130698 · 2026-03-30T18:30:24Z

Thanks for the thorough review @ajhollid! I've pushed a new commit that addresses all three issues:

Floating Action Bar: It now properly hides behind a !isBulkEditModalOpen condition so it doesn't stay awkwardly visible when the modal mounts.

Mobile Layout: I updated the underlying

component so that an empty header label allows the row content (like our checkbox) to cleanly expand to size=12 and naturally left-align. I also added a missing "Select All" option explicitly for the mobile card view!

Modal Error Handling: To address the poor UX of the modal staying open on an API failure, I updated the logic so it now always closes the modal upon API completion (whether it succeeds or errors). This way, the user relies on the global error toast for the failure feedback, but their underlying checkbox selection is safely preserved so they can easily click "Edit" and try again!

(Just let me know if you actually preferred the modal to stay open on failure while just handling the error state completely differently—I can easily swap that back if I misunderstood that piece of feedback!)

ajhollid

Almost there!

The Floating action button isn't displaying properly in mobile mode:

This should be centered in the screen, but it is offset to the right and overflowing offscreen

… overflow centering on mobile devices

ashu130698 · 2026-04-02T07:02:34Z

Great catch on the mobile view overflow! The Floating Action Bar's slide animation was unintentionally stripping our CSS transform centering on small screens. I've switched the layout to use auto-margins and pushed the fix—it now centers perfectly on mobile. The PR should be fully good to go now!

ajhollid

Unfortunately, the changes don't seem to solve the issue. In fact it seems to be broken in both mobile and desktop now:

the FAB should be centered in the screen.

…rapper to permanently center floating action bars

ashu130698 · 2026-04-07T10:43:25Z

Thanks for catching this @ajhollid! You're absolutely right - the FAB should be
centered horizontally on the screen, not pushed to the left.

I see the issue now - the margin-based centering approach isn't working reliably
across viewports. I've pushed a commit that replaces the buggy margin logic with
a more reliable flexbox-based approach that centers the component properly on both
mobile and desktop.

Could you please verify that the latest commit fixes the alignment issue on your
end? I'd appreciate your feedback to confirm the positioning looks correct now.

ajhollid

FAB is displaying properly now, but there are issues with the localization file I missed in earlier reviews, please address those and this should be good to merge.

ajhollid · 2026-04-07T16:49:52Z

@@ -1,5 +1,6 @@
 {
 	"common": {
+		"selected": "selected",


This is not the correct structure for a key. Since it is used in a button, let's put it in common.buttons

These strings need to be logically organized or this file becomes unmanageable very quickly.

ajhollid · 2026-04-07T16:52:29Z

+							variant="body2"
+							color="text.secondary"
+						>
+							{t("common.selectAll", "Select All")}


This string does not exist in the translation file:

i18next::translator: missingKey en translation common.selectAll Select All

and if it did it is not in the logically correct location. It should belong to the common monitor strings object, probably as an option in common.monitors.bulkEdit

…notifications

ashu130698 · 2026-04-08T06:30:51Z

Thanks again @ajhollid! You were totally right—the translation file needed to be properly structured before it got unmanageable.

I've successfully migrated the selected key into common.buttons.selected and added the missing selectAll string exactly where you requested in pages.common.monitors.bulkEdit. I also updated all the React components to properly fetch from this new nested structure.

Everything should be tightly organized and good to go now! Thanks for taking the time to catch these.

ashu130698 · 2026-04-21T18:00:20Z

@ajhollid - Just wanted to follow up! I've implemented all your suggestions. Would appreciate another review when you get a moment. Thanks!

ashu130698 added 2 commits March 25, 2026 22:45

feat: add table row selection and floating action bar MVP

79ea812

feat: added bulk edit notification UI to uptime monitors

872e4fb

ashu130698 requested review from Br0wnHammer, Owaiseimdad, ajhollid and karenvicent as code owners March 27, 2026 17:14

fix: corrected TypeScript notification property name

c4c6b1d

ajhollid requested changes Mar 27, 2026

View reviewed changes

fix(monitors): PR feedback -layout rhythm, pagination memory leak, er…

1d5b9cc

…ror alerts, and mobile cards

ashu130698 added 2 commits March 28, 2026 23:17

fix(monitors): add missing page prop to MonitorTable

a035384

fix(monitors): remove select label duplication on mobile card views

138e358

ajhollid requested changes Mar 30, 2026

View reviewed changes

fix(monitors): address PR feedback on mobile card views and modal sel…

9a3e55f

…ection state

style: fix code format issues

ca0cbfc

ajhollid requested changes Apr 1, 2026

View reviewed changes

fix(ux): replace overwritten transform on floating action bars to fix…

6c6db8c

… overflow centering on mobile devices

ajhollid requested changes Apr 2, 2026

View reviewed changes

fix(ux): replace buggy margin-based centering with reliable flexbox w…

c3e82e2

…rapper to permanently center floating action bars

ajhollid requested changes Apr 7, 2026

View reviewed changes

fix(i18n): migrate and insert missing translation keys for bulk edit …

772772e

…notifications

Uh oh!

Conversation

ashu130698 commented Mar 27, 2026

Changes

Uh oh!

gorkem-bwl commented Mar 27, 2026

Uh oh!

ajhollid left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ajhollid Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashu130698 commented Mar 28, 2026

Uh oh!

ajhollid left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashu130698 commented Mar 30, 2026

Uh oh!

ajhollid left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashu130698 commented Apr 2, 2026

Uh oh!

ajhollid left a comment

Choose a reason for hiding this comment

Uh oh!

ashu130698 commented Apr 7, 2026

Uh oh!

ajhollid left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashu130698 commented Apr 8, 2026

Uh oh!

ashu130698 commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ajhollid Mar 27, 2026 •

edited

Loading

ajhollid left a comment •

edited

Loading

ajhollid left a comment •

edited

Loading