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."
 }

yarn.lock

@@ -5159,7 +5159,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clsx@^1.1.1:
+clsx@^1.1.0, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -10972,6 +10972,14 @@ normalize-url@^6.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+notistack@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.2.tgz#18361a0ce39d2c2d8c3ef58ae43cf4b30d78b800"
+  integrity sha512-Z2kD6QK9n/9V9zXQfN3ZgH22TefBWE3OZ/q74gMVslGPA9j9WGjoi+YxsgkTAOY8NqTYdUe8aijd2kXsGNYp6g==
+  dependencies:
+    clsx "^1.1.0"
+    hoist-non-react-statics "^3.3.0"
+
 npm-bundled@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.2.tgz#944c78789bd739035b70baa2ca5cc32b8d860bc1"