Skip to content

Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
angeljruiz merged 6 commits into from
Nov 22, 2020
Merged

Add actions dialog to bridge editor page #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d2d8c7
add actions dialog to bridge editor page
angeljruiz Nov 20, 2020
0c87247
minor updates
angeljruiz Nov 20, 2020
867182a
Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…
angeljruiz Nov 20, 2020
e155b9c
added active to prop types
angeljruiz Nov 20, 2020
1068179
Merge branch 'master' into add_actions_dialog_bridge_editor
angeljruiz Nov 20, 2020
fdb000b
api change
angeljruiz Nov 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 123 additions & 0 deletions components/Editor/ActionsDialog/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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;
29 changes: 15 additions & 14 deletions components/Editor/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
const delay = String(bridge.delay);

const initialValues = {
active,
title,
outboundUrl,
method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
});

const generatePayload = (values) => ({
active: values.active,
title: values.title,
method: values.method,
outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
isEditView: false,
bridge: {
active: true,
title: '',
outboundUrl: '',
method: '',
Expand All@@ -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,
Expand Down
16 changes: 16 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions pages/bridge/[id].js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Add actions dialog to bridge editor page by angeljruiz · Pull Request #40 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

angeljruiz
merged 6 commits into

from

Nov 22, 2020
 Merged


Add actions dialog to bridge editor page
#40
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
3d2d8c7

add actions dialog to bridge editor page


angeljruiz Nov 20, 2020
0c87247

minor updates


angeljruiz Nov 20, 2020
867182a

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Nov 20, 2020
e155b9c

added active to prop types


angeljruiz Nov 20, 2020
1068179

Merge branch 'master' into add_actions_dialog_bridge_editor


angeljruiz Nov 20, 2020
fdb000b

api change


angeljruiz Nov 21, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


123 changes: 123 additions & 0 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;

29 changes: 15 additions & 14 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
 const delay = String(bridge.delay);

 const initialValues = {
 active,
 title,
 outboundUrl,
 method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
 });

 const generatePayload = (values) => ({
 active: values.active,
 title: values.title,
 method: values.method,
 outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
 isEditView: false,
 bridge: {
 active: true,
 title: '',
 outboundUrl: '',
 method: '',
Expand All@@ -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,
Expand Down

16 changes: 16 additions & 0 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


1 change: 1 addition & 0 deletions
pages/bridge/[id].js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add actions dialog to bridge editor page by angeljruiz · Pull Request #40 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

angeljruiz
merged 6 commits into

from

Nov 22, 2020
 Merged


Add actions dialog to bridge editor page
#40
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
3d2d8c7

add actions dialog to bridge editor page


angeljruiz Nov 20, 2020
0c87247

minor updates


angeljruiz Nov 20, 2020
867182a

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Nov 20, 2020
e155b9c

added active to prop types


angeljruiz Nov 20, 2020
1068179

Merge branch 'master' into add_actions_dialog_bridge_editor


angeljruiz Nov 20, 2020
fdb000b

api change


angeljruiz Nov 21, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


123 changes: 123 additions & 0 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;

29 changes: 15 additions & 14 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
 const delay = String(bridge.delay);

 const initialValues = {
 active,
 title,
 outboundUrl,
 method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
 });

 const generatePayload = (values) => ({
 active: values.active,
 title: values.title,
 method: values.method,
 outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
 isEditView: false,
 bridge: {
 active: true,
 title: '',
 outboundUrl: '',
 method: '',
Expand All@@ -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,
Expand Down

16 changes: 16 additions & 0 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


1 change: 1 addition & 0 deletions
pages/bridge/[id].js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add actions dialog to bridge editor page by angeljruiz · Pull Request #40 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

angeljruiz
merged 6 commits into

from

Nov 22, 2020
 Merged


Add actions dialog to bridge editor page
#40
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
3d2d8c7

add actions dialog to bridge editor page


angeljruiz Nov 20, 2020
0c87247

minor updates


angeljruiz Nov 20, 2020
867182a

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Nov 20, 2020
e155b9c

added active to prop types


angeljruiz Nov 20, 2020
1068179

Merge branch 'master' into add_actions_dialog_bridge_editor


angeljruiz Nov 20, 2020
fdb000b

api change


angeljruiz Nov 21, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


123 changes: 123 additions & 0 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;

29 changes: 15 additions & 14 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
 const delay = String(bridge.delay);

 const initialValues = {
 active,
 title,
 outboundUrl,
 method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
 });

 const generatePayload = (values) => ({
 active: values.active,
 title: values.title,
 method: values.method,
 outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
 isEditView: false,
 bridge: {
 active: true,
 title: '',
 outboundUrl: '',
 method: '',
Expand All@@ -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,
Expand Down

16 changes: 16 additions & 0 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


1 change: 1 addition & 0 deletions
pages/bridge/[id].js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Add actions dialog to bridge editor page by angeljruiz · Pull Request #40 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

angeljruiz
merged 6 commits into

from

Nov 22, 2020
 Merged


Add actions dialog to bridge editor page
#40
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
3d2d8c7

add actions dialog to bridge editor page


angeljruiz Nov 20, 2020
0c87247

minor updates


angeljruiz Nov 20, 2020
867182a

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Nov 20, 2020
e155b9c

added active to prop types


angeljruiz Nov 20, 2020
1068179

Merge branch 'master' into add_actions_dialog_bridge_editor


angeljruiz Nov 20, 2020
fdb000b

api change


angeljruiz Nov 21, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


123 changes: 123 additions & 0 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;

29 changes: 15 additions & 14 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
 const delay = String(bridge.delay);

 const initialValues = {
 active,
 title,
 outboundUrl,
 method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
 });

 const generatePayload = (values) => ({
 active: values.active,
 title: values.title,
 method: values.method,
 outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
 isEditView: false,
 bridge: {
 active: true,
 title: '',
 outboundUrl: '',
 method: '',
Expand All@@ -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,
Expand Down

16 changes: 16 additions & 0 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


1 change: 1 addition & 0 deletions
pages/bridge/[id].js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add actions dialog to bridge editor page by angeljruiz · Pull Request #40 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

angeljruiz
merged 6 commits into

from

Nov 22, 2020
 Merged


Add actions dialog to bridge editor page
#40
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
3d2d8c7

add actions dialog to bridge editor page


angeljruiz Nov 20, 2020
0c87247

minor updates


angeljruiz Nov 20, 2020
867182a

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Nov 20, 2020
e155b9c

added active to prop types


angeljruiz Nov 20, 2020
1068179

Merge branch 'master' into add_actions_dialog_bridge_editor


angeljruiz Nov 20, 2020
fdb000b

api change


angeljruiz Nov 21, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


123 changes: 123 additions & 0 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;

29 changes: 15 additions & 14 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
 const delay = String(bridge.delay);

 const initialValues = {
 active,
 title,
 outboundUrl,
 method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
 });

 const generatePayload = (values) => ({
 active: values.active,
 title: values.title,
 method: values.method,
 outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
 isEditView: false,
 bridge: {
 active: true,
 title: '',
 outboundUrl: '',
 method: '',
Expand All@@ -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,
Expand Down

16 changes: 16 additions & 0 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


1 change: 1 addition & 0 deletions
pages/bridge/[id].js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add actions dialog to bridge editor page by angeljruiz · Pull Request #40 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

angeljruiz
merged 6 commits into

from

Nov 22, 2020
 Merged


Add actions dialog to bridge editor page
#40
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
3d2d8c7

add actions dialog to bridge editor page


angeljruiz Nov 20, 2020
0c87247

minor updates


angeljruiz Nov 20, 2020
867182a

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Nov 20, 2020
e155b9c

added active to prop types


angeljruiz Nov 20, 2020
1068179

Merge branch 'master' into add_actions_dialog_bridge_editor


angeljruiz Nov 20, 2020
fdb000b

api change


angeljruiz Nov 21, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


123 changes: 123 additions & 0 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;

29 changes: 15 additions & 14 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
 const delay = String(bridge.delay);

 const initialValues = {
 active,
 title,
 outboundUrl,
 method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
 });

 const generatePayload = (values) => ({
 active: values.active,
 title: values.title,
 method: values.method,
 outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
 isEditView: false,
 bridge: {
 active: true,
 title: '',
 outboundUrl: '',
 method: '',
Expand All@@ -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,
Expand Down

16 changes: 16 additions & 0 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


1 change: 1 addition & 0 deletions
pages/bridge/[id].js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Add actions dialog to bridge editor page by angeljruiz · Pull Request #40 · BridgeAPI-dev/bridgeapi.js · GitHub
Skip to content
Add actions dialog to bridge editor page#40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

angeljruiz
merged 6 commits into

from

Nov 22, 2020
 Merged


Add actions dialog to bridge editor page
#40
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


6 commits


Select commit
Hold shift + click to select a range
3d2d8c7

add actions dialog to bridge editor page


angeljruiz Nov 20, 2020
0c87247

minor updates


angeljruiz Nov 20, 2020
867182a

Merge branch 'master' of https://github.com/williampj/bridgeapi.js in…


angeljruiz Nov 20, 2020
e155b9c

added active to prop types


angeljruiz Nov 20, 2020
1068179

Merge branch 'master' into add_actions_dialog_bridge_editor


angeljruiz Nov 20, 2020
fdb000b

api change


angeljruiz Nov 21, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


123 changes: 123 additions & 0 deletions
components/Editor/ActionsDialog/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;

29 changes: 15 additions & 14 deletions
components/Editor/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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';

Expand All@@ -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,
Expand All@@ -58,6 +61,7 @@ function Editor({ bridge, isEditView }) {
 const delay = String(bridge.delay);

 const initialValues = {
 active,
 title,
 outboundUrl,
 method,
Expand DownExpand Up@@ -94,6 +98,7 @@ function Editor({ bridge, isEditView }) {
 });

 const generatePayload = (values) => ({
 active: values.active,
 title: values.title,
 method: values.method,
 outbound_url: values.outboundUrl,
Expand DownExpand Up@@ -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>
Expand DownExpand Up@@ -227,6 +226,7 @@ export default Editor;
Editor.defaultProps = {
 isEditView: false,
 bridge: {
 active: true,
 title: '',
 outboundUrl: '',
 method: '',
Expand All@@ -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,
Expand Down

16 changes: 16 additions & 0 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


1 change: 1 addition & 0 deletions
pages/bridge/[id].js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down