reverse-proxy-frontend/src/features/session/components/ForwardOptionsComponent.js

84 lines
2.7 KiB
JavaScript

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;