feat: introduce notistack for snackbars

packages/web/.env-example

@@ -1,2 +1,3 @@
 PORT=3001
 REACT_APP_GRAPHQL_URL=http://localhost:3000/graphql
+HTTPS=true

packages/web/package.json

@@ -20,6 +20,7 @@
     "clipboard-copy": "^4.0.1",
     "graphql": "^15.6.0",
     "lodash.template": "^4.5.0",
+    "notistack": "^2.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.17.2",

packages/web/src/components/AppConnectionRow/index.tsx

@@ -4,6 +4,7 @@ import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { useSnackbar } from 'notistack';
 
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
@@ -19,6 +20,7 @@ type AppConnectionRowProps = {
 const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><br /></>);
 
 function AppConnectionRow(props: AppConnectionRowProps) {
+  const { enqueueSnackbar } = useSnackbar();
   const [testConnection, { called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION);
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
 
@@ -33,9 +35,9 @@ function AppConnectionRow(props: AppConnectionRowProps) {
   };
 
   const onContextMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(contextButtonRef.current);
-  const onContextMenuAction = React.useCallback((event, action: { [key: string]: string }) => {
+  const onContextMenuAction = React.useCallback(async (event, action: { [key: string]: string }) => {
     if (action.type === 'delete') {
-      deleteConnection({
+      await deleteConnection({
         variables: { id },
         update: (cache, mutationResult) => {
           const connectionCacheId = cache.identify({
@@ -48,10 +50,12 @@ function AppConnectionRow(props: AppConnectionRowProps) {
           });
         }
       });
+
+      enqueueSnackbar(formatMessage('connection.deletedMessage'), { variant: 'success' });
     } else if (action.type === 'test') {
       testConnection({ variables: { id } });
     }
-  }, [deleteConnection, id, testConnection]);
+  }, [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar]);
 
   return (
     <>

packages/web/src/components/SnackbarProvider/index.tsx

@@ -0,0 +1,16 @@
+import { SnackbarProvider as BaseSnackbarProvider, SnackbarProviderProps } from 'notistack';
+
+const SnackbarProvider = (props: SnackbarProviderProps) => {
+  return (
+    <BaseSnackbarProvider
+      {...props}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      dense
+    />
+  )
+};
+
+export default SnackbarProvider;

packages/web/src/index.tsx

@@ -4,6 +4,7 @@ import Layout from 'components/Layout';
 import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
 import ApolloProvider from 'components/ApolloProvider';
+import SnackbarProvider from 'components/SnackbarProvider';
 import Router from 'components/Router';
 import routes from 'routes';
 import reportWebVitals from './reportWebVitals';
@@ -12,11 +13,13 @@ ReactDOM.render(
   <ApolloProvider>
     <IntlProvider>
       <ThemeProvider>
-        <Router>
-          <Layout>
-            {routes}
-          </Layout>
-        </Router>
+        <SnackbarProvider>
+          <Router>
+            <Layout>
+              {routes}
+            </Layout>
+          </Router>
+        </SnackbarProvider>
       </ThemeProvider>
     </IntlProvider>
   </ApolloProvider>,

packages/web/src/locales/en.json

@@ -20,5 +20,6 @@
   "connection.viewFlows": "View flows",
   "connection.testConnection": "Test connection",
   "connection.reconnect": "Reconnect",
-  "connection.delete": "Delete"
+  "connection.delete": "Delete",
+  "connection.deletedMessage": "The connection has been deleted."
 }