From 4aed6b9e0a49275d113442699733fd9c59dbe5b7 Mon Sep 17 00:00:00 2001 From: leon-schmid Date: Mon, 21 Oct 2024 17:13:31 +0200 Subject: [PATCH] feat: switch to new Toasts in all components --- web/src/app/(workspace)/layout.tsx | 15 +-------------- web/src/app/layout.tsx | 6 ++++-- web/src/components/api-keys/create-api-keys.tsx | 3 ++- web/src/components/api-keys/existing-api-key.tsx | 3 ++- .../publish-workflow-toggle-base.tsx | 3 ++- .../run-workflow/run-workflow-dialog.tsx | 3 ++- .../save-workflow-button/save-workflow-button.tsx | 3 ++- web/src/components/secrets/encrypted-secret.tsx | 3 ++- web/src/components/secrets/new-secret.tsx | 3 ++- web/src/components/utils/copy-text.tsx | 3 ++- .../run-history/workflow-run-history.tsx | 3 ++- .../run-history/workflow-run-step.tsx | 3 ++- .../run-history/workflow-run-trace.tsx | 3 ++- .../workflow-editor/workflow-editor.tsx | 3 ++- 14 files changed, 29 insertions(+), 28 deletions(-) diff --git a/web/src/app/(workspace)/layout.tsx b/web/src/app/(workspace)/layout.tsx index e96ec800..12efebe5 100644 --- a/web/src/app/(workspace)/layout.tsx +++ b/web/src/app/(workspace)/layout.tsx @@ -1,9 +1,8 @@ "use server"; import Nav from "@/components/navbar/navbar"; -import { Box, Grid, Text } from "@radix-ui/themes"; +import { Box, Grid } from "@radix-ui/themes"; import { ReactNode } from "react"; -import { Slide, ToastContainer } from "react-toastify"; import ReactQueryProvider from "@/providers/react-query"; import ClientSessionValidator from "@/providers/client-session-validator"; import { isAuthDisabled } from "@/lib/env"; @@ -19,18 +18,6 @@ export default async function Layout({ children }: { children: ReactNode }) { {children} - ); diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx index ad827ad0..b7e0d2ba 100644 --- a/web/src/app/layout.tsx +++ b/web/src/app/layout.tsx @@ -1,10 +1,10 @@ import type { Metadata } from "next"; -import "react-toastify/dist/ReactToastify.css"; import "./globals.css"; import "@radix-ui/themes/styles.css"; import { Theme } from "@radix-ui/themes"; import { inter } from "./fonts"; import { SessionProvider } from "@/providers/session"; +import { ToastProvider } from "@/providers/toast"; export const metadata: Metadata = { title: "Admyral", @@ -34,7 +34,9 @@ export default async function RootLayout({ - {children} + + {children} + diff --git a/web/src/components/api-keys/create-api-keys.tsx b/web/src/components/api-keys/create-api-keys.tsx index 9024de73..4c3ef4e2 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 { errorToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { useApiKeysStore } from "@/stores/api-keys-store"; import { InfoCircledIcon, PlusIcon } from "@radix-ui/react-icons"; import { @@ -25,6 +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 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 4e76ce44..93cc9001 100644 --- a/web/src/components/api-keys/existing-api-key.tsx +++ b/web/src/components/api-keys/existing-api-key.tsx @@ -1,12 +1,12 @@ "use client"; import { useDeleteApiKey } from "@/hooks/use-delete-api-key"; -import { errorToast } from "@/lib/toast"; import { useApiKeysStore } from "@/stores/api-keys-store"; 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"; export default function ExistingApiKey({ key, @@ -18,6 +18,7 @@ export default function ExistingApiKey({ const { removeApiKey } = useApiKeysStore(); const deleteApiKey = useDeleteApiKey(); const handleDelete = () => deleteApiKey.mutate({ id: apiKey.id }); + const { errorToast } = useToastFunctions(); 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 d65f8596..8f569bdf 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 { infoToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { Flex, Switch, Text } from "@radix-ui/themes"; import { usePublishWorkflowApi } from "@/hooks/use-publish-workflow-api"; import { useEffect } from "react"; @@ -14,6 +14,7 @@ export default function PublishWorkflowToggleBase({ isLive, updateIsLiveState, }: PublishWorkflowToggleBaseProps) { + const { infoToast } = useToastFunctions(); 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 159d84e7..c39016b9 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 { errorToast, infoToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { useWorkflowStore } from "@/stores/workflow-store"; import { Cross1Icon } from "@radix-ui/react-icons"; import { Button, Dialog, Flex, Text } from "@radix-ui/themes"; @@ -14,6 +14,7 @@ export default function RunWorkflowDialog({ const { workflowName, isActive, payloadCache, setPayloadCache } = useWorkflowStore(); const triggerWorkflow = useTriggerWorkflowApi(); + const { errorToast, infoToast } = useToastFunctions(); 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 af617148..83034baf 100644 --- a/web/src/components/save-workflow-button/save-workflow-button.tsx +++ b/web/src/components/save-workflow-button/save-workflow-button.tsx @@ -5,10 +5,10 @@ import { DiscIcon } from "@radix-ui/react-icons"; import { useSaveWorkflowApi } from "@/hooks/use-save-workflow-api"; import { useWorkflowStore } from "@/stores/workflow-store"; import { useEffect } from "react"; -import { errorToast, infoToast } from "@/lib/toast"; import { AxiosError } from "axios"; import { useEditorActionStore } from "@/stores/editor-action-store"; import { EditorWorkflowNodeType } from "@/types/react-flow"; +import { useToastFunctions } from "@/lib/toast"; const SPACE = " "; @@ -16,6 +16,7 @@ export default function SaveWorkflowButton() { const { getWorkflow, updateWebhookIdAndSecret } = useWorkflowStore(); const { actionsIndex } = useEditorActionStore(); const saveWorkflow = useSaveWorkflowApi(); + const { errorToast, infoToast } = useToastFunctions(); useEffect(() => { if (saveWorkflow.isSuccess) { diff --git a/web/src/components/secrets/encrypted-secret.tsx b/web/src/components/secrets/encrypted-secret.tsx index 6eb5a3a6..cd37f388 100644 --- a/web/src/components/secrets/encrypted-secret.tsx +++ b/web/src/components/secrets/encrypted-secret.tsx @@ -5,10 +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 { errorToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { TrashIcon } from "@radix-ui/react-icons"; export default function EncryptedSecret({ idx }: { idx: number }) { + const { errorToast } = useToastFunctions(); 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 596b34a6..ec6f16c6 100644 --- a/web/src/components/secrets/new-secret.tsx +++ b/web/src/components/secrets/new-secret.tsx @@ -8,9 +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 { errorToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; export default function NewSecret({ idx }: { idx: number }) { + const { errorToast } = useToastFunctions(); 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 3756963d..0421c9a6 100644 --- a/web/src/components/utils/copy-text.tsx +++ b/web/src/components/utils/copy-text.tsx @@ -1,4 +1,4 @@ -import { successToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { CopyIcon } from "@radix-ui/react-icons"; import { Button, Flex, TextField, Tooltip } from "@radix-ui/themes"; @@ -7,6 +7,7 @@ export interface CopyTextProps { } export default function CopyText({ text }: CopyTextProps) { + const { successToast } = useToastFunctions(); 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 8e7255ac..7e64c402 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 { errorToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { Box, Flex, Spinner, ScrollArea, Text } from "@radix-ui/themes"; import { useEffect, useState } from "react"; import WorkflowRunTrace from "./workflow-run-trace"; @@ -50,6 +50,7 @@ export default function WorkflowRunHistory({ const { data, isPending, error } = useListWorkflowRunsApi(workflowId); const [selectedRunIdx, setSelectedRunIdx] = useState(null); const [runs, setRuns] = useState([]); + const { errorToast } = useToastFunctions(); 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 dcb8f8a8..bc200325 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 { errorToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { TJson } from "@/types/json"; import { Box, DataList, Flex, ScrollArea, Tabs, Text } from "@radix-ui/themes"; import { useEffect } from "react"; @@ -20,6 +20,7 @@ export default function WorkflowRunStep({ workflowRunId, workflowRunStepId, ); + const { errorToast } = useToastFunctions(); 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 01ea2edd..34cee889 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 { errorToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import Row from "./row"; import ErrorCallout from "@/components/utils/error-callout"; import { TWorkflowRunStepMetadata } from "@/types/workflow-runs"; @@ -24,6 +24,7 @@ export default function WorkflowRunTrace({ ); const [selectedStepIdx, setSelectedStepIdx] = useState(0); const [steps, setSteps] = useState([]); + const { errorToast } = useToastFunctions(); useEffect(() => { if (data) { diff --git a/web/src/components/workflow-editor/workflow-editor.tsx b/web/src/components/workflow-editor/workflow-editor.tsx index 0a0838f2..22dc25b3 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 { errorToast } from "@/lib/toast"; +import { useToastFunctions } from "@/lib/toast"; import { AxiosError } from "axios"; import { useRouter } from "next/navigation"; @@ -36,6 +36,7 @@ export default function WorkflowEditor({ const { isNew, setWorkflow, clearWorkflowStore } = useWorkflowStore(); const { setEditorActions } = useEditorActionStore(); + const { errorToast } = useToastFunctions(); // Loading Actions const {