Encrypted Environment Variables

components/AccordionSummary/index.js

@@ -1,9 +1,10 @@
 import {
- AccordionSummary as MUIAccordionSummary, Grid, Typography, makeStyles,
+ AccordionSummary as MUIAccordionSummary, Grid, Typography, makeStyles, Tooltip, Button,
 } from '@material-ui/core';
 import PropTypes from 'prop-types';
+import { FaQuestionCircle } from 'react-icons/fa';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
  root: {
  borderBottom: '1px solid rgba(0, 0, 0, .125)',
  },
@@ -13,20 +14,44 @@ const useStyles = makeStyles(() => ({
  subtitle: {
  color: '#a6a6a4',
  },
+ 'ml-2': {
+ marginLeft: theme.spacing(2),
+ },
 }));
 
-function AccordionSummary({ title, subtitle, icon }) {
+function AccordionSummary({
+ title, subtitle, icon, tooltip = false, tooltipMessage,
+}) {
  const classes = useStyles();
 
  return (
  <MUIAccordionSummary
  expandIcon={icon}
  className={classes.root}
  >
- <Grid container direction="column" align="left">
- <Typography className={classes.heading}>{title}</Typography>
- <Typography variant="subtitle1" className={classes.subtitle}>{subtitle}</Typography>
+ <Grid container>
+ <Grid item direction="column" align="left">
+ <Typography className={classes.heading}>
+ {title}
+ </Typography>
+ <Typography variant="subtitle1" className={classes.subtitle}>
+ {subtitle}
+ </Typography>
+ </Grid>
+
+ {tooltip
+ && (
+ <Grid item alignItems="center" style={{ display: 'flex' }}>
+ <Tooltip title={tooltipMessage} arrow>
+ <Button>
+ <FaQuestionCircle />
+ </Button>
+ </Tooltip>
+ </Grid>
+ )}
+
  </Grid>
+
  </MUIAccordionSummary>
  );
 }
@@ -40,4 +65,7 @@ AccordionSummary.propTypes = {
  PropTypes.arrayOf(PropTypes.node),
  PropTypes.node,
  ]).isRequired,
+ // TODO
+ tooltip: PropTypes.bool,
+ tooltipMessage: PropTypes.string,
 };

components/Editor/EnvironmentVariablesCard/index.js

@@ -57,6 +57,8 @@ function EnvironmentVariablesCard({ environmentVariables }) {
  icon={<ExpandMoreIcon />}
  title="Environment variables"
  subtitle="Keep Your Secrets Safe"
+ tooltip
+ tooltipMessage="Environment variables are encrypted for data protection. You will not be able to view the value after saving."
  />
  <AccordionDetails>
  <Grid container spacing={2}>

components/Editor/index.js

@@ -80,14 +80,23 @@ function Editor({ bridge, isEditView }) {
  + '}',
  };
 
+ const cleanEnvironmentVariables = (values) => values.environmentVariables.map((envVar) => {
+ const cleanedEnvVar = { ...envVar };
+ if (envVar.id && envVar.value === 'XXXX-XXX-XXXX') {
+ delete cleanedEnvVar.value;
+ }
+
+ return cleanedEnvVar;
+ });
+
  const generatePayload = (values) => ({
  title: values.title,
  method: values.method,
  outbound_url: values.outboundUrl,
  retries: values.retries,
  delay: values.delay,
  headers_attributes: values.headers,
- environment_variables_attributes: values.environmentVariables,
+ environment_variables_attributes: cleanEnvironmentVariables(values),
  data: {
  payload: values.payloadCode,
  test_payload: values.testPayloadCode,

pages/bridge/[id].js

@@ -22,9 +22,15 @@ export async function getServerSideProps(context) {
  const res = await fetchDataOrRedirect(context, `/bridges/${context.query.id}`);
  if (!res) return { props: {} }; // Redirecting to /users/login
 
+ const bridge = toCamel(res.data.bridge);
+ bridge.environmentVariables.forEach((envVar) => {
+ // If you change this 'XXXX-XXX-XXXX', make sure to update PayloadCard#generatePayload
+ envVar.value = 'XXXX-XXX-XXXX';
+ });
+
  return {
  props: {
- bridge: toCamel(res.data.bridge),
+ bridge,
  },
  };
 }