feat: always show alerts tab and lock email alerts when keys are missing (#1478)

Author: ghostdevv

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -459,8 +459,6 @@ function V3ProjectSideMenu({
   project: SideMenuProject;
   organization: MatchedOrganization;
 }) {
-  const { alertsEnabled } = useFeatures();
-
   return (
     <>
       <SideMenuHeader title={"Project"} />
@@ -520,15 +518,13 @@ function V3ProjectSideMenu({
         to={v3DeploymentsPath(organization, project)}
         data-action="deployments"
       />
-      {alertsEnabled && (
-        <SideMenuItem
-          name="Alerts"
-          icon={BellAlertIcon}
-          activeIconColor="text-red-500"
-          to={v3ProjectAlertsPath(organization, project)}
-          data-action="alerts"
-        />
-      )}
+      <SideMenuItem
+        name="Alerts"
+        icon={BellAlertIcon}
+        activeIconColor="text-red-500"
+        to={v3ProjectAlertsPath(organization, project)}
+        data-action="alerts"
+      />
       <SideMenuItem
         name="Concurrency limits"
         icon={RectangleStackIcon}

apps/webapp/app/features.server.ts

@@ -4,7 +4,6 @@ import { requestUrl } from "./utils/requestUrl.server";
 export type TriggerFeatures = {
   isManagedCloud: boolean;
   v3Enabled: boolean;
-  alertsEnabled: boolean;
 };
 
 function isManagedCloud(host: string): boolean {
@@ -20,7 +19,6 @@ function featuresForHost(host: string): TriggerFeatures {
   return {
     isManagedCloud: isManagedCloud(host),
     v3Enabled: env.V3_ENABLED === "true",
-    alertsEnabled: env.ALERT_FROM_EMAIL !== undefined && env.ALERT_RESEND_API_KEY !== undefined,
   };
 }
 

apps/webapp/app/hooks/useFeatures.ts

@@ -5,5 +5,5 @@ import type { TriggerFeatures } from "~/features.server";
 export function useFeatures(): TriggerFeatures {
   const routeMatch = useTypedRouteLoaderData<typeof loader>("root");
 
-  return routeMatch?.features ?? { isManagedCloud: false, v3Enabled: false, alertsEnabled: false };
+  return routeMatch?.features ?? { isManagedCloud: false, v3Enabled: false };
 }

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

@@ -23,6 +23,7 @@ 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 { env } from "~/env.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -150,9 +151,13 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const option = url.searchParams.get("option");
 
+  const emailAlertsEnabled =
+    env.ALERT_FROM_EMAIL !== undefined && env.ALERT_RESEND_API_KEY !== undefined;
+
   return typedjson({
     ...results,
     option: option === "slack" ? ("SLACK" as const) : undefined,
+    emailAlertsEnabled,
   });
 }
 
@@ -200,7 +205,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
 export default function Page() {
   const [isOpen, setIsOpen] = useState(false);
-  const { slack, option } = useTypedLoaderData<typeof loader>();
+  const { slack, option, emailAlertsEnabled } = useTypedLoaderData<typeof loader>();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
   const navigate = useNavigate();
@@ -271,16 +276,23 @@ export default function Page() {
             </InputGroup>
 
             {currentAlertChannel === "EMAIL" ? (
-              <InputGroup fullWidth>
-                <Label>Email</Label>
-                <Input
-                  {...conform.input(channelValue)}
-                  placeholder="[email protected]"
-                  type="email"
-                  autoFocus
-                />
-                <FormError id={channelValue.errorId}>{channelValue.error}</FormError>
-              </InputGroup>
+              emailAlertsEnabled ? (
+                <InputGroup fullWidth>
+                  <Label>Email</Label>
+                  <Input
+                    {...conform.input(channelValue)}
+                    placeholder="[email protected]"
+                    type="email"
+                    autoFocus
+                  />
+                  <FormError id={channelValue.errorId}>{channelValue.error}</FormError>
+                </InputGroup>
+              ) : (
+                <Callout variant="warning">
+                  Email integration is not available. Please contact your organization
+                  administrator.
+                </Callout>
+              )
             ) : currentAlertChannel === "SLACK" ? (
               <InputGroup fullWidth>
                 {slack.status === "READY" ? (