Yellow editor page abort actions snackalert

components/Editor/ActionsDialog/index.js

@@ -10,10 +10,10 @@ 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 { ListItemIcon, Snackbar } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
+import { ListItemIcon } from '@material-ui/core';
 
 import api from '../../../utils/api';
+import SnackAlert from '../../shared/SnackAlert';
 
 const useStyles = makeStyles((theme) => ({
   avatar: {
@@ -27,9 +27,16 @@ function ActionsDialog({
 }) {
   const [errorOpen, setErrorOpen] = useState(false);
   const [successOpen, setSuccessOpen] = useState(false);
+  const [warningOpen, setWarningOpen] = useState(false);
   const classes = useStyles();
   const router = useRouter();
 
+  const closeAlerts = () => {
+    setSuccessOpen(false);
+    setWarningOpen(false);
+    setErrorOpen(false);
+  };
+
   const handleError = () => {
     setErrorOpen(true);
     setTimeout(() => {
@@ -39,11 +46,12 @@ function ActionsDialog({
 
   const handleSuccess = () => {
     setTimeout(() => {
-      setSuccessOpen(false);
+      closeAlerts();
     }, 2500);
   };
 
   const handleAbort = () => {
+    closeAlerts();
     api.patch('/events/abort', {
       bridge_slug: bridgeSlug,
     })
@@ -58,42 +66,30 @@ function ActionsDialog({
   };
 
   const handleActivate = () => {
+    closeAlerts();
     api.patch(`/bridges/${bridgeSlug}/${active ? 'deactivate' : 'activate'}`).then(() => {
       router.push(`/bridge/${bridgeSlug}`);
-      setSuccessOpen(true);
+      if (active) {
+        setWarningOpen(true);
+      } else {
+        setSuccessOpen(true);
+      }
       handleSuccess();
     }).catch(() => handleError());
   };
 
   const handleDelete = () => {
+    closeAlerts();
     api.delete(`/bridges/${bridgeSlug}`).then(() => {
       router.push('/dashboard');
     }).catch(() => handleError());
   };
 
   return (
     <Dialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open}>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={successOpen}
-        autoHideDuration={3000}
-        id="actions-success-message"
-      >
-        <Alert severity="success">
-          Success! Your bridge has been updated.
-        </Alert>
-      </Snackbar>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={errorOpen}
-        autoHideDuration={3000}
-        id="actions-error-message"
-      >
-        <Alert severity="error">
-          Some error occurred. Please try again.
-        </Alert>
-      </Snackbar>
-
+      <SnackAlert open={successOpen} severity="success" message="Success! Your bridge has been updated." id="actions-success-message" />
+      <SnackAlert open={warningOpen} severity="warning" message="Your bridge has been deactivated." id="actions-warning-message" />
+      <SnackAlert open={errorOpen} severity="error" message="Some error occurred. Please try again." id="actions-error-message" />
       <DialogTitle id="simple-dialog-title">Bridge Actions</DialogTitle>
       <List>
         <ListItem button onClick={handleAbort} id="action-abort">

components/Editor/index.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { Formik, Form } from 'formik';
 import { useRouter } from 'next/router';
 
+import Alert from '@material-ui/lab/Alert';
 import Navbar from '../shared/dashboard/Navbar';
 import Sidebar from '../Sidebar';
 
@@ -25,6 +26,10 @@ const useStyles = makeStyles((theme) => ({
   root: {
     marginLeft: 180,
   },
+  alert: {
+    width: '100%',
+    marginBottom: theme.spacing(2),
+  },
   form: {
     minWidth: '100%',
   },
@@ -194,6 +199,7 @@ function Editor({ bridge, isEditView }) {
             {({ values, submitForm }) => (
               <Form className={classes.form}>
                 <Grid container>
+                  <Alert id="deactivated-alert" open={!active} className={classes.alert} severity="warning">This bridge is currently deactivated.</Alert>
                   <Grid item sm={8} md={8} lg={8} container justify="flex-end">
                     <Grid>
                       <Typography

specs/integration/bridgeapi/bridges/id.spec.js

@@ -110,7 +110,7 @@ describe('Show bridge', () => {
 
     cy.get('#actions-button').click();
     cy.get('#action-deactive').click();
-    cy.get('#actions-success-message').contains('Success! Your bridge has been updated.');
+    cy.get('#actions-warning-message').contains('Your bridge has been deactivated.');
   });
 
   it('can show error when deactiving fails', () => {