diff --git a/web/src/components/api-keys/create-api-keys.tsx b/web/src/components/api-keys/create-api-keys.tsx index 4c3ef4e2..274289f0 100644 --- a/web/src/components/api-keys/create-api-keys.tsx +++ b/web/src/components/api-keys/create-api-keys.tsx @@ -1,7 +1,7 @@ "use client"; import { useCreateApiKey } from "@/hooks/use-create-api-key"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { useApiKeysStore } from "@/stores/api-keys-store"; import { InfoCircledIcon, PlusIcon } from "@radix-ui/react-icons"; import { @@ -25,7 +25,7 @@ export default function CreateApiKey() { const [state, setState] = useState(State.CLOSED); const [name, setName] = useState(undefined); const [secretKey, setSecretKey] = useState(""); - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); const createApiKey = useCreateApiKey(); const { addApiKey } = useApiKeysStore(); diff --git a/web/src/components/api-keys/existing-api-key.tsx b/web/src/components/api-keys/existing-api-key.tsx index 93cc9001..cbec57ac 100644 --- a/web/src/components/api-keys/existing-api-key.tsx +++ b/web/src/components/api-keys/existing-api-key.tsx @@ -6,7 +6,7 @@ import { TApiKeyMetadata } from "@/types/api-key"; import { TrashIcon } from "@radix-ui/react-icons"; import { Flex, IconButton, Text, TextField } from "@radix-ui/themes"; import { useEffect } from "react"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; export default function ExistingApiKey({ key, @@ -18,7 +18,7 @@ export default function ExistingApiKey({ const { removeApiKey } = useApiKeysStore(); const deleteApiKey = useDeleteApiKey(); const handleDelete = () => deleteApiKey.mutate({ id: apiKey.id }); - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); useEffect(() => { if (deleteApiKey.isSuccess) { diff --git a/web/src/components/publish-workflow-toggle/publish-workflow-toggle-base.tsx b/web/src/components/publish-workflow-toggle/publish-workflow-toggle-base.tsx index 8f569bdf..7dc50638 100644 --- a/web/src/components/publish-workflow-toggle/publish-workflow-toggle-base.tsx +++ b/web/src/components/publish-workflow-toggle/publish-workflow-toggle-base.tsx @@ -1,4 +1,4 @@ -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { Flex, Switch, Text } from "@radix-ui/themes"; import { usePublishWorkflowApi } from "@/hooks/use-publish-workflow-api"; import { useEffect } from "react"; @@ -14,7 +14,7 @@ export default function PublishWorkflowToggleBase({ isLive, updateIsLiveState, }: PublishWorkflowToggleBaseProps) { - const { infoToast } = useToastFunctions(); + const { infoToast } = useToast(); const publishWorkflow = usePublishWorkflowApi(); useEffect(() => { diff --git a/web/src/components/run-workflow/run-workflow-dialog.tsx b/web/src/components/run-workflow/run-workflow-dialog.tsx index c39016b9..59ced94a 100644 --- a/web/src/components/run-workflow/run-workflow-dialog.tsx +++ b/web/src/components/run-workflow/run-workflow-dialog.tsx @@ -1,5 +1,5 @@ import { useTriggerWorkflowApi } from "@/hooks/use-trigger-workflow-api"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { useWorkflowStore } from "@/stores/workflow-store"; import { Cross1Icon } from "@radix-ui/react-icons"; import { Button, Dialog, Flex, Text } from "@radix-ui/themes"; @@ -14,7 +14,7 @@ export default function RunWorkflowDialog({ const { workflowName, isActive, payloadCache, setPayloadCache } = useWorkflowStore(); const triggerWorkflow = useTriggerWorkflowApi(); - const { errorToast, infoToast } = useToastFunctions(); + const { errorToast, infoToast } = useToast(); useEffect(() => { if (triggerWorkflow.isSuccess) { diff --git a/web/src/components/save-workflow-button/save-workflow-button.tsx b/web/src/components/save-workflow-button/save-workflow-button.tsx index 83034baf..2ac151a7 100644 --- a/web/src/components/save-workflow-button/save-workflow-button.tsx +++ b/web/src/components/save-workflow-button/save-workflow-button.tsx @@ -8,7 +8,7 @@ import { useEffect } from "react"; import { AxiosError } from "axios"; import { useEditorActionStore } from "@/stores/editor-action-store"; import { EditorWorkflowNodeType } from "@/types/react-flow"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; const SPACE = " "; @@ -16,7 +16,7 @@ export default function SaveWorkflowButton() { const { getWorkflow, updateWebhookIdAndSecret } = useWorkflowStore(); const { actionsIndex } = useEditorActionStore(); const saveWorkflow = useSaveWorkflowApi(); - const { errorToast, infoToast } = useToastFunctions(); + const { errorToast, infoToast } = useToast(); useEffect(() => { if (saveWorkflow.isSuccess) { diff --git a/web/src/components/secrets/encrypted-secret.tsx b/web/src/components/secrets/encrypted-secret.tsx index cd37f388..9b27c4ab 100644 --- a/web/src/components/secrets/encrypted-secret.tsx +++ b/web/src/components/secrets/encrypted-secret.tsx @@ -5,11 +5,11 @@ import { Flex, IconButton, Text, TextField } from "@radix-ui/themes"; import { useSecretsStore } from "@/stores/secrets-store"; import { useDeleteSecretApi } from "@/hooks/use-delete-secret-api"; import { useEffect } from "react"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { TrashIcon } from "@radix-ui/react-icons"; export default function EncryptedSecret({ idx }: { idx: number }) { - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); const { secrets, removeSecret } = useSecretsStore(); const deleteSecret = useDeleteSecretApi(); diff --git a/web/src/components/secrets/new-secret.tsx b/web/src/components/secrets/new-secret.tsx index ec6f16c6..ff758b57 100644 --- a/web/src/components/secrets/new-secret.tsx +++ b/web/src/components/secrets/new-secret.tsx @@ -8,10 +8,10 @@ import { useSecretsStore } from "@/stores/secrets-store"; import { useSetSecretApi } from "@/hooks/use-set-secret-api"; import { ChangeEvent, useEffect } from "react"; import { produce } from "immer"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; export default function NewSecret({ idx }: { idx: number }) { - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); const { secrets, updateSecret } = useSecretsStore(); const saveSecret = useSetSecretApi(); diff --git a/web/src/components/utils/copy-text.tsx b/web/src/components/utils/copy-text.tsx index 0421c9a6..f663df54 100644 --- a/web/src/components/utils/copy-text.tsx +++ b/web/src/components/utils/copy-text.tsx @@ -1,4 +1,4 @@ -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { CopyIcon } from "@radix-ui/react-icons"; import { Button, Flex, TextField, Tooltip } from "@radix-ui/themes"; @@ -7,7 +7,7 @@ export interface CopyTextProps { } export default function CopyText({ text }: CopyTextProps) { - const { successToast } = useToastFunctions(); + const { successToast } = useToast(); const copyToClipboard = () => { navigator.clipboard.writeText(text); successToast("Copied to clipboard."); diff --git a/web/src/components/workflow-editor/run-history/workflow-run-history.tsx b/web/src/components/workflow-editor/run-history/workflow-run-history.tsx index 7e64c402..e027bbb0 100644 --- a/web/src/components/workflow-editor/run-history/workflow-run-history.tsx +++ b/web/src/components/workflow-editor/run-history/workflow-run-history.tsx @@ -1,5 +1,5 @@ import { useListWorkflowRunsApi } from "@/hooks/use-list-workflow-runs-api"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { Box, Flex, Spinner, ScrollArea, Text } from "@radix-ui/themes"; import { useEffect, useState } from "react"; import WorkflowRunTrace from "./workflow-run-trace"; @@ -50,7 +50,7 @@ export default function WorkflowRunHistory({ const { data, isPending, error } = useListWorkflowRunsApi(workflowId); const [selectedRunIdx, setSelectedRunIdx] = useState(null); const [runs, setRuns] = useState([]); - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); useEffect(() => { if (data && data.length > 0) { diff --git a/web/src/components/workflow-editor/run-history/workflow-run-step.tsx b/web/src/components/workflow-editor/run-history/workflow-run-step.tsx index bc200325..1268decd 100644 --- a/web/src/components/workflow-editor/run-history/workflow-run-step.tsx +++ b/web/src/components/workflow-editor/run-history/workflow-run-step.tsx @@ -1,6 +1,6 @@ import ErrorCallout from "@/components/utils/error-callout"; import { useGetWorkflowRunStepApi } from "@/hooks/use-get-workflow-run-step-api"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { TJson } from "@/types/json"; import { Box, DataList, Flex, ScrollArea, Tabs, Text } from "@radix-ui/themes"; import { useEffect } from "react"; @@ -20,7 +20,7 @@ export default function WorkflowRunStep({ workflowRunId, workflowRunStepId, ); - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); useEffect(() => { if (error) { diff --git a/web/src/components/workflow-editor/run-history/workflow-run-trace.tsx b/web/src/components/workflow-editor/run-history/workflow-run-trace.tsx index 34cee889..d4b976e8 100644 --- a/web/src/components/workflow-editor/run-history/workflow-run-trace.tsx +++ b/web/src/components/workflow-editor/run-history/workflow-run-trace.tsx @@ -2,7 +2,7 @@ import { Box, Flex, Text } from "@radix-ui/themes"; import WorkflowRunStep from "./workflow-run-step"; import { useGetWorkflowRunStepsApi } from "@/hooks/use-get-workflow-run-steps-api"; import { useEffect, useState } from "react"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import Row from "./row"; import ErrorCallout from "@/components/utils/error-callout"; import { TWorkflowRunStepMetadata } from "@/types/workflow-runs"; @@ -24,7 +24,7 @@ export default function WorkflowRunTrace({ ); const [selectedStepIdx, setSelectedStepIdx] = useState(0); const [steps, setSteps] = useState([]); - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); useEffect(() => { if (data) { diff --git a/web/src/components/workflow-editor/workflow-editor.tsx b/web/src/components/workflow-editor/workflow-editor.tsx index 22dc25b3..0403ede6 100644 --- a/web/src/components/workflow-editor/workflow-editor.tsx +++ b/web/src/components/workflow-editor/workflow-editor.tsx @@ -17,7 +17,7 @@ import WorkflowSettingsButton from "./workflow-settings-button"; import WorkflowEditorActionEditSidebar from "./workflow-editor-action-edit-sidebar"; import WorkflowRunHistory from "./run-history/workflow-run-history"; import RunWorkflowButton from "../run-workflow/run-workflow-button"; -import { useToastFunctions } from "@/lib/toast"; +import { useToast } from "@/providers/toast"; import { AxiosError } from "axios"; import { useRouter } from "next/navigation"; @@ -36,7 +36,7 @@ export default function WorkflowEditor({ const { isNew, setWorkflow, clearWorkflowStore } = useWorkflowStore(); const { setEditorActions } = useEditorActionStore(); - const { errorToast } = useToastFunctions(); + const { errorToast } = useToast(); // Loading Actions const { diff --git a/web/src/lib/toast.ts b/web/src/lib/toast.ts deleted file mode 100644 index 6ebfda61..00000000 --- a/web/src/lib/toast.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { useToast } from "@/providers/toast"; - -export function useToastFunctions() { - const { showToast } = useToast(); - - const successToast = (message: string) => showToast(message, "success"); - const errorToast = (message: string) => showToast(message, "error"); - const infoToast = (message: string) => showToast(message, "info"); - - return { successToast, errorToast, infoToast }; -} diff --git a/web/src/providers/toast.tsx b/web/src/providers/toast.tsx index c831bfd1..0e87c66d 100644 --- a/web/src/providers/toast.tsx +++ b/web/src/providers/toast.tsx @@ -12,19 +12,13 @@ import { Flex } from "@radix-ui/themes"; type ToastType = "success" | "error" | "info"; interface ToastContextType { - showToast: (message: string, type: ToastType) => void; + successToast: (message: string) => void; + errorToast: (message: string) => void; + infoToast: (message: string) => void; } const ToastContext = createContext(undefined); -export function useToast() { - const context = useContext(ToastContext); - if (context === undefined) { - throw new Error("useToast must be used within a ToastProvider"); - } - return context; -} - const ToastIcon = ({ type }: { type: ToastType }) => { switch (type) { case "info": @@ -48,7 +42,14 @@ export function ToastProvider({ children }: { children: React.ReactNode }) { }; return ( - + + showToast(message, "success"), + errorToast: (message: string) => showToast(message, "error"), + infoToast: (message: string) => showToast(message, "info"), + }} + > {children} ); } + +export function useToast() { + const context = useContext(ToastContext); + if (context === undefined) { + throw new Error("useToast must be used within a ToastProvider"); + } + return context; +}