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

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

@@ -0,0 +1,144 @@
+/********************************************************************************
+ * 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, ReactNode } from 'react';
+import { Box, Typography, Chip } from '@mui/material';
+import { Info as InfoIcon } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
+
+interface DetailField {
+    label: string;
+    value: string | undefined;
+}
+
+interface ScanDetailCardProps {
+    accentColor: string;
+    isUnenforced?: boolean;
+    chip?: {
+        label: string;
+        color: string;
+        textColor: string;
+    };
+    description?: string;
+    descriptionColor?: string;
+    details: DetailField[];
+    children?: ReactNode;
+}
+
+/**
+ * A detail card component for displaying scan detail items like errors,
+ * threats, and validation failures. Provides styling with a colored
+ * left border, optional chip badge, and metadata fields.
+ */
+export const ScanDetailCard: FunctionComponent<ScanDetailCardProps> = ({
+    accentColor,
+    isUnenforced = false,
+    chip,
+    description,
+    descriptionColor,
+    details,
+    children,
+}) => {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                position: 'relative',
+                p: 1.5,
+                bgcolor: theme.palette.scanBackground.light,
+                borderRadius: 1,
+                paddingLeft: '20px',
+                '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: '8px',
+                    background: isUnenforced
+                        ? `${theme.palette.unenforced.stripe}, ${accentColor}`
+                        : accentColor,
+                    zIndex: 0,
+                },
+            }}
+        >
+            <Box sx={{ position: 'relative', zIndex: 1 }}>
+                {/* Chip and unenforced indicator */}
+                {(chip || isUnenforced) && (
+                    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 1, mb: 1 }}>
+                        {isUnenforced && (
+                            <Box sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 0.5,
+                                px: 1,
+                                py: 0.25,
+                                backgroundColor: theme.palette.info.dark + '20',
+                                borderRadius: 0.5,
+                                border: `1px solid ${theme.palette.info.dark}40`,
+                            }}>
+                                <InfoIcon sx={{ fontSize: 14, color: theme.palette.info.main }} />
+                                <Typography variant='caption' sx={{ color: theme.palette.info.main, fontSize: '0.7rem' }}>
+                                    Not enforced
+                                </Typography>
+                            </Box>
+                        )}
+                        {chip && (
+                            <Chip
+                                label={chip.label}
+                                size='small'
+                                sx={{
+                                    height: '20px',
+                                    fontSize: '0.75rem',
+                                    background: isUnenforced
+                                        ? `${theme.palette.unenforced.stripe}, ${chip.color}`
+                                        : chip.color,
+                                    color: chip.textColor,
+                                }}
+                            />
+                        )}
+                    </Box>
+                )}
+
+                {/* Description */}
+                {description && (
+                    <Typography
+                        variant='body2'
+                        sx={{ mb: 1, color: descriptionColor || 'text.primary' }}
+                    >
+                        {description}
+                    </Typography>
+                )}
+
+                {/* Detail fields */}
+                {details.map((detail, index) => (
+                    detail.value && (
+                        <Typography
+                            key={index}
+                            variant='caption'
+                            color='text.secondary'
+                            display='block'
+                            sx={{ mb: 0.5 }}
+                        >
+                            {detail.label}: {detail.value}
+                        </Typography>
+                    )
+                ))}
+
+                {/* Additional content */}
+                {children}
+            </Box>
+        </Box>
+    );
+};

package/src/components/scan-admin/scan-card/utils.ts

@@ -0,0 +1,199 @@
+/********************************************************************************
+ * 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 { ScanResult } from '../../../context/scan-admin';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface DetailBadge {
+    label: string;
+    isEnforced: boolean;
+    type: 'threat' | 'validation' | 'error';
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+export const ICON_SIZE = 48;
+
+// ============================================================================
+// Status Utilities
+// ============================================================================
+
+export const isRunning = (status: ScanResult['status']): boolean => {
+    return status === 'STARTED' || status === 'VALIDATING' || status === 'SCANNING';
+};
+
+/**
+ * Determines whether the scan card badge/strip should show the striped effect.
+ * Only shows striping when the hypothetical status would be DIFFERENT from the current status.
+ *
+ * - PASSED: Stripe if any threats or validationFailures exist (hypothetical would be QUARANTINED or AUTO REJECTED)
+ * - QUARANTINED: Stripe only if validationFailures exist (hypothetical would be AUTO REJECTED)
+ *   - Unenforced threats don't cause striping since hypothetical would still be QUARANTINED
+ * - AUTO REJECTED: Never stripe (hypothetical would still be AUTO REJECTED)
+ */
+export const shouldShowStriped = (scan: ScanResult): boolean => {
+    switch (scan.status) {
+        case 'PASSED':
+            // Any issues mean hypothetical status would be different (QUARANTINED or AUTO REJECTED)
+            return scan.threats.length > 0 || scan.validationFailures.length > 0;
+
+        case 'QUARANTINED':
+            // Only validation failures would change status to AUTO REJECTED
+            // Unenforced threats would still result in QUARANTINED (same status, no stripe)
+            return scan.validationFailures.length > 0;
+
+        case 'AUTO REJECTED':
+            // Scan could only be AUTO REJECTED if there's at least one enforced validation failure
+            // Unenforced validation failures would still result in AUTO REJECTED (same status, no stripe)
+            return false;
+
+        default:
+            return false;
+    }
+};
+
+export const getHypotheticalStatus = (scan: ScanResult): ScanResult['status'] | null => {
+    if (!shouldShowStriped(scan)) return null;
+
+    const hasUnenforcedValidationFailures = scan.validationFailures.some(v => !v.enforcedFlag);
+    const hasUnenforcedThreats = scan.threats.some(t => !t.enforcedFlag);
+
+    if (hasUnenforcedValidationFailures) {
+        return 'AUTO REJECTED';
+    }
+
+    if (hasUnenforcedThreats) {
+        return 'QUARANTINED';
+    }
+
+    return null;
+};
+
+export const getDetailBadges = (scan: ScanResult): DetailBadge[] => {
+    const badges: DetailBadge[] = [];
+
+    scan.threats.forEach(threat => {
+        if (threat.type) {
+            badges.push({
+                label: threat.type,
+                isEnforced: threat.enforcedFlag,
+                type: 'threat'
+            });
+        }
+    });
+
+    scan.validationFailures.forEach(failure => {
+        badges.push({
+            label: failure.type,
+            isEnforced: failure.enforcedFlag,
+            type: 'validation'
+        });
+    });
+
+    // Add badges for check results with ERROR status
+    scan.checkResults?.forEach(checkResult => {
+        if (checkResult.result === 'ERROR') {
+            badges.push({
+                label: checkResult.checkType,
+                // Use "enforced" styling (solid) for required checks, striped for optional
+                isEnforced: checkResult.required !== false,
+                type: 'error'
+            });
+        }
+    });
+
+    return badges;
+};
+
+// ============================================================================
+// Theme Utilities
+// ============================================================================
+
+export const getStatusColorSx = (status: ScanResult['status'], theme: any) => {
+    switch (status) {
+        case 'PASSED':
+            return {
+                backgroundColor: theme.palette.passed.dark,
+                color: theme.palette.passed.light,
+                '& .MuiChip-icon': {
+                    color: theme.palette.passed.light,
+                },
+            };
+        case 'QUARANTINED':
+            return {
+                backgroundColor: theme.palette.quarantined.dark,
+                color: theme.palette.quarantined.light,
+                '& .MuiChip-icon': {
+                    color: theme.palette.quarantined.light,
+                },
+            };
+        case 'AUTO REJECTED':
+            return {
+                backgroundColor: theme.palette.rejected.dark,
+                color: theme.palette.rejected.light,
+                '& .MuiChip-icon': {
+                    color: theme.palette.rejected.light,
+                },
+            };
+        case 'ERROR':
+            return {
+                backgroundColor: theme.palette.errorStatus.dark,
+                color: theme.palette.errorStatus.light,
+                '& .MuiChip-icon': {
+                    color: theme.palette.errorStatus.light,
+                },
+            };
+        default:
+            return {};
+    }
+};
+
+export const getStatusBarColor = (status: ScanResult['status'], theme: any) => {
+    switch (status) {
+        case 'PASSED':
+            return theme.palette.passed.dark;
+        case 'QUARANTINED':
+            return theme.palette.quarantined.dark;
+        case 'AUTO REJECTED':
+            return theme.palette.rejected.dark;
+        case 'ERROR':
+            return theme.palette.errorStatus.dark;
+        default:
+            return 'transparent';
+    }
+};
+
+// ============================================================================
+// UI Utilities
+// ============================================================================
+
+export const shouldShowExpandButton = (scan: ScanResult): boolean => {
+    const hasErrorMessage = scan.status === 'ERROR' && !!scan.errorMessage;
+    const hasCheckResults = scan.checkResults && scan.checkResults.length > 0;
+    return scan.threats.length > 0 || scan.validationFailures.length > 0 || hasCheckResults || hasErrorMessage;
+};
+
+export const hasDownload = (scan: ScanResult): boolean => {
+    return scan.status === 'PASSED' || scan.status === 'QUARANTINED';
+};
+
+export const getFileName = (url?: string): string => {
+    if (!url) return 'extension.vsix';
+    const parts = url.split('/');
+    return parts[parts.length - 1] || 'extension.vsix';
+};

package/src/components/scan-admin/tab-contents/allow-list-tab-content.tsx

@@ -0,0 +1,119 @@
+/********************************************************************************
+ * 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 { Box, Typography, Pagination, CircularProgress } from '@mui/material';
+import { SearchToolbar, CountsToolbar } from '../toolbars';
+import { FileTable, AutoRefresh } from '../common';
+import { useAllowListTab } from '../../../hooks/scan-admin';
+import { useScanContext } from '../../../context/scan-admin';
+import { useTheme } from '@mui/material/styles';
+
+/**
+ * Allowed Files tab component that displays files that have been allowed.
+ * Uses the useAllowListTab hook to consume context.
+ */
+export const AllowListTabContent: FunctionComponent = () => {
+    const theme = useTheme();
+    const { state, actions } = useScanContext();
+    const {
+        files,
+        isLoading,
+        fileCount,
+        search,
+        selection,
+        setFilesChecked,
+        fileActions,
+        pagination,
+        lastRefreshed,
+        autoRefresh,
+        onAutoRefreshChange,
+    } = useAllowListTab();
+
+    return (
+        <>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <SearchToolbar
+                    publisherQuery={search.publisherQuery}
+                    namespaceQuery={search.namespaceQuery}
+                    nameQuery={search.nameQuery}
+                    onPublisherChange={search.handlePublisherChange}
+                    onNamespaceChange={search.handleNamespaceChange}
+                    onNameChange={search.handleNameChange}
+                    actionButtons={[
+                        {
+                            label: 'BLOCK',
+                            color: theme.palette.blocked!,
+                            disabled: !fileActions.canPerformAction,
+                            onClick: fileActions.openBlockDialog,
+                        },
+                        {
+                            label: 'DELETE',
+                            color: theme.palette.secondary.main,
+                            disabled: !fileActions.canPerformAction,
+                            onClick: fileActions.openDeleteDialog,
+                        },
+                    ]}
+                    selectedCount={selection.selectedCount}
+                />
+                <CountsToolbar
+                    counts={[
+                        { label: 'Allowed Files', value: fileCount, color: theme.palette.allowed },
+                    ]}
+                    dateRange={state.fileDateRange}
+                    onDateRangeChange={actions.setFileDateRange}
+                />
+                <AutoRefresh
+                    lastRefreshed={lastRefreshed}
+                    autoRefresh={autoRefresh}
+                    onAutoRefreshChange={onAutoRefreshChange}
+                />
+            </Box>
+            {isLoading ? (
+                <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+                    <CircularProgress color='secondary' />
+                </Box>
+            ) : files.length === 0 ? (
+                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 4 }}>
+                    <Typography variant='h6' color='text.secondary'>
+                        No allowed files
+                    </Typography>
+                    <Typography variant='body2' color='text.secondary' sx={{ mt: 1 }}>
+                        Files that have been allowed will appear here
+                    </Typography>
+                </Box>
+            ) : (
+                <FileTable
+                    files={files}
+                    type='allowed'
+                    selectedFiles={selection.checked}
+                    onSelectionChange={setFilesChecked}
+                />
+            )}
+            {pagination.totalPages > 1 && (
+                <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3, mb: 2 }}>
+                    <Pagination
+                        count={pagination.totalPages}
+                        page={pagination.currentPage + 1}
+                        onChange={(_, page) => pagination.goToPage(page - 1)}
+                        disabled={isLoading}
+                        color='secondary'
+                        size='large'
+                        showFirstButton
+                        showLastButton
+                    />
+                </Box>
+            )}
+        </>
+    );
+};

package/src/components/scan-admin/tab-contents/auto-rejected-tab-content.tsx

@@ -0,0 +1,106 @@
+/********************************************************************************
+ * 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 { Box, Typography, Pagination, CircularProgress } from '@mui/material';
+import { ScanCard } from '../scan-card';
+import { SearchToolbar, CountsToolbar } from '../toolbars';
+import { AutoRefresh } from '../common';
+import { useAutoRejectedTab } from '../../../hooks/scan-admin';
+
+/**
+ * Auto Rejected tab component that displays extensions that failed validation.
+ * Uses the useAutoRejectedTab hook to consume context.
+ */
+export const AutoRejectedTabContent: FunctionComponent = () => {
+    const {
+        scans,
+        isLoading,
+        lastRefreshed,
+        autoRefresh,
+        onAutoRefreshChange,
+        totalCount,
+        search,
+        globalFilters,
+        validationTypeFilters,
+        pagination,
+        hasValidationTypes,
+    } = useAutoRejectedTab();
+
+    return (
+        <>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <SearchToolbar
+                    publisherQuery={search.publisherQuery}
+                    namespaceQuery={search.namespaceQuery}
+                    nameQuery={search.nameQuery}
+                    onPublisherChange={search.handlePublisherChange}
+                    onNamespaceChange={search.handleNamespaceChange}
+                    onNameChange={search.handleNameChange}
+                />
+                <CountsToolbar
+                    counts={[
+                        { label: 'Total', value: totalCount, color: 'text.primary' },
+                    ]}
+                    filterOptions={validationTypeFilters.availableValidationTypes.map(type => ({
+                        label: type,
+                        value: type,
+                        checked: validationTypeFilters.filters.has(type),
+                    }))}
+                    onFilterOptionToggle={validationTypeFilters.toggle}
+                    dateRange={globalFilters.dateRange}
+                    onDateRangeChange={globalFilters.setDateRange}
+                    enforcement={globalFilters.enforcement}
+                    onEnforcementChange={globalFilters.setEnforcement}
+                />
+                <AutoRefresh
+                    lastRefreshed={lastRefreshed}
+                    autoRefresh={autoRefresh}
+                    onAutoRefreshChange={onAutoRefreshChange}
+                />
+            </Box>
+            {isLoading ? (
+                <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+                    <CircularProgress color='secondary' />
+                </Box>
+            ) : (!hasValidationTypes || scans.length === 0) ? (
+                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 4 }}>
+                    <Typography variant='h6' color='text.secondary'>
+                        No auto rejected extensions
+                    </Typography>
+                    <Typography variant='body2' color='text.secondary' sx={{ mt: 1 }}>
+                        Extensions that fail validation will appear here
+                    </Typography>
+                </Box>
+            ) : (
+                scans.map((scan) => (
+                    <ScanCard key={scan.id} scan={scan} />
+                ))
+            )}
+            {pagination.totalPages > 1 && (
+                <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3, mb: 2 }}>
+                    <Pagination
+                        count={pagination.totalPages}
+                        page={pagination.currentPage + 1}
+                        onChange={(_, page) => pagination.goToPage(page - 1)}
+                        disabled={isLoading}
+                        color='secondary'
+                        size='large'
+                        showFirstButton
+                        showLastButton
+                    />
+                </Box>
+            )}
+        </>
+    );
+};

package/src/components/scan-admin/tab-contents/block-list-tab-content.tsx

@@ -0,0 +1,119 @@
+/********************************************************************************
+ * 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 { Box, Typography, Pagination, CircularProgress } from '@mui/material';
+import { SearchToolbar, CountsToolbar } from '../toolbars';
+import { FileTable, AutoRefresh } from '../common';
+import { useBlockListTab } from '../../../hooks/scan-admin';
+import { useScanContext } from '../../../context/scan-admin';
+import { useTheme } from '@mui/material/styles';
+
+/**
+ * Blocked Files tab component that displays files that have been blocked.
+ * Uses the useBlockListTab hook to consume context.
+ */
+export const BlockListTabContent: FunctionComponent = () => {
+    const theme = useTheme();
+    const { state, actions } = useScanContext();
+    const {
+        files,
+        isLoading,
+        fileCount,
+        search,
+        selection,
+        setFilesChecked,
+        fileActions,
+        pagination,
+        lastRefreshed,
+        autoRefresh,
+        onAutoRefreshChange,
+    } = useBlockListTab();
+
+    return (
+        <>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <SearchToolbar
+                    publisherQuery={search.publisherQuery}
+                    namespaceQuery={search.namespaceQuery}
+                    nameQuery={search.nameQuery}
+                    onPublisherChange={search.handlePublisherChange}
+                    onNamespaceChange={search.handleNamespaceChange}
+                    onNameChange={search.handleNameChange}
+                    actionButtons={[
+                        {
+                            label: 'ALLOW',
+                            color: theme.palette.allowed!,
+                            disabled: !fileActions.canPerformAction,
+                            onClick: fileActions.openAllowDialog,
+                        },
+                        {
+                            label: 'DELETE',
+                            color: theme.palette.secondary.main,
+                            disabled: !fileActions.canPerformAction,
+                            onClick: fileActions.openDeleteDialog,
+                        },
+                    ]}
+                    selectedCount={selection.selectedCount}
+                />
+                <CountsToolbar
+                    counts={[
+                        { label: 'Blocked Files', value: fileCount, color: theme.palette.blocked },
+                    ]}
+                    dateRange={state.fileDateRange}
+                    onDateRangeChange={actions.setFileDateRange}
+                />
+                <AutoRefresh
+                    lastRefreshed={lastRefreshed}
+                    autoRefresh={autoRefresh}
+                    onAutoRefreshChange={onAutoRefreshChange}
+                />
+            </Box>
+            {isLoading ? (
+                <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+                    <CircularProgress color='secondary' />
+                </Box>
+            ) : files.length === 0 ? (
+                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 4 }}>
+                    <Typography variant='h6' color='text.secondary'>
+                        No blocked files
+                    </Typography>
+                    <Typography variant='body2' color='text.secondary' sx={{ mt: 1 }}>
+                        Files that have been blocked will appear here
+                    </Typography>
+                </Box>
+            ) : (
+                <FileTable
+                    files={files}
+                    type='blocked'
+                    selectedFiles={selection.checked}
+                    onSelectionChange={setFilesChecked}
+                />
+            )}
+            {pagination.totalPages > 1 && (
+                <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3, mb: 2 }}>
+                    <Pagination
+                        count={pagination.totalPages}
+                        page={pagination.currentPage + 1}
+                        onChange={(_, page) => pagination.goToPage(page - 1)}
+                        disabled={isLoading}
+                        color='secondary'
+                        size='large'
+                        showFirstButton
+                        showLastButton
+                    />
+                </Box>
+            )}
+        </>
+    );
+};