validation

Author: omursahin

web-report/src-e2e/App.test.tsx

@@ -1,4 +1,4 @@
-import {render, waitFor, screen, act, fireEvent} from '@testing-library/react';
+import {render, waitFor, screen, act, fireEvent, within} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {resolve} from "path";
 import {readFileSync} from "fs";
@@ -18,7 +18,7 @@ vi.mock('@/lib/utils.tsx', async (importOriginal) => {
         fetchFileContent: vi.fn(async (filePath: string) => {
             const folderPath = resolve(__dirname, './static/');
             const fullPath = resolve(folderPath, filePath);
-            if (fullPath.endsWith('.json')) {
+            if (fullPath.endsWith('report.json')) {
                 return reportData;
             } else if (filePath.endsWith('.java')) {
                 return readFileSync(fullPath, 'utf-8');
@@ -134,6 +134,83 @@ describe('App test', () => {
         });
     });
 
+    it('changing a review state marks it dirty and updates counts', async () => {
+        render(<App/>);
+        await waitFor(() => {
+            expect(screen.getByTestId('tab-tests')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.focus(screen.getByTestId('tab-tests'));
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('test-file-0')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(within(screen.getByTestId('test-file-0')).getByRole('button'));
+        });
+
+        const firstTestId = reportData.testCases[0].id as string;
+        await waitFor(() => {
+            expect(screen.getByTestId(`test-review-state-${firstTestId}`)).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.change(screen.getByTestId(`test-review-state-${firstTestId}`), {
+                target: {value: 'ACCEPTED'},
+            });
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('reviews-unsaved-banner')).toBeInTheDocument();
+            expect(screen.getByTestId('reviews-filter-ACCEPTED')).toHaveTextContent('ACCEPTED (1)');
+            expect(screen.getByTestId('reviews-filter-NOT-REVIEWED'))
+                .toHaveTextContent(`NOT-REVIEWED (${reportData.testCases.length - 1})`);
+        });
+    });
+
+    it('clicking a test opens the detail dialog and close dismisses it', async () => {
+        render(<App/>);
+        await waitFor(() => {
+            expect(screen.getByTestId('tab-tests')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.focus(screen.getByTestId('tab-tests'));
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('test-file-0')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(within(screen.getByTestId('test-file-0')).getByRole('button'));
+        });
+
+        const firstTestId = reportData.testCases[0].id as string;
+        await waitFor(() => {
+            expect(screen.getByTestId(`test-review-open-${firstTestId}`)).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(screen.getByTestId(`test-review-open-${firstTestId}`));
+        });
+
+        await waitFor(() => {
+            expect(screen.getByTestId('test-detail-dialog')).toBeInTheDocument();
+        });
+
+        act(() => {
+            fireEvent.click(screen.getByTestId('test-detail-dialog-close'));
+        });
+
+        await waitFor(() => {
+            expect(screen.queryByTestId('test-detail-dialog')).toBeNull();
+        });
+    });
+
     it('check faults component', async () => {
         render(<App />);
         expect(screen.getByText(/Please wait, files are loading.../)).toBeInTheDocument();

web-report/src/AppProvider.tsx

@@ -1,9 +1,19 @@
-import {createContext, useContext, useState, ReactNode, useEffect} from 'react';
+import {createContext, useContext, useState, ReactNode, useEffect, useRef, useCallback} from 'react';
 import {WebFuzzingCommonsReport} from "@/types/GeneratedTypes.tsx";
 import {ITestFiles} from "@/types/General.tsx";
 import {fetchFileContent, ITransformedReport, transformWebFuzzingReport} from "@/lib/utils.tsx";
 import {webFuzzingCommonsReportSchema} from "@/types/GeneratedTypesZod.ts";
 import {ZodIssue} from "zod";
+import {
+    DEFAULT_REVIEW,
+    parseReviewFile,
+    REVIEW_FILE_NAME,
+    REVIEW_SCHEMA_VERSION,
+    ReviewFile,
+    ReviewState,
+    reviewsEqual,
+    TestReview,
+} from "@/types/Review.ts";
 
 type AppContextType = {
     data: WebFuzzingCommonsReport | null;
@@ -16,6 +26,15 @@ type AppContextType = {
     invalidReportErrors: ZodIssue[] | null;
     lowCodeMode: boolean;
     setLowCodeMode: (v: boolean) => void;
+    reviews: Record<string, TestReview>;
+    getReview: (testId: string) => TestReview;
+    setReviewState: (testId: string, state: ReviewState) => void;
+    setReviewComment: (testId: string, comment: string) => void;
+    isDirty: boolean;
+    saveReviews: () => void;
+    loadReviews: (file: File) => Promise<void>;
+    reviewMessage: {type: "info" | "error"; text: string} | null;
+    clearReviewMessage: () => void;
 };
 
 const AppContext = createContext<AppContextType | undefined>(undefined);
@@ -36,6 +55,15 @@ export const AppProvider = ({ children }: AppProviderProps) => {
     const [lowCodeMode, setLowCodeMode] = useState<boolean>(initialLowCode);
     const transformedReport = transformWebFuzzingReport(data);
 
+    const [reviews, setReviews] = useState<Record<string, TestReview>>({});
+    const baselineRef = useRef<Record<string, TestReview>>({});
+    const [isDirty, setIsDirty] = useState(false);
+    const [reviewMessage, setReviewMessage] = useState<{type: "info" | "error"; text: string} | null>(null);
+
+    useEffect(() => {
+        setIsDirty(!reviewsEqual(reviews, baselineRef.current));
+    }, [reviews]);
+
     useEffect(() => {
         const fetchData = async () => {
             try {
@@ -106,6 +134,113 @@ export const AppProvider = ({ children }: AppProviderProps) => {
         }
     }, [data]);
 
+    useEffect(() => {
+        if (!data) return;
+        if (window.location.protocol === 'file:') {
+            setReviewMessage({
+                type: "info",
+                text: `Auto-loading ${REVIEW_FILE_NAME} is not possible when opening this page directly from disk. Either launch the report via webreport.py, or click "Load reviews" to import the file manually.`,
+            });
+            return;
+        }
+        let cancelled = false;
+        fetchFileContent('./' + REVIEW_FILE_NAME)
+            .then(parsed => {
+                if (cancelled || !parsed) return;
+                try {
+                    const loaded = parseReviewFile(parsed);
+                    setReviews(loaded);
+                    baselineRef.current = loaded;
+                    setIsDirty(false);
+                    setReviewMessage({
+                        type: "info",
+                        text: `Auto-loaded ${Object.keys(loaded).length} review(s) from ${REVIEW_FILE_NAME}.`,
+                    });
+                } catch (e) {
+                    console.warn("Auto-load of reviews failed:", e);
+                }
+            })
+            .catch(() => { /* silent — expected when no review file is present or under file:// */ });
+        return () => { cancelled = true; };
+    }, [data]);
+
+    useEffect(() => {
+        if (!isDirty) return;
+        const handler = (e: BeforeUnloadEvent) => {
+            e.preventDefault();
+            e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", handler);
+        return () => window.removeEventListener("beforeunload", handler);
+    }, [isDirty]);
+
+    const getReview = useCallback(
+        (testId: string): TestReview => reviews[testId] ?? DEFAULT_REVIEW,
+        [reviews],
+    );
+
+    const setReviewState = useCallback((testId: string, state: ReviewState) => {
+        setReviews(prev => {
+            const existing = prev[testId] ?? DEFAULT_REVIEW;
+            return {...prev, [testId]: {...existing, state}};
+        });
+    }, []);
+
+    const setReviewComment = useCallback((testId: string, comment: string) => {
+        setReviews(prev => {
+            const existing = prev[testId] ?? DEFAULT_REVIEW;
+            return {...prev, [testId]: {...existing, comment}};
+        });
+    }, []);
+
+    const saveReviews = useCallback(() => {
+        const file: ReviewFile = {
+            schemaVersion: REVIEW_SCHEMA_VERSION,
+            reviews: {},
+        };
+        for (const [id, r] of Object.entries(reviews)) {
+            const comment = (r.comment ?? "").trim();
+            if (r.state !== "NOT-REVIEWED" || comment !== "") {
+                file.reviews[id] = {state: r.state, comment: r.comment ?? ""};
+            }
+        }
+        const blob = new Blob([JSON.stringify(file, null, 2)], {type: "application/json"});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = REVIEW_FILE_NAME;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        baselineRef.current = {...reviews};
+        setIsDirty(false);
+        setReviewMessage({
+            type: "info",
+            text: `Saved ${Object.keys(file.reviews).length} review(s). Place the downloaded ${REVIEW_FILE_NAME} next to report.json.`,
+        });
+    }, [reviews]);
+
+    const loadReviews = useCallback(async (file: File) => {
+        try {
+            const text = await file.text();
+            const parsed = JSON.parse(text);
+            const loaded = parseReviewFile(parsed);
+            setReviews(loaded);
+            baselineRef.current = loaded;
+            setIsDirty(false);
+            setReviewMessage({
+                type: "info",
+                text: `Loaded ${Object.keys(loaded).length} review(s) from ${file.name}.`,
+            });
+        } catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            setReviewMessage({type: "error", text: `Failed to load reviews: ${msg}`});
+        }
+    }, []);
+
+    const clearReviewMessage = useCallback(() => setReviewMessage(null), []);
+
     const [filteredEndpoints, setFilteredEndpoints] = useState(transformedReport);
 
     useEffect(() => {
@@ -175,7 +310,27 @@ export const AppProvider = ({ children }: AppProviderProps) => {
         return filtered;
     }
 
-    const value: AppContextType = { data, loading, error, testFiles, transformedReport, filterEndpoints, filteredEndpoints, invalidReportErrors, lowCodeMode, setLowCodeMode };
+    const value: AppContextType = {
+        data,
+        loading,
+        error,
+        testFiles,
+        transformedReport,
+        filterEndpoints,
+        filteredEndpoints,
+        invalidReportErrors,
+        lowCodeMode,
+        setLowCodeMode,
+        reviews,
+        getReview,
+        setReviewState,
+        setReviewComment,
+        isDirty,
+        saveReviews,
+        loadReviews,
+        reviewMessage,
+        clearReviewMessage,
+    };
 
     return (
         <AppContext.Provider value={value}>
@@ -190,4 +345,4 @@ export const useAppContext = (): AppContextType => {
         throw new Error('useAppContext must be used within AppProvider');
     }
     return context;
-};
+};

web-report/src/components/Dashboard.tsx

@@ -6,6 +6,7 @@ import {Header} from "@/components/Header.tsx";
 import {Overview} from "@/pages/Overview.tsx";
 import {Endpoints} from "@/pages/Endpoints.tsx";
 import {TestResults} from "@/pages/TestResults.tsx";
+import {Tests} from "@/pages/Tests.tsx";
 
 import {ScrollArea, ScrollBar} from "@/components/ui/scroll-area.tsx";
 import {useAppContext} from "@/AppProvider.tsx";
@@ -16,7 +17,7 @@ export interface ITestTabs {
 }
 
 export const Dashboard: React.FC = () => {
-    const {data} = useAppContext();
+    const {data, isDirty} = useAppContext();
 
     const [activeTab, setActiveTab] = useState("overview")
 
@@ -79,6 +80,13 @@ export const Dashboard: React.FC = () => {
                         >
                             Endpoints
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="tests"
+                            className="min-w-[150px] py-3 border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
+                            data-testid="tab-tests"
+                        >
+                            Tests{isDirty && <span className="ml-1 text-orange-600" title="Unsaved review changes">•</span>}
+                        </TabsTrigger>
                     </TabsList>
                 </div>
                 <div className="border-t border-black my-2"></div>
@@ -123,6 +131,10 @@ export const Dashboard: React.FC = () => {
                     <Endpoints addTestTab={addTestTab}/>
                 </TabsContent>
 
+                <TabsContent value="tests">
+                    <Tests/>
+                </TabsContent>
+
                 {
                     testTabs.map((test, index) => (
                         <TabsContent value={`${test.value}`} key={index}>