More info about environments on the alerts page and alerts modal (#1107)

apps/webapp/app/components/primitives/Dialog.tsx

@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background-dimmed px-4 pb-4 pt-3.5 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background-dimmed px-4 pb-4 pt-2.5 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}
@@ -74,7 +74,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col text-left font-medium text-text-dimmed", className)}
+    className={cn("flex flex-col text-left font-medium text-text-bright", className)}
     {...props}
   />
 );

apps/webapp/app/components/runs/v3/EnabledStatus.tsx

@@ -1,18 +1,18 @@
-import { BoltSlashIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
+import { BellAlertIcon, BellSlashIcon } from "@heroicons/react/20/solid";
 
 export function EnabledStatus({ enabled }: { enabled: boolean }) {
   switch (enabled) {
     case true:
       return (
         <div className="flex items-center gap-1 text-xs text-success">
-          <CheckCircleIcon className="h-4 w-4" />
+          <BellAlertIcon className="size-4" />
           Enabled
         </div>
       );
     case false:
       return (
         <div className="text-dimmed flex items-center gap-1 text-xs">
-          <BoltSlashIcon className="h-4 w-4" />
+          <BellSlashIcon className="size-4" />
           Disabled
         </div>
       );

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx

@@ -22,6 +22,7 @@ import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
 import { Select, SelectItem } from "~/components/primitives/Select";
+import { InfoIconTooltip } from "~/components/primitives/Tooltip";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -324,24 +325,28 @@ export default function Page() {
               </InputGroup>
             )}
 
-            <InputGroup fullWidth>
-              <Label>Events</Label>
-
-              <Checkbox
-                name={alertTypes.name}
-                id="TASK_RUN_ATTEMPT"
-                value="TASK_RUN_ATTEMPT"
-                variant="simple/small"
-                label="Task run failure"
-                defaultChecked
-              />
+            <InputGroup>
+              <Label>Alert me when</Label>
+
+              <div className="flex items-center gap-1">
+                <Checkbox
+                  name={alertTypes.name}
+                  id="TASK_RUN_ATTEMPT"
+                  value="TASK_RUN_ATTEMPT"
+                  variant="simple/small"
+                  label="Task run attempts fail"
+                  defaultChecked
+                  className="pr-0"
+                />
+                <InfoIconTooltip content="You'll receive an alert every time an attempt fails on a run." />
+              </div>
 
               <Checkbox
                 name={alertTypes.name}
                 id="DEPLOYMENT_FAILURE"
                 value="DEPLOYMENT_FAILURE"
                 variant="simple/small"
-                label="Deployment failure"
+                label="Deployments fail"
                 defaultChecked
               />
 
@@ -350,13 +355,33 @@ export default function Page() {
                 id="DEPLOYMENT_SUCCESS"
                 value="DEPLOYMENT_SUCCESS"
                 variant="simple/small"
-                label="Deployment success"
+                label="Deployments succeed"
                 defaultChecked
               />
 
               <FormError id={alertTypes.errorId}>{alertTypes.error}</FormError>
             </InputGroup>
-
+            <InputGroup>
+              <Label>Environments</Label>
+              <Checkbox
+                name="environments"
+                id="production"
+                value="production"
+                variant="simple/small"
+                label="PROD"
+                defaultChecked
+                disabled
+              />
+              <Checkbox
+                name="environments"
+                id="staging"
+                value="staging"
+                variant="simple/small"
+                label="STAGING"
+                defaultChecked
+                disabled
+              />
+            </InputGroup>
             <FormError>{form.error}</FormError>
             <div className="border-t border-grid-bright pt-3">
               <FormButtons

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx

@@ -2,8 +2,8 @@ import { useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import {
   ArrowUpRightIcon,
-  BoltIcon,
-  BoltSlashIcon,
+  BellAlertIcon,
+  BellSlashIcon,
   BookOpenIcon,
   EnvelopeIcon,
   GlobeAltIcon,
@@ -16,9 +16,9 @@ import { ActionFunctionArgs, LoaderFunctionArgs, json } from "@remix-run/server-
 import { SlackIcon } from "@trigger.dev/companyicons";
 import { ProjectAlertChannelType, ProjectAlertType } from "@trigger.dev/database";
 import assertNever from "assert-never";
-import { ExternalLinkIcon } from "lucide-react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
@@ -184,7 +184,8 @@ export default function Page() {
             <TableHeader>
               <TableRow>
                 <TableHeaderCell>Name</TableHeaderCell>
-                <TableHeaderCell>Alert Types</TableHeaderCell>
+                <TableHeaderCell>Alert types</TableHeaderCell>
+                <TableHeaderCell>Environments</TableHeaderCell>
                 <TableHeaderCell>Channel</TableHeaderCell>
                 <TableHeaderCell>Enabled</TableHeaderCell>
                 <TableHeaderCell hiddenLabel>Actions</TableHeaderCell>
@@ -200,6 +201,12 @@ export default function Page() {
                     <TableCell className={alertChannel.enabled ? "" : "opacity-50"}>
                       {alertChannel.alertTypes.map((type) => alertTypeTitle(type)).join(", ")}
                     </TableCell>
+                    <TableCell
+                      className={cn("space-x-2", alertChannel.enabled ? "" : "opacity-50")}
+                    >
+                      <EnvironmentLabel environment={{ type: "PRODUCTION" }} />
+                      <EnvironmentLabel environment={{ type: "STAGING" }} />
+                    </TableCell>
                     <TableCell className={alertChannel.enabled ? "" : "opacity-50"}>
                       <AlertChannelDetails alertChannel={alertChannel} />
                     </TableCell>
@@ -225,7 +232,8 @@ export default function Page() {
                         You haven't created any project alerts yet
                       </Header2>
                       <Paragraph variant="small" className="mb-4">
-                        Get alerted when runs or deployments fail, or when deployments succeed.
+                        Get alerted when runs or deployments fail, or when deployments succeed in
+                        both Prod and Staging environments.
                       </Paragraph>
                       <LinkButton
                         to={v3NewProjectAlertPath(organization, project)}
@@ -244,14 +252,15 @@ export default function Page() {
           <div className="mt-4">
             <Header2 className="mb-1">Platform alerts</Header2>
             <Paragraph variant="small" className="mb-4">
-              Get email notifications when Trigger.dev creates, updates or resolves a platform
-              incident.
+              Subscribe to get email notifications when Trigger.dev creates, updates or resolves a
+              platform incident.
             </Paragraph>
             <LinkButton
               variant="tertiary/medium"
               TrailingIcon={ArrowUpRightIcon}
               to="https://status.trigger.dev/"
               target="_blank"
+              className="inline-flex"
             >
               Subscribe
             </LinkButton>
@@ -328,7 +337,7 @@ function DisableAlertChannelButton(props: { id: string }) {
         value="disable"
         type="submit"
         variant="small-menu-item"
-        LeadingIcon={BoltSlashIcon}
+        LeadingIcon={BellSlashIcon}
         leadingIconClassName="text-dimmed"
         className="text-xs"
       >
@@ -366,7 +375,7 @@ function EnableAlertChannelButton(props: { id: string }) {
         value="enable"
         type="submit"
         variant="small-menu-item"
-        LeadingIcon={BoltIcon}
+        LeadingIcon={BellAlertIcon}
         leadingIconClassName="text-success"
         className="text-xs"
       >