From cdd6b56d429eb4d481b1d11acf3dd59e0fa9792c Mon Sep 17 00:00:00 2001 From: Pierre Jacquier Date: Sat, 17 May 2025 18:01:12 -0400 Subject: [PATCH] Change wasm init failed banner to a toast (#7043) * Change wasm init failed banner to a toast Closes #6976 for good! * Move :( * Rm testing bit * Align left and bot suggestions * Update src/components/WasmErrToast.tsx Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> --------- Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> --- src/App.tsx | 23 ++++++- src/Router.tsx | 2 - ...loadAppBanner.tsx => DownloadAppToast.tsx} | 0 src/components/WasmErrBanner.tsx | 64 ------------------- src/components/WasmErrToast.tsx | 55 ++++++++++++++++ src/lib/constants.ts | 3 + 6 files changed, 80 insertions(+), 67 deletions(-) rename src/components/{DownloadAppBanner.tsx => DownloadAppToast.tsx} (100%) delete mode 100644 src/components/WasmErrBanner.tsx create mode 100644 src/components/WasmErrToast.tsx diff --git a/src/App.tsx b/src/App.tsx index 726e07de2..bc786b327 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -42,13 +42,15 @@ import { TutorialRequestToast, } from '@src/routes/Onboarding/utils' import { reportRejection } from '@src/lib/trap' -import { DownloadAppToast } from '@src/components/DownloadAppBanner' +import { DownloadAppToast } from '@src/components/DownloadAppToast' +import { WasmErrToast } from '@src/components/WasmErrToast' import openWindow from '@src/lib/openWindow' import { APP_DOWNLOAD_PATH, CREATE_FILE_URL_PARAM, DOWNLOAD_APP_TOAST_ID, ONBOARDING_TOAST_ID, + WASM_INIT_FAILED_TOAST_ID, } from '@src/lib/constants' import { isPlaywright } from '@src/lib/isPlaywright' import { VITE_KC_SITE_BASE_URL } from '@src/env' @@ -181,6 +183,25 @@ export function App() { } }, []) + useEffect(() => { + const needsWasmInitFailedToast = !isDesktop() && kclManager.wasmInitFailed + if (needsWasmInitFailedToast) { + toast.success( + () => + WasmErrToast({ + onDismiss: () => { + toast.dismiss(WASM_INIT_FAILED_TOAST_ID) + }, + }), + { + id: WASM_INIT_FAILED_TOAST_ID, + duration: Number.POSITIVE_INFINITY, + icon: null, + } + ) + } + }, [kclManager.wasmInitFailed]) + // Only create the native file menus on desktop useEffect(() => { if (isDesktop()) { diff --git a/src/Router.tsx b/src/Router.tsx index 8e4a60919..ea59591f8 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -14,7 +14,6 @@ import { CommandBar } from '@src/components/CommandBar/CommandBar' import { ErrorPage } from '@src/components/ErrorPage' import FileMachineProvider from '@src/components/FileMachineProvider' import ModelingMachineProvider from '@src/components/ModelingMachineProvider' -import { WasmErrBanner } from '@src/components/WasmErrBanner' import { NetworkContext } from '@src/hooks/useNetworkContext' import { useNetworkStatus } from '@src/hooks/useNetworkStatus' import { coreDump } from '@src/lang/wasm' @@ -84,7 +83,6 @@ const router = createRouter([ - ), diff --git a/src/components/DownloadAppBanner.tsx b/src/components/DownloadAppToast.tsx similarity index 100% rename from src/components/DownloadAppBanner.tsx rename to src/components/DownloadAppToast.tsx diff --git a/src/components/WasmErrBanner.tsx b/src/components/WasmErrBanner.tsx deleted file mode 100644 index ff36422ff..000000000 --- a/src/components/WasmErrBanner.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { Dialog } from '@headlessui/react' -import { useState } from 'react' - -import { ActionButton } from '@src/components/ActionButton' -import { useKclContext } from '@src/lang/KclProvider' - -export function WasmErrBanner() { - const [isBannerDismissed, setBannerDismissed] = useState(false) - - const { wasmInitFailed } = useKclContext() - - if (!wasmInitFailed) return null - - return ( - ({})} - > - -
-

- Problem with our WASM blob :( -

- setBannerDismissed(true)} - iconStart={{ - icon: 'close', - className: 'p-1', - bgClassName: - 'bg-warn-70 hover:bg-warn-80 dark:bg-warn-70 dark:hover:bg-warn-80', - iconClassName: - 'text-warn-10 group-hover:text-warn-10 dark:text-warn-10 dark:group-hover:text-warn-10', - }} - className="!p-0 !bg-transparent !border-transparent" - /> -
-

- - WASM or web assembly - {' '} - is core part of how our app works. It might because you OS is not - up-to-date. If you're able to update your OS to a later version, try - that. If not create an issue on{' '} - - our Github - - . -

- - - ) -} diff --git a/src/components/WasmErrToast.tsx b/src/components/WasmErrToast.tsx new file mode 100644 index 000000000..d7d4d7cb0 --- /dev/null +++ b/src/components/WasmErrToast.tsx @@ -0,0 +1,55 @@ +import { ActionButton } from '@src/components/ActionButton' + +export type WasmErrorToastProps = { + onDismiss: () => void +} +export function WasmErrToast({ onDismiss }: WasmErrorToastProps) { + return ( +
+ :( +
+
+

Problem with our WASM blob

+

+ + WASM or web assembly + {' '} + is core part of how our app works. It might be because your OS is not + up-to-date. If you're able to update your OS to a later version, try + that. If not create an issue on{' '} + + our Github + + . +

+
+
+ + Dismiss + +
+
+
+ ) +} diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 20a0f03c0..0f14096e6 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -130,6 +130,9 @@ export const ONBOARDING_TOAST_ID = 'onboarding-toast' /** Toast id for the download app toast on web */ export const DOWNLOAD_APP_TOAST_ID = 'download-app-toast' +/** Toast id for the wasm init err toast on web */ +export const WASM_INIT_FAILED_TOAST_ID = 'wasm-init-failed-toast' + /** Local sketch axis values in KCL for operations, it could either be 'X' or 'Y' */ export const KCL_AXIS_X = 'X' export const KCL_AXIS_Y = 'Y'