openvsx-webui-test 0.17.1 → 0.18.0-dev.0

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

@@ -0,0 +1,457 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from 'react';
+import { Box, Typography, Link, IconButton, Tooltip } from '@mui/material';
+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;
+}
+
+/**
+ * Content section of the ScanCard containing:
+ * - Publisher, Version, Download (Row 2)
+ * - Scan Start, Scan End, Duration, Decision Status (Row 3)
+ * - Checkbox for selection
+ */
+export const ScanCardContent: React.FC<ScanCardContentProps> = ({
+    scan,
+    showCheckbox,
+    checked,
+    onCheckboxChange,
+    liveDuration,
+}) => {
+    const theme = useTheme();
+    const [isCheckboxHovering, setIsCheckboxHovering] = React.useState(false);
+
+    return (
+        <>
+            {/* ROW 2 - Publisher, Version, Download, Checkbox */}
+            {/* Column 1: Empty (below icon) */}
+            <Box sx={{ gridRow: '2', gridColumn: '1' }} />
+
+            {/* 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>
+
+            {/* 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>
+
+            {/* 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',
+                    }}
+                >
+                    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>
+
+            {/* 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',
+                            }}
+                        >
+                            <Box
+                                className='checkbox-circle-outline'
+                                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',
+                                }}
+                            />
+                            <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>
+
+            {/* ROW 3 - Scan Start, Scan End, Scan Duration, Decision Status */}
+            {/* Column 1: Empty (below icon) */}
+            <Box sx={{ gridRow: '3', gridColumn: '1' }} />
+
+            {/* 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>
+
+            {/* Column 3: Scan End */}
+            <Box sx={{ gridRow: '3', gridColumn: '3', minWidth: 0 }}>
+                <Typography
+                    variant='caption'
+                    color='text.secondary'
+                    display='block'
+                    sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    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>
+
+            {/* Column 4: Scan Duration */}
+            <Box sx={{ gridRow: '3', gridColumn: '4', minWidth: 0 }}>
+                <Typography
+                    variant='caption'
+                    color='text.secondary'
+                    display='block'
+                    sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    Scan Duration
+                </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>
+
+            {/* 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>
+            )}
+        </>
+    );
+};

package/src/components/scan-admin/scan-card/scan-card-expand-strip-badges.tsx

@@ -0,0 +1,186 @@
+/********************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
+import { Box, Chip, Typography } from '@mui/material';
+import { useTheme, alpha } from '@mui/material/styles';
+import { DetailBadge } from './utils';
+
+interface ScanCardExpandStripBadgesProps {
+    badges: DetailBadge[];
+    containerWidth: number;
+    maxWidthPercent?: number;
+}
+
+/**
+ * Renders badges with overflow handling - shows as many badges as fit
+ * within the available width, plus a "+ X more" indicator for hidden badges.
+ */
+export const ScanCardExpandStripBadges: React.FC<ScanCardExpandStripBadgesProps> = ({
+    badges,
+    containerWidth,
+    maxWidthPercent = 0.45,
+}) => {
+    const theme = useTheme();
+    const measureRef = useRef<HTMLDivElement>(null);
+    const [visibleCount, setVisibleCount] = useState<number | null>(null);
+
+    const calculateVisibleBadges = () => {
+        if (!measureRef.current || badges.length === 0 || containerWidth <= 0) {
+            return;
+        }
+
+        const availableWidth = containerWidth * maxWidthPercent;
+        const chips = measureRef.current.querySelectorAll('.measure-chip');
+
+        if (chips.length === 0) {
+            return;
+        }
+
+        // 65px width for "+ X more" text
+        const moreIndicatorWidth = 65;
+        const gap = 4; // 0.5 spacing unit = 4px
+
+        let totalWidth = 0;
+        let count = 0;
+
+        for (let index = 0; index < chips.length; index++) {
+            const chip = chips[index] as HTMLElement;
+            const chipWidth = chip.offsetWidth;
+            const widthWithGap = chipWidth + (index > 0 ? gap : 0);
+
+            // Check if this chip fits
+            // If not all badges fit, we need room for the "+ X more" indicator
+            const remainingBadges = badges.length - (index + 1);
+            const needsMoreIndicator = remainingBadges > 0;
+            const reservedWidth = needsMoreIndicator ? moreIndicatorWidth + gap : 0;
+
+            if (totalWidth + widthWithGap + reservedWidth <= availableWidth) {
+                totalWidth += widthWithGap;
+                count++;
+            } else {
+                break;
+            }
+        }
+
+        setVisibleCount(count);
+    };
+
+    // Use layoutEffect to measure before paint (to avoid flicker)
+    useLayoutEffect(() => {
+        calculateVisibleBadges();
+    }, [badges, containerWidth]);
+
+    // Recalculate when container width changes
+    useEffect(() => {
+        calculateVisibleBadges();
+    }, [containerWidth]);
+
+    // Use all badges until calculation completes
+    const effectiveVisibleCount = visibleCount ?? badges.length;
+    const visibleBadges = badges.slice(0, effectiveVisibleCount);
+    const hiddenCount = badges.length - effectiveVisibleCount;
+
+    const chipStyles = (badge: DetailBadge) => ({
+        height: '20px',
+        fontSize: '0.7rem',
+        flexShrink: 0,
+        ...(badge.type === 'error' ? {
+            // Error badges: solid grey for required, striped for optional
+            // Must set backgroundColor to 'transparent' when using striped background to override Chip defaults
+            backgroundColor: badge.isEnforced ? theme.palette.errorStatus.dark : 'transparent',
+            color: theme.palette.errorStatus.light,
+            background: !badge.isEnforced ? `${theme.palette.unenforced.stripe}, ${theme.palette.errorStatus.dark}` : undefined,
+        } : badge.type === 'threat' ? {
+            backgroundColor: badge.isEnforced ? theme.palette.quarantined.dark : 'transparent',
+            color: theme.palette.quarantined.light,
+            background: !badge.isEnforced ? `${theme.palette.unenforced.stripe}, ${theme.palette.quarantined.dark}` : undefined,
+        } : {
+            backgroundColor: badge.isEnforced ? theme.palette.rejected.dark : 'transparent',
+            color: theme.palette.rejected.light,
+            background: !badge.isEnforced ? `${theme.palette.unenforced.stripe}, ${theme.palette.rejected.dark}` : undefined,
+        }),
+    });
+
+    if (badges.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            {/* Hidden measurement container - always renders all badges for measurement */}
+            <Box
+                ref={measureRef}
+                sx={{
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    pointerEvents: 'none',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    flexWrap: 'nowrap',
+                    left: 0,
+                    top: 0,
+                }}
+                aria-hidden='true'
+            >
+                {badges.map((badge, index) => (
+                    <Chip
+                        key={`measure-${badge.label}-${index}`}
+                        className='measure-chip'
+                        label={badge.label}
+                        size='small'
+                        sx={chipStyles(badge)}
+                    />
+                ))}
+            </Box>
+
+            {/* Visible container - only shows badges that fit */}
+            <Box
+                sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    flexWrap: 'nowrap',
+                    overflow: 'hidden',
+                    maxWidth: `${maxWidthPercent * 100}%`,
+                    minWidth: 0,
+                }}
+            >
+                {visibleBadges.map((badge, index) => (
+                    <Chip
+                        key={`${badge.label}-${index}`}
+                        label={badge.label}
+                        size='small'
+                        sx={chipStyles(badge)}
+                    />
+                ))}
+                {hiddenCount > 0 && (
+                    <Typography
+                        variant='caption'
+                        sx={{
+                            flexShrink: 0,
+                            color: alpha(theme.palette.text.secondary, 0.8),
+                            fontSize: '0.7rem',
+                            fontWeight: 500,
+                            whiteSpace: 'nowrap',
+                            ml: 0.5,
+                        }}
+                    >
+                        + {hiddenCount} more
+                    </Typography>
+                )}
+            </Box>
+        </>
+    );
+};