Forward card

public/locales/en/translations.json

@@ -36,13 +36,15 @@
     "LogRows": "Log rows",
     "LogSize": "Log size",
     "Forwards": {
-      "Title": "Forwards",
-      "From": "From",
-      "To": "To"
+      "Title": "Forwards"
     }
   },
   "Forward": {
-    "Title": "Forward from {{from}} to {{to}}",
+    "Title": "Forward {{forwardId}}",
+    "Label": "Forward",
+    "Subtitle": "from {{from}} to {{to}}",
+    "From": "From",
+    "To": "To",
     "Options": {
       "Title": "Options",
       "Name": "Name",

public/locales/ro/translations.json

@@ -27,13 +27,15 @@
     "LogRows": "Linii log",
     "LogSize": "Dimensiune log",
     "Forwards": {
-      "Title": "Redirectări",
-      "From": "De la",
-      "To": "Către"
+      "Title": "Redirectări"
     }
   },
   "Forward": {
-    "Title": "Redirecționare de la {{from}} către {{to}}",
+    "Title": "Redirecționare {{forwardId}}",
+    "Label": "Redirecționare",
+    "Subtitle": "de la {{from}} către {{to}}",
+    "From": "De la",
+    "To": "Către",
     "Options": {
       "Title": "Opțiuni",
       "Name": "Denumire",

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

@@ -1,9 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
+import ExpandableCard from "../../../../components/common/ExpandableCard";
 import ForwardOptionsAdvancedContainer from "../../options/components/advanced/ForwardOptionsAdvancedContainer";
+import { useTranslation } from "react-i18next";
+import ForwardIcon from "@material-ui/icons/Forward";
+import ForwardSummary from "./ForwardSummary";
 
 const ForwardComponent = ({ forward }) => {
-  return <ForwardOptionsAdvancedContainer optionsId={forward.optionId} />;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ExpandableCard
+        Icon={<ForwardIcon />}
+        title={t("Forward.Label", forward)}
+        subtitle={t("Forward.Subtitle", forward)}
+        Summary={<ForwardSummary forward={forward} />}
+        Content={<div>...</div>}
+      />
+      <br />
+      <ForwardOptionsAdvancedContainer optionsId={forward.optionId} />
+    </>
+  );
 };
 
 ForwardComponent.propTypes = {

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

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslation } from "react-i18next";
+import styles from "../../../../components/common/styles/gridStyles";
+
+const useStyles = makeStyles(styles);
+
+const ForwardSummary = ({ forward }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Forward.From")}: `}
+        <span className={classes.value}>{forward.from}</span>
+      </Grid>
+
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Forward.To")}: `}
+        <span className={classes.value}>{forward.to}</span>
+      </Grid>
+    </Grid>
+  );
+};
+
+ForwardSummary.propTypes = {
+  forward: PropTypes.object.isRequired
+};
+
+export default ForwardSummary;

src/features/session/components/SessionForwardsComponent.js

@@ -55,12 +55,8 @@ const SessionForwardsComponent = ({
                 <TableHead>
                   <TableRow>
                     <StyledTableCell />
-                    <StyledTableCell>
-                      {t("Session.Forwards.From")}
-                    </StyledTableCell>
-                    <StyledTableCell>
-                      {t("Session.Forwards.To")}
-                    </StyledTableCell>
+                    <StyledTableCell>{t("Forward.From")}</StyledTableCell>
+                    <StyledTableCell>{t("Forward.To")}</StyledTableCell>
                     <StyledTableCell align="right">
                       {t("Forward.Options.Title")}
                     </StyledTableCell>