add toasts

apps/console/src/components/api-keys/ProviderApiKeyListItem.tsx

@@ -16,6 +16,7 @@ import {
   FormItem,
   FormControl,
   Input,
+  useToast,
 } from "@pezzo/ui";
 import { PencilIcon, SaveIcon, TrashIcon, XIcon } from "lucide-react";
 import { GenericDestructiveConfirmationModal } from "../common/GenericDestructiveConfirmationModal";
@@ -42,6 +43,7 @@ export const ProviderApiKeyListItem = ({
   initialIsEditing = false,
   canCancelEdit = true,
 }: Props) => {
+  const { toast } = useToast();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -50,8 +52,7 @@ export const ProviderApiKeyListItem = ({
   });
 
   const { currentOrgId } = useCurrentOrganization();
-  const { mutateAsync: deleteProviderApiKey } =
-    useDeleteProviderApiKeyMutation();
+  const { mutate: deleteProviderApiKey } = useDeleteProviderApiKeyMutation();
   const [deletingProviderApiKey, setDeletingProviderApiKey] =
     useState<string>(null);
   const updateKeyMutation = useMutation({
@@ -67,13 +68,29 @@ export const ProviderApiKeyListItem = ({
       queryClient.invalidateQueries({ queryKey: ["providerApiKeys"] });
       onSave && onSave();
       setIsEditing(false);
+      toast({
+        title: "API key saved!",
+        description: `The provider API key has been saved successfully.`,
+      });
+      form.reset();
     },
   });
 
   const handleDeleteProvider = async (provider: string) => {
-    await deleteProviderApiKey({ provider, organizationId: currentOrgId });
-    trackEvent("provider_api_key_deleted", { provider });
-    setDeletingProviderApiKey(null);
+    deleteProviderApiKey(
+      { provider, organizationId: currentOrgId },
+      {
+        onSuccess: () => {
+          trackEvent("provider_api_key_deleted", { provider });
+          setDeletingProviderApiKey(null);
+          toast({
+            title: "API key deleted!",
+            description: `The provider API key has been deleted successfully.`,
+          });
+          form.reset();
+        },
+      }
+    );
   };
 
   const [isEditing, setIsEditing] = useState(initialIsEditing);

apps/console/src/components/environments/CreateEnvironmentModal.tsx

@@ -17,6 +17,7 @@ import {
   Alert,
   AlertTitle,
   AlertDescription,
+  useToast,
 } from "@pezzo/ui";
 import { gqlClient, queryClient } from "~/lib/graphql";
 import { CREATE_ENVIRONMENT } from "~/graphql/definitions/mutations/environments";
@@ -44,6 +45,7 @@ const formSchema = z.object({
 
 export const CreateEnvironmentModal = ({ open, onClose, onCreated }: Props) => {
   const { projectId } = useCurrentProject();
+  const { toast } = useToast();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -66,6 +68,10 @@ export const CreateEnvironmentModal = ({ open, onClose, onCreated }: Props) => {
     onSuccess: (data) => {
       onCreated(data.createEnvironment.name);
       queryClient.invalidateQueries({ queryKey: ["environments"] });
+      toast({
+        title: "Environment created!",
+        description: `Your new environment was created successfully.`,
+      });
     },
   });
 

apps/console/src/components/organizations/InviteOrgMemberModal.tsx

@@ -19,6 +19,7 @@ import {
   Alert,
   AlertTitle,
   AlertDescription,
+  toast,
 } from "@pezzo/ui";
 import { AlertCircle } from "lucide-react";
 import z from "zod";
@@ -63,6 +64,10 @@ export const InviteOrgMemberModal = ({ open, onClose }: Props) => {
       {
         onSuccess: () => {
           onClose();
+          toast({
+            title: "Invitation sent",
+            description: `An invitation has been sent to ${inviteeEmail}`,
+          });
         },
       }
     );

apps/console/src/components/organizations/OrgInvitationsList.tsx

@@ -1,4 +1,4 @@
-import { Button, Card } from "@pezzo/ui";
+import { Button, Card, toast } from "@pezzo/ui";
 import { GetOrgQuery, OrgRole } from "~/@generated/graphql/graphql";
 import { OrgRoleSelector } from "./OrgRoleSelector";
 import { useCopyToClipboard } from "usehooks-ts";
@@ -47,20 +47,17 @@ export const OrgInvitationsList = ({ invitations }: Props) => {
   const { mutate: updateOrgInvitation } = useUpdateOrgInvitationMutation();
   const [deletingInvitation, setDeletingInvitation] =
     useState<Invitation>(null);
-  const [, copy] = useCopyToClipboard();
-
-  const handleCopyInvitation = (invitation: Invitation) => {
-    const url = new URL(window.location.origin);
-    url.pathname = `/invitations/${invitation.id}/accept`;
-    copy(url.toString());
-  };
 
   const handleDeleteInvitation = async (invitation: Invitation) => {
     deleteOrgInvitation(
       { id: invitation.id },
       {
         onSuccess: () => {
           setDeletingInvitation(null);
+          toast({
+            title: "Invitation deleted",
+            description: `The invitation for ${invitation.email} has been deleted.`,
+          });
         },
       }
     );

apps/console/src/components/organizations/OrgMembersList.tsx

@@ -8,7 +8,7 @@ import {
 } from "~/graphql/hooks/mutations";
 import { useAuthContext } from "~/lib/providers/AuthProvider";
 import { useCurrentOrgMembership } from "~/lib/hooks/useCurrentOrgMembership";
-import { Button, Card } from "@pezzo/ui";
+import { Button, Card, toast } from "@pezzo/ui";
 import { TrashIcon } from "lucide-react";
 import { GenericDestructiveConfirmationModal } from "../common/GenericDestructiveConfirmationModal";
 
@@ -32,6 +32,10 @@ export const OrgMembersList = ({ members }: Props) => {
       {
         onSuccess: () => {
           setDeletingMember(null);
+          toast({
+            title: "Member removed",
+            description: `${member.user.name} has been removed from your organization.`,
+          });
         },
       }
     );

apps/console/src/components/prompts/CommitPromptModal.tsx

@@ -9,7 +9,6 @@ import {
   Button,
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   Form,
@@ -19,6 +18,7 @@ import {
   FormLabel,
   FormMessage,
   Input,
+  useToast,
 } from "@pezzo/ui";
 import { AlertCircle } from "lucide-react";
 import { z } from "zod";
@@ -48,6 +48,7 @@ export const CommitPromptModal = ({ open, onClose, onCommitted }: Props) => {
   const { prompt } = useCurrentPrompt();
   const { getForm: getEditorForm } = useEditorContext();
   const editorForm = getEditorForm();
+  const { toast } = useToast();
 
   const [settings, content, service, type] = editorForm.watch([
     "settings",
@@ -57,7 +58,7 @@ export const CommitPromptModal = ({ open, onClose, onCommitted }: Props) => {
   ]);
 
   const {
-    mutateAsync: createPromptVersion,
+    mutate: createPromptVersion,
     error,
     isLoading,
   } = useCreatePromptVersion();
@@ -72,10 +73,17 @@ export const CommitPromptModal = ({ open, onClose, onCommitted }: Props) => {
       promptId: prompt.id,
     };
 
-    await createPromptVersion(data);
-    form.reset();
-    onCommitted();
-    trackEvent("prompt_commit_submitted");
+    createPromptVersion(data, {
+      onSuccess: () => {
+        form.reset();
+        onCommitted();
+        trackEvent("prompt_commit_submitted");
+        toast({
+          title: "Changes committed!",
+          description: `Your commit has been created successfully.`,
+        });
+      },
+    });
   };
 
   const handleCancel = () => {

apps/console/src/pages/environments/EnvironmentsPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Card } from "@pezzo/ui";
+import { Button, Card, toast } from "@pezzo/ui";
 import { CreateEnvironmentModal } from "~/components/environments/CreateEnvironmentModal";
 import { useState } from "react";
 import { useEnvironments } from "~/lib/hooks/useEnvironments";
@@ -40,6 +40,10 @@ export const EnvironmentsPage = () => {
             name: environmentToDelete?.name,
           });
           setEnvironmentToDelete(null);
+          toast({
+            title: "Environment deleted",
+            description: "The environment has been deleted.",
+          });
         },
       }
     );

apps/console/src/pages/organizations/OrgSettingsPage.tsx

@@ -18,6 +18,7 @@ import {
   FormMessage,
   Button,
   Card,
+  toast,
 } from "@pezzo/ui";
 
 const formSchema = z.strictObject({
@@ -50,6 +51,10 @@ export const OrgSettingsPage = () => {
       {
         onSuccess: () => {
           form.reset({ orgName: values.orgName });
+          toast({
+            title: "Settings updated",
+            description: "Your organization settings have been updated.",
+          });
         },
       }
     );
@@ -67,7 +72,7 @@ export const OrgSettingsPage = () => {
         </div>
       </div>
 
-      <div className="container max-w-[800px] space-y-6">
+      <div className="container space-y-6">
         <Card className="mx-auto flex flex-col gap-y-6 p-10">
           <div className="max-w-[640px]">
             <Form {...form}>

apps/console/src/pages/projects/ProjectsPage.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  toast,
 } from "@pezzo/ui";
 import { trackEvent } from "~/lib/utils/analytics";
 import { usePageTitle } from "~/lib/hooks/usePageTitle";
@@ -44,6 +45,10 @@ export const ProjectsPage = () => {
       {
         onSuccess: () => {
           setProjectToDelete(null);
+          toast({
+            title: "Project deleted",
+            description: "The project has been deleted.",
+          });
         },
       }
     );

apps/console/src/pages/prompts/PromptsPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Card } from "@pezzo/ui";
+import { Button, Card, toast } from "@pezzo/ui";
 import { CreatePromptModal } from "~/components/prompts/CreatePromptModal";
 import { useState } from "react";
 import { usePrompts } from "~/lib/hooks/usePrompts";
@@ -44,6 +44,10 @@ export const PromptsPage = () => {
     deletePrompt(promptToDelete.id, {
       onSuccess: () => {
         setPromptToDelete(null);
+        toast({
+          title: "Prompt deleted",
+          description: "The prompt has been deleted.",
+        });
       },
     });
     trackEvent("prompt_delete_confirmed");