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

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

@@ -0,0 +1,104 @@
+/********************************************************************************
+ * 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 } from 'react';
+import { Box } from '@mui/material';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
+import { DetailBadge } from './utils';
+import { ScanCardExpandStripBadges } from './scan-card-expand-strip-badges';
+
+interface ScanCardExpandStripProps {
+    expanded: boolean;
+    onExpandClick: () => void;
+    badges: DetailBadge[];
+    collapseComplete: boolean;
+}
+
+/**
+ * Expandable strip at the bottom of the card
+ * Shows validationFailure/threat badges (click to expand/show detail cards)
+ */
+export const ScanCardExpandStrip: React.FC<ScanCardExpandStripProps> = ({
+    expanded,
+    onExpandClick,
+    badges,
+    collapseComplete,
+}) => {
+    const theme = useTheme();
+    const [isHovering, setIsHovering] = useState(false);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+
+    useEffect(() => {
+        const updateWidth = () => {
+            if (wrapperRef.current) {
+                setContainerWidth(wrapperRef.current.offsetWidth);
+            }
+        };
+
+        updateWidth();
+
+        const resizeObserver = new ResizeObserver(() => {
+            updateWidth();
+        });
+
+        if (wrapperRef.current) {
+            resizeObserver.observe(wrapperRef.current);
+        }
+
+        return () => resizeObserver.disconnect();
+    }, []);
+
+    return (
+        <Box
+            ref={wrapperRef}
+            onClick={onExpandClick}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            sx={{
+                pb: 0,
+                pt: 0.5,
+                px: 5,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                cursor: 'pointer',
+                borderBottomRightRadius: expanded ? 0 : 8,
+                minHeight: 40,
+                backgroundColor: isHovering ? theme.palette.selected.hover : 'transparent',
+                transition: 'background-color 0.2s',
+                position: 'relative',
+            }}
+        >
+            <Box sx={{ flex: 1 }} />
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
+                <ExpandMoreIcon
+                    sx={{
+                        fontSize: 36,
+                        color: 'secondary.main',
+                        transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                        transition: 'transform 0.3s',
+                    }}
+                />
+            </Box>
+
+            {!expanded && collapseComplete && (
+                <ScanCardExpandStripBadges
+                    badges={badges}
+                    containerWidth={containerWidth}
+                />
+            )}
+        </Box>
+    );
+};

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

@@ -0,0 +1,262 @@
+/********************************************************************************
+ * 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, Collapse, Chip } from '@mui/material';
+import { useTheme, Theme } from '@mui/material/styles';
+import { ScanResult, Threat, ValidationFailure, CheckResult } from '../../../context/scan-admin';
+import { ScanDetailCard } from './scan-detail-card';
+import { formatDateTime } from '../common';
+
+interface ScanCardExpandedContentProps {
+    scan: ScanResult;
+    expanded: boolean;
+    onCollapseComplete?: () => void;
+}
+
+interface ThreatItemProps {
+    threat: Threat;
+}
+
+interface ValidationFailureItemProps {
+    failure: ValidationFailure;
+}
+
+interface CheckResultItemProps {
+    checkResult: CheckResult;
+}
+
+/**
+ * A single threat item in the expanded content.
+ */
+const ThreatItem: React.FC<ThreatItemProps> = ({ threat }) => {
+    const theme = useTheme();
+
+    return (
+        <ScanDetailCard
+            accentColor={theme.palette.quarantined.dark as string}
+            isUnenforced={!threat.enforcedFlag}
+            description={threat.reason}
+            descriptionColor='warning.dark'
+            details={[
+                { label: 'File', value: threat.fileName || '(package-level scan)' },
+                { label: 'Hash', value: threat.fileHash || undefined },
+                { label: 'Scanner', value: threat.type },
+                { label: 'Rule Name', value: threat.ruleName },
+                { label: 'Severity', value: threat.severity },
+                { label: 'Detected at', value: threat.dateDetected ? formatDateTime(threat.dateDetected) : undefined },
+            ]}
+        />
+    );
+};
+
+/**
+ * A single validation failure item in the expanded content.
+ */
+const ValidationFailureItem: React.FC<ValidationFailureItemProps> = ({ failure }) => {
+    const theme = useTheme();
+    const isUnenforced = !failure.enforcedFlag;
+
+    return (
+        <ScanDetailCard
+            accentColor={theme.palette.rejected.dark as string}
+            isUnenforced={isUnenforced}
+            chip={{
+                label: failure.type,
+                color: theme.palette.rejected.dark as string,
+                textColor: theme.palette.rejected.light as string,
+            }}
+            description={failure.reason}
+            details={[
+                { label: 'Rule Name', value: failure.ruleName },
+                { label: 'Detected at', value: failure.dateDetected ? formatDateTime(failure.dateDetected) : undefined },
+            ]}
+        />
+    );
+};
+
+/**
+ * Get color for check result status.
+ */
+const getCheckResultColor = (result: CheckResult['result'], theme: Theme) => {
+    switch (result) {
+        case 'PASSED':
+            return { bg: theme.palette.success.dark, text: theme.palette.success.light };
+        case 'QUARANTINE':
+            // Orange/amber - scanner found enforced threats, recommends quarantine
+            return { bg: theme.palette.quarantined.dark as string, text: theme.palette.quarantined.light as string };
+        case 'REJECT':
+            // Red - publish check recommends rejection
+            return { bg: theme.palette.rejected.dark as string, text: theme.palette.rejected.light as string };
+        case 'ERROR':
+            return { bg: theme.palette.errorStatus.dark as string, text: theme.palette.errorStatus.light as string };
+        default:
+            return { bg: theme.palette.grey[500], text: theme.palette.grey[100] };
+    }
+};
+
+/**
+ * Format duration in milliseconds to a readable string.
+ */
+const formatDuration = (ms: number | null): string | undefined => {
+    if (ms === null) return undefined;
+    if (ms === 0) return '<1ms';
+    if (ms < 1000) return `${ms}ms`;
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+    return `${(ms / 60000).toFixed(1)}m`;
+};
+
+/**
+ * A single check result item showing what check was run and its outcome.
+ */
+const CheckResultItem: React.FC<CheckResultItemProps> = ({ checkResult }) => {
+    const theme = useTheme();
+    const colors = getCheckResultColor(checkResult.result, theme);
+    const isPassed = checkResult.result === 'PASSED';
+    const isError = checkResult.result === 'ERROR';
+    // Non-required errors get striped styling to indicate they didn't block publishing
+    const isOptionalError = isError && checkResult.required === false;
+
+    return (
+        <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            p: 1.5,
+            borderRadius: 1,
+            bgcolor: isPassed ? 'action.hover' : 'transparent',
+            border: isPassed ? 'none' : `1px solid ${theme.palette.divider}`,
+        }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                <Chip
+                    label={checkResult.result}
+                    size='small'
+                    sx={{
+                        bgcolor: isOptionalError ? 'transparent' : colors.bg,
+                        background: isOptionalError
+                            ? `${theme.palette.unenforced.stripe}, ${colors.bg}`
+                            : undefined,
+                        color: colors.text,
+                        fontWeight: 600,
+                        fontSize: '0.7rem',
+                        height: 22,
+                    }}
+                />
+                <Typography variant='body2' sx={{ fontWeight: 500 }}>
+                    {checkResult.checkType}
+                </Typography>
+                <Chip
+                    label={checkResult.category === 'PUBLISH_CHECK' ? 'Publish Check' : 'Scanner'}
+                    size='small'
+                    variant='outlined'
+                    sx={{ fontSize: '0.65rem', height: 18 }}
+                />
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, color: 'text.secondary' }}>
+                {checkResult.summary && (
+                    <Typography variant='caption'>
+                        {checkResult.summary}
+                    </Typography>
+                )}
+                {checkResult.durationMs !== null && (
+                    <Typography variant='caption' sx={{ minWidth: 50, textAlign: 'right' }}>
+                        {formatDuration(checkResult.durationMs)}
+                    </Typography>
+                )}
+            </Box>
+        </Box>
+    );
+};
+
+/**
+ * The expanded content section showing threats, validation failures, and check results.
+ * Each item's enforcedFlag controls its individual striping effect.
+ */
+export const ScanCardExpandedContent: React.FC<ScanCardExpandedContentProps> = ({ scan, expanded, onCollapseComplete }) => {
+    const theme = useTheme();
+    const hasThreats = scan.threats.length > 0;
+    const hasValidationFailures = scan.validationFailures.length > 0;
+    const hasCheckResults = scan.checkResults && scan.checkResults.length > 0;
+    const hasErrorMessage = scan.status === 'ERROR' && scan.errorMessage;
+    const hasAnyContent = hasThreats || hasValidationFailures || hasCheckResults || hasErrorMessage;
+
+    return (
+        <Collapse in={expanded} timeout='auto' unmountOnExit onExited={onCollapseComplete}>
+            <Box sx={{
+                px: 4,
+                pb: 3,
+                pt: 2,
+                borderBottomRightRadius: 8,
+            }}>
+                {/* Error Message */}
+                {hasErrorMessage && (
+                    <Box sx={{ mb: hasAnyContent ? 2 : 0 }}>
+                        <ScanDetailCard
+                            accentColor={theme.palette.errorStatus.dark as string}
+                            chip={{
+                                label: 'ERROR',
+                                color: theme.palette.errorStatus.dark as string,
+                                textColor: theme.palette.errorStatus.light as string,
+                            }}
+                            description={scan.errorMessage ?? undefined}
+                            descriptionColor='text.secondary'
+                            details={[]}
+                        />
+                    </Box>
+                )}
+
+                {/* Check Results - What scans/checks were run */}
+                {hasCheckResults && (
+                    <Box sx={{ mb: (hasThreats || hasValidationFailures) ? 2 : 0 }}>
+                        <Typography variant='subtitle2' sx={{ mb: 1.5, color: 'text.secondary' }}>
+                            Checks Executed
+                        </Typography>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                            {scan.checkResults.map((result, index) => (
+                                <CheckResultItem key={index} checkResult={result} />
+                            ))}
+                        </Box>
+                    </Box>
+                )}
+
+                {/* Threats */}
+                {hasThreats && (
+                    <Box>
+                        <Typography variant='subtitle2' sx={{ mb: 1.5, color: 'text.secondary' }}>
+                            Threats Detected
+                        </Typography>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+                            {scan.threats.map((threat, index) => (
+                                <ThreatItem key={index} threat={threat} />
+                            ))}
+                        </Box>
+                    </Box>
+                )}
+
+                {/* Validation Failures */}
+                {hasValidationFailures && (
+                    <Box sx={{ mt: hasThreats ? 2 : 0 }}>
+                        <Typography variant='subtitle2' sx={{ mb: 1.5, color: 'text.secondary' }}>
+                            Validation Failures
+                        </Typography>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+                            {scan.validationFailures.map((failure, index) => (
+                                <ValidationFailureItem key={index} failure={failure} />
+                            ))}
+                        </Box>
+                    </Box>
+                )}
+            </Box>
+        </Collapse>
+    );
+};

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

@@ -0,0 +1,176 @@
+/********************************************************************************
+ * 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, { useState } from 'react';
+import { Box, Typography, Chip, CircularProgress } from '@mui/material';
+import {
+    CheckCircle as CheckCircleIcon,
+    GppMaybe as WarningIcon,
+    Block as BlockIcon,
+    Cancel as CancelIcon,
+    Info as InfoIcon,
+} from '@mui/icons-material';
+import { ScanResult } from '../../../context/scan-admin';
+import { ConditionalTooltip } from '../common';
+import { useTheme } from '@mui/material/styles';
+import {
+    ICON_SIZE,
+    isRunning,
+    shouldShowStriped,
+    getHypotheticalStatus,
+    getStatusColorSx,
+} from './utils';
+
+interface ScanCardHeaderProps {
+    scan: ScanResult;
+}
+
+const getStatusIcon = (status: ScanResult['status']) => {
+    switch (status) {
+        case 'PASSED':
+            return <CheckCircleIcon fontSize='small' />;
+        case 'QUARANTINED':
+            return <WarningIcon fontSize='small' />;
+        case 'AUTO REJECTED':
+            return <BlockIcon fontSize='small' />;
+        case 'ERROR':
+            return <CancelIcon fontSize='small' />;
+        default:
+            return null;
+    }
+};
+
+/**
+ * Header section of the ScanCard containing:
+ * - Extension icon
+ * - Display name and namespace
+ * - Status badge
+ */
+export const ScanCardHeader: React.FC<ScanCardHeaderProps> = ({ scan }) => {
+    const theme = useTheme();
+    const [imageError, setImageError] = useState(false);
+
+    const hasValidIcon = scan.extensionIcon && !imageError;
+
+    return (
+        <>
+            {/* Column 1: Icon */}
+            <Box
+                sx={{
+                    gridRow: '1',
+                    gridColumn: '1',
+                    width: ICON_SIZE,
+                    height: ICON_SIZE,
+                    bgcolor: hasValidIcon ? 'transparent' : 'action.hover',
+                    borderRadius: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    overflow: 'hidden',
+                }}
+            >
+                {hasValidIcon ? (
+                    <img
+                        src={scan.extensionIcon}
+                        alt={scan.displayName}
+                        onError={() => setImageError(true)}
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'contain',
+                        }}
+                    />
+                ) : (
+                    <Typography variant='h4' color='text.secondary'>
+                        {scan.displayName.charAt(0).toUpperCase()}
+                    </Typography>
+                )}
+            </Box>
+
+            {/* Columns 2-4: Display Name and Namespace */}
+            <Box sx={{ gridRow: '1', gridColumn: '2 / 5', minWidth: 0 }}>
+                <ConditionalTooltip title={scan.displayName} arrow>
+                    <Typography
+                        variant='h6'
+                        sx={{
+                            fontWeight: 600,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
+                        {scan.displayName}
+                    </Typography>
+                </ConditionalTooltip>
+                <ConditionalTooltip title={`${scan.namespace}.${scan.extensionName}`} arrow>
+                    <Typography
+                        variant='body2'
+                        color='text.secondary'
+                        sx={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }}
+                    >
+                        {scan.namespace}.{scan.extensionName}
+                    </Typography>
+                </ConditionalTooltip>
+            </Box>
+
+            {/* Column 5: Status Badge */}
+            <Box sx={{
+                gridRow: '1',
+                gridColumn: '5',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-end',
+                justifyContent: 'flex-start',
+                minWidth: 0,
+                gap: 0.5,
+            }}>
+                {isRunning(scan.status) ? (
+                    <CircularProgress size={32} color='secondary' />
+                ) : (
+                    <>
+                        <Chip
+                            label={scan.status}
+                            size='medium'
+                            icon={getStatusIcon(scan.status) || undefined}
+                            sx={{
+                                ...getStatusColorSx(scan.status, theme),
+                                transform: 'scale(1.2)',
+                                transformOrigin: 'right top',
+                                ...(shouldShowStriped(scan) && {
+                                    background: `${theme.palette.unenforced.stripe}, ${getStatusColorSx(scan.status, theme).backgroundColor}`,
+                                }),
+                            }}
+                        />
+                        {shouldShowStriped(scan) && getHypotheticalStatus(scan) && (
+                            <Box sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 0.5,
+                                mt: 0.5,
+                            }}>
+                                <InfoIcon sx={{ fontSize: 14, color: 'text.secondary' }} />
+                                <Typography variant='caption' sx={{ color: 'text.secondary', fontSize: '0.7rem' }}>
+                                    Would be {getHypotheticalStatus(scan)}
+                                </Typography>
+                            </Box>
+                        )}
+                    </>
+                )}
+            </Box>
+        </>
+    );
+};

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

@@ -0,0 +1,152 @@
+/********************************************************************************
+ * 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, { FunctionComponent } from 'react';
+import { Card, CardContent, Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { ScanResult } from '../../../context/scan-admin';
+
+import { ScanCardHeader } from './scan-card-header';
+import { ScanCardContent } from './scan-card-content';
+import { ScanCardExpandStrip } from './scan-card-expand-strip';
+import { ScanCardExpandedContent } from './scan-card-expanded-content';
+import { useScanCardState } from '../../../hooks/scan-admin';
+import {
+    ICON_SIZE,
+    shouldShowStriped,
+    getStatusBarColor,
+} from './utils';
+
+interface ScanCardProps {
+    scan: ScanResult;
+    showCheckbox?: boolean;
+    onCheckboxChange?: (id: string, checked: boolean) => void;
+    checked?: boolean;
+}
+
+/**
+ * ScanCard component displays information about an extension scan.
+ *
+ * Sub-components:
+ * - ScanCardHeader: Icon, display name, namespace, status badge
+ * - ScanCardContent: Publisher, version, download, scan times, checkbox
+ * - ScanCardExpandStrip: Collapsible trigger bar with badges
+ * - ScanCardExpandedContent: Threats and validation failures
+ *
+ * State is managed via the useScanCardState hook.
+ */
+export const ScanCard: FunctionComponent<ScanCardProps> = ({
+    scan,
+    showCheckbox,
+    onCheckboxChange,
+    checked,
+}) => {
+    const theme = useTheme();
+    const [collapseComplete, setCollapseComplete] = React.useState(true);
+    const {
+        expanded,
+        handleExpandClick,
+        showExpandButton,
+        badges,
+        liveDuration,
+        cardRef,
+    } = useScanCardState(scan);
+
+    // Reset collapseComplete when expanding
+    React.useEffect(() => {
+        if (expanded) {
+            setCollapseComplete(false);
+        }
+    }, [expanded]);
+
+    return (
+        <Card
+            ref={cardRef}
+            sx={{
+                position: 'relative',
+                mb: 1.5,
+                borderRadius: 2,
+                boxShadow: theme.palette.mode === 'light' ? 4 : 2,
+                backgroundColor: 'transparent',
+                outline: checked ? '2px solid' : 'none',
+                outlineColor: checked ? 'secondary.main' : 'transparent',
+                '&:hover': {
+                    boxShadow: theme.palette.mode === 'light' ? 6 : 4,
+                },
+                overflow: 'hidden',
+                paddingLeft: '16px',
+                '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: '16px',
+                    background: shouldShowStriped(scan)
+                        ? `${theme.palette.unenforced.stripe}, ${getStatusBarColor(scan.status, theme)}`
+                        : getStatusBarColor(scan.status, theme),
+                    zIndex: 0,
+                },
+            }}
+        >
+            <CardContent
+                sx={{
+                    position: 'relative',
+                    zIndex: 1,
+                    pt: 5,
+                    pr: 5,
+                    pl: 5,
+                    pb: showExpandButton ? 0 : 5,
+                    '&:last-child': { pb: showExpandButton ? 0 : 5 },
+                }}
+            >
+                {/* 3 Row x 5 Column Grid Layout */}
+                <Box sx={{
+                    display: 'grid',
+                    gridTemplateColumns: `${ICON_SIZE}px 1fr 1fr 1fr 180px`,
+                    gridTemplateRows: 'auto auto auto',
+                    gap: 2,
+                    alignItems: 'start',
+                }}>
+                    <ScanCardHeader scan={scan} />
+                    <ScanCardContent
+                        scan={scan}
+                        showCheckbox={showCheckbox}
+                        checked={checked}
+                        onCheckboxChange={onCheckboxChange}
+                        liveDuration={liveDuration}
+                    />
+                </Box>
+            </CardContent>
+
+            {/* Expandable strip with badges */}
+            {showExpandButton && (
+                <ScanCardExpandStrip
+                    expanded={expanded}
+                    onExpandClick={handleExpandClick}
+                    badges={badges}
+                    collapseComplete={collapseComplete}
+                />
+            )}
+
+            {/* Expanded content */}
+            {showExpandButton && (
+                <ScanCardExpandedContent
+                    scan={scan}
+                    expanded={expanded}
+                    onCollapseComplete={() => setCollapseComplete(true)}
+                />
+            )}
+        </Card>
+    );
+};