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

package/src/components/scan-admin/tab-contents/index.ts

@@ -0,0 +1,18 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+export { ScansTabContent } from './scans-tab-content';
+export { QuarantinedTabContent } from './quarantined-tab-content';
+export { AutoRejectedTabContent } from './auto-rejected-tab-content';
+export { AllowListTabContent } from './allow-list-tab-content';
+export { BlockListTabContent } from './block-list-tab-content';

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

@@ -0,0 +1,158 @@
+/********************************************************************************
+ * 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 { useQuarantinedTab } from '../../../hooks/scan-admin';
+import { useScanContext } from '../../../context/scan-admin';
+import { useTheme } from '@mui/material/styles';
+
+/**
+ * Quarantined tab component that displays extensions flagged by security scans.
+ * Uses the useQuarantinedTab hook to consume context.
+ */
+export const QuarantinedTabContent: FunctionComponent = () => {
+    const theme = useTheme();
+    const { state } = useScanContext();
+    const {
+        scans,
+        isLoading,
+        lastRefreshed,
+        autoRefresh,
+        onAutoRefreshChange,
+        totalCount,
+        search,
+        globalFilters,
+        quarantineFilters,
+        pagination,
+        selection,
+        toggleCheck,
+        selectAll,
+        deselectAll,
+        isAllSelected,
+        bulkActions,
+        hasThreatScanners,
+    } = useQuarantinedTab();
+
+    // Calculate allowed/blocked/needs review counts from scanCounts
+    const allowedCount = state.scanCounts?.ALLOWED ?? 0;
+    const blockedCount = state.scanCounts?.BLOCKED ?? 0;
+    const needsReviewCount = state.scanCounts?.NEEDS_REVIEW ?? 0;
+
+    const handleSelectAllChange = (checked: boolean) => {
+        if (checked) {
+            selectAll();
+        } else {
+            deselectAll();
+        }
+    };
+
+    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}
+                    filters={[
+                        { label: 'Allowed', value: 'allowed', checked: quarantineFilters.filters.has('allowed'), onChange: quarantineFilters.toggle },
+                        { label: 'Blocked', value: 'blocked', checked: quarantineFilters.filters.has('blocked'), onChange: quarantineFilters.toggle },
+                        { label: 'Needs Review', value: 'needs-review', checked: quarantineFilters.filters.has('needs-review'), onChange: quarantineFilters.toggle },
+                    ]}
+                    showSelectAll={true}
+                    allSelected={isAllSelected}
+                    onSelectAllChange={handleSelectAllChange}
+                    actionButtons={[
+                        { label: 'ALLOW', color: theme.palette.allowed!, disabled: !bulkActions.canPerformBulkAction, onClick: bulkActions.openAllowDialog },
+                        { label: 'BLOCK', color: theme.palette.blocked!, disabled: !bulkActions.canPerformBulkAction, onClick: bulkActions.openBlockDialog },
+                    ]}
+                    selectedCount={selection.selectedCount}
+                />
+                <CountsToolbar
+                    counts={[
+                        { label: 'Total', value: totalCount, color: 'text.primary' },
+                        { label: 'Allowed', value: allowedCount, color: theme.palette.allowed },
+                        { label: 'Blocked', value: blockedCount, color: theme.palette.blocked },
+                        { label: 'Needs Review', value: needsReviewCount, color: theme.palette.review },
+                    ]}
+                    filterOptions={quarantineFilters.availableThreatScanners.map(scanner => ({
+                        label: scanner,
+                        value: scanner,
+                        checked: quarantineFilters.threatScannerFilters.has(scanner),
+                    }))}
+                    onFilterOptionToggle={quarantineFilters.toggleThreatScanner}
+                    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>
+            ) : (!hasThreatScanners || scans.length === 0) ? (
+                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 4 }}>
+                    <Typography variant='h6' color='text.secondary'>
+                        No quarantined extensions
+                    </Typography>
+                    <Typography variant='body2' color='text.secondary' sx={{ mt: 1 }}>
+                        Extensions flagged by security scans will appear here
+                    </Typography>
+                </Box>
+            ) : (
+                scans.map((scan) => {
+                    // Only show checkbox for scans that need review:
+                    // - No admin decision yet AND
+                    // - Has at least one enforced threat (unenforced threats don't require review)
+                    const hasEnforcedThreat = scan.threats.some(t => t.enforcedFlag);
+                    const needsReview = !scan.adminDecision?.decision && hasEnforcedThreat;
+                    return (
+                        <ScanCard
+                            key={scan.id}
+                            scan={scan}
+                            showCheckbox={needsReview}
+                            checked={selection.checked[scan.id] || false}
+                            onCheckboxChange={toggleCheck}
+                        />
+                    );
+                })
+            )}
+            {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/scans-tab-content.tsx

@@ -0,0 +1,113 @@
+/********************************************************************************
+ * 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 { useScansTab } from '../../../hooks/scan-admin';
+import { useTheme } from '@mui/material/styles';
+
+/**
+ * Scans tab component that displays an overview of all extension scans.
+ * Uses the useScansTab hook to consume context.
+ */
+export const ScansTabContent: FunctionComponent = () => {
+    const theme = useTheme();
+    const {
+        scans,
+        isLoading,
+        lastRefreshed,
+        autoRefresh,
+        onAutoRefreshChange,
+        counts,
+        search,
+        globalFilters,
+        statusFilters,
+        pagination,
+    } = useScansTab();
+
+    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}
+                    filters={[
+                        { label: 'Running', value: 'running', checked: statusFilters.filters.has('running'), onChange: statusFilters.toggle },
+                        { label: 'Passed', value: 'PASSED', checked: statusFilters.filters.has('PASSED'), onChange: statusFilters.toggle },
+                        { label: 'Quarantined', value: 'QUARANTINED', checked: statusFilters.filters.has('QUARANTINED'), onChange: statusFilters.toggle },
+                        { label: 'Auto Rejected', value: 'AUTO REJECTED', checked: statusFilters.filters.has('AUTO REJECTED'), onChange: statusFilters.toggle },
+                        { label: 'Error', value: 'ERROR', checked: statusFilters.filters.has('ERROR'), onChange: statusFilters.toggle },
+                    ]}
+                />
+                <CountsToolbar
+                    counts={[
+                        { label: 'Total', value: counts.total, color: 'text.primary' },
+                        { label: 'Running', value: counts.started + counts.validating + counts.scanning, color: 'secondary.main' },
+                        { label: 'Passed', value: counts.passed, color: theme.palette.passed.dark },
+                        { label: 'Quarantined', value: counts.quarantined, color: theme.palette.quarantined.dark },
+                        { label: 'Auto Rejected', value: counts.autoRejected, color: theme.palette.rejected.dark },
+                        { label: 'Error', value: counts.error, color: theme.palette.errorStatus.dark },
+                    ]}
+                    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>
+            ) : scans.length === 0 ? (
+                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 4 }}>
+                    <Typography variant='h6' color='text.secondary'>
+                        No scans found
+                    </Typography>
+                    <Typography variant='body2' color='text.secondary' sx={{ mt: 1 }}>
+                        {search.hasActiveSearch ? 'Try adjusting your search query' : 'Running and completed scans 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/toolbars/counts-toolbar.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, { FunctionComponent, useState } from 'react';
+import { Box, Typography, Button, Checkbox, FormControlLabel, Select, MenuItem, SelectChangeEvent, ToggleButtonGroup, ToggleButton, Menu, Badge } from '@mui/material';
+import { FilterList as FilterListIcon } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
+
+interface CountDisplay {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+interface FilterOption {
+    label: string;
+    value: string;
+    checked: boolean;
+}
+
+interface CountsToolbarProps {
+    // Counts to display
+    counts: CountDisplay[];
+
+    // Optional filter button with menu
+    filterOptions?: FilterOption[];
+    onFilterOptionToggle?: (value: string) => void;
+
+    // Optional date range filter
+    dateRange?: 'today' | 'last7days' | 'last30days' | 'last90days' | 'all';
+    onDateRangeChange?: (range: 'today' | 'last7days' | 'last30days' | 'last90days' | 'all') => void;
+
+    // Optional enforcement filter
+    enforcement?: 'enforced' | 'notEnforced' | 'all';
+    onEnforcementChange?: (enforcement: 'enforced' | 'notEnforced' | 'all') => void;
+}
+
+export const CountsToolbar: FunctionComponent<CountsToolbarProps> = ({
+    counts,
+    filterOptions = [],
+    onFilterOptionToggle,
+    dateRange = 'all',
+    onDateRangeChange,
+    enforcement = 'all',
+    onEnforcementChange,
+}) => {
+    const theme = useTheme();
+    const [filterMenuAnchor, setFilterMenuAnchor] = useState<null | HTMLElement>(null);
+
+    const filterMenuOpen = Boolean(filterMenuAnchor);
+    const activeFilterCount = filterOptions.filter(opt => opt.checked).length;
+
+    if (counts.length === 0) {
+        return null;
+    }
+
+    return (
+        <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 3,
+                height: '48px',
+                px: 1.5,
+                py: 1.5,
+                backgroundColor: theme.palette.scanBackground.dark,
+                borderRadius: 1,
+                border: `1px solid ${theme.palette.scanBackground.default}`,
+                borderColor: 'divider',
+                overflow: 'hidden',
+            }}>
+                {counts.map((count, index) => (
+                    <Box
+                        key={index}
+                        sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1.5,
+                            flexShrink: 0,
+                        }}
+                    >
+                        <Typography
+                            variant='body2'
+                            sx={{
+                                color: 'text.secondary',
+                                fontSize: '0.875rem',
+                                fontWeight: 400,
+                                whiteSpace: 'nowrap',
+                            }}
+                        >
+                            {count.label}:
+                        </Typography>
+                        <Typography
+                            variant='h6'
+                            sx={{
+                                color: count.color || 'text.primary',
+                                fontSize: '1.25rem',
+                                fontWeight: 600,
+                                lineHeight: 1,
+                            }}
+                        >
+                            {count.value}
+                        </Typography>
+                    </Box>
+                ))}
+
+                {/* Right-aligned controls */}
+                <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0 }}>
+                    {/* Filter Button with Menu */}
+                    {onFilterOptionToggle && (
+                        <>
+                            <Button
+                                variant='outlined'
+                                size='small'
+                                onClick={(e) => setFilterMenuAnchor(e.currentTarget)}
+                                disabled={filterOptions.length === 0}
+                                sx={{
+                                    minWidth: 'auto',
+                                    width: '32px',
+                                    height: '32px',
+                                    p: 0,
+                                    borderColor: 'divider',
+                                    color: 'text.secondary',
+                                    '&:hover': {
+                                        borderColor: theme.palette.secondary.main,
+                                        backgroundColor: 'transparent',
+                                    },
+                                }}
+                            >
+                                <Badge
+                                    badgeContent={activeFilterCount}
+                                    color='secondary'
+                                    invisible={activeFilterCount === 0}
+                                >
+                                    <FilterListIcon fontSize='small' />
+                                </Badge>
+                            </Button>
+                            <Menu
+                                anchorEl={filterMenuAnchor}
+                                open={filterMenuOpen}
+                                onClose={() => setFilterMenuAnchor(null)}
+                                PaperProps={{
+                                    sx: {
+                                        maxHeight: 400,
+                                        minWidth: 200,
+                                        backgroundColor: theme.palette.scanBackground.dark,
+                                    },
+                                }}
+                            >
+                                {filterOptions.map((option) => (
+                                    <MenuItem
+                                        key={option.value}
+                                        onClick={() => onFilterOptionToggle(option.value)}
+                                        sx={{
+                                            py: 0.5,
+                                            '&:hover': {
+                                                backgroundColor: theme.palette.scanBackground.default,
+                                            },
+                                        }}
+                                    >
+                                        <FormControlLabel
+                                            control={
+                                                <Checkbox
+                                                    checked={option.checked}
+                                                    size='small'
+                                                    sx={{
+                                                        color: theme.palette.checkboxUnchecked,
+                                                        '&.Mui-checked': {
+                                                            color: theme.palette.secondary.main,
+                                                        },
+                                                    }}
+                                                />
+                                            }
+                                            label={
+                                                <Typography variant='body2' sx={{ fontSize: '0.875rem' }}>
+                                                    {option.label}
+                                                </Typography>
+                                            }
+                                            sx={{ m: 0, width: '100%', pointerEvents: 'none' }}
+                                        />
+                                    </MenuItem>
+                                ))}
+                            </Menu>
+                        </>
+                    )}
+
+                    {/* Enforcement Filter */}
+                    {onEnforcementChange && (
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                            <ToggleButtonGroup
+                                value={enforcement}
+                                exclusive
+                                onChange={(e, value) => value && onEnforcementChange(value)}
+                                size='small'
+                                sx={{
+                                    height: '32px',
+                                    '& .MuiToggleButton-root': {
+                                        py: 0.5,
+                                        px: 1.5,
+                                        fontSize: '0.8125rem',
+                                        textTransform: 'none',
+                                        whiteSpace: 'nowrap',
+                                        borderColor: 'divider',
+                                        '&.Mui-selected': {
+                                            backgroundColor: theme.palette.secondary.main,
+                                            color: theme.palette.secondary.contrastText,
+                                            '&:hover': {
+                                                backgroundColor: theme.palette.secondary.dark,
+                                            },
+                                        },
+                                    },
+                                }}
+                            >
+                                <ToggleButton value='enforced'>Enforced</ToggleButton>
+                                <ToggleButton value='notEnforced'>Not Enforced</ToggleButton>
+                                <ToggleButton value='all'>All</ToggleButton>
+                            </ToggleButtonGroup>
+                        </Box>
+                    )}
+
+                    {/* Date Range Filter */}
+                    {onDateRangeChange && (
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
+                            <Typography variant='body2' sx={{ color: 'text.secondary', fontSize: '0.875rem', whiteSpace: 'nowrap' }}>
+                                Date Range:
+                            </Typography>
+                            <Select
+                                value={dateRange}
+                                onChange={(e: SelectChangeEvent) => onDateRangeChange(e.target.value as any)}
+                                size='small'
+                                sx={{
+                                    minWidth: 120,
+                                    height: '32px',
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: 'divider',
+                                    },
+                                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: theme.palette.secondary.main,
+                                    },
+                                }}
+                            >
+                                <MenuItem value='today'>Today</MenuItem>
+                                <MenuItem value='last7days'>Last 7 days</MenuItem>
+                                <MenuItem value='last30days'>Last 30 days</MenuItem>
+                                <MenuItem value='last90days'>Last 90 days</MenuItem>
+                                <MenuItem value='all'>All</MenuItem>
+                            </Select>
+                        </Box>
+                    )}
+                </Box>
+        </Box>
+    );
+};

package/src/components/scan-admin/toolbars/index.ts

@@ -0,0 +1,16 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+export { TabToolbar } from './tab-toolbar';
+export { SearchToolbar } from './search-toolbar';
+export { CountsToolbar } from './counts-toolbar';