Fix for the EnabledStatus component icons and improved the style of t…

…he private Slack channel callout
triggerdotdev · May 17, 2024 · 14cffd4 · 14cffd4
1 parent 6810756
commit 14cffd4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/apps/webapp/app/components/runs/v3/EnabledStatus.tsx b/apps/webapp/app/components/runs/v3/EnabledStatus.tsx
@@ -1,18 +1,31 @@
-import { BellAlertIcon, BellSlashIcon } from "@heroicons/react/20/solid";
+import { BoltSlashIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
+
+type EnabledStatusProps = {
+  enabled: boolean;
+  enabledIcon?: React.ComponentType<any>;
+  disabledIcon?: React.ComponentType<any>;
+};
+
+export function EnabledStatus({
+  enabled,
+  enabledIcon = CheckCircleIcon,
+  disabledIcon = BoltSlashIcon,
+}: EnabledStatusProps) {
+  const EnabledIcon = enabledIcon;
+  const DisabledIcon = disabledIcon;
 
-export function EnabledStatus({ enabled }: { enabled: boolean }) {
   switch (enabled) {
     case true:
       return (
         <div className="flex items-center gap-1 text-xs text-success">
-          <BellAlertIcon className="size-4" />
+          <EnabledIcon className="size-4" />
           Enabled
         </div>
       );
     case false:
       return (
         <div className="text-dimmed flex items-center gap-1 text-xs">
-          <BellSlashIcon className="size-4" />
+          <DisabledIcon className="size-4" />
           Disabled
         </div>
       );

diff --git a/...app/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx b/...app/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx
@@ -10,7 +10,7 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { InlineCode } from "~/components/code/InlineCode";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
-import { Callout } from "~/components/primitives/Callout";
+import { Callout, variantClasses } from "~/components/primitives/Callout";
 import { Checkbox } from "~/components/primitives/Checkbox";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { Fieldset } from "~/components/primitives/Fieldset";
@@ -20,6 +20,7 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { InfoIconTooltip } from "~/components/primitives/Tooltip";
@@ -29,6 +30,7 @@ import { redirectWithSuccessMessage } from "~/models/message.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { NewAlertChannelPresenter } from "~/presenters/v3/NewAlertChannelPresenter.server";
 import { requireUserId } from "~/services/session.server";
+import { cn } from "~/utils/cn";
 import { ProjectParamSchema, v3ProjectAlertsPath } from "~/utils/pathBuilder";
 import {
   CreateAlertChannelOptions,
@@ -315,11 +317,14 @@ export default function Page() {
                       )}
                     </Select>
                     {selectedSlackChannel && selectedSlackChannel.is_private && (
-                      <Callout variant="warning">
-                        Heads up! To receive alerts in the{" "}
+                      <Callout
+                        variant="warning"
+                        className={cn("text-sm", variantClasses.warning.textColor)}
+                      >
+                        To receive alerts in the{" "}
                         <InlineCode variant="extra-small">{selectedSlackChannel.name}</InlineCode>{" "}
-                        channel, you will need to invite the @Trigger.dev Slack Bot. You can do this
-                        by visiting the channel in your Slack workspace issue the following command:{" "}
+                        channel, you need to invite the @Trigger.dev Slack Bot. Go to the channel in
+                        Slack and type:{" "}
                         <InlineCode variant="extra-small">/invite @Trigger.dev</InlineCode>.
                       </Callout>
                     )}

diff --git a/.../webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx b/.../webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
@@ -215,7 +215,11 @@ export default function Page() {
                       <AlertChannelDetails alertChannel={alertChannel} />
                     </TableCell>
                     <TableCell className={alertChannel.enabled ? "" : "opacity-50"}>
-                      <EnabledStatus enabled={alertChannel.enabled} />
+                      <EnabledStatus
+                        enabled={alertChannel.enabled}
+                        enabledIcon={BellAlertIcon}
+                        disabledIcon={BellSlashIcon}
+                      />
                     </TableCell>
                     <TableCellMenu isSticky>
                       {alertChannel.enabled ? (