gistfile1.txt

import React from ‘react’;
import { Box, Typography, Chip, Link, Paper, useTheme } from ‘@mui/material’;
import { AssetCodeCoverageInfo } from ‘../../types/api’;
import DonutChart from ‘./DonutChart’;
import moment from ‘moment’;

interface ExtendedAssetCodeCoverageInfo extends AssetCodeCoverageInfo {
codeSmells?: number;
codeQuality?: string;
codeCoverageReportUrl?: string;
codeCoverageReportName?: string;
}

const CodeCoverageExpandedContent: React.FC<{
data: ExtendedAssetCodeCoverageInfo;
}> = ({ data }) => {
const theme = useTheme();
const chartData = [
{ name: ‘Covered’, value: data.coverage },
{ name: ‘Uncovered’, value: 100 - data.coverage },
];

return (
<Box sx={{ bgcolor: theme.palette.background.default, p: 3 }}>
<Typography
variant=“subtitle1”
sx={{
fontWeight: 600,
letterSpacing: 1,
textTransform: ‘uppercase’,
mb: 3,
color: theme.palette.text.primary,
}}
>
SONAR COVERAGE
</Typography>

```
  <Paper
    elevation={0}
    sx={{
      bgcolor: theme.palette.background.paper,
      borderRadius: 2,
      p: 3,
      display: 'flex',
      gap: 4,
      alignItems: 'flex-start',
    }}
  >
    <DonutChart
      data={chartData}
      centerText={`${data.coverage.toFixed(2)}%`}
    />

    <Box sx={{ flex: 1, display: 'grid', gridTemplateColumns: 'auto 1fr', rowGap: 1, columnGap: 2, alignItems: 'baseline' }}>
      <Typography sx={{ color: theme.palette.text.secondary, textAlign: 'right' }}>
        Last Scanned on :
      </Typography>
      <Typography sx={{ color: theme.palette.text.primary }}>
        {moment(data.lastScanTimestamp).format('MMMM D, YYYY [at] h:mm A EDT')}
      </Typography>

      <Typography sx={{ color: theme.palette.text.secondary, textAlign: 'right' }}>
        In Scope :
      </Typography>
      <Typography sx={{ color: theme.palette.text.primary }}>
        {data.codeCoverageInScope ? 'Yes' : 'No'}
      </Typography>

      <Typography sx={{ color: theme.palette.text.secondary, textAlign: 'right' }}>
        Code Smells :
      </Typography>
      <Typography sx={{ color: theme.palette.text.primary }}>
        {data.codeSmells || 512}
      </Typography>

      <Typography sx={{ color: theme.palette.text.secondary, textAlign: 'right' }}>
        Code Quality :
      </Typography>
      <Typography sx={{ color: theme.palette.error.main, fontWeight: 500 }}>
        {data.codeQuality || 'Failed'}
      </Typography>

      <Typography sx={{ color: theme.palette.text.secondary, textAlign: 'right', alignSelf: 'start' }}>
        Code Coverage Report :
      </Typography>
      <Box>
        <Link
          href={data.codeCoverageReportUrl}
          underline="hover"
          sx={{ color: theme.palette.primary.main, cursor: 'pointer', display: 'block' }}
          target="_blank"
          rel="noopener noreferrer"
        >
          {data.codeCoverageReportName || 'Sonar Scan for AP140438'}
        </Link>
        <Typography sx={{ color: theme.palette.text.secondary, fontSize: 'inherit' }}>
          (SonarQube)
        </Typography>
      </Box>
    </Box>
  </Paper>
</Box>
```

);
};

export default CodeCoverageExpandedContent;