79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Link } from 'react-router-dom';
|
|
import Card from '@mui/material/Card';
|
|
import Box from '@mui/material/Box';
|
|
import CardActionArea from '@mui/material/CardActionArea';
|
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
import AppIcon from 'components/AppIcon';
|
|
import { AppPropType } from 'propTypes/propTypes';
|
|
import { CardContent, Typography } from './style';
|
|
|
|
const countTranslation = (value) => (
|
|
<>
|
|
<Typography variant="body1">{value}</Typography>
|
|
<br />
|
|
</>
|
|
);
|
|
|
|
function AppRow(props) {
|
|
const formatMessage = useFormatMessage();
|
|
const { name, primaryColor, iconUrl, connectionCount, flowCount } =
|
|
props.application;
|
|
return (
|
|
<Link to={props.url} data-test="app-row">
|
|
<Card sx={{ mb: 1 }}>
|
|
<CardActionArea>
|
|
<CardContent>
|
|
<Box>
|
|
<AppIcon name={name} url={iconUrl} color={primaryColor} />
|
|
</Box>
|
|
|
|
<Box>
|
|
<Typography variant="h6">{name}</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ px: 2 }}>
|
|
<Typography
|
|
variant="caption"
|
|
color="textSecondary"
|
|
sx={{ display: ['none', 'inline-block'] }}
|
|
>
|
|
{formatMessage('app.connectionCount', {
|
|
count: countTranslation(connectionCount || '-'),
|
|
})}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ px: 2 }}>
|
|
<Typography
|
|
variant="caption"
|
|
color="textSecondary"
|
|
sx={{ display: ['none', 'inline-block'] }}
|
|
>
|
|
{formatMessage('app.flowCount', {
|
|
count: countTranslation(flowCount || '-'),
|
|
})}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box>
|
|
<ArrowForwardIosIcon
|
|
sx={{ color: (theme) => theme.palette.primary.main }}
|
|
/>
|
|
</Box>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
AppRow.propTypes = {
|
|
application: AppPropType.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default AppRow;
|