migrate blueprint toaster to react 18

CARTAvis · Oct 25, 2024 · 49f5c43 · 49f5c43
1 parent a998e7f
commit 49f5c43
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 73 deletions.
diff --git a/src/components/Dialogs/CodeSnippetDialog/CodeSnippetDialogComponent.tsx b/src/components/Dialogs/CodeSnippetDialog/CodeSnippetDialogComponent.tsx
@@ -78,7 +78,7 @@ export class CodeSnippetDialogComponent extends React.Component {
         if (snippetStore.validInput && !snippetStore.isExecuting) {
             const success = await snippetStore.executeCurrentSnippet();
             if (!success) {
-                AppToaster.show(WarningToast("Error encountered while executing snippet. See JavaScript console for details."));
+                (await AppToaster).show(WarningToast("Error encountered while executing snippet. See JavaScript console for details."));
             }
         }
         this.tryRefocusEditor();

diff --git a/src/components/Dialogs/FileBrowser/FileBrowserDialogComponent.tsx b/src/components/Dialogs/FileBrowser/FileBrowserDialogComponent.tsx
@@ -199,7 +199,7 @@ export class FileBrowserDialogComponent extends React.Component {
                 this.overwriteExistingFileAlertVisible = true;
             } else {
                 console.error(err.message);
-                AppToaster.show({icon: "warning-sign", message: err.message, intent: "danger", timeout: 3000});
+                (await AppToaster).show({icon: "warning-sign", message: err.message, intent: "danger", timeout: 3000});
             }
         }
     };
@@ -219,7 +219,7 @@ export class FileBrowserDialogComponent extends React.Component {
                 this.overwriteExistingFileAlertVisible = true;
             } else {
                 console.error(err.message);
-                AppToaster.show(ErrorToast(err.message));
+                (await AppToaster).show(ErrorToast(err.message));
             }
         }
     };
@@ -245,14 +245,14 @@ export class FileBrowserDialogComponent extends React.Component {
                 await this.exportRegion(fileBrowserStore.fileList.directory, filename, true);
             } catch (err) {
                 console.error(err.message);
-                AppToaster.show(ErrorToast(err.message));
+                (await AppToaster).show(ErrorToast(err.message));
             }
         } else if (fileBrowserStore.browserMode === BrowserMode.SaveFile) {
             try {
                 await this.handleSaveFile(true);
             } catch (err) {
                 console.error(err.message);
-                AppToaster.show({icon: "warning-sign", message: err.message, intent: "danger", timeout: 3000});
+                (await AppToaster).show({icon: "warning-sign", message: err.message, intent: "danger", timeout: 3000});
             }
         }
     };

diff --git a/src/components/Dialogs/PreferenceDialog/PreferenceDialogComponent.tsx b/src/components/Dialogs/PreferenceDialog/PreferenceDialogComponent.tsx
@@ -148,7 +148,7 @@ export class PreferenceDialogComponent extends React.Component {
         const appStore = AppStore.Instance;
         try {
             await copyToClipboard(appStore.telemetryService.decodedUserId);
-            AppToaster.show(SuccessToast("clipboard", "Copied user ID to clipboard."));
+            (await AppToaster).show(SuccessToast("clipboard", "Copied user ID to clipboard."));
         } catch (err) {
             console.log(err);
         }

diff --git a/src/components/Dialogs/ShareWorkspaceDialog/ShareWorkspaceDialogComponent.tsx b/src/components/Dialogs/ShareWorkspaceDialog/ShareWorkspaceDialogComponent.tsx
@@ -51,7 +51,7 @@ export const ShareWorkspaceDialogComponent = observer(() => {
             setShareKey(shareKey);
         } catch (err) {
             console.log(err);
-            AppToaster.show(WarningToast("Could not generate a sharing link."));
+            (await AppToaster).show(WarningToast("Could not generate a sharing link."));
         }
     };
 

diff --git a/src/components/Dialogs/WorkspaceDialog/WorkspaceDialogComponent.tsx b/src/components/Dialogs/WorkspaceDialog/WorkspaceDialogComponent.tsx
@@ -71,14 +71,14 @@ export const WorkspaceDialogComponent = observer(() => {
             try {
                 const res = await appStore.saveWorkspace(name);
                 if (res) {
-                    AppToaster.show(SuccessToast("floppy-disk", "Workspace saved"));
+                    (await AppToaster).show(SuccessToast("floppy-disk", "Workspace saved"));
                     handleCloseClicked();
                     return;
                 }
             } catch (err) {
                 console.log(err);
             }
-            AppToaster.show(ErrorToast("Error saving workspace"));
+            (await AppToaster).show(ErrorToast("Error saving workspace"));
             setIsFetching(false);
         },
         [appStore, handleCloseClicked]
@@ -94,7 +94,7 @@ export const WorkspaceDialogComponent = observer(() => {
             try {
                 const res = await appStore.loadWorkspace(name);
                 if (res) {
-                    AppToaster.show(SuccessToast("floppy-disk", "Workspace loaded"));
+                    (await AppToaster).show(SuccessToast("floppy-disk", "Workspace loaded"));
                     handleCloseClicked();
                     return;
                 }

diff --git a/src/components/Menu/RootMenuComponent.tsx b/src/components/Menu/RootMenuComponent.tsx
@@ -189,7 +189,7 @@ export class RootMenuComponent extends React.Component {
                 onClick={async () => {
                     try {
                         await copyToClipboard(appStore.backendService.sessionId.toString());
-                        AppToaster.show(SuccessToast("clipboard", "Session ID copied!"));
+                        (await AppToaster).show(SuccessToast("clipboard", "Session ID copied!"));
                     } catch (err) {
                         console.log(err);
                     }
@@ -212,7 +212,7 @@ export class RootMenuComponent extends React.Component {
                         } else {
                             await copyToClipboard(document.URL);
                         }
-                        AppToaster.show(SuccessToast("clipboard", "Session URL copied!"));
+                        (await AppToaster).show(SuccessToast("clipboard", "Session URL copied!"));
                     } catch (err) {
                         console.log(err);
                     }

diff --git a/src/components/Shared/toaster.ts b/src/components/Shared/toaster.ts
@@ -1,11 +1,17 @@
-import {IconName, Position, Toaster, ToastProps} from "@blueprintjs/core";
+import {createRoot} from "react-dom/client";
+import {IconName, OverlayToaster, Position, ToastProps} from "@blueprintjs/core";
 
 import {copyToClipboard} from "utilities";
 
-export const AppToaster = Toaster.create({
-    className: "app-toaster",
-    position: Position.BOTTOM
-});
+export const AppToaster = OverlayToaster.createAsync(
+    {
+        className: "app-toaster",
+        position: Position.BOTTOM
+    },
+    {
+        domRenderer: (toaster, containerElement) => createRoot(containerElement).render(toaster)
+    }
+);
 
 export function SuccessToast(icon: IconName, message: string, timeout?: number): ToastProps {
     return {

diff --git a/src/services/ApiService.ts b/src/services/ApiService.ts
@@ -111,14 +111,14 @@ export class ApiService {
         }
     };
 
-    private handleAuthLost = () => {
+    private handleAuthLost = async () => {
         if (ApiService.RuntimeConfig.dashboardAddress) {
             this.clearToken();
             const redirectParams = btoa(window.location.search);
             window.open(`${ApiService.RuntimeConfig.dashboardAddress}?redirectParams=${redirectParams}`, "_self");
         } else {
             this.clearToken();
-            AppToaster.show({icon: "warning-sign", message: "Could not authenticate with server", intent: "danger", timeout: 3000});
+            (await AppToaster).show({icon: "warning-sign", message: "Could not authenticate with server", intent: "danger", timeout: 3000});
         }
     };
 
@@ -156,7 +156,7 @@ export class ApiService {
                 const url = `${ApiService.RuntimeConfig.apiAddress}/server/stop`;
                 await this.axiosInstance.post(url);
             } catch (err) {
-                AppToaster.show({icon: "warning-sign", message: "Could not stop CARTA server", intent: "danger", timeout: 3000});
+                (await AppToaster).show({icon: "warning-sign", message: "Could not stop CARTA server", intent: "danger", timeout: 3000});
                 console.log(err);
             }
         }

diff --git a/src/services/CatalogApiService.ts b/src/services/CatalogApiService.ts
@@ -79,11 +79,11 @@ export class CatalogApiService {
         } catch (error) {
             if (axios.isCancel(error)) {
                 if (error?.message) {
-                    AppToaster.show(WarningToast(error?.message));
+                    (await AppToaster).show(WarningToast(error?.message));
                 }
                 CatalogApiService.Instance.resetCancelTokenSource(CatalogDatabase.VIZIER);
             } else if (error?.message) {
-                AppToaster.show(ErrorToast(error.message));
+                (await AppToaster).show(ErrorToast(error.message));
             } else {
                 console.log("Vizier Resource Error: " + error);
             }
@@ -110,11 +110,11 @@ export class CatalogApiService {
         } catch (error) {
             if (axios.isCancel(error)) {
                 if (error?.message) {
-                    AppToaster.show(WarningToast(error?.message));
+                    (await AppToaster).show(WarningToast(error?.message));
                 }
                 CatalogApiService.Instance.resetCancelTokenSource(CatalogDatabase.VIZIER);
             } else if (error?.message) {
-                AppToaster.show(ErrorToast(error.message));
+                (await AppToaster).show(ErrorToast(error.message));
             } else {
                 console.log("VizieR Table Error: " + error);
             }
@@ -174,7 +174,7 @@ export class CatalogApiService {
         const appStore = AppStore.Instance;
         const frame = appStore.activeFrame;
         if (!frame) {
-            AppToaster.show(ErrorToast("Please load the image file"));
+            (await AppToaster).show(ErrorToast("Please load the image file"));
             throw new Error("No image file");
         }
 
@@ -207,11 +207,11 @@ export class CatalogApiService {
         } catch (error) {
             if (axios.isCancel(error)) {
                 if (error?.message) {
-                    AppToaster.show(WarningToast(error?.message));
+                    (await AppToaster).show(WarningToast(error?.message));
                 }
                 CatalogApiService.Instance.resetCancelTokenSource(CatalogDatabase.SIMBAD);
             } else if (error?.message) {
-                AppToaster.show(ErrorToast(error.message));
+                (await AppToaster).show(ErrorToast(error.message));
             } else {
                 console.log("Append Simbad Error: " + error);
             }