Use notistack to show alerts

openzipkin · Mar 18, 2020 · 420d2fb · 420d2fb
1 parent 19a2697
commit 420d2fb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 69 deletions.
diff --git a/zipkin-lens/package-lock.json b/zipkin-lens/package-lock.json
diff --git a/zipkin-lens/package.json b/zipkin-lens/package.json
@@ -54,13 +54,12 @@
     "moment": "^2.24.0",
     "mvy": "0.2.1",
     "node-fetch": "^2.3.0",
+    "notistack": "^0.9.9",
     "prettier": "^1.19.1",
     "prop-types": "^15.6.2",
     "query-string": "^6.1.0",
     "rc-slider": "^8.6.9",
     "react": "^16.13.0",
-    "react-alert": "^7.0.0",
-    "react-alert-template-basic": "^1.0.0",
     "react-chartjs-2": "^2.7.4",
     "react-dom": "^16.13.0",
     "react-redux": "^7.1.0",

diff --git a/zipkin-lens/src/components/TracePage/TracePage.jsx b/zipkin-lens/src/components/TracePage/TracePage.jsx
@@ -17,8 +17,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import Box from '@material-ui/core/Box';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { positions, Provider } from 'react-alert';
-import AlertTemplate from 'react-alert-template-basic';
+import { SnackbarProvider } from 'notistack';
 
 import TraceSummary from './TraceSummary';
 import TraceSummaryHeader from './TraceSummaryHeader';
@@ -64,32 +63,12 @@ export const TracePageImpl = React.memo(
       }
     }, [traceId, isTraceViewerPage, loadTrace, correctedTraceMap]);
 
-    // react-alerts doesn't allow us to pass a custom style to the alert template.
-    // So we need to wrap it in our own Alert class where we update the style as needed.
-    const Alert = function Alert(_ref) {
-      const { message } = _ref;
-      const { options } = _ref;
-      const { style } = _ref;
-      const { close } = _ref;
-
-      // The default template doesn't properly resize according to the text length.
-      style.width = 'auto';
-      // By default react-alert capitalizes the message, which breaks http urls.
-      style.textTransform = 'initial';
-      return AlertTemplate({ message, options, style, close });
-    };
-
-    const options = {
-      timeout: 10000,
-      position: positions.TOP_CENTER,
-    };
-
     if (isTraceViewerPage && isMalformedFile) {
       return (
         <>
-          <Provider template={Alert} {...options}>
+          <SnackbarProvider maxSnack={3}>
             <TraceSummaryHeader />
-          </Provider>
+          </SnackbarProvider>
           <MessageBar
             variant="error"
             message={errorMessage || 'Loading error'}
@@ -101,9 +80,9 @@ export const TracePageImpl = React.memo(
     if (!isTraceViewerPage && isLoading) {
       return (
         <>
-          <Provider template={Alert} {...options}>
+          <SnackbarProvider maxSnack={3}>
             <TraceSummaryHeader />
-          </Provider>
+          </SnackbarProvider>
           <Box width="100%" display="flex" justifyContent="center">
             <CircularProgress data-testid="progress-indicator" />
           </Box>
@@ -114,9 +93,9 @@ export const TracePageImpl = React.memo(
     if (!traceSummary && isTraceViewerPage) {
       return (
         <>
-          <Provider template={Alert} {...options}>
+          <SnackbarProvider maxSnack={3}>
             <TraceSummaryHeader />
-          </Provider>
+          </SnackbarProvider>
           <MessageBar variant="info" message="You need to upload JSON..." />
         </>
       );
@@ -125,18 +104,18 @@ export const TracePageImpl = React.memo(
     if (!traceSummary && !isTraceViewerPage) {
       return (
         <>
-          <Provider template={Alert} {...options}>
+          <SnackbarProvider maxSnack={3}>
             <TraceSummaryHeader />
-          </Provider>
+          </SnackbarProvider>
           <MessageBar variant="error" message="Trace not found" />
         </>
       );
     }
 
     return (
-      <Provider template={Alert} {...options}>
+      <SnackbarProvider maxSnack={3}>
         <TraceSummary traceSummary={traceSummary} />
-      </Provider>
+      </SnackbarProvider>
     );
   },
 );

diff --git a/zipkin-lens/src/components/TracePage/TraceSummaryHeader.jsx b/zipkin-lens/src/components/TracePage/TraceSummaryHeader.jsx
@@ -23,7 +23,7 @@ import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
-import { useAlert } from 'react-alert';
+import { useSnackbar } from 'notistack';
 
 import { useUiConfig } from '../UiConfig';
 
@@ -115,9 +115,23 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
       ? config.archiveUrl.replace('{traceId}', traceSummary.traceId)
       : undefined;
 
-  const alert = useAlert();
+  const { enqueueSnackbar } = useSnackbar();
 
   const archiveClick = useCallback(() => {
+    // If I put this fuction outside of the callback react complains that
+    // it'll force a rerender, so I'm just defining it in here. Anyway
+    // it won't be called often so the performance difference is negligible.
+    const alert = function alert(message, variant) {
+      enqueueSnackbar(message, {
+        variant,
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'center',
+        },
+        autoHideDuration: 10000, // 10 seconds
+      });
+    };
+
     // We don't store the raw json in the browser yet, so we need to make an
     // HTTP call to retrieve it again.
     fetch(`${api.TRACE}/${traceSummary.traceId}`)
@@ -154,21 +168,22 @@ const TraceSummaryHeader = React.memo(({ traceSummary, rootSpanIndex }) => {
               throw new Error('Failed to archive the trace');
             }
             if (archiveUrl) {
-              alert.success(
+              alert(
                 `Archive successful! This trace is now accessible at ${archiveUrl}`,
+                'success',
               );
             } else {
-              alert.success(`Archive successful!`);
+              alert(`Archive successful!`, 'success');
             }
           })
-          .catch(() => {
-            alert.error('Failed to archive the trace');
+          .catch((error) => {
+            alert(`Failed to archive the trace: ${error}`, 'error');
           });
       })
       .catch(() => {
-        alert.error('Failed to fetch trace from backend');
+        alert('Failed to fetch trace from backend', 'error');
       });
-  }, [archivePostUrl, archiveUrl, traceSummary, alert]);
+  }, [archivePostUrl, archiveUrl, traceSummary, enqueueSnackbar]);
 
   const handleSaveButtonClick = useCallback(() => {
     if (!traceSummary || !traceSummary.traceId) {