From ba3f288c2d0e184b69dddfd237cd47584d66c4c5 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Wed, 22 May 2024 03:55:26 -0700 Subject: [PATCH] improve toasts --- frontend/src/components/users/service-api-key.tsx | 2 +- frontend/src/lib/hooks.ts | 2 +- frontend/src/lib/socket.tsx | 10 +++++++++- frontend/src/pages/keys.tsx | 2 +- frontend/src/pages/tags.tsx | 15 ++++++++++++--- frontend/src/pages/user.tsx | 8 ++++++-- frontend/src/pages/variables.tsx | 15 ++++++++++++--- frontend/src/ui/toast.tsx | 2 +- frontend/src/ui/use-toast.ts | 4 ++-- 9 files changed, 45 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/users/service-api-key.tsx b/frontend/src/components/users/service-api-key.tsx index 647d0bb39..e7258f502 100644 --- a/frontend/src/components/users/service-api-key.tsx +++ b/frontend/src/components/users/service-api-key.tsx @@ -150,7 +150,7 @@ export const DeleteKeyForServiceUser = ({ api_key }: { api_key: string }) => { toast({ title: "Api Key Deleted" }); }, onError: () => { - toast({ title: "Failed to delete api key" }); + toast({ title: "Failed to delete api key", variant: "destructive" }); }, }); return ( diff --git a/frontend/src/lib/hooks.ts b/frontend/src/lib/hooks.ts index c20009faf..976217a49 100644 --- a/frontend/src/lib/hooks.ts +++ b/frontend/src/lib/hooks.ts @@ -99,7 +99,7 @@ export const useWrite = < ...config, onError: (e, v, c) => { console.log("useWrite error:", e); - toast({ title: `Request ${type} Failed` }); + toast({ title: `Request ${type} Failed`, description: "See console for details", variant: "destructive" }); config?.onError && config.onError(e, v, c); }, }); diff --git a/frontend/src/lib/socket.tsx b/frontend/src/lib/socket.tsx index 9ca1c6687..20f812d80 100644 --- a/frontend/src/lib/socket.tsx +++ b/frontend/src/lib/socket.tsx @@ -7,6 +7,8 @@ import { Circle } from "lucide-react"; import { ReactNode, useCallback, useEffect, useState } from "react"; import { cn } from "@lib/utils"; import { AUTH_TOKEN_STORAGE_KEY } from "@main"; +import { ResourceComponents } from "@components/resources"; +import { UsableResource } from "@types"; const rws_atom = atom(null); const useWebsocket = () => useAtom(rws_atom); @@ -38,9 +40,15 @@ const on_message = ( if (data == "LOGGED_IN") return console.info("logged in to ws"); const update = JSON.parse(data) as Types.UpdateListItem; + const Components = ResourceComponents[update.target.type as UsableResource]; + const title = Components + ? `${update.operation} - ${Components.list_item(update.target.id)?.name}` + : update.operation; + toast({ - title: update.operation, + title, description: update.username, + variant: update.success ? "default" : "destructive", }); invalidate(["ListUpdates"]); diff --git a/frontend/src/pages/keys.tsx b/frontend/src/pages/keys.tsx index 6087b8295..0a28015fb 100644 --- a/frontend/src/pages/keys.tsx +++ b/frontend/src/pages/keys.tsx @@ -165,7 +165,7 @@ const DeleteKey = ({ api_key }: { api_key: string }) => { toast({ title: "Api Key Deleted" }); }, onError: () => { - toast({ title: "Failed to delete api key" }); + toast({ title: "Failed to delete api key", variant: "destructive" }); }, }); return ( diff --git a/frontend/src/pages/tags.tsx b/frontend/src/pages/tags.tsx index 5c7ba39fa..065e798f3 100644 --- a/frontend/src/pages/tags.tsx +++ b/frontend/src/pages/tags.tsx @@ -105,7 +105,11 @@ const CreateTag = () => { }, onError: (e) => { console.log("create tag error:" + e); - toast({ title: "Failed to create tag" }); + toast({ + title: "Failed to create tag", + description: "See console for details", + variant: "destructive", + }); setOpen(false); }, }); @@ -154,8 +158,13 @@ const DeleteTag = ({ tag_id }: { tag_id: string }) => { invalidate(["ListTags"]); toast({ title: "Tag Deleted" }); }, - onError: () => { - toast({ title: "Failed to delete tag" }); + onError: (e) => { + console.log("delete tag error:" + e); + toast({ + title: "Failed to delete tag", + description: "See console for details", + variant: "destructive", + }); }, }); return ( diff --git a/frontend/src/pages/user.tsx b/frontend/src/pages/user.tsx index 0789603ca..9849c3000 100644 --- a/frontend/src/pages/user.tsx +++ b/frontend/src/pages/user.tsx @@ -23,8 +23,12 @@ export const UserPage = () => { const { mutate } = useWrite("UpdateUserBasePermissions", { onSuccess: () => inv(["ListUsers"]), onError: (e) => { - console.log(e); - toast({ title: "Failed to update user permissions" }); + console.log("update user permission failure", e); + toast({ + title: "Failed to update user permissions", + description: "See console for details", + variant: "destructive", + }); }, }); const enabledClass = user?.enabled ? "text-green-500" : "text-red-500"; diff --git a/frontend/src/pages/variables.tsx b/frontend/src/pages/variables.tsx index de699191b..79e885c32 100644 --- a/frontend/src/pages/variables.tsx +++ b/frontend/src/pages/variables.tsx @@ -158,7 +158,11 @@ const CreateVariable = () => { }, onError: (e) => { console.log("create variable error:" + e); - toast({ title: "Failed to create variable" }); + toast({ + title: "Failed to create variable", + description: "See console for details", + variant: "destructive", + }); setOpen(false); }, }); @@ -209,8 +213,13 @@ const DeleteVariable = ({ name }: { name: string }) => { invalidate(["ListVariables"], ["GetVariable"]); toast({ title: "Variable Deleted" }); }, - onError: () => { - toast({ title: "Failed to delete variable" }); + onError: (e) => { + console.log("delete variable error:" + e); + toast({ + title: "Failed to delete variable", + description: "See console for details", + variant: "destructive", + }); }, }); return ( diff --git a/frontend/src/ui/toast.tsx b/frontend/src/ui/toast.tsx index abaa484df..dc5704073 100644 --- a/frontend/src/ui/toast.tsx +++ b/frontend/src/ui/toast.tsx @@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<