feat: switch to new Toasts in all components

Admyral-Security · Oct 21, 2024 · 4aed6b9 · 4aed6b9
1 parent 95eaf57
commit 4aed6b9
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 28 deletions.
diff --git 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 }) {
 					</Box>
 					<Box>{children}</Box>
 				</Grid>
-				<ToastContainer
-					position="bottom-center"
-					autoClose={4000}
-					limit={4}
-					hideProgressBar={true}
-					stacked={false}
-					closeOnClick={true}
-					closeButton={false}
-					theme="colored"
-					transition={Slide}
-					icon={false}
-				/>
 			</ReactQueryProvider>
 		</ClientSessionValidator>
 	);

diff --git 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({
 		<html lang="en" className="h-full">
 			<body className={`${inter.className} h-full`}>
 				<SessionProvider>
-					<Theme>{children}</Theme>
+					<Theme>
+						<ToastProvider>{children}</ToastProvider>
+					</Theme>
 				</SessionProvider>
 			</body>
 		</html>

diff --git 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>(State.CLOSED);
 	const [name, setName] = useState<string | undefined>(undefined);
 	const [secretKey, setSecretKey] = useState<string>("");
+	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
@@ -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
@@ -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
@@ -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
@@ -5,17 +5,18 @@ 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 = " ";
 
 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
@@ -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
@@ -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
@@ -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
@@ -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<number | null>(null);
 	const [runs, setRuns] = useState<TWorkflowRunMetadata[]>([]);
+	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
@@ -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
@@ -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<number>(0);
 	const [steps, setSteps] = useState<TWorkflowRunStepMetadata[]>([]);
+	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
@@ -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 {