diff --git a/packages/web/.env-example b/packages/web/.env-example
index 6517aab7..daaaf507 100644
--- a/packages/web/.env-example
+++ b/packages/web/.env-example
@@ -1,2 +1,3 @@
PORT=3001
REACT_APP_GRAPHQL_URL=http://localhost:3000/graphql
+HTTPS=true
\ No newline at end of file
diff --git a/packages/web/package.json b/packages/web/package.json
index b280a791..97fc6dab 100644
--- a/packages/web/package.json
+++ b/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",
diff --git a/packages/web/src/components/AppConnectionRow/index.tsx b/packages/web/src/components/AppConnectionRow/index.tsx
index 357946d5..dd8773ef 100644
--- a/packages/web/src/components/AppConnectionRow/index.tsx
+++ b/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) => (<>{value}
>);
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) => 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 (
<>
diff --git a/packages/web/src/components/SnackbarProvider/index.tsx b/packages/web/src/components/SnackbarProvider/index.tsx
new file mode 100644
index 00000000..71244faa
--- /dev/null
+++ b/packages/web/src/components/SnackbarProvider/index.tsx
@@ -0,0 +1,16 @@
+import { SnackbarProvider as BaseSnackbarProvider, SnackbarProviderProps } from 'notistack';
+
+const SnackbarProvider = (props: SnackbarProviderProps) => {
+ return (
+
+ )
+};
+
+export default SnackbarProvider;
diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx
index 72afcc62..b952c68b 100644
--- a/packages/web/src/index.tsx
+++ b/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(
-
-
- {routes}
-
-
+
+
+
+ {routes}
+
+
+
,
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index d5f9fd1f..9736627c 100644
--- a/packages/web/src/locales/en.json
+++ b/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."
}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index c3a6f45f..9f0ddb71 100644
--- a/yarn.lock
+++ b/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"