Add actions dialog to bridge editor page

components/Editor/ActionsDialog/index.js

@@ -0,0 +1,123 @@
+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 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 () => {
+    await api.patch(`/bridges/${id}/${active ? 'deactivate' : 'activate'}`).then(() => {
+      router.push(`/bridge/${id}`);
+      setSuccessOpen(true);
+      setTimeout(() => {
+        setSuccessOpen(false);
+      }, 2500);
+    }).catch(() => {
+      setErrorOpen(true);
+      setTimeout(() => {
+        setErrorOpen(false);
+      }, 2500);
+    });
+  };
+
+  const handleDelete = () => {
+    api.delete(`/bridges/${id}`).then(() => {
+      router.push('/dashboard');
+    }).catch(() => {
+      setErrorOpen(true);
+      setTimeout(() => {
+        setErrorOpen(false);
+      }, 2500);
+    });
+  };
+
+  return (
+    <Dialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open}>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={successOpen}
+        autoHideDuration={3000}
+      >
+        <Alert severity="success">
+          Success! Your bridge has been updated.
+        </Alert>
+      </Snackbar>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={errorOpen}
+        autoHideDuration={3000}
+      >
+        <Alert severity="error">
+          Some error occurred. Please try again.
+        </Alert>
+      </Snackbar>
+      <DialogTitle id="simple-dialog-title">Bridge Actions</DialogTitle>
+      <List>
+        <ListItem button onClick={handleAbort}>
+          <ListItemAvatar>
+            <Avatar className={classes.avatar}>
+              <CancelIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Abort Ongoing Requests" />
+        </ListItem>
+        <ListItem button onClick={handleActivate}>
+          <ListItemAvatar>
+            <Avatar className={classes.avatar}>
+              <PauseIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={`${active ? 'Deactivate' : 'Activate'} Bridge`} />
+        </ListItem>
+        <ListItem button onClick={handleDelete}>
+          <ListItemAvatar>
+            <Avatar className={classes.avatar}>
+              <DeleteForeverIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Delete Bridge" />
+        </ListItem>
+      </List>
+    </Dialog>
+  );
+}
+
+ActionsDialog.propTypes = {
+  active: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+  id: PropTypes.number.isRequired,
+};
+
+export default ActionsDialog;

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,11 +41,13 @@ 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('');
 
   const {
+    active,
     id,
     outboundUrl,
     method,
@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
   const delay = String(bridge.delay);
 
   const initialValues = {
+    active,
     title,
     outboundUrl,
     method,
@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
   });
 
   const generatePayload = (values) => ({
+    active: values.active,
     title: values.title,
     method: values.method,
     outbound_url: values.outboundUrl,
@@ -165,20 +170,14 @@ function Editor({ bridge, isEditView }) {
                   </Grid>
                   <Grid item sm={4} md={4} lg={4} container justify="flex-end">
                     <Grid>
-                      <Button
-                        variant="outlined"
-                        color="secondary"
-                        className={classes.action}
-                      >
-                        Actions
-                      </Button>
-                      <Button
-                        onClick={submitForm}
-                        variant="contained"
-                        color="secondary"
-                      >
-                        Save
-                      </Button>
+                      <ActionsDialog
+                        active={active}
+                        open={actionsDialogOpen}
+                        onClose={() => setActionsDialogOpen(false)}
+                        id={id}
+                      />
+                      <Button onClick={() => setActionsDialogOpen(true)} variant="outlined" color="secondary" className={classes.action}>Actions</Button>
+                      <Button onClick={submitForm} variant="contained" color="secondary">Save</Button>
                     </Grid>
                   </Grid>
                 </Grid>
@@ -227,6 +226,7 @@ export default Editor;
 Editor.defaultProps = {
   isEditView: false,
   bridge: {
+    active: true,
     title: '',
     outboundUrl: '',
     method: '',
@@ -249,6 +249,7 @@ Editor.defaultProps = {
 Editor.propTypes = {
   isEditView: PropTypes.bool,
   bridge: PropTypes.shape({
+    active: PropTypes.bool,
     id: PropTypes.number,
     title: PropTypes.string,
     outboundUrl: PropTypes.string,

pages/bridge/[id].js

@@ -42,6 +42,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,