From 3d2d8c7de7e4a9cd8ddc22d9249fc123006b82ec Mon Sep 17 00:00:00 2001 From: Angel Ruiz-Bates Date: Fri, 20 Nov 2020 01:50:04 -0700 Subject: [PATCH 1/4] add actions dialog to bridge editor page --- components/Editor/ActionsDialog/index.js | 103 +++++++++++++++++++++++ components/Editor/index.js | 10 ++- package-lock.json | 16 ++++ 3 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 components/Editor/ActionsDialog/index.js diff --git a/components/Editor/ActionsDialog/index.js b/components/Editor/ActionsDialog/index.js new file mode 100644 index 0000000..cc3ad86 --- /dev/null +++ b/components/Editor/ActionsDialog/index.js @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import { useRouter } from 'next/router'; +import PropTypes from 'prop-types'; +import { makeStyles } from '@material-ui/core/styles'; +import CancelIcon from '@material-ui/icons/Cancel'; +import DeleteForeverIcon from '@material-ui/icons/DeleteForever'; +import Avatar from '@material-ui/core/Avatar'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemAvatar from '@material-ui/core/ListItemAvatar'; +import ListItemText from '@material-ui/core/ListItemText'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@material-ui/core/Dialog'; +import PauseIcon from '@material-ui/icons/Pause'; +import { blue } from '@material-ui/core/colors'; +import { Snackbar } from '@material-ui/core'; +import Alert from '@material-ui/lab/Alert'; + +import api from '../../../utils/api'; + +const useStyles = makeStyles({ + avatar: { + backgroundColor: blue[100], + color: blue[600], + }, +}); + +function SimpleDialog({ open, onClose, id }) { + const [errorOpen, setErrorOpen] = useState(false); + const classes = useStyles(); + const router = useRouter(); + + const handleAbort = () => { + }; + const handleDeactive = (active) => { + }; + const handleDelete = () => { + api.delete(`/bridges/${id}`).then(() => { + router.push('/dashboard'); + }).catch(() => { + setErrorOpen(true); + setTimeout(() => { + setErrorOpen(false); + }, 2500); + }); + }; + + + return ( + + + + Some error occurred. Please try again. + + + Bridge Actions + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +SimpleDialog.propTypes = { + onClose: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, + id: PropTypes.number.isRequired, +}; + +function SimpleDialogDemo({ open, onClose, id }) { + return ( + + ); +} + +export default SimpleDialogDemo; diff --git a/components/Editor/index.js b/components/Editor/index.js index dee1315..6c1f839 100644 --- a/components/Editor/index.js +++ b/components/Editor/index.js @@ -18,6 +18,7 @@ import BridgeTestCard from './BridgeTestCard'; import PayloadCard from './PayloadCard'; import EnvironmentVariablesCard from './EnvironmentVariablesCard'; import HeadersCard from './HeadersCard'; +import ActionsDialog from './ActionsDialog'; import api from '../../utils/api'; @@ -40,6 +41,7 @@ function Editor({ bridge, isEditView }) { const classes = useStyles(); const router = useRouter(); const [open, setOpen] = useState(false); + const [actionsDialogOpen, setActionsDialogOpen] = useState(false); const [errorOpen, setErrorOpen] = useState(false); // TODO: Custom error messages // const [errMsg, setErrMsg] = useState(''); @@ -79,6 +81,7 @@ function Editor({ bridge, isEditView }) { + ' "accessPayload": "$payload.message"\n' + '}', }; + console.log(id); const generatePayload = (values) => ({ title: values.title, @@ -144,7 +147,12 @@ function Editor({ bridge, isEditView }) { - + setActionsDialogOpen(false)} + id={id} + /> + diff --git a/package-lock.json b/package-lock.json index 50644a8..5e9ccb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2475,6 +2475,15 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==" }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bl": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.3.tgz", @@ -4823,6 +4832,12 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -10038,6 +10053,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, From 0c872471a5924ce386c785b6c1f6af9cee0b2e5b Mon Sep 17 00:00:00 2001 From: Angel Ruiz-Bates Date: Fri, 20 Nov 2020 10:55:00 -0700 Subject: [PATCH 2/4] minor updates --- components/Editor/ActionsDialog/index.js | 22 ++++++++++++---------- components/Editor/index.js | 1 - 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/components/Editor/ActionsDialog/index.js b/components/Editor/ActionsDialog/index.js index cc3ad86..92ae040 100644 --- a/components/Editor/ActionsDialog/index.js +++ b/components/Editor/ActionsDialog/index.js @@ -32,8 +32,17 @@ function SimpleDialog({ open, onClose, id }) { const handleAbort = () => { }; - const handleDeactive = (active) => { + + const handleActivate = async (active = false) => { + await api.patch(`/bridges/${id}`, { bridge: { active } }).then(() => { + }).catch(() => { + setErrorOpen(true); + setTimeout(() => { + setErrorOpen(false); + }, 2500); + }); }; + const handleDelete = () => { api.delete(`/bridges/${id}`).then(() => { router.push('/dashboard'); @@ -45,7 +54,6 @@ function SimpleDialog({ open, onClose, id }) { }); }; - return ( - + @@ -94,10 +102,4 @@ SimpleDialog.propTypes = { id: PropTypes.number.isRequired, }; -function SimpleDialogDemo({ open, onClose, id }) { - return ( - - ); -} - -export default SimpleDialogDemo; +export default SimpleDialog; diff --git a/components/Editor/index.js b/components/Editor/index.js index 6c1f839..99cb956 100644 --- a/components/Editor/index.js +++ b/components/Editor/index.js @@ -81,7 +81,6 @@ function Editor({ bridge, isEditView }) { + ' "accessPayload": "$payload.message"\n' + '}', }; - console.log(id); const generatePayload = (values) => ({ title: values.title, From e155b9ccd99549ff8462cd200daf6000b726b11a Mon Sep 17 00:00:00 2001 From: Angel Ruiz-Bates Date: Fri, 20 Nov 2020 11:47:23 -0700 Subject: [PATCH 3/4] added active to prop types --- components/Editor/ActionsDialog/index.js | 30 +++++++++++++++++++----- components/Editor/index.js | 6 +++++ pages/bridge/[id].js | 1 + 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/components/Editor/ActionsDialog/index.js b/components/Editor/ActionsDialog/index.js index 92ae040..0016afc 100644 --- a/components/Editor/ActionsDialog/index.js +++ b/components/Editor/ActionsDialog/index.js @@ -25,16 +25,24 @@ const useStyles = makeStyles({ }, }); -function SimpleDialog({ open, onClose, id }) { +function ActionsDialog({ + active, open, onClose, id, +}) { const [errorOpen, setErrorOpen] = useState(false); + const [successOpen, setSuccessOpen] = useState(false); const classes = useStyles(); const router = useRouter(); const handleAbort = () => { }; - const handleActivate = async (active = false) => { - await api.patch(`/bridges/${id}`, { bridge: { active } }).then(() => { + const handleActivate = async () => { + await api.patch(`/bridges/${id}`, { bridge: { active: !active } }).then(() => { + router.push(`/bridge/${id}`); + setSuccessOpen(true); + setTimeout(() => { + setSuccessOpen(false); + }, 2500); }).catch(() => { setErrorOpen(true); setTimeout(() => { @@ -56,6 +64,15 @@ function SimpleDialog({ open, onClose, id }) { return ( + + + Success! Your bridge has been updated. + + - + @@ -96,10 +113,11 @@ function SimpleDialog({ open, onClose, id }) { ); } -SimpleDialog.propTypes = { +ActionsDialog.propTypes = { + active: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, id: PropTypes.number.isRequired, }; -export default SimpleDialog; +export default ActionsDialog; diff --git a/components/Editor/index.js b/components/Editor/index.js index 50b9a07..705b51e 100644 --- a/components/Editor/index.js +++ b/components/Editor/index.js @@ -47,6 +47,7 @@ function Editor({ bridge, isEditView }) { // const [errMsg, setErrMsg] = useState(''); const { + active, id, outboundUrl, method, @@ -60,6 +61,7 @@ function Editor({ bridge, isEditView }) { const delay = String(bridge.delay); const initialValues = { + active, title, outboundUrl, method, @@ -92,6 +94,7 @@ function Editor({ bridge, isEditView }) { }); const generatePayload = (values) => ({ + active: values.active, title: values.title, method: values.method, outbound_url: values.outboundUrl, @@ -156,6 +159,7 @@ function Editor({ bridge, isEditView }) { setActionsDialogOpen(false)} id={id} @@ -215,6 +219,7 @@ export default Editor; Editor.defaultProps = { isEditView: false, bridge: { + active: true, title: '', outboundUrl: '', method: '', @@ -237,6 +242,7 @@ Editor.defaultProps = { Editor.propTypes = { isEditView: PropTypes.bool, bridge: PropTypes.shape({ + active: PropTypes.bool, id: PropTypes.number, title: PropTypes.string, outboundUrl: PropTypes.string, diff --git a/pages/bridge/[id].js b/pages/bridge/[id].js index 5572bbd..5b897b9 100644 --- a/pages/bridge/[id].js +++ b/pages/bridge/[id].js @@ -37,6 +37,7 @@ export async function getServerSideProps(context) { Show.propTypes = { bridge: PropTypes.shape({ + active: PropTypes.bool.isRequired, id: PropTypes.number.isRequired, outboundUrl: PropTypes.string.isRequired, method: PropTypes.string.isRequired, From fdb000b1b82372db66dbef25960f0b9c21a8355f Mon Sep 17 00:00:00 2001 From: Angel Ruiz-Bates Date: Fri, 20 Nov 2020 18:40:25 -0700 Subject: [PATCH 4/4] api change --- components/Editor/ActionsDialog/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Editor/ActionsDialog/index.js b/components/Editor/ActionsDialog/index.js index 0016afc..f0d8760 100644 --- a/components/Editor/ActionsDialog/index.js +++ b/components/Editor/ActionsDialog/index.js @@ -37,7 +37,7 @@ function ActionsDialog({ }; const handleActivate = async () => { - await api.patch(`/bridges/${id}`, { bridge: { active: !active } }).then(() => { + await api.patch(`/bridges/${id}/${active ? 'deactivate' : 'activate'}`).then(() => { router.push(`/bridge/${id}`); setSuccessOpen(true); setTimeout(() => {