openvsx-webui-test 0.17.2 → 0.18.0-dev.1

package/src/components/scan-admin/toolbars/search-toolbar.tsx

@@ -0,0 +1,255 @@
+/********************************************************************************
+ * 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, TextField, InputAdornment, Button, Checkbox, FormControlLabel } from '@mui/material';
+import { CheckCircle as CheckCircleIcon, RadioButtonUnchecked as RadioButtonUncheckedIcon, PersonOutlined as PersonIcon, AccountTreeOutlined as AccountTreeIcon, ExtensionOutlined as ExtensionIcon } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
+
+interface FilterItem {
+    label: string;
+    value: string;
+    checked: boolean;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+
+interface ActionButton {
+    label: string;
+    color: string;
+    disabled: boolean;
+    onClick: () => void;
+}
+
+interface SearchToolbarProps {
+    publisherQuery: string;
+    namespaceQuery: string;
+    nameQuery: string;
+    onPublisherChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onNamespaceChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+    // Optional inline filters
+    filters?: FilterItem[];
+
+    // Optional select all checkbox
+    showSelectAll?: boolean;
+    allSelected?: boolean;
+    onSelectAllChange?: (checked: boolean) => void;
+
+    // Optional action buttons
+    actionButtons?: ActionButton[];
+
+    // Optional selected count display
+    selectedCount?: number;
+}
+
+export const SearchToolbar: FunctionComponent<SearchToolbarProps> = ({
+    publisherQuery,
+    namespaceQuery,
+    nameQuery,
+    onPublisherChange,
+    onNamespaceChange,
+    onNameChange,
+    filters = [],
+    showSelectAll = false,
+    allSelected = false,
+    onSelectAllChange,
+    actionButtons = [],
+    selectedCount = 0,
+}) => {
+    const theme = useTheme();
+
+    return (
+        <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', pb: 1.5, minHeight: '56px', overflow: 'hidden' }}>
+            <TextField
+                placeholder='Publisher'
+                value={publisherQuery}
+                onChange={onPublisherChange}
+                size='small'
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position='start'>
+                            <PersonIcon sx={{ fontSize: 20 }} />
+                        </InputAdornment>
+                    ),
+                }}
+                sx={{
+                    flex: 1,
+                    minWidth: 100,
+                    maxWidth: '16.67%',
+                    '& .MuiOutlinedInput-root': {
+                        backgroundColor: theme.palette.scanBackground.dark,
+                        '&.Mui-focused fieldset': {
+                            borderColor: theme.palette.secondary.main,
+                        },
+                    },
+                }}
+            />
+            <TextField
+                placeholder='Namespace'
+                value={namespaceQuery}
+                onChange={onNamespaceChange}
+                size='small'
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position='start'>
+                            <AccountTreeIcon sx={{ fontSize: 20 }} />
+                        </InputAdornment>
+                    ),
+                }}
+                sx={{
+                    flex: 1,
+                    minWidth: 100,
+                    maxWidth: '16.67%',
+                    '& .MuiOutlinedInput-root': {
+                        backgroundColor: theme.palette.scanBackground.dark,
+                        '&.Mui-focused fieldset': {
+                            borderColor: theme.palette.secondary.main,
+                        },
+                    },
+                }}
+            />
+            <TextField
+                placeholder='Name or Display Name'
+                value={nameQuery}
+                onChange={onNameChange}
+                size='small'
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position='start'>
+                            <ExtensionIcon sx={{ fontSize: 20 }} />
+                        </InputAdornment>
+                    ),
+                }}
+                sx={{
+                    flex: 1,
+                    minWidth: 100,
+                    maxWidth: '16.67%',
+                    '& .MuiOutlinedInput-root': {
+                        backgroundColor: theme.palette.scanBackground.dark,
+                        '&.Mui-focused fieldset': {
+                            borderColor: theme.palette.secondary.main,
+                        },
+                    },
+                }}
+            />
+
+            {/* Inline Filter Checkboxes */}
+            {filters.length > 0 && (
+                <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'nowrap', justifyContent: 'flex-end', flex: 1 }}>
+                    {filters.map((filter) => (
+                        <FormControlLabel
+                            key={filter.value}
+                            control={
+                                <Checkbox
+                                    checked={filter.checked}
+                                    onChange={() => filter.onChange(filter.value)}
+                                    disabled={filter.disabled}
+                                    size='small'
+                                    sx={{
+                                        color: theme.palette.checkboxUnchecked,
+                                        '&.Mui-checked': {
+                                            color: theme.palette.secondary.main,
+                                        },
+                                    }}
+                                />
+                            }
+                            label={
+                                <Typography variant='body2' sx={{ fontSize: '0.875rem' }}>
+                                    {filter.label}
+                                </Typography>
+                            }
+                            sx={{ mr: 0 }}
+                            disabled={filter.disabled}
+                        />
+                    ))}
+                </Box>
+            )}
+
+            {/* Select All and Action Buttons */}
+            <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center', ml: 'auto' }}>
+                {showSelectAll && onSelectAllChange && (
+                    <Button
+                        variant='outlined'
+                        size='small'
+                        onClick={() => onSelectAllChange(!allSelected)}
+                        startIcon={allSelected ? <CheckCircleIcon /> : <RadioButtonUncheckedIcon />}
+                        sx={{
+                            textTransform: 'none',
+                            whiteSpace: 'nowrap',
+                            color: allSelected ? 'secondary.main' : 'text.secondary',
+                            borderColor: allSelected ? 'secondary.main' : 'divider',
+                        }}
+                    >
+                        Select All
+                    </Button>
+                )}
+            </Box>
+
+            {/* Action Buttons */}
+            {actionButtons.length > 0 && (
+                <Box sx={{ position: 'relative' }}>
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                        {actionButtons.map((button, index) => (
+                            <Button
+                                key={index}
+                                variant='outlined'
+                                disabled={button.disabled}
+                                onClick={button.onClick}
+                                size='small'
+                                sx={{
+                                    textTransform: 'none',
+                                    minWidth: 'auto',
+                                    px: 2,
+                                    fontWeight: 500,
+                                    borderColor: button.color,
+                                    color: button.color,
+                                    backgroundColor: 'transparent',
+                                    '&:hover': {
+                                        borderColor: button.color,
+                                        backgroundColor: button.color,
+                                        color: theme.palette.primary.contrastText,
+                                    },
+                                    '&:disabled': {
+                                        backgroundColor: 'transparent',
+                                        color: theme.palette.text.disabled,
+                                        borderColor: theme.palette.divider,
+                                    },
+                                }}
+                            >
+                                {button.label}
+                            </Button>
+                        ))}
+                    </Box>
+                    {selectedCount > 0 && (
+                        <Typography
+                            variant='body2'
+                            sx={{
+                                position: 'absolute',
+                                right: 0,
+                                top: '100%',
+                                color: 'text.secondary',
+                                fontSize: '0.75rem',
+                                mt: 0.5,
+                                whiteSpace: 'nowrap',
+                            }}
+                        >
+                            {selectedCount} selected
+                        </Typography>
+                    )}
+                </Box>
+            )}
+        </Box>
+    );
+};

package/src/components/scan-admin/toolbars/tab-toolbar.tsx

@@ -0,0 +1,56 @@
+/********************************************************************************
+ * 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 { Paper, Tabs, Tab } from '@mui/material';
+
+interface TabToolbarProps {
+    selectedTab: number;
+    onTabChange: (event: React.SyntheticEvent, newValue: number) => void;
+    tabs: string[];
+}
+
+/**
+ * TabToolbar component for the scan admin tab navigation.
+ * Renders the Paper/Tabs bar for switching between scan tabs.
+ */
+export const TabToolbar: FunctionComponent<TabToolbarProps> = ({
+    selectedTab,
+    onTabChange,
+    tabs,
+}) => {
+    return (
+        <Paper sx={{ mb: 1.5 }}>
+            <Tabs
+                value={selectedTab}
+                onChange={onTabChange}
+                aria-label='scans tabs'
+                sx={{
+                    borderBottom: 1,
+                    borderColor: 'divider',
+                    minHeight: '48px',
+                    '& .MuiTabs-indicator': {
+                        backgroundColor: 'secondary.main',
+                    },
+                    '& .MuiTab-root': {
+                        minHeight: '48px',
+                    },
+                }}
+            >
+                {tabs.map((label, index) => (
+                    <Tab key={index} label={label} />
+                ))}
+            </Tabs>
+        </Paper>
+    );
+};

package/src/context/scan-admin/index.ts

@@ -0,0 +1,43 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+// Context and Provider
+export { ScanProvider, useScanContext } from './scan-context';
+
+// Context Types
+export type { ScanContextValue, ScanActions, DerivedData, ScanProviderProps } from './scan-context-types';
+
+// Domain Types
+export * from './scan-types';
+
+// Reducer
+export { scanReducer } from './scan-reducer';
+
+// Helpers
+export { getDateRangeParams, getFileDateRange } from './scan-helpers';
+
+// API Effects (for testing or advanced use cases)
+export {
+    useFilterOptionsEffect,
+    useScansEffect,
+    useScanCountsEffect,
+    useFilesEffect,
+    useFileCountsEffect,
+    useAutoRefreshEffect,
+} from './scan-api-effects';
+
+// API Actions (for testing or advanced use cases)
+export { useConfirmAction, useFileAction } from './scan-api-actions';
+
+// Actions Factory (for testing or advanced use cases)
+export { useScanActions } from './scan-actions';

package/src/context/scan-admin/scan-actions.ts

@@ -0,0 +1,87 @@
+/********************************************************************************
+ * 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 { useMemo } from 'react';
+import { ScanAction, DateRangeType, EnforcementType, FileActionType, ScanResult } from './scan-types';
+import { ScanActions } from './scan-context-types';
+
+// ============================================================================
+// Actions Factory Hook
+// ============================================================================
+
+/**
+ * Hook that creates memoized action creators for the scan context
+ */
+export const useScanActions = (
+    dispatch: React.Dispatch<ScanAction>,
+    executeConfirmAction: () => void,
+    executeFileAction: () => void
+): ScanActions => {
+    return useMemo(() => ({
+        // Tab
+        setTab: (tab: number) => dispatch({ type: 'SET_TAB', payload: tab }),
+
+        // Search
+        setPublisherQuery: (query: string) => dispatch({ type: 'SET_PUBLISHER_QUERY', payload: query }),
+        setNamespaceQuery: (query: string) => dispatch({ type: 'SET_NAMESPACE_QUERY', payload: query }),
+        setNameQuery: (query: string) => dispatch({ type: 'SET_NAME_QUERY', payload: query }),
+        handlePublisherChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+            dispatch({ type: 'SET_PUBLISHER_QUERY', payload: event.target.value }),
+        handleNamespaceChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+            dispatch({ type: 'SET_NAMESPACE_QUERY', payload: event.target.value }),
+        handleNameChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+            dispatch({ type: 'SET_NAME_QUERY', payload: event.target.value }),
+
+        // Pagination
+        setPage: (page: number) => dispatch({ type: 'SET_PAGE', payload: page }),
+
+        // Filters
+        setDateRange: (range: DateRangeType) => dispatch({ type: 'SET_DATE_RANGE', payload: range }),
+        setEnforcement: (enforcement: EnforcementType) => dispatch({ type: 'SET_ENFORCEMENT', payload: enforcement }),
+        setAutoRefresh: (enabled: boolean) => dispatch({ type: 'SET_AUTO_REFRESH', payload: enabled }),
+        setFileDateRange: (range: DateRangeType) => dispatch({ type: 'SET_FILE_DATE_RANGE', payload: range }),
+        toggleStatusFilter: (status: string) => dispatch({ type: 'TOGGLE_STATUS_FILTER', payload: status }),
+        toggleQuarantineFilter: (filter: string) => dispatch({ type: 'TOGGLE_QUARANTINE_FILTER', payload: filter }),
+        toggleThreatScannerFilter: (scanner: string) => dispatch({ type: 'TOGGLE_THREAT_SCANNER_FILTER', payload: scanner }),
+        toggleValidationTypeFilter: (type: string) => dispatch({ type: 'TOGGLE_VALIDATION_TYPE_FILTER', payload: type }),
+
+        // Menu anchors
+        openFilterMenu: (event: React.MouseEvent<HTMLElement>) =>
+            dispatch({ type: 'SET_FILTER_MENU_ANCHOR', payload: event.currentTarget }),
+        closeFilterMenu: () => dispatch({ type: 'SET_FILTER_MENU_ANCHOR', payload: null }),
+        openQuarantineFilterMenu: (event: React.MouseEvent<HTMLElement>) =>
+            dispatch({ type: 'SET_QUARANTINE_FILTER_MENU_ANCHOR', payload: event.currentTarget }),
+        closeQuarantineFilterMenu: () => dispatch({ type: 'SET_QUARANTINE_FILTER_MENU_ANCHOR', payload: null }),
+        openAutoRejectedFilterMenu: (event: React.MouseEvent<HTMLElement>) =>
+            dispatch({ type: 'SET_AUTO_REJECTED_FILTER_MENU_ANCHOR', payload: event.currentTarget }),
+        closeAutoRejectedFilterMenu: () => dispatch({ type: 'SET_AUTO_REJECTED_FILTER_MENU_ANCHOR', payload: null }),
+
+        // Selection
+        toggleQuarantinedCheck: (id: string, checked: boolean) =>
+            dispatch({ type: 'TOGGLE_QUARANTINED_CHECKED', payload: { id, checked } }),
+        selectAllQuarantined: (scans: ScanResult[]) =>
+            dispatch({ type: 'SELECT_ALL_QUARANTINED', payload: scans }),
+        deselectAllQuarantined: () => dispatch({ type: 'DESELECT_ALL_QUARANTINED' }),
+        setFilesChecked: (fileIds: Set<string>) =>
+            dispatch({ type: 'SET_FILES_CHECKED', payload: fileIds }),
+
+        // Dialogs
+        openAllowDialog: () => dispatch({ type: 'OPEN_CONFIRM_DIALOG', payload: 'allow' }),
+        openBlockDialog: () => dispatch({ type: 'OPEN_CONFIRM_DIALOG', payload: 'block' }),
+        closeConfirmDialog: () => dispatch({ type: 'CLOSE_CONFIRM_DIALOG' }),
+        executeConfirmAction,
+        openFileDialog: (action: FileActionType) => dispatch({ type: 'OPEN_FILE_DIALOG', payload: action }),
+        closeFileDialog: () => dispatch({ type: 'CLOSE_FILE_DIALOG' }),
+        executeFileAction,
+    }), [dispatch, executeConfirmAction, executeFileAction]);
+};

package/src/context/scan-admin/scan-api-actions.ts

@@ -0,0 +1,137 @@
+/********************************************************************************
+ * 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 { useCallback } from 'react';
+import { ScanState, ScanAction } from './scan-types';
+
+// ============================================================================
+// Confirm Action Hook
+// ============================================================================
+
+/**
+ * Hook that returns the async confirm action handler for allow/block operations
+ * on selected quarantined scans. Makes a single API call to persist the decision.
+ * The backend handles adding enforced threat files to the allow/block list.
+ */
+export const useConfirmAction = (
+    service: any,
+    state: ScanState,
+    dispatch: React.Dispatch<ScanAction>,
+    handleErrorRef: React.MutableRefObject<(error: any) => void>
+) => {
+    return useCallback(async () => {
+        const abortController = new AbortController();
+
+        try {
+            // Get selected scan IDs
+            const selectedScanIds: string[] = [];
+            for (const id in state.quarantinedChecked) {
+                if (state.quarantinedChecked[id]) {
+                    selectedScanIds.push(id);
+                }
+            }
+
+            if (selectedScanIds.length === 0) {
+                dispatch({ type: 'CLOSE_CONFIRM_DIALOG' });
+                return;
+            }
+
+            const decision = state.confirmAction === 'allow' ? 'allowed' : 'blocked';
+
+            // Backend handles adding enforced threat files to allow/block list automatically
+            const scanResponse = await service.admin.makeScanDecision(abortController, {
+                scanIds: selectedScanIds,
+                decision,
+            });
+
+            if (scanResponse.error) {
+                handleErrorRef.current(new Error(scanResponse.error));
+                return;
+            }
+
+            // Update local state and trigger refresh
+            dispatch({ type: 'EXECUTE_CONFIRM_ACTION' });
+            dispatch({ type: 'TRIGGER_REFRESH' });
+
+        } catch (err: any) {
+            if (!abortController.signal.aborted) {
+                handleErrorRef.current(err);
+            }
+        }
+    }, [service, state.quarantinedChecked, state.confirmAction, dispatch, handleErrorRef]);
+};
+
+// ============================================================================
+// File Action Hook
+// ============================================================================
+
+/**
+ * Hook that returns the async file action handler for allow/block/delete operations
+ * on selected files in Allowed/Blocked Files tabs.
+ */
+export const useFileAction = (
+    service: any,
+    state: ScanState,
+    dispatch: React.Dispatch<ScanAction>,
+    handleErrorRef: React.MutableRefObject<(error: any) => void>
+) => {
+    return useCallback(async () => {
+        const abortController = new AbortController();
+
+        try {
+            if (state.filesChecked.size === 0) {
+                dispatch({ type: 'CLOSE_FILE_DIALOG' });
+                return;
+            }
+
+            const selectedFileIds = Array.from(state.filesChecked).map(id => parseInt(id, 10));
+
+            if (state.fileActionType === 'delete') {
+                const response = await service.admin.deleteFileDecisions(abortController, {
+                    fileIds: selectedFileIds,
+                });
+
+                if (response.error) {
+                    handleErrorRef.current(new Error(response.error));
+                    return;
+                }
+            } else {
+                const decision = state.fileActionType === 'allow' ? 'allowed' : 'blocked';
+
+                const selectedFiles = state.files.filter(file => state.filesChecked.has(file.id));
+                const fileHashes = selectedFiles.map(file => file.fileHash);
+
+                const response = await service.admin.makeFileDecision(abortController, {
+                    fileHashes,
+                    decision,
+                });
+
+                if (response.error) {
+                    handleErrorRef.current(new Error(response.error));
+                    return;
+                }
+            }
+
+            // Update local state and trigger refresh
+            dispatch({ type: 'SET_FILES_CHECKED', payload: new Set() });
+            dispatch({ type: 'CLOSE_FILE_DIALOG' });
+            dispatch({ type: 'RESET_PAGE' }); // Go back to first page after action
+            dispatch({ type: 'TRIGGER_REFRESH' });
+
+        } catch (err: any) {
+            if (!abortController.signal.aborted) {
+                handleErrorRef.current(err);
+            }
+        }
+    }, [service, state.filesChecked, state.fileActionType, state.files, dispatch, handleErrorRef]);
+};