ForwardProtocols component

src/components/common/styles/elementStyles.js

@@ -0,0 +1,8 @@
+const styles = () => ({
+  smallChip: {
+    maxHeight: 20,
+    marginRight: 4
+  }
+});
+
+export default styles;

src/components/common/styles/tableStyles.js

@@ -9,9 +9,6 @@ const styles = () => ({
     width: 20,
     height: 20,
     padding: 10
-  },
-  rowChip: {
-    maxHeight: 20
   }
 });
 

src/features/forwards/core/components/ForwardProtocols.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Chip } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import styles from "../../../../components/common/styles/elementStyles";
+
+const useStyles = makeStyles(styles);
+
+const ForwardProtocols = ({ protocols }) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      {protocols.map(protocol => (
+        <Chip
+          key={protocols.indexOf(protocol)}
+          size="small"
+          label={protocol}
+          className={classes.smallChip}
+        />
+      ))}
+    </>
+  );
+};
+
+ForwardProtocols.propTypes = {
+  protocols: PropTypes.array.isRequired
+};
+
+export default ForwardProtocols;

src/features/forwards/core/components/ForwardSummary.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { Grid, Link } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
+import ForwardProtocols from "./ForwardProtocols";
 import styles from "../../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
@@ -13,7 +14,7 @@ const ForwardSummary = ({ forward, handleForwardClick }) => {
 
   return (
     <Grid container>
-      <Grid item xs={6} sm={3}>
+      <Grid item xs={4} sm={3}>
         {`${t("Forward.From")}: `}
         <span className={classes.value}>
           <Link href="#" onClick={handleForwardClick(forward)}>
@@ -22,10 +23,16 @@ const ForwardSummary = ({ forward, handleForwardClick }) => {
         </span>
       </Grid>
 
-      <Grid item xs={6}>
+      <Grid item xs={4}>
         {`${t("Forward.To")}: `}
         <span className={classes.value}>{forward.to}</span>
       </Grid>
+      {forward.protocols && (
+        <Grid item xs={4}>
+          {`${t("Forward.Protocols")}: `}
+          <ForwardProtocols protocols={forward.protocols} />
+        </Grid>
+      )}
     </Grid>
   );
 };

src/features/session/components/SessionForwardsComponent.js

@@ -12,12 +12,12 @@ import {
   Grid,
   Paper,
   IconButton,
-  Typography,
+  Typography
-  Chip
 } from "@material-ui/core";
 import Spinner from "../../../components/common/Spinner";
 import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded";
 import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent";
+import ForwardProtocols from "../../forwards/core/components/ForwardProtocols";
 import { useTranslation } from "react-i18next";
 import styles from "../../../components/common/styles/tableStyles";
 import {
@@ -82,18 +82,7 @@ const SessionForwardsComponent = ({
                       <StyledTableCell>{row.to}</StyledTableCell>
                       <StyledTableCell>
                         {row.protocols ? (
-                          <>
+                          <ForwardProtocols protocols={row.protocols} />
-                            {row.protocols.map(protocol => (
-                              <React.Fragment key={protocol}>
-                                <Chip
-                                  key={row.protocols.indexOf(protocol)}
-                                  size="small"
-                                  label={protocol}
-                                  className={classes.rowChip}
-                                />{" "}
-                              </React.Fragment>
-                            ))}
-                          </>
                         ) : (
                           ""
                         )}