active session forwards update

src/features/server/components/ActiveSessionComponent.js

@@ -24,7 +24,8 @@ const ActiveSessionComponent = ({
   expanded,
   handleExpandClick,
   forwards,
-  openOptionsDialog
+  openOptionsDialog,
+  handleForwardClick
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -67,6 +68,7 @@ const ActiveSessionComponent = ({
                 forwards={forwards}
                 openOptionsDialog={openOptionsDialog}
                 showSessionInfo={false}
+                handleForwardClick={handleForwardClick}
               />
             )
           )}
@@ -81,7 +83,8 @@ ActiveSessionComponent.propTypes = {
   expanded: PropTypes.bool.isRequired,
   handleExpandClick: PropTypes.func.isRequired,
   forwards: PropTypes.array,
-  openOptionsDialog: PropTypes.func.isRequired
+  openOptionsDialog: PropTypes.func.isRequired,
+  handleForwardClick: PropTypes.func.isRequired
 };
 
 export default ActiveSessionComponent;

src/features/server/components/ActiveSessionContainer.js

@@ -8,7 +8,7 @@ import { getActiveForwards } from "../selectors";
 import ActiveSessionComponent from "./ActiveSessionComponent";
 import ForwardOptionsDialog from "../../session/components/ForwardOptionsDialog";
 
-const ActiveSessionContainer = ({ actions, session, forwards }) => {
+const ActiveSessionContainer = ({ actions, session, forwards, domain }) => {
   const [expanded, setExpanded] = useState(false);
   const [optionsDialogOpen, setOptionsDialogOpen] = useState(false);
   const [forwardOptions, setForwardOptions] = useState(null);
@@ -33,6 +33,12 @@ const ActiveSessionContainer = ({ actions, session, forwards }) => {
     setForwardOptions(null);
   };
 
+  const handleForwardClick = (link) => (event) => {
+    window.open(`${domain.scheme}://${domain.name}${link}`, "_blank");
+
+    event.preventDefault();
+  };
+
   return (
     <>
       <ActiveSessionComponent
@@ -41,6 +47,7 @@ const ActiveSessionContainer = ({ actions, session, forwards }) => {
         handleExpandClick={handleExpandClick}
         forwards={forwards}
         openOptionsDialog={handleOptionsDialogOpen}
+        handleForwardClick={handleForwardClick}
       />
       <ForwardOptionsDialog
         open={optionsDialogOpen}
@@ -54,13 +61,15 @@ const ActiveSessionContainer = ({ actions, session, forwards }) => {
 ActiveSessionContainer.propTypes = {
   actions: PropTypes.object.isRequired,
   session: PropTypes.object.isRequired,
-  forwards: PropTypes.array
+  forwards: PropTypes.array,
+  domain: PropTypes.object
 };
 
 function mapStateToProps(state) {
   return {
     session: state.server.activeSession,
-    forwards: getActiveForwards(state)
+    forwards: getActiveForwards(state),
+    domain: state.server.data.domain
   };
 }
 

src/features/server/components/ServerContainer.js

@@ -22,7 +22,8 @@ const ServerContainer = ({ actions, data, history }) => {
 
 ServerContainer.propTypes = {
   actions: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
 };
 
 function mapStateToProps(state) {

src/features/server/components/ServerSummary.js

@@ -17,7 +17,7 @@ const ServerSummary = ({ data, openAbout }) => {
     <Grid container>
       <Grid item xs={6} sm={4} md={4}>
         {`${t("Server.Domain")}: `}
-        <span className={classes.value}>{data.domain}</span>
+        <span className={classes.value}>{data.domain.name}</span>
       </Grid>
 
       <Grid item xs={6} sm={4} md={4}>

src/features/session/components/SessionForwardsComponent.js

@@ -1,19 +1,22 @@
 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 {
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+  Link,
+  Grid,
+  Paper,
+  IconButton,
+  Typography
+} from "@material-ui/core";
 import Spinner from "../../../components/common/Spinner";
 import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
 import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent";
-import Typography from "@material-ui/core/Typography";
-import { Grid } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 import styles from "../../../components/common/styles/tableStyles";
 import {
@@ -27,7 +30,8 @@ const SessionForwardsComponent = ({
   session,
   forwards,
   openOptionsDialog,
-  showSessionInfo
+  showSessionInfo,
+  handleForwardClick
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
@@ -68,7 +72,15 @@ const SessionForwardsComponent = ({
                       <StyledTableCell component="th" scope="row">
                         {forwards.indexOf(row) + 1}
                       </StyledTableCell>
-                      <StyledTableCell>{row.from}</StyledTableCell>
+                      <StyledTableCell>
+                        {handleForwardClick ? (
+                          <Link href="#" onClick={handleForwardClick(row.from)}>
+                            {row.from}
+                          </Link>
+                        ) : (
+                          row.from
+                        )}
+                      </StyledTableCell>
                       <StyledTableCell>{row.to}</StyledTableCell>
                       <StyledTableCell align="right">
                         {row.options ? (
@@ -114,7 +126,8 @@ SessionForwardsComponent.propTypes = {
   session: PropTypes.object.isRequired,
   forwards: PropTypes.array,
   openOptionsDialog: PropTypes.func.isRequired,
-  showSessionInfo: PropTypes.bool.isRequired
+  showSessionInfo: PropTypes.bool.isRequired,
+  handleForwardClick: PropTypes.func
 };
 
 export default SessionForwardsComponent;