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

package/src/hooks/scan-admin/use-file-list-tab.ts

@@ -0,0 +1,149 @@
+/********************************************************************************
+ * 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, useCallback } from 'react';
+import { useScanContext, FileDecisionType } from '../../context/scan-admin';
+import { usePagination } from './use-pagination';
+import { useSearch } from './use-search';
+
+interface UseFileListTabOptions {
+    tabIndex: 3 | 4;
+    decisionType: FileDecisionType;
+    tabName: string;
+}
+
+/**
+ * Hook for the Allowed Files (tab 3) and Blocked Files (tab 4) tabs.
+ * Provides file list data, selection management, and file actions.
+ */
+export const useFileListTab = ({ tabIndex, decisionType, tabName }: UseFileListTabOptions) => {
+    const { state, actions, derived } = useScanContext();
+    const pagination = usePagination();
+    const search = useSearch();
+
+    // Files are already filtered server-side by decision parameter
+    const files = state.files;
+
+    // Auto-refresh state (shared with all tabs)
+    const lastRefreshed = state.lastRefreshed;
+    const autoRefresh = state.autoRefresh;
+    const onAutoRefreshChange = actions.setAutoRefresh;
+
+    // Selection state (files already filtered server-side by decision)
+    const selection = useMemo(() => ({
+        checked: state.filesChecked,
+        selectedCount: state.filesChecked.size,
+        selectedFiles: derived.selectedFiles,
+    }), [state.filesChecked, derived.selectedFiles]);
+
+    // Selection actions
+    const setFilesChecked = useCallback((fileIds: Set<string>) => {
+        actions.setFilesChecked(fileIds);
+    }, [actions]);
+
+    const selectAll = useCallback(() => {
+        const allIds = new Set(files.map(f => f.id));
+        actions.setFilesChecked(allIds);
+    }, [files, actions]);
+
+    const deselectAll = useCallback(() => {
+        actions.setFilesChecked(new Set());
+    }, [actions]);
+
+    const isAllSelected = useMemo(() => {
+        return files.length > 0 && files.every(file => state.filesChecked.has(file.id));
+    }, [files, state.filesChecked]);
+
+    const isSomeSelected = useMemo(() => {
+        return files.some(file => state.filesChecked.has(file.id)) && !isAllSelected;
+    }, [files, state.filesChecked, isAllSelected]);
+
+    // File actions
+    const fileActions = useMemo(() => ({
+        openAllowDialog: () => actions.openFileDialog('allow'),
+        openBlockDialog: () => actions.openFileDialog('block'),
+        openDeleteDialog: () => actions.openFileDialog('delete'),
+        canPerformAction: selection.selectedCount > 0,
+    }), [actions, selection.selectedCount]);
+
+    // Get count from file counts
+    const fileCount = state.fileCounts
+        ? (decisionType === 'allowed' ? state.fileCounts.allowed : state.fileCounts.blocked)
+        : 0;
+
+    return useMemo(() => ({
+        tabIndex,
+        tabName,
+        decisionType,
+        files,
+        isLoading: state.isLoadingFiles,
+        fileCount,
+        lastRefreshed,
+        autoRefresh,
+        onAutoRefreshChange,
+        search,
+        pagination,
+        selection,
+        setFilesChecked,
+        selectAll,
+        deselectAll,
+        isAllSelected,
+        isSomeSelected,
+        fileActions,
+    }), [
+        tabIndex,
+        tabName,
+        decisionType,
+        files,
+        state.isLoadingFiles,
+        fileCount,
+        lastRefreshed,
+        autoRefresh,
+        onAutoRefreshChange,
+        search,
+        pagination,
+        selection,
+        setFilesChecked,
+        selectAll,
+        deselectAll,
+        isAllSelected,
+        isSomeSelected,
+        fileActions,
+    ]);
+};
+
+/**
+ * Hook specifically for the Allow List tab (tab index 3).
+ */
+export const useAllowListTab = () => {
+    return useFileListTab({
+        tabIndex: 3,
+        decisionType: 'allowed',
+        tabName: 'Allow List',
+    });
+};
+
+/**
+ * Hook specifically for the Block List tab (tab index 4).
+ */
+export const useBlockListTab = () => {
+    return useFileListTab({
+        tabIndex: 4,
+        decisionType: 'blocked',
+        tabName: 'Block List',
+    });
+};
+
+export type UseFileListTabReturn = ReturnType<typeof useFileListTab>;
+export type UseAllowListTabReturn = ReturnType<typeof useAllowListTab>;
+export type UseBlockListTabReturn = ReturnType<typeof useBlockListTab>;

package/src/hooks/scan-admin/use-pagination.ts

@@ -0,0 +1,90 @@
+/********************************************************************************
+ * 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, useCallback } from 'react';
+import { useScanContext } from '../../context/scan-admin';
+
+/**
+ * Hook for managing pagination state and actions.
+ * Provides page navigation, total pages calculation, and loading state.
+ */
+export const usePagination = () => {
+    const { state, actions, derived } = useScanContext();
+
+    const goToPage = useCallback((page: number) => {
+        if (page >= 0 && page < derived.totalPages) {
+            actions.setPage(page);
+        }
+    }, [actions, derived.totalPages]);
+
+    const goToNextPage = useCallback(() => {
+        if (state.currentPage < derived.totalPages - 1) {
+            actions.setPage(state.currentPage + 1);
+        }
+    }, [state.currentPage, derived.totalPages, actions]);
+
+    const goToPreviousPage = useCallback(() => {
+        if (state.currentPage > 0) {
+            actions.setPage(state.currentPage - 1);
+        }
+    }, [state.currentPage, actions]);
+
+    const goToFirstPage = useCallback(() => {
+        actions.setPage(0);
+    }, [actions]);
+
+    const goToLastPage = useCallback(() => {
+        if (derived.totalPages > 0) {
+            actions.setPage(derived.totalPages - 1);
+        }
+    }, [derived.totalPages, actions]);
+
+    // Determine if we're in a loading state based on selected tab
+    const isLoading = state.selectedTab >= 3 ? state.isLoadingFiles : state.isLoadingScans;
+
+    // Get total items based on selected tab
+    const totalItems = state.selectedTab >= 3 ? state.totalFiles : state.totalScans;
+
+    return useMemo(() => ({
+        currentPage: state.currentPage,
+        pageSize: state.pageSize,
+        totalPages: derived.totalPages,
+        totalItems,
+        isLoading,
+        goToPage,
+        goToNextPage,
+        goToPreviousPage,
+        goToFirstPage,
+        goToLastPage,
+        hasNextPage: state.currentPage < derived.totalPages - 1,
+        hasPreviousPage: state.currentPage > 0,
+        isFirstPage: state.currentPage === 0,
+        isLastPage: state.currentPage >= derived.totalPages - 1,
+        // Range info (1-indexed for display)
+        startItem: totalItems > 0 ? state.currentPage * state.pageSize + 1 : 0,
+        endItem: Math.min((state.currentPage + 1) * state.pageSize, totalItems),
+    }), [
+        state.currentPage,
+        state.pageSize,
+        derived.totalPages,
+        totalItems,
+        isLoading,
+        goToPage,
+        goToNextPage,
+        goToPreviousPage,
+        goToFirstPage,
+        goToLastPage,
+    ]);
+};
+
+export type UsePaginationReturn = ReturnType<typeof usePagination>;

package/src/hooks/scan-admin/use-quarantined-tab.ts

@@ -0,0 +1,138 @@
+/********************************************************************************
+ * 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, useCallback } from 'react';
+import { useScanContext } from '../../context/scan-admin';
+import { useScanFilters } from './use-scan-filters';
+import { usePagination } from './use-pagination';
+import { useSearch } from './use-search';
+
+/**
+ * Hook for the Quarantined tab (tab index 1).
+ * Provides quarantined scan data, selection management, and bulk actions.
+ */
+export const useQuarantinedTab = () => {
+    const { state, actions, derived } = useScanContext();
+    const { globalFilters, quarantineFilters } = useScanFilters();
+    const pagination = usePagination();
+    const search = useSearch();
+
+    // Scans are already filtered server-side by threatScannerName parameter
+    const quarantinedScans = state.scans;
+
+    // Determine which scans are selectable (need review)
+    // A scan needs review if: no admin decision AND has at least one enforced threat
+    const selectableScans = useMemo(() => {
+        return quarantinedScans.filter(scan => {
+            const hasEnforcedThreat = scan.threats.some(t => t.enforcedFlag);
+            const needsReview = !scan.adminDecision?.decision && hasEnforcedThreat;
+            return needsReview;
+        });
+    }, [quarantinedScans]);
+
+    // Selection state
+    const selection = useMemo(() => {
+        const keys = Object.keys(state.quarantinedChecked);
+        const selectedCount = keys.filter(key => state.quarantinedChecked[key]).length;
+        return {
+            checked: state.quarantinedChecked,
+            selectedCount,
+            selectedExtensions: derived.selectedExtensions,
+        };
+    }, [state.quarantinedChecked, derived.selectedExtensions]);
+
+    // Selection actions
+    const toggleCheck = useCallback((id: string, checked: boolean) => {
+        actions.toggleQuarantinedCheck(id, checked);
+    }, [actions]);
+
+    const selectAll = useCallback(() => {
+        // Only select scans that are selectable (need review)
+        actions.selectAllQuarantined(selectableScans);
+    }, [actions, selectableScans]);
+
+    const deselectAll = useCallback(() => {
+        actions.deselectAllQuarantined();
+    }, [actions]);
+
+    const isAllSelected = useMemo(() => {
+        // Check if all selectable scans are selected
+        return selectableScans.length > 0 &&
+            selectableScans.every(scan => state.quarantinedChecked[scan.id]);
+    }, [selectableScans, state.quarantinedChecked]);
+
+    const isSomeSelected = useMemo(() => {
+        return selectableScans.some(scan => state.quarantinedChecked[scan.id]) &&
+            !isAllSelected;
+    }, [selectableScans, state.quarantinedChecked, isAllSelected]);
+
+    // Bulk actions
+    const bulkActions = useMemo(() => ({
+        openAllowDialog: actions.openAllowDialog,
+        openBlockDialog: actions.openBlockDialog,
+        canPerformBulkAction: selection.selectedCount > 0,
+    }), [actions, selection.selectedCount]);
+
+    // Get total count from the counts API (unaffected by search filters and admin decision checkbox filters)
+    const totalCount = (state.scanCounts?.STARTED ?? 0) + (state.scanCounts?.VALIDATING ?? 0) +
+        (state.scanCounts?.SCANNING ?? 0) + (state.scanCounts?.PASSED ?? 0) +
+        (state.scanCounts?.QUARANTINED ?? 0) + (state.scanCounts?.AUTO_REJECTED ?? 0) +
+        (state.scanCounts?.ERROR ?? 0);
+
+    // Check if there are any threat scanners available to filter by
+    const hasThreatScanners = state.availableThreatScanners.length > 0;
+
+    return useMemo(() => ({
+        tabIndex: 1,
+        tabName: 'Quarantined',
+        scans: quarantinedScans,
+        isLoading: state.isLoadingScans,
+        lastRefreshed: state.lastRefreshed,
+        autoRefresh: state.autoRefresh,
+        onAutoRefreshChange: actions.setAutoRefresh,
+        totalCount,
+        hasThreatScanners,
+        search,
+        globalFilters,
+        quarantineFilters,
+        pagination,
+        selection,
+        toggleCheck,
+        selectAll,
+        deselectAll,
+        isAllSelected,
+        isSomeSelected,
+        bulkActions,
+    }), [
+        quarantinedScans,
+        state.isLoadingScans,
+        state.lastRefreshed,
+        state.autoRefresh,
+        actions.setAutoRefresh,
+        totalCount,
+        hasThreatScanners,
+        search,
+        globalFilters,
+        quarantineFilters,
+        pagination,
+        selection,
+        toggleCheck,
+        selectAll,
+        deselectAll,
+        isAllSelected,
+        isSomeSelected,
+        bulkActions,
+    ]);
+};
+
+export type UseQuarantinedTabReturn = ReturnType<typeof useQuarantinedTab>;

package/src/hooks/scan-admin/use-scan-card-state.ts

@@ -0,0 +1,73 @@
+/********************************************************************************
+ * 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 { useState, useEffect, useRef, useMemo } from 'react';
+import { ScanResult } from '../../context/scan-admin';
+import { formatDuration } from '../../components/scan-admin/common';
+import {
+    isRunning,
+    shouldShowExpandButton,
+    getDetailBadges,
+    DetailBadge,
+} from '../../components/scan-admin/scan-card/utils';
+
+interface UseScanCardStateReturn {
+    expanded: boolean;
+    handleExpandClick: () => void;
+    showExpandButton: boolean;
+    badges: DetailBadge[];
+    liveDuration: string;
+    // Card ref for height tracking
+    cardRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * Custom hook that encapsulates all ScanCard state logic.
+ */
+export const useScanCardState = (scan: ScanResult): UseScanCardStateReturn => {
+    const [expanded, setExpanded] = useState(false);
+    const [liveDuration, setLiveDuration] = useState('');
+
+    const cardRef = useRef<HTMLDivElement>(null);
+
+    const badges = useMemo(() => getDetailBadges(scan), [scan]);
+
+    const showExpandButton = shouldShowExpandButton(scan);
+
+    const handleExpandClick = () => {
+        setExpanded(!expanded);
+    };
+
+    // Live duration for running scans
+    useEffect(() => {
+        if (isRunning(scan.status) && scan.dateScanStarted) {
+            const updateDuration = () => {
+                const duration = formatDuration(scan.dateScanStarted, new Date().toISOString());
+                setLiveDuration(duration);
+            };
+            updateDuration();
+            const interval = setInterval(updateDuration, 1000);
+            return () => clearInterval(interval);
+        }
+        return undefined;
+    }, [scan.status, scan.dateScanStarted]);
+
+    return {
+        expanded,
+        handleExpandClick,
+        showExpandButton,
+        badges,
+        liveDuration,
+        cardRef,
+    };
+};

package/src/hooks/scan-admin/use-scan-filters.ts

@@ -0,0 +1,83 @@
+/********************************************************************************
+ * 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 { useScanContext } from '../../context/scan-admin';
+
+/**
+ * Hook for managing scan filter state and actions.
+ * Provides access to global filters (date range, enforcement) and
+ * tab-specific filters (status, quarantine, threat scanner, validation type).
+ */
+export const useScanFilters = () => {
+    const { state, actions } = useScanContext();
+
+    // Global filters
+    const globalFilters = useMemo(() => ({
+        dateRange: state.dateRange,
+        enforcement: state.enforcement,
+        setDateRange: actions.setDateRange,
+        setEnforcement: actions.setEnforcement,
+    }), [state.dateRange, state.enforcement, actions]);
+
+    // Status filters (for Scans tab)
+    const statusFilters = useMemo(() => ({
+        filters: state.statusFilters,
+        toggle: actions.toggleStatusFilter,
+        menuAnchor: state.filterMenuAnchor,
+        openMenu: actions.openFilterMenu,
+        closeMenu: actions.closeFilterMenu,
+    }), [state.statusFilters, state.filterMenuAnchor, actions]);
+
+    // Quarantine filters (for Quarantined tab)
+    const quarantineFilters = useMemo(() => ({
+        filters: state.quarantineFilters,
+        toggle: actions.toggleQuarantineFilter,
+        threatScannerFilters: state.threatScannerFilters,
+        toggleThreatScanner: actions.toggleThreatScannerFilter,
+        availableThreatScanners: state.availableThreatScanners,
+        menuAnchor: state.quarantineFilterMenuAnchor,
+        openMenu: actions.openQuarantineFilterMenu,
+        closeMenu: actions.closeQuarantineFilterMenu,
+    }), [
+        state.quarantineFilters,
+        state.threatScannerFilters,
+        state.availableThreatScanners,
+        state.quarantineFilterMenuAnchor,
+        actions,
+    ]);
+
+    // Validation type filters (for Auto Rejected tab)
+    const validationTypeFilters = useMemo(() => ({
+        filters: state.validationTypeFilters,
+        toggle: actions.toggleValidationTypeFilter,
+        availableValidationTypes: state.availableValidationTypes,
+        menuAnchor: state.autoRejectedFilterMenuAnchor,
+        openMenu: actions.openAutoRejectedFilterMenu,
+        closeMenu: actions.closeAutoRejectedFilterMenu,
+    }), [
+        state.validationTypeFilters,
+        state.availableValidationTypes,
+        state.autoRejectedFilterMenuAnchor,
+        actions,
+    ]);
+
+    return {
+        globalFilters,
+        statusFilters,
+        quarantineFilters,
+        validationTypeFilters,
+    };
+};
+
+export type UseScanFiltersReturn = ReturnType<typeof useScanFilters>;

package/src/hooks/scan-admin/use-scans-tab.ts

@@ -0,0 +1,92 @@
+/********************************************************************************
+ * 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 { useScanContext } from '../../context/scan-admin';
+import { useScanFilters } from './use-scan-filters';
+import { usePagination } from './use-pagination';
+import { useSearch } from './use-search';
+
+/**
+ * Hook for the main Scans tab (tab index 0).
+ * Provides all data and actions needed for displaying scan overview.
+ */
+export const useScansTab = () => {
+    const { state, actions } = useScanContext();
+    const { globalFilters, statusFilters } = useScanFilters();
+    const pagination = usePagination();
+    const search = useSearch();
+
+    // Get scan counts for display
+    const counts = useMemo(() => {
+        if (!state.scanCounts) {
+            return {
+                started: 0,
+                validating: 0,
+                scanning: 0,
+                passed: 0,
+                quarantined: 0,
+                autoRejected: 0,
+                error: 0,
+                allowed: 0,
+                blocked: 0,
+                needsReview: 0,
+                total: 0,
+            };
+        }
+        return {
+            started: state.scanCounts.STARTED,
+            validating: state.scanCounts.VALIDATING,
+            scanning: state.scanCounts.SCANNING,
+            passed: state.scanCounts.PASSED,
+            quarantined: state.scanCounts.QUARANTINED,
+            autoRejected: state.scanCounts.AUTO_REJECTED,
+            error: state.scanCounts.ERROR,
+            allowed: state.scanCounts.ALLOWED,
+            blocked: state.scanCounts.BLOCKED,
+            needsReview: state.scanCounts.NEEDS_REVIEW,
+            // Total = sum of scan statuses only (ALLOWED/BLOCKED/NEEDS_REVIEW are admin decisions, not statuses)
+            total: state.scanCounts.STARTED + state.scanCounts.VALIDATING + state.scanCounts.SCANNING +
+                   state.scanCounts.PASSED + state.scanCounts.QUARANTINED + state.scanCounts.AUTO_REJECTED +
+                   state.scanCounts.ERROR,
+        };
+    }, [state.scanCounts]);
+
+    return useMemo(() => ({
+        tabIndex: 0,
+        tabName: 'Scans',
+        scans: state.scans,
+        isLoading: state.isLoadingScans,
+        lastRefreshed: state.lastRefreshed,
+        autoRefresh: state.autoRefresh,
+        onAutoRefreshChange: actions.setAutoRefresh,
+        counts,
+        search,
+        globalFilters,
+        statusFilters,
+        pagination,
+    }), [
+        state.scans,
+        state.isLoadingScans,
+        state.lastRefreshed,
+        state.autoRefresh,
+        actions.setAutoRefresh,
+        counts,
+        search,
+        globalFilters,
+        statusFilters,
+        pagination,
+    ]);
+};
+
+export type UseScansTabReturn = ReturnType<typeof useScansTab>;

package/src/hooks/scan-admin/use-search.ts

@@ -0,0 +1,54 @@
+/********************************************************************************
+ * 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, useCallback } from 'react';
+import { useScanContext } from '../../context/scan-admin';
+
+/**
+ * Hook for managing search state and actions.
+ * Provides publisher, namespace, and name search functionality.
+ */
+export const useSearch = () => {
+    const { state, actions, dispatch } = useScanContext();
+
+    const clearSearch = useCallback(() => {
+        dispatch({ type: 'CLEAR_SEARCH' });
+    }, [dispatch]);
+
+    const hasActiveSearch = useMemo(() => {
+        return !!(state.publisherQuery || state.namespaceQuery || state.nameQuery);
+    }, [state.publisherQuery, state.namespaceQuery, state.nameQuery]);
+
+    return useMemo(() => ({
+        publisherQuery: state.publisherQuery,
+        namespaceQuery: state.namespaceQuery,
+        nameQuery: state.nameQuery,
+        setPublisherQuery: actions.setPublisherQuery,
+        setNamespaceQuery: actions.setNamespaceQuery,
+        setNameQuery: actions.setNameQuery,
+        handlePublisherChange: actions.handlePublisherChange,
+        handleNamespaceChange: actions.handleNamespaceChange,
+        handleNameChange: actions.handleNameChange,
+        clearSearch,
+        hasActiveSearch,
+    }), [
+        state.publisherQuery,
+        state.namespaceQuery,
+        state.nameQuery,
+        actions,
+        clearSearch,
+        hasActiveSearch,
+    ]);
+};
+
+export type UseSearchReturn = ReturnType<typeof useSearch>;