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"