UI improvements to the Configure alerts feature

samejr · matt-aitken · commit dc247317a796 · 2026-03-27T16:29:53.000Z
diff --git a/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx b/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
@@ -28,6 +28,7 @@ import type { ErrorAlertChannelData } from "~/presenters/v3/ErrorAlertChannelPre
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { cn } from "~/utils/cn";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
+import { BellAlertIcon } from "@heroicons/react/24/solid";
 
 export const ErrorAlertsFormSchema = z.object({
   emails: z.preprocess((i) => {
@@ -115,7 +116,9 @@ export function ConfigureErrorAlerts({
   return (
     <div className="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden">
       <div className="flex items-center justify-between border-b border-grid-bright px-3 py-2">
-        <Header2>Configure alerts</Header2>
+        <Header2 className="flex items-center gap-2">
+          <BellAlertIcon className="size-5 text-alerts" /> Configure alerts
+        </Header2>
         <LinkButton
           to={closeHref}
           variant="minimal/small"
@@ -128,9 +131,9 @@ export function ConfigureErrorAlerts({
 
       <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <fetcher.Form method="post" action={formAction} {...form.props}>
-          <Fieldset className="flex flex-col gap-3 p-4">
+          <Fieldset className="flex flex-col gap-4 p-4">
             <div className="flex flex-col">
-              <Paragraph variant="small/dimmed">You'll receive alerts when</Paragraph>
+              <Header3>Receive alerts when</Header3>
               <UnorderedList variant="small/dimmed" className="mt-1">
                 <li>An error is seen for the first time</li>
                 <li>A resolved error re-occurs</li>
@@ -140,10 +143,7 @@ export function ConfigureErrorAlerts({
 
             {/* Email section */}
             <div>
-              <Header3 className="mb-3 flex items-center gap-1.5">
-                <EnvelopeIcon className="size-4 text-text-dimmed" />
-                Email
-              </Header3>
+              <Header3 className="mb-1">Email</Header3>
               {emailAlertsEnabled ? (
                 <InputGroup>
                   {emailFields.map((emailField, index) => (
@@ -176,10 +176,7 @@ export function ConfigureErrorAlerts({
 
             {/* Slack section */}
             <div>
-              <Header3 className="mb-3 flex items-center gap-1.5">
-                <SlackIcon className="size-4" />
-                Slack
-              </Header3>
+              <Header3 className="mb-1">Slack</Header3>
               <InputGroup fullWidth>
                 {slack.status === "READY" ? (
                   <>
@@ -284,10 +281,7 @@ export function ConfigureErrorAlerts({
 
             {/* Webhook section */}
             <div>
-              <Header3 className="mb-3 flex items-center gap-1.5">
-                <GlobeAltIcon className="size-4 text-text-dimmed" />
-                Webhook
-              </Header3>
+              <Header3 className="mb-1">Webhook</Header3>
               <InputGroup>
                 {webhookFields.map((webhookField, index) => (
                   <Fragment key={webhookField.key}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx
@@ -25,7 +25,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { formatDateTime, RelativeDateTime } from "~/components/primitives/DateTime";
 import { Header3 } from "~/components/primitives/Headers";
-import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   ComboBox,
@@ -188,7 +188,6 @@ export default function Page() {
   });
 
   const location = useOptimisticLocation();
-  const showAlerts = new URLSearchParams(location.search).has("alerts");
   const alertsHref = useMemo(() => {
     const params = new URLSearchParams(location.search);
     params.set("alerts", "true");
@@ -199,13 +198,6 @@ export default function Page() {
     <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
       <NavBar>
         <PageTitle title="Errors" />
-        <PageAccessories>
-          {!showAlerts && (
-            <LinkButton to={alertsHref} variant="primary/small" LeadingIcon={BellAlertIcon}>
-              Configure alerts
-            </LinkButton>
-          )}
-        </PageAccessories>
       </NavBar>
 
       <PageBody scrollable={false}>
@@ -226,7 +218,11 @@ export default function Page() {
             resolve={data}
             errorElement={
               <div className="grid h-full max-h-full grid-rows-[2.5rem_auto_1fr] overflow-hidden">
-                <FiltersBar defaultPeriod={defaultPeriod} retentionLimitDays={retentionLimitDays} />
+                <FiltersBar
+                  defaultPeriod={defaultPeriod}
+                  retentionLimitDays={retentionLimitDays}
+                  alertsHref={alertsHref}
+                />
                 <div className="flex items-center justify-center px-3 py-12">
                   <Callout variant="error" className="max-w-fit">
                     Unable to load errors. Please refresh the page or try again in a moment.
@@ -242,6 +238,7 @@ export default function Page() {
                     <FiltersBar
                       defaultPeriod={defaultPeriod}
                       retentionLimitDays={retentionLimitDays}
+                      alertsHref={alertsHref}
                     />
                     <div className="flex items-center justify-center px-3 py-12">
                       <Callout variant="error" className="max-w-fit">
@@ -257,6 +254,7 @@ export default function Page() {
                     list={result}
                     defaultPeriod={defaultPeriod}
                     retentionLimitDays={retentionLimitDays}
+                    alertsHref={alertsHref}
                   />
                   <ErrorsList
                     errorGroups={result.errorGroups}
@@ -397,10 +395,12 @@ function FiltersBar({
   list,
   defaultPeriod,
   retentionLimitDays,
+  alertsHref,
 }: {
   list?: ErrorsListData;
   defaultPeriod?: string;
   retentionLimitDays: number;
+  alertsHref: string;
 }) {
   const location = useOptimisticLocation();
   const searchParams = new URLSearchParams(location.search);
@@ -453,7 +453,17 @@ function FiltersBar({
           </>
         )}
       </div>
-      {list && <ListPagination list={list} />}
+      <div className="flex shrink-0 items-center gap-2">
+        <LinkButton
+          to={alertsHref}
+          variant="secondary/small"
+          LeadingIcon={BellAlertIcon}
+          leadingIconClassName="text-alerts"
+        >
+          Configure alerts
+        </LinkButton>
+        {list && <ListPagination list={list} />}
+      </div>
     </div>
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors/route.tsx
@@ -1,17 +1,14 @@
 import { parse } from "@conform-to/zod";
-import { Outlet } from "@remix-run/react";
+import { Outlet, useNavigate } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
+import { useCallback } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PageContainer } from "~/components/layout/AppLayout";
 import {
   ConfigureErrorAlerts,
   ErrorAlertsFormSchema,
 } from "~/components/errors/ConfigureErrorAlerts";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "~/components/primitives/Resizable";
+import { Sheet, SheetContent } from "~/components/primitives/SheetV3";
 import { prisma } from "~/db.server";
 import { ErrorAlertChannelPresenter } from "~/presenters/v3/ErrorAlertChannelPresenter.server";
 import { findProjectBySlug } from "~/models/project.server";
@@ -27,6 +24,7 @@ import {
   type CreateAlertChannelOptions,
   CreateAlertChannelService,
 } from "~/v3/services/alerts/createAlertChannel.server";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { useSearchParams } from "~/hooks/useSearchParam";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -172,26 +170,33 @@ export default function Page() {
   const { alertData, connectToSlackHref, errorsPath } = useTypedLoaderData<typeof loader>();
   const { has } = useSearchParams();
   const showAlerts = has("alerts") ?? false;
+  const navigate = useNavigate();
+  const location = useOptimisticLocation();
+
+  const closeAlerts = useCallback(() => {
+    const params = new URLSearchParams(location.search);
+    params.delete("alerts");
+    const qs = params.toString();
+    navigate(qs ? `?${qs}` : location.pathname, { replace: true });
+  }, [location.search, location.pathname, navigate]);
 
   return (
-    <PageContainer className="grid-rows-[1fr]">
-      <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full overflow-hidden">
-        <ResizablePanel id="errors-main" min="300px">
-          <Outlet />
-        </ResizablePanel>
-        {showAlerts && (
-          <>
-            <ResizableHandle id="errors-alerts-handle" />
-            <ResizablePanel id="errors-alerts" min="320px" default="420px" max="560px">
-              <ConfigureErrorAlerts
-                {...alertData}
-                connectToSlackHref={connectToSlackHref}
-                formAction={errorsPath}
-              />
-            </ResizablePanel>
-          </>
-        )}
-      </ResizablePanelGroup>
+    <PageContainer>
+      <Outlet />
+
+      <Sheet open={showAlerts} onOpenChange={(open) => !open && closeAlerts()}>
+        <SheetContent
+          side="right"
+          className="w-[420px] min-w-[320px] max-w-[560px] p-0 sm:max-w-[560px]"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <ConfigureErrorAlerts
+            {...alertData}
+            connectToSlackHref={connectToSlackHref}
+            formAction={errorsPath}
+          />
+        </SheetContent>
+      </Sheet>
     </PageContainer>
   );
 }
