undo alert changes

Author: arcoraven

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -1621,9 +1621,8 @@ export function useEngineNotificationChannels(engineId: string) {
 }
 
 export interface CreateNotificationChannelInput {
-  deploymentId: string;
   subscriptionRoutes: string[];
-  type: "slack" | "email" | "webhook";
+  type: "slack" | "email"; // TODO: Add others when implemented.
   value: string;
 }
 

apps/dashboard/src/components/engine/alerts/EngineAlertDialogForm.tsx

@@ -29,15 +29,13 @@ import {
 } from "@/components/ui/select";
 import {
   type EngineAlertRule,
-  type EngineInstance,
   EngineNotificationChannelTypeConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 const alertFormSchema = z.object({
-  deploymentId: z.string(),
   subscriptionRoutes: z.array(z.string()),
   type: z.enum(
     Object.keys(EngineNotificationChannelTypeConfig) as [
@@ -50,7 +48,6 @@ const alertFormSchema = z.object({
 type EngineAlertFormValues = z.infer<typeof alertFormSchema>;
 
 export function EngineAlertDialogForm(props: {
-  instance: EngineInstance;
   alertRules: EngineAlertRule[];
   title: string;
   values: EngineAlertFormValues | null;
@@ -65,7 +62,6 @@ export function EngineAlertDialogForm(props: {
   const form = useForm<z.infer<typeof alertFormSchema>>({
     resolver: zodResolver(alertFormSchema),
     defaultValues: {
-      deploymentId: props.instance.deploymentId,
       subscriptionRoutes: ["alert.*"],
       type: "slack",
     },

apps/dashboard/src/components/engine/alerts/ManageEngineAlerts.tsx

@@ -22,7 +22,6 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   type CreateNotificationChannelInput,
   type EngineAlertRule,
-  type EngineInstance,
   type EngineNotificationChannel,
   useEngineCreateNotificationChannel,
   useEngineDeleteNotificationChannel,
@@ -44,19 +43,19 @@ type CreateAlertMutation = UseMutationResult<
 >;
 
 export function ManageEngineAlertsSection(props: {
-  instance: EngineInstance;
   alertRules: EngineAlertRule[];
   alertRulesIsLoading: boolean;
+  engineId: string;
 }) {
   const notificationChannelsQuery = useEngineNotificationChannels(
-    props.instance.id,
+    props.engineId,
   );
   const deleteAlertMutation = useEngineDeleteNotificationChannel(
-    props.instance.id,
+    props.engineId,
   );
 
   const createAlertMutation = useEngineCreateNotificationChannel(
-    props.instance.id,
+    props.engineId,
   );
 
   // not passing the mutation to avoid multiple rows sharing the same mutation state, we create the new mutation for each row instead in each component instead
@@ -66,8 +65,8 @@ export function ManageEngineAlertsSection(props: {
 
   return (
     <ManageEngineAlertsSectionUI
-      instance={props.instance}
       alertRules={props.alertRules}
+      engineId={props.engineId}
       notificationChannels={notificationChannelsQuery.data ?? []}
       isLoading={
         notificationChannelsQuery.isLoading || props.alertRulesIsLoading
@@ -82,17 +81,16 @@ export function ManageEngineAlertsSection(props: {
 }
 
 export function ManageEngineAlertsSectionUI(props: {
-  instance: EngineInstance;
   alertRules: EngineAlertRule[];
+  engineId: string;
   notificationChannels: EngineNotificationChannel[];
   isLoading: boolean;
   onAlertsUpdated: () => void;
   createAlertMutation: CreateAlertMutation;
   deleteAlert: (notificationChannelId: string) => Promise<void>;
 }) {
   const {
-    instance,
-    alertRules,
+    engineId,
     notificationChannels,
     isLoading,
     onAlertsUpdated,
@@ -113,8 +111,8 @@ export function ManageEngineAlertsSectionUI(props: {
         </div>
 
         <CreateAlertButton
-          instance={instance}
-          alertRules={alertRules}
+          engineId={engineId}
+          alertRules={props.alertRules}
           onSuccess={onAlertsUpdated}
           createAlertMutation={createAlertMutation}
         />
@@ -224,7 +222,7 @@ function EngineAlertsTableUI(props: {
 }
 
 function CreateAlertButton(props: {
-  instance: EngineInstance;
+  engineId: string;
   alertRules: EngineAlertRule[];
   onSuccess: () => void;
   createAlertMutation: CreateAlertMutation;
@@ -254,7 +252,6 @@ function CreateAlertButton(props: {
       </ToolTipLabel>
 
       <EngineAlertDialogForm
-        instance={props.instance}
         alertRules={props.alertRules}
         open={isModalOpen}
         onOpenChange={setIsModalOpen}

apps/dashboard/src/components/engine/alerts/RecentEngineAlerts.tsx

@@ -14,20 +14,19 @@ import {
 import {
   type EngineAlert,
   type EngineAlertRule,
-  type EngineInstance,
   useEngineAlerts,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { formatDistance } from "date-fns";
 import { useMemo } from "react";
 
 export function RecentEngineAlertsSection(props: {
-  instance: EngineInstance;
   alertRules: EngineAlertRule[];
   alertRulesIsLoading: boolean;
+  engineId: string;
 }) {
   // TODO - pagination
   // required : return the total number of alerts in response from API
-  const alertsQuery = useEngineAlerts(props.instance.id, 100, 0);
+  const alertsQuery = useEngineAlerts(props.engineId, 100, 0);
   const alerts = alertsQuery.data ?? [];
 
   return (

apps/dashboard/src/components/engine/configuration/engine-wallet-config.tsx

@@ -6,7 +6,9 @@ import {
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { Flex } from "@chakra-ui/react";
+import { EngineBackendWalletOptions } from "lib/engine";
 import { CircleAlertIcon } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 import {} from "react-icons/md";
 import { Heading, Text } from "tw-components";
@@ -23,27 +25,12 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
 }) => {
   const { data: walletConfig } = useEngineWalletConfig(instance.url);
 
-  const tabOptions: {
-    key: EngineBackendWalletType;
-    name: string;
-    content: React.ReactNode;
-  }[] = [
-    {
-      key: "local",
-      name: "Local",
-      content: <LocalConfig />,
-    },
-    {
-      key: "aws-kms",
-      name: "AWS KMS",
-      content: <KmsAwsConfig instance={instance} />,
-    },
-    {
-      key: "gcp-kms",
-      name: "Google Cloud KMS",
-      content: <KmsGcpConfig instance={instance} />,
-    },
-  ] as const;
+  const tabContent: Record<EngineBackendWalletType, React.ReactNode> = {
+    local: <LocalConfig />,
+    "aws-kms": <KmsAwsConfig instance={instance} />,
+    "gcp-kms": <KmsGcpConfig instance={instance} />,
+  } as const;
+
   const [activeTab, setActiveTab] = useState<EngineBackendWalletType>("local");
 
   const isAwsKmsConfigured = !!walletConfig?.awsAccessKeyId;
@@ -54,13 +41,19 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
       <Flex flexDir="column" gap={2}>
         <Heading size="title.md">Backend Wallets</Heading>
         <Text>
-          Create backend wallets on the <strong>Overview</strong> tab. To use
-          other wallet types, configure them first.
+          Create backend wallets on the{" "}
+          <Link
+            href={`/dashboard/engine/${instance.id}`}
+            className="text-link-foreground hover:text-foreground"
+          >
+            Overview
+          </Link>{" "}
+          tab. To use other wallet types, configure them below.
         </Text>
       </Flex>
 
       <TabButtons
-        tabs={tabOptions.map(({ key, name }) => ({
+        tabs={EngineBackendWalletOptions.map(({ key, name }) => ({
           key,
           name,
           isActive: activeTab === key,
@@ -79,7 +72,7 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
         tabClassName="font-medium !text-sm"
       />
 
-      {tabOptions.find((opt) => opt.key === activeTab)?.content}
+      {tabContent[activeTab]}
     </Flex>
   );
 };

apps/dashboard/src/components/engine/configuration/kms-gcp-config.tsx

@@ -89,7 +89,7 @@ export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({ instance }) => {
             category="engine"
             className="text-link-foreground hover:text-foreground"
           >
-            learn more about using GCP KMS wallets
+            learn more about using Google Cloud KMS wallets
           </TrackedLinkTW>
           .
         </p>