@checkstack/incident-frontend 0.3.10 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @checkstack/incident-frontend
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [090143b]
+  - @checkstack/ui@0.5.1
+  - @checkstack/dashboard-frontend@0.3.11
+  - @checkstack/auth-frontend@0.5.6
+
+## 0.4.0
+
+### Minor Changes
+
+- cce5453: Add notification suppression for incidents
+
+  - Added `suppressNotifications` field to incidents, allowing active incidents to optionally suppress health check notifications
+  - When enabled, health status change notifications will not be sent for affected systems while the incident is active (not resolved)
+  - Mirrors the existing maintenance notification suppression pattern
+  - Added toggle UI in the IncidentEditor dialog
+  - Added `hasActiveIncidentWithSuppression` RPC endpoint for service-to-service queries
+
+### Patch Changes
+
+- 223081d: Add icon support to PageLayout and improve mobile responsiveness
+
+  **PageLayout Icons:**
+
+  - Added required `icon` prop to `PageLayout` and `PageHeader` components that accepts a Lucide icon component reference
+  - Icons are rendered with consistent `h-6 w-6 text-primary` styling
+  - Updated all page components to include appropriate icons in their headers
+
+  **Mobile Layout Improvements:**
+
+  - Standardized responsive padding in main app shell (`p-3` on mobile, `p-6` on desktop)
+  - Added `CardHeaderRow` component for mobile-safe card headers with proper wrapping
+  - Improved `DateRangeFilter` responsive behavior with vertical stacking on mobile
+  - Migrated pages to use `PageLayout` for consistent responsive behavior
+
+- Updated dependencies [cce5453]
+- Updated dependencies [223081d]
+  - @checkstack/incident-common@0.4.0
+  - @checkstack/ui@0.5.0
+  - @checkstack/auth-frontend@0.5.5
+  - @checkstack/dashboard-frontend@0.3.10
+
 ## 0.3.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/incident-frontend",
-  "version": "0.3.10",
+  "version": "0.4.1",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/components/IncidentEditor.tsx

@@ -57,6 +57,7 @@ export const IncidentEditor: React.FC<Props> = ({
   const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(
     new Set(),
   );
+  const [suppressNotifications, setSuppressNotifications] = useState(false);
 
   // Status update fields
   const [updates, setUpdates] = useState<IncidentUpdate[]>([]);
@@ -105,11 +106,13 @@ export const IncidentEditor: React.FC<Props> = ({
       setDescription(incident.description ?? "");
       setSeverity(incident.severity);
       setSelectedSystemIds(new Set(incident.systemIds));
+      setSuppressNotifications(incident.suppressNotifications);
     } else {
       setTitle("");
       setDescription("");
       setSeverity("major");
       setSelectedSystemIds(new Set());
+      setSuppressNotifications(false);
       setUpdates([]);
       setShowUpdateForm(false);
     }
@@ -143,6 +146,7 @@ export const IncidentEditor: React.FC<Props> = ({
         title,
         description: description || undefined,
         severity,
+        suppressNotifications,
         systemIds: [...selectedSystemIds],
       });
     } else {
@@ -150,6 +154,7 @@ export const IncidentEditor: React.FC<Props> = ({
         title,
         description,
         severity,
+        suppressNotifications,
         systemIds: [...selectedSystemIds],
       });
     }
@@ -253,6 +258,31 @@ export const IncidentEditor: React.FC<Props> = ({
                 {selectedSystemIds.size} system(s) selected
               </p>
             </div>
+
+            {/* Notification Suppression Toggle */}
+            <div className="border rounded-md p-4 bg-muted/30">
+              <div
+                className="flex items-center gap-3 cursor-pointer"
+                onClick={() => setSuppressNotifications(!suppressNotifications)}
+              >
+                <Checkbox
+                  id="suppress-notifications"
+                  checked={suppressNotifications}
+                />
+                <div className="flex-1">
+                  <Label
+                    htmlFor="suppress-notifications"
+                    className="cursor-pointer font-medium"
+                  >
+                    Suppress health notifications
+                  </Label>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    When enabled, health status change notifications will not be
+                    sent for affected systems while this incident is active.
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
 
           {/* Status Updates Section - Only show when editing */}

package/src/pages/IncidentConfigPage.tsx

@@ -56,11 +56,11 @@ const IncidentConfigPageContent: React.FC = () => {
   const toast = useToast();
 
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
-    incidentAccess.incident.manage
+    incidentAccess.incident.manage,
   );
 
   const [statusFilter, setStatusFilter] = useState<IncidentStatus | "all">(
-    "all"
+    "all",
   );
   const [showResolved, setShowResolved] = useState(false);
 
@@ -84,7 +84,7 @@ const IncidentConfigPageContent: React.FC = () => {
   } = incidentClient.listIncidents.useQuery(
     statusFilter === "all"
       ? { includeResolved: showResolved }
-      : { status: statusFilter, includeResolved: showResolved }
+      : { status: statusFilter, includeResolved: showResolved },
   );
 
   // Fetch systems with useQuery
@@ -205,6 +205,7 @@ const IncidentConfigPageContent: React.FC = () => {
     <PageLayout
       title="Incident Management"
       subtitle="Track and manage incidents affecting your systems"
+      icon={AlertTriangle}
       loading={accessLoading}
       allowed={canManage}
       actions={

package/src/pages/IncidentDetailPage.tsx

@@ -18,6 +18,7 @@ import { CatalogApi } from "@checkstack/catalog-common";
 import {
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Button,
@@ -54,7 +55,7 @@ const IncidentDetailPageContent: React.FC = () => {
   const toast = useToast();
 
   const { allowed: canManage } = accessApi.useAccess(
-    incidentAccess.incident.manage
+    incidentAccess.incident.manage,
   );
 
   const [showUpdateForm, setShowUpdateForm] = useState(false);
@@ -66,7 +67,7 @@ const IncidentDetailPageContent: React.FC = () => {
     refetch: refetchIncident,
   } = incidentClient.getIncident.useQuery(
     { id: incidentId ?? "" },
-    { enabled: !!incidentId }
+    { enabled: !!incidentId },
   );
 
   // Fetch systems with useQuery
@@ -138,6 +139,7 @@ const IncidentDetailPageContent: React.FC = () => {
     <PageLayout
       title={incident.title}
       subtitle="Incident details and status history"
+      icon={AlertTriangle}
       loading={false}
       allowed={true}
       actions={
@@ -147,7 +149,7 @@ const IncidentDetailPageContent: React.FC = () => {
               navigate(
                 resolveRoute(incidentRoutes.routes.systemHistory, {
                   systemId: sourceSystemId,
-                })
+                }),
               )
             }
           >
@@ -160,12 +162,12 @@ const IncidentDetailPageContent: React.FC = () => {
         {/* Incident Info Card */}
         <Card>
           <CardHeader className="border-b border-border">
-            <div className="flex items-center justify-between">
+            <CardHeaderRow>
               <div className="flex items-center gap-2">
                 <AlertTriangle className="h-5 w-5 text-muted-foreground" />
                 <CardTitle>Incident Details</CardTitle>
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex flex-wrap items-center gap-2">
                 {getIncidentSeverityBadge(incident.severity)}
                 {getIncidentStatusBadge(incident.status)}
                 {canResolve && (
@@ -180,7 +182,7 @@ const IncidentDetailPageContent: React.FC = () => {
                   </Button>
                 )}
               </div>
-            </div>
+            </CardHeaderRow>
           </CardHeader>
           <CardContent className="p-6 space-y-4">
             {incident.description && (
@@ -236,7 +238,7 @@ const IncidentDetailPageContent: React.FC = () => {
         {/* Status Updates Timeline */}
         <Card>
           <CardHeader className="border-b border-border">
-            <div className="flex items-center justify-between">
+            <CardHeaderRow>
               <div className="flex items-center gap-2">
                 <MessageSquare className="h-5 w-5 text-muted-foreground" />
                 <CardTitle>Status Updates</CardTitle>
@@ -251,7 +253,7 @@ const IncidentDetailPageContent: React.FC = () => {
                   Add Update
                 </Button>
               )}
-            </div>
+            </CardHeaderRow>
           </CardHeader>
           <CardContent className="p-6">
             {/* Add Update Form */}

package/src/pages/SystemIncidentHistoryPage.tsx

@@ -12,15 +12,13 @@ import {
 import { CatalogApi, catalogRoutes } from "@checkstack/catalog-common";
 import {
   Card,
-  CardHeader,
-  CardTitle,
   CardContent,
   Badge,
-  LoadingSpinner,
+  PageLayout,
   EmptyState,
   BackLink,
 } from "@checkstack/ui";
-import { AlertTriangle, Clock, ChevronRight } from "lucide-react";
+import { Clock, ChevronRight, AlertTriangle } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 
 const SystemIncidentHistoryPageContent: React.FC = () => {
@@ -35,7 +33,7 @@ const SystemIncidentHistoryPageContent: React.FC = () => {
     refetch: refetchIncidents,
   } = incidentClient.listIncidents.useQuery(
     { systemId, includeResolved: true },
-    { enabled: !!systemId }
+    { enabled: !!systemId },
   );
 
   // Fetch systems with useQuery
@@ -91,36 +89,25 @@ const SystemIncidentHistoryPageContent: React.FC = () => {
     }
   };
 
-  if (loading) {
-    return (
-      <div className="p-12 flex justify-center">
-        <LoadingSpinner />
-      </div>
-    );
-  }
+  // Actions for the page header
+  const headerActions = system && (
+    <BackLink
+      to={resolveRoute(catalogRoutes.routes.systemDetail, {
+        systemId: system.id,
+      })}
+    >
+      Back to {system.name}
+    </BackLink>
+  );
 
   return (
-    <div className="space-y-6 p-6">
+    <PageLayout
+      title={`Incident History${system ? ` - ${system.name}` : ""}`}
+      icon={AlertTriangle}
+      loading={loading}
+      actions={headerActions}
+    >
       <Card>
-        <CardHeader className="border-b border-border">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <AlertTriangle className="h-5 w-5 text-muted-foreground" />
-              <CardTitle>
-                Incident History{system ? ` - ${system.name}` : ""}
-              </CardTitle>
-            </div>
-            {system && (
-              <BackLink
-                to={resolveRoute(catalogRoutes.routes.systemDetail, {
-                  systemId: system.id,
-                })}
-              >
-                Back to {system.name}
-              </BackLink>
-            )}
-          </div>
-        </CardHeader>
         <CardContent className="p-0">
           {incidents.length === 0 ? (
             <EmptyState
@@ -172,10 +159,10 @@ const SystemIncidentHistoryPageContent: React.FC = () => {
           )}
         </CardContent>
       </Card>
-    </div>
+    </PageLayout>
   );
 };
 
 export const SystemIncidentHistoryPage = wrapInSuspense(
-  SystemIncidentHistoryPageContent
+  SystemIncidentHistoryPageContent,
 );