openvsx-webui-test 0.19.0-dev.0 → 0.19.0-dev.2

package/src/components/scan-admin/scan-card/scan-card-content.tsx

@@ -11,447 +11,419 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { FC, useState } from "react";
+import { FunctionComponent, PropsWithChildren, useState } from 'react';
 import { Box, Typography, Link, IconButton, Tooltip } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 import {
     Check as CheckIcon,
     Warning as WarningAmberIcon,
 } from '@mui/icons-material';
 import { ScanResult } from '../../../context/scan-admin';
 import { ConditionalTooltip, formatDateTime, formatDuration } from '../common';
-import { useTheme } from '@mui/material/styles';
-import {
-    isRunning,
-    hasDownload,
-    getFileName,
-} from './utils';
-
-interface ScanCardContentProps {
-    scan: ScanResult;
-    showCheckbox?: boolean;
-    checked?: boolean;
-    onCheckboxChange?: (id: string, checked: boolean) => void;
-    liveDuration: string;
-}
+import { isRunning, hasDownload, getFileName } from './utils';
 
 /**
- * Content section of the ScanCard containing:
- * - Publisher, Version, Download (Row 2)
- * - Scan Start, Scan End, Duration, Decision Status (Row 3)
- * - Checkbox for selection
+ * Grid cell positioned by row/column within the parent CSS Grid.
+ * Note: MUI's Grid/Grid2 components are flexbox-based, not CSS Grid.
  */
-export const ScanCardContent: FC<ScanCardContentProps> = ({
-    scan,
-    showCheckbox,
-    checked,
-    onCheckboxChange,
-    liveDuration,
-}) => {
-    const theme = useTheme();
-    const [isCheckboxHovering, setIsCheckboxHovering] = useState(false);
+const GridCell = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'row' && prop !== 'column' && prop !== 'columnSpan',
+})<{ row: number; column: number; columnSpan?: number }>(({ row, column, columnSpan }) => ({
+    gridRow: String(row),
+    gridColumn: columnSpan ? `${column} / span ${columnSpan}` : String(column),
+    minWidth: 0,
+}));
 
-    return (
-        <>
-            {/* ROW 2 - Publisher, Version, Download, Checkbox */}
-            {/* Column 1: Empty (below icon) */}
-            <Box sx={{ gridRow: '2', gridColumn: '1' }} />
+/** Typography with text-overflow ellipsis */
+const EllipsisText = styled(Typography)({
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
 
-            {/* Column 2: Publisher */}
-            <Box sx={{ gridRow: '2', gridColumn: '2', minWidth: 0 }}>
-                <Typography
-                    variant='caption'
-                    color='text.secondary'
-                    display='block'
-                    sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                    }}
-                >
-                    Publisher
-                </Typography>
-                <ConditionalTooltip title={scan.publisher} arrow>
-                    <Box
-                        sx={{
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }}
-                    >
-                        <Link
-                            href={scan.publisherUrl || undefined}
-                            target='_blank'
-                            rel='noopener noreferrer'
-                            variant='body2'
-                            sx={{
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                                display: 'block',
-                            }}
-                        >
-                            {scan.publisher}
-                        </Link>
-                    </Box>
-                </ConditionalTooltip>
-            </Box>
+/** Box with text-overflow ellipsis */
+const EllipsisBox = styled(Box)({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
 
-            {/* Column 3: Version */}
-            <Box sx={{ gridRow: '2', gridColumn: '3', minWidth: 0 }}>
-                <Typography
-                    variant='caption'
-                    color='text.secondary'
-                    display='block'
-                    sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                    }}
-                >
-                    Version
-                </Typography>
-                <ConditionalTooltip title={scan.version} arrow>
-                    <Typography
-                        variant='body2'
-                        sx={{
-                            display: 'block',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }}
-                    >
-                        {scan.version}
-                    </Typography>
-                </ConditionalTooltip>
-            </Box>
+/** Link with text-overflow ellipsis */
+const EllipsisLink = styled(Link)({
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
 
-            {/* Column 4: Download */}
-            <Box sx={{ gridRow: '2', gridColumn: '4', minWidth: 0 }}>
-                <Typography
-                    variant='caption'
-                    color='text.secondary'
-                    display='block'
-                    sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                    }}
+/** Shimmer-animated text for in-progress scan states */
+const ShimmerText = styled(EllipsisText)(({ theme }) => ({
+    background: theme.palette.gray.gradient,
+    backgroundSize: '200% 100%',
+    backgroundClip: 'text',
+    WebkitBackgroundClip: 'text',
+    color: 'transparent',
+    animation: 'shimmer 2s infinite',
+    '@keyframes shimmer': {
+        '0%': { backgroundPosition: '200% 0' },
+        '100%': { backgroundPosition: '-200% 0' },
+    },
+}));
+
+/** Circular checkbox outline with checked/hover state transitions */
+const CheckboxOutline = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isChecked' && prop !== 'isHovering',
+})<{ isChecked: boolean; isHovering: boolean }>(({ theme, isChecked, isHovering }) => {
+    const borderColor = isHovering ? theme.palette.selected.border : theme.palette.scanBackground.light;
+    const uncheckedBg = isHovering ? theme.palette.selected.background : 'transparent';
+
+    return {
+        position: 'absolute',
+        width: 36,
+        height: 36,
+        borderRadius: '50%',
+        border: isChecked ? 'none' : `2px solid ${borderColor}`,
+        backgroundColor: isChecked ? theme.palette.secondary.main : uncheckedBg,
+        transition: 'border-color 0.2s, background-color 0.2s',
+    };
+});
+
+/** Section caption label (e.g. "Publisher", "Version") */
+const CaptionLabel: FunctionComponent<PropsWithChildren> = ({ children }) => (
+    <EllipsisText variant='caption' color='text.secondary'>
+        {children}
+    </EllipsisText>
+);
+
+/** N/A placeholder for unavailable data */
+const NotAvailable: FunctionComponent = () => (
+    <Typography variant='body2' color='text.disabled'>N/A</Typography>
+);
+
+/** Publisher name with external link */
+const PublisherCell: FunctionComponent<{ publisher: string; publisherUrl: string | null }> = ({
+    publisher,
+    publisherUrl,
+}) => (
+    <>
+        <CaptionLabel>Publisher</CaptionLabel>
+        <ConditionalTooltip title={publisher} arrow>
+            <EllipsisBox>
+                <EllipsisLink
+                    href={publisherUrl || undefined}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    variant='body2'
                 >
-                    Download
-                </Typography>
-                {isRunning(scan.status) ? (
-                    <Typography variant='body2' color='text.disabled'>
-                        N/A
-                    </Typography>
-                ) : hasDownload(scan) && scan.downloadUrl ? (
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minWidth: 0 }}>
-                        {scan.status === 'QUARANTINED' && (
-                            <Tooltip
-                                title='Potentially malicious'
-                                arrow
-                                disableInteractive
-                                PopperProps={{
-                                    disablePortal: true,
-                                    sx: { pointerEvents: 'none' },
-                                }}
-                            >
-                                <WarningAmberIcon
-                                    sx={{
-                                        fontSize: 16,
-                                        color: theme.palette.quarantined.dark,
-                                        flexShrink: 0,
-                                    }}
-                                />
-                            </Tooltip>
-                        )}
-                        <ConditionalTooltip title={getFileName(scan.downloadUrl)} arrow>
-                            <Link
-                                href={scan.downloadUrl}
-                                variant='body2'
-                                sx={{
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    minWidth: 0,
-                                    display: 'block',
-                                    fontSize: '0.875rem',
-                                }}
-                            >
-                                {getFileName(scan.downloadUrl)}
-                            </Link>
-                        </ConditionalTooltip>
-                    </Box>
-                ) : (
-                    <Typography variant='body2' color='text.disabled'>
-                        N/A
-                    </Typography>
-                )}
-            </Box>
+                    {publisher}
+                </EllipsisLink>
+            </EllipsisBox>
+        </ConditionalTooltip>
+    </>
+);
+
+/** Extension version display */
+const VersionCell: FunctionComponent<{ version: string }> = ({ version }) => (
+    <>
+        <CaptionLabel>Version</CaptionLabel>
+        <ConditionalTooltip title={version} arrow>
+            <EllipsisText variant='body2'>{version}</EllipsisText>
+        </ConditionalTooltip>
+    </>
+);
 
-            {/* Column 5: Checkbox */}
-            <Box sx={{ gridRow: '2', gridColumn: '5', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', minWidth: 0 }}>
-                {showCheckbox && (
-                    <IconButton
-                        onClick={() => onCheckboxChange?.(scan.id, !checked)}
-                        onMouseEnter={() => setIsCheckboxHovering(true)}
-                        onMouseLeave={() => setIsCheckboxHovering(false)}
-                        disableRipple
-                        sx={{
-                            padding: 0,
-                            width: 36,
-                            height: 36,
-                            backgroundColor: 'transparent',
-                        }}
-                    >
-                        <Box
-                            className='checkbox-circle'
-                            sx={{
-                                position: 'relative',
-                                width: 36,
-                                height: 36,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }}
+/** Target platform display */
+const PlatformCell: FunctionComponent<{ targetPlatform: string }> = ({ targetPlatform }) => (
+    <>
+        <CaptionLabel>Platform</CaptionLabel>
+        <ConditionalTooltip title={targetPlatform} arrow>
+            <EllipsisText variant='body2'>{targetPlatform}</EllipsisText>
+        </ConditionalTooltip>
+    </>
+);
+
+/** Download link with optional quarantine warning icon */
+const DownloadCell: FunctionComponent<{ scan: ScanResult }> = ({ scan }) => {
+    const theme = useTheme();
+
+    if (isRunning(scan.status)) {
+        return (
+            <>
+                <CaptionLabel>Download</CaptionLabel>
+                <NotAvailable />
+            </>
+        );
+    }
+
+    if (hasDownload(scan) && scan.downloadUrl) {
+        return (
+            <>
+                <CaptionLabel>Download</CaptionLabel>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minWidth: 0 }}>
+                    {scan.status === 'QUARANTINED' && (
+                        <Tooltip
+                            title='Potentially malicious'
+                            arrow
+                            disableInteractive
+                            PopperProps={{ disablePortal: true, sx: { pointerEvents: 'none' } }}
                         >
-                            <Box
-                                className='checkbox-circle-outline'
+                            <WarningAmberIcon
                                 sx={{
-                                    position: 'absolute',
-                                    width: 36,
-                                    height: 36,
-                                    borderRadius: '50%',
-                                    border: checked ? 'none' : `2px solid ${isCheckboxHovering ? theme.palette.selected.border : theme.palette.scanBackground.light}`,
-                                    backgroundColor: checked
-                                        ? 'secondary.main'
-                                        : isCheckboxHovering
-                                            ? theme.palette.selected.background
-                                            : 'transparent',
-                                    transition: 'border-color 0.2s, background-color 0.2s',
+                                    fontSize: 16,
+                                    color: theme.palette.quarantined.dark,
+                                    flexShrink: 0,
                                 }}
                             />
-                            <CheckIcon
-                                className='checkbox-icon'
-                                sx={{
-                                    fontSize: 24,
-                                    color: checked
-                                        ? 'white'
-                                        : isCheckboxHovering
-                                            ? theme.palette.selected.border
-                                            : theme.palette.scanBackground.light,
-                                    position: 'relative',
-                                    zIndex: 1,
-                                    transition: 'color 0.2s',
-                                }}
-                            />
-                        </Box>
-                    </IconButton>
-                )}
-            </Box>
+                        </Tooltip>
+                    )}
+                    <ConditionalTooltip title={getFileName(scan.downloadUrl)} arrow>
+                        <EllipsisLink href={scan.downloadUrl} variant='body2' sx={{ fontSize: '0.875rem', minWidth: 0 }}>
+                            {getFileName(scan.downloadUrl)}
+                        </EllipsisLink>
+                    </ConditionalTooltip>
+                </Box>
+            </>
+        );
+    }
 
-            {/* ROW 3 - Scan Start, Scan End, Scan Duration, Decision Status */}
-            {/* Column 1: Empty (below icon) */}
-            <Box sx={{ gridRow: '3', gridColumn: '1' }} />
+    return (
+        <>
+            <CaptionLabel>Download</CaptionLabel>
+            <NotAvailable />
+        </>
+    );
+};
 
-            {/* Column 2: Scan Start */}
-            <Box sx={{ gridRow: '3', gridColumn: '2', minWidth: 0 }}>
-                <Typography
-                    variant='caption'
-                    color='text.secondary'
-                    display='block'
-                    sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                    }}
-                >
-                    Scan Start
-                </Typography>
-                <ConditionalTooltip title={formatDateTime(scan.dateScanStarted)} arrow>
-                    <Typography
-                        variant='body2'
-                        sx={{
-                            display: 'block',
-                            fontSize: '0.8rem',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }}
-                    >
-                        {formatDateTime(scan.dateScanStarted)}
-                    </Typography>
-                </ConditionalTooltip>
-            </Box>
+/** Circular selection checkbox with hover/check animations */
+const SelectionCheckbox: FunctionComponent<{
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+}> = ({ checked = false, onChange }) => {
+    const theme = useTheme();
+    const [isHovering, setIsHovering] = useState(false);
+    const uncheckedIconColor = isHovering ? theme.palette.selected.border : theme.palette.scanBackground.light;
 
-            {/* Column 3: Scan End */}
-            <Box sx={{ gridRow: '3', gridColumn: '3', minWidth: 0 }}>
-                <Typography
-                    variant='caption'
-                    color='text.secondary'
-                    display='block'
+    return (
+        <IconButton
+            onClick={() => onChange?.(!checked)}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            disableRipple
+            sx={{ padding: 0, width: 36, height: 36, backgroundColor: 'transparent' }}
+        >
+            <Box
+                className='checkbox-circle'
+                sx={{
+                    position: 'relative',
+                    width: 36,
+                    height: 36,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <CheckboxOutline
+                    className='checkbox-circle-outline'
+                    isChecked={checked}
+                    isHovering={isHovering}
+                />
+                <CheckIcon
+                    className='checkbox-icon'
                     sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
+                        fontSize: 24,
+                        color: checked ? 'white' : uncheckedIconColor,
+                        position: 'relative',
+                        zIndex: 1,
+                        transition: 'color 0.2s',
                     }}
-                >
-                    Scan End
-                </Typography>
-                {isRunning(scan.status) ? (
-                    <ConditionalTooltip title={`${scan.status}...`} arrow>
-                        <Typography
-                            variant='body2'
-                            sx={{
-                                display: 'block',
-                                background: theme.palette.gray.gradient,
-                                backgroundSize: '200% 100%',
-                                backgroundClip: 'text',
-                                WebkitBackgroundClip: 'text',
-                                color: 'transparent',
-                                animation: 'shimmer 2s infinite',
-                                '@keyframes shimmer': {
-                                    '0%': { backgroundPosition: '200% 0' },
-                                    '100%': { backgroundPosition: '-200% 0' },
-                                },
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                            }}
-                        >
-                            {scan.status}...
-                        </Typography>
-                    </ConditionalTooltip>
-                ) : scan.dateScanEnded ? (
-                    <ConditionalTooltip title={formatDateTime(scan.dateScanEnded)} arrow>
-                        <Typography
-                            variant='body2'
-                            sx={{
-                                display: 'block',
-                                fontSize: '0.8rem',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                            }}
-                        >
-                            {formatDateTime(scan.dateScanEnded)}
-                        </Typography>
-                    </ConditionalTooltip>
-                ) : (
-                    <Typography variant='body2' color='text.disabled'>
-                        N/A
-                    </Typography>
-                )}
+                />
             </Box>
+        </IconButton>
+    );
+};
+
+/** Scan start timestamp */
+const ScanStartCell: FunctionComponent<{ dateScanStarted: string }> = ({ dateScanStarted }) => (
+    <>
+        <CaptionLabel>Scan Start</CaptionLabel>
+        <ConditionalTooltip title={formatDateTime(dateScanStarted)} arrow>
+            <EllipsisText variant='body2' sx={{ fontSize: '0.8rem' }}>
+                {formatDateTime(dateScanStarted)}
+            </EllipsisText>
+        </ConditionalTooltip>
+    </>
+);
+
+/** Scan end timestamp with shimmer animation for running scans */
+const ScanEndCell: FunctionComponent<{ status: ScanResult['status']; dateScanEnded: string | null }> = ({
+    status,
+    dateScanEnded,
+}) => {
+    const renderValue = () => {
+        if (isRunning(status)) {
+            return (
+                <ConditionalTooltip title={`${status}...`} arrow>
+                    <ShimmerText variant='body2'>{status}...</ShimmerText>
+                </ConditionalTooltip>
+            );
+        }
+        if (dateScanEnded) {
+            return (
+                <ConditionalTooltip title={formatDateTime(dateScanEnded)} arrow>
+                    <EllipsisText variant='body2' sx={{ fontSize: '0.8rem' }}>
+                        {formatDateTime(dateScanEnded)}
+                    </EllipsisText>
+                </ConditionalTooltip>
+            );
+        }
+        return <NotAvailable />;
+    };
+
+    return (
+        <>
+            <CaptionLabel>Scan End</CaptionLabel>
+            {renderValue()}
+        </>
+    );
+};
+
+/** Scan duration with live counter for running scans */
+const ScanDurationCell: FunctionComponent<{
+    status: ScanResult['status'];
+    dateScanStarted: string;
+    dateScanEnded: string | null;
+    liveDuration: string;
+}> = ({ status, dateScanStarted, dateScanEnded, liveDuration }) => (
+    <>
+        <CaptionLabel>Scan Duration</CaptionLabel>
+        {isRunning(status) ? (
+            <ConditionalTooltip title={liveDuration} arrow>
+                <ShimmerText variant='body2'>{liveDuration}</ShimmerText>
+            </ConditionalTooltip>
+        ) : (
+            <ConditionalTooltip title={formatDuration(dateScanStarted, dateScanEnded || undefined)} arrow>
+                <EllipsisText variant='body2'>
+                    {formatDuration(dateScanStarted, dateScanEnded || undefined)}
+                </EllipsisText>
+            </ConditionalTooltip>
+        )}
+    </>
+);
+
+/** Admin decision status for quarantined extensions */
+const DecisionStatusCell: FunctionComponent<{ adminDecision: ScanResult['adminDecision'] }> = ({ adminDecision }) => {
+    const theme = useTheme();
 
-            {/* Column 4: Scan Duration */}
-            <Box sx={{ gridRow: '3', gridColumn: '4', minWidth: 0 }}>
+    if (adminDecision) {
+        const isAllowed = adminDecision.decision.toLowerCase() === 'allowed';
+        return (
+            <Tooltip
+                title={`Decided by ${adminDecision.decidedBy} on ${formatDateTime(adminDecision.dateDecided)}`}
+                arrow
+                disableInteractive
+                PopperProps={{ disablePortal: true, sx: { pointerEvents: 'none' } }}
+            >
                 <Typography
-                    variant='caption'
-                    color='text.secondary'
-                    display='block'
+                    variant='h6'
                     sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
+                        fontWeight: 700,
+                        color: isAllowed ? theme.palette.allowed : theme.palette.blocked,
                         whiteSpace: 'nowrap',
+                        cursor: 'help',
                     }}
                 >
-                    Scan Duration
+                    {isAllowed ? 'ALLOWED' : 'BLOCKED'}
                 </Typography>
-                {isRunning(scan.status) ? (
-                    <ConditionalTooltip title={liveDuration} arrow>
-                        <Typography
-                            variant='body2'
-                            sx={{
-                                display: 'block',
-                                background: theme.palette.gray.gradient,
-                                backgroundSize: '200% 100%',
-                                backgroundClip: 'text',
-                                WebkitBackgroundClip: 'text',
-                                color: 'transparent',
-                                animation: 'shimmer 2s infinite',
-                                '@keyframes shimmer': {
-                                    '0%': { backgroundPosition: '200% 0' },
-                                    '100%': { backgroundPosition: '-200% 0' },
-                                },
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                            }}
-                        >
-                            {liveDuration}
-                        </Typography>
-                    </ConditionalTooltip>
-                ) : (
-                    <ConditionalTooltip title={formatDuration(scan.dateScanStarted, scan.dateScanEnded || undefined)} arrow>
-                        <Typography
-                            variant='body2'
-                            sx={{
-                                display: 'block',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                            }}
-                        >
-                            {formatDuration(scan.dateScanStarted, scan.dateScanEnded || undefined)}
-                        </Typography>
-                    </ConditionalTooltip>
-                )}
-            </Box>
+            </Tooltip>
+        );
+    }
 
-            {/* Column 5: Decision Status */}
-            {scan.status === 'QUARANTINED' && scan.adminDecision && (
-                <Box sx={{
-                    gridRow: '3',
-                    gridColumn: '5',
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignSelf: 'end',
-                    minWidth: 0,
-                }}>
-                    <Tooltip
-                        title={`Decided by ${scan.adminDecision.decidedBy} on ${formatDateTime(scan.adminDecision.dateDecided)}`}
-                        arrow
-                        disableInteractive
-                        PopperProps={{
-                            disablePortal: true,
-                            sx: { pointerEvents: 'none' },
-                        }}
-                    >
-                        <Typography
-                            variant='h6'
-                            sx={{
-                                fontWeight: 700,
-                                color: scan.adminDecision.decision.toLowerCase() === 'allowed' ? theme.palette.allowed : theme.palette.blocked,
-                                whiteSpace: 'nowrap',
-                                cursor: 'help',
-                            }}
-                        >
-                            {scan.adminDecision.decision.toLowerCase() === 'allowed' ? 'ALLOWED' : 'BLOCKED'}
-                        </Typography>
-                    </Tooltip>
-                </Box>
-            )}
-            {scan.status === 'QUARANTINED' && !scan.adminDecision && (
-                <Box sx={{
-                    gridRow: '3',
-                    gridColumn: '5',
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignSelf: 'end',
-                    minWidth: 0,
-                }}>
-                    <Typography
-                        variant='h6'
-                        sx={{
-                            fontWeight: 700,
-                            color: theme.palette.review,
-                            whiteSpace: 'nowrap',
-                        }}
-                    >
-                        NEEDS REVIEW
-                    </Typography>
-                </Box>
-            )}
-        </>
+    return (
+        <Typography
+            variant='h6'
+            sx={{
+                fontWeight: 700,
+                color: theme.palette.review,
+                whiteSpace: 'nowrap',
+            }}
+        >
+            NEEDS REVIEW
+        </Typography>
     );
 };
+
+interface ScanCardContentProps {
+    scan: ScanResult;
+    showCheckbox?: boolean;
+    checked?: boolean;
+    onCheckboxChange?: (id: string, checked: boolean) => void;
+    liveDuration: string;
+}
+
+/**
+ * Content section of the ScanCard containing:
+ * - Publisher, Version, Platform, Download (Row 2)
+ * - Scan Start, Scan End, Duration, Decision Status (Row 3)
+ * - Checkbox for selection
+ */
+export const ScanCardContent: FunctionComponent<ScanCardContentProps> = ({
+    scan,
+    showCheckbox,
+    checked,
+    onCheckboxChange,
+    liveDuration,
+}) => (
+    <>
+        {/* ROW 2 - Publisher, Version, Platform, Download, Checkbox */}
+        <GridCell row={2} column={2}>
+            <PublisherCell publisher={scan.publisher} publisherUrl={scan.publisherUrl} />
+        </GridCell>
+        <GridCell row={2} column={3}>
+            <VersionCell version={scan.version} />
+        </GridCell>
+        <GridCell row={2} column={4}>
+            <PlatformCell targetPlatform={scan.targetPlatform} />
+        </GridCell>
+        <GridCell row={2} column={5}>
+            <DownloadCell scan={scan} />
+        </GridCell>
+        <GridCell
+            row={2}
+            column={6}
+            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}
+        >
+            {showCheckbox && (
+                <SelectionCheckbox
+                    checked={checked}
+                    onChange={(newChecked) => onCheckboxChange?.(scan.id, newChecked)}
+                />
+            )}
+        </GridCell>
+
+        {/* ROW 3 - Scan Start, Scan End, Duration, Decision Status */}
+        <GridCell row={3} column={2}>
+            <ScanStartCell dateScanStarted={scan.dateScanStarted} />
+        </GridCell>
+        <GridCell row={3} column={3}>
+            <ScanEndCell status={scan.status} dateScanEnded={scan.dateScanEnded} />
+        </GridCell>
+        <GridCell row={3} column={4}>
+            <ScanDurationCell
+                status={scan.status}
+                dateScanStarted={scan.dateScanStarted}
+                dateScanEnded={scan.dateScanEnded}
+                liveDuration={liveDuration}
+            />
+        </GridCell>
+        {scan.status === 'QUARANTINED' && (
+            <GridCell
+                row={3}
+                column={5} columnSpan={2}
+                sx={{ display: 'flex', justifyContent: 'flex-end', alignSelf: 'end' }}
+            >
+                <DecisionStatusCell adminDecision={scan.adminDecision} />
+            </GridCell>
+        )}
+    </>
+);