popup for forward options

public/locales/en/translations.json

@@ -17,6 +17,9 @@
     "Sessions": "Sessions",
     "About": "About"
   },
+  "General": {
+    "Close": "Close"
+  },
   "Session": {
     "Title": "Sessions",
     "Session": "Session",
@@ -27,10 +30,18 @@
     "Host": "Host",
     "LogRows": "Log rows",
     "LogSize": "Log size",
-    "Details": {
+    "Forwards": {
       "From": "From",
       "To": "To",
-      "Options": "Options"
+      "Options": {
+        "Title": "Options",
+        "Name": "Name",
+        "Active": "Active",
+        "TrailingSlash": "Trailing slash",
+        "TrailingSlashTooltip": "A trailing slash is the forward slash placed at the end of a URL. The trailing slash is generally used to mark a directory, and if a URL is not terminated using a trailing slash, this generally points to a file.",
+        "PathOverwrite": "Path overwrite",
+        "PathOverwriteTooltip": "Option by which the base path of the application is automatically overwritten in all http text responses received from it."
+      }
     }
   }
 }

public/locales/ro/translations.json

@@ -8,6 +8,9 @@
     "Sessions": "Sesiuni",
     "About": "Despre"
   },
+  "General": {
+    "Close": "Închide"
+  },
   "Session": {
     "Title": "Sesiuni",
     "Session": "Sesiune",
@@ -18,10 +21,18 @@
     "Host": "Gazdă",
     "LogRows": "Linii log",
     "LogSize": "Dimensiune log",
-    "Details": {
+    "Forwards": {
       "From": "De la",
       "To": "Către",
-      "Options": "Opțiuni"
+      "Options": {
+        "Title": "Opțiuni",
+        "Name": "Denumire",
+        "Active": "Activă",
+        "TrailingSlash": "Trailing slash",
+        "TrailingSlashTooltip": "Bara oblică plasată la sfarșitul unei adrese URL. Slash-ul final este de obicei utilizat pentru a marca un director și dacă o adresă URL nu este încheiată folosind o bară oblică, aceasta indică în general un fișier.",
+        "PathOverwrite": "Path overwrite",
+        "PathOverwriteTooltip": "Opțiune prin care calea de bază a aplicației este suprascrisă automat în toate răspunsurile de text http primite de la aceasta."
+      }
     }
   }
 }

src/components/common/ActiveIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
+
+const ActiveIcon = ({ active }) => {
+  return active && active === true ? (
+    <CheckCircleOutlineRounded color="primary" />
+  ) : (
+    <RemoveRounded />
+  );
+};
+
+ActiveIcon.propTypes = {
+  active: PropTypes.bool
+};
+
+export default ActiveIcon;

src/components/common/MaterialTable.js

@@ -0,0 +1,21 @@
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import { withStyles } from "@material-ui/core/styles";
+
+export const StyledTableCell = withStyles((theme) => ({
+  head: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.common.white
+  },
+  body: {
+    fontSize: 14
+  }
+}))(TableCell);
+
+export const StyledTableRow = withStyles((theme) => ({
+  root: {
+    "&:nth-of-type(odd)": {
+      backgroundColor: theme.palette.action.hover
+    }
+  }
+}))(TableRow);

src/features/session/components/ForwardOptionsComponent.js

@@ -0,0 +1,83 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+import Tooltip from "@material-ui/core/Tooltip";
+import { useTranslation } from "react-i18next";
+import styles from "../styles/tableStyles";
+import {
+  StyledTableCell,
+  StyledTableRow
+} from "../../../components/common/MaterialTable";
+import ActiveIcon from "../../../components/common/ActiveIcon";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles(styles);
+
+const ForwardOptionsComponent = ({ options }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <TableContainer component={Paper}>
+        <Table
+          className={classes.narrowTable}
+          size="small"
+          aria-label="customized table"
+        >
+          <TableHead>
+            <TableRow>
+              <StyledTableCell>
+                {t("Session.Forwards.Options.Name")}
+              </StyledTableCell>
+              <StyledTableCell align="center">
+                {t("Session.Forwards.Options.Active")}
+              </StyledTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <StyledTableRow>
+              <Tooltip
+                title={t("Session.Forwards.Options.TrailingSlashTooltip")}
+              >
+                <StyledTableCell>
+                  {t("Session.Forwards.Options.TrailingSlash")}
+                </StyledTableCell>
+              </Tooltip>
+              <StyledTableCell align="center">
+                <ActiveIcon active={options.trailingSlash} />
+              </StyledTableCell>
+            </StyledTableRow>
+            <StyledTableRow>
+              <Tooltip
+                title={t("Session.Forwards.Options.PathOverwriteTooltip")}
+              >
+                <StyledTableCell>
+                  {t("Session.Forwards.Options.PathOverwrite")}
+                </StyledTableCell>
+              </Tooltip>
+              <StyledTableCell align="center">
+                <ActiveIcon active={options.pathOverwrite} />
+              </StyledTableCell>
+            </StyledTableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Typography variant="caption" display="block" gutterBottom>
+        {options.title}
+      </Typography>
+    </>
+  );
+};
+
+ForwardOptionsComponent.propTypes = {
+  options: PropTypes.object.isRequired
+};
+
+export default ForwardOptionsComponent;

src/features/session/components/ForwardOptionsDialog.js

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import { useTranslation } from "react-i18next";
+import ForwardOptionsComponent from "./ForwardOptionsComponent";
+
+const ForwardOptionsDialog = ({ open, handleClose, options }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="options-dialog-title"
+        aria-describedby="optopns-dialog-content"
+      >
+        <DialogTitle id="options-dialog-title">
+          {t("Session.Forwards.Options.Title")}
+        </DialogTitle>
+        <DialogContent id="optopns-dialog-content">
+          {options ? <ForwardOptionsComponent options={options} /> : ""}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            {t("General.Close")}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+};
+
+ForwardOptionsDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  options: PropTypes.object
+};
+
+export default ForwardOptionsDialog;

src/features/session/components/SessionContainer.js

@@ -1,11 +1,15 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import PropTypes from "prop-types";
 import SessionListComponent from "./SessionListComponent";
+import ForwardOptionsDialog from "./ForwardOptionsDialog";
 import { loadServerSessions, loadSessionForwards } from "../actionCreators";
 
 const SessionContainer = ({ actions, sessions, forwards }) => {
+  const [optionsDialogOpen, setOptionsDialogOpen] = useState(false);
+  const [forwardOptions, setForwardOptions] = useState(null);
+
   useEffect(() => {
     actions.loadServerSessions();
   }, []);
@@ -14,12 +18,30 @@ const SessionContainer = ({ actions, sessions, forwards }) => {
     if (expanded) actions.loadSessionForwards(sessionId);
   };
 
+  const handleOptionsDialogOpen = (options) => () => {
+    setForwardOptions(options);
+    setOptionsDialogOpen(true);
+  };
+
+  const handleOptionsDialogClose = () => {
+    setOptionsDialogOpen(false);
+    setForwardOptions(null);
+  };
+
   return (
+    <>
       <SessionListComponent
         sessions={sessions}
         handleToggle={handleToggle}
         forwards={forwards}
+        openOptionsDialog={handleOptionsDialogOpen}
       />
+      <ForwardOptionsDialog
+        open={optionsDialogOpen}
+        handleClose={handleOptionsDialogClose}
+        options={forwardOptions}
+      />
+    </>
   );
 };
 

src/features/session/components/SessionForwardsComponent.js

@@ -1,9 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { withStyles, makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
@@ -15,32 +14,15 @@ import Tooltip from "@material-ui/core/Tooltip";
 import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent";
 import { Grid } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
+import styles from "../styles/tableStyles";
+import {
+  StyledTableCell,
+  StyledTableRow
+} from "../../../components/common/MaterialTable";
 
-const StyledTableCell = withStyles((theme) => ({
+const useStyles = makeStyles(styles);
-  head: {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.common.white
-  },
-  body: {
-    fontSize: 14
-  }
-}))(TableCell);
 
-const StyledTableRow = withStyles((theme) => ({
+const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => {
-  root: {
-    "&:nth-of-type(odd)": {
-      backgroundColor: theme.palette.action.hover
-    }
-  }
-}))(TableRow);
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 700
-  }
-});
-
-const SessionForwardsComponent = ({ session, forwards }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -61,11 +43,13 @@ const SessionForwardsComponent = ({ session, forwards }) => {
                   <TableRow>
                     <StyledTableCell />
                     <StyledTableCell>
-                      {t("Session.Details.From")}
+                      {t("Session.Forwards.From")}
+                    </StyledTableCell>
+                    <StyledTableCell>
+                      {t("Session.Forwards.To")}
                     </StyledTableCell>
-                    <StyledTableCell>{t("Session.Details.To")}</StyledTableCell>
                     <StyledTableCell align="right">
-                      {t("Session.Details.Options")}
+                      {t("Session.Forwards.Options.Title")}
                     </StyledTableCell>
                   </TableRow>
                 </TableHead>
@@ -79,8 +63,15 @@ const SessionForwardsComponent = ({ session, forwards }) => {
                       <StyledTableCell>{row.to}</StyledTableCell>
                       <StyledTableCell align="right">
                         {row.options ? (
-                          <Tooltip title={t("Session.Details.Options")}>
+                          <Tooltip title={t("Session.Forwards.Options.Title")}>
-                            <IconButton aria-label="options" size="small">
+                            <IconButton
+                              aria-label="options"
+                              size="small"
+                              onClick={openOptionsDialog({
+                                ...row.options,
+                                title: `${row.from} >>> ${row.to}`
+                              })}
+                            >
                               <DonutLargeRoundedIcon color="primary" />
                             </IconButton>
                           </Tooltip>
@@ -108,7 +99,8 @@ const SessionForwardsComponent = ({ session, forwards }) => {
 
 SessionForwardsComponent.propTypes = {
   session: PropTypes.object.isRequired,
-  forwards: PropTypes.array
+  forwards: PropTypes.array,
+  openOptionsDialog: PropTypes.func.isRequired
 };
 
 export default SessionForwardsComponent;

src/features/session/components/SessionListComponent.js

@@ -20,7 +20,12 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
+const SessionListComponent = ({
+  sessions,
+  handleToggle,
+  forwards,
+  openOptionsDialog
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -48,6 +53,7 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
                 <SessionForwardsComponent
                   session={session}
                   forwards={forwards[session.sessionId]}
+                  openOptionsDialog={openOptionsDialog}
                 />
               </ExpansionPanelDetails>
             </ExpansionPanel>
@@ -61,7 +67,8 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
 SessionListComponent.propTypes = {
   sessions: PropTypes.array.isRequired,
   handleToggle: PropTypes.func.isRequired,
-  forwards: PropTypes.object.isRequired
+  forwards: PropTypes.object.isRequired,
+  openOptionsDialog: PropTypes.func.isRequired
 };
 
 export default SessionListComponent;

src/features/session/components/SessionSummary.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Grid } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
+import ActiveIcon from "../../../components/common/ActiveIcon";
 import { useTranslation } from "react-i18next";
 import styles from "../styles/gridStyles";
 
@@ -21,11 +21,7 @@ const SessionSummary = ({ session }) => {
         </Grid>
         <Grid item xs={12} sm={3} md={3}>
           {`${t("Session.Active")}: `}
-          {session.active ? (
+          <ActiveIcon active={session.active} />
-            <CheckCircleOutlineRounded color="primary" />
-          ) : (
-            <RemoveRounded />
-          )}
         </Grid>
         <Grid item xs={12} sm={4} md={4}>
           {`${t("Session.StartDate")}: `}

src/features/session/styles/tableStyles.js

@@ -0,0 +1,10 @@
+const styles = () => ({
+  table: {
+    minWidth: 700
+  },
+  narrowTable: {
+    minWidth: 400
+  }
+});
+
+export default styles;