warnings

Author: omursahin

web-report/src-e2e/static/report.json

@@ -4868,5 +4868,13 @@
         }
       ]
     }
+  ],
+  "warnings": [
+    {
+      "message": "No authentication info was provided. Unless you are testing an example API, you should setup some authentication info for different users. If this is the first time you are using EvoMaster, and you just want to get a feeling of how it works, then ignore this warning. However, to get better results, you will need setup authentication info, eventually. More info is currently available at https://github.com/WebFuzzing/EvoMaster/blob/master/docs/auth.md",
+      "category": "FUZZER",
+      "displayPriority": 1,
+      "additionalProperties": {}
+    }
   ]
 }

web-report/src/components/Dashboard.tsx

@@ -7,6 +7,7 @@ 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 {Warnings} from "@/pages/Warnings.tsx";
 
 import {ScrollArea, ScrollBar} from "@/components/ui/scroll-area.tsx";
 import {useAppContext} from "@/AppProvider.tsx";
@@ -20,6 +21,8 @@ export interface ITestTabs {
 export const Dashboard: React.FC = () => {
     const {data, isDirty, reviews} = useAppContext();
 
+    const warningCount = data?.warnings?.length ?? 0;
+
     const reviewRatio = useMemo(() => {
         if (!data) return null;
         const total = data.testCases.length;
@@ -79,7 +82,7 @@ export const Dashboard: React.FC = () => {
                     toolNameVersion={`${data.toolName}-${data.toolVersion}`}/>
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                 <div className="flex justify-center mb-2 w-full">
-                    <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
+                    <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[850px] h-auto p-1 bg-transparent`}>
                         <TabsTrigger
                             value="overview"
                             className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm 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)]"
@@ -107,13 +110,25 @@ export const Dashboard: React.FC = () => {
                             )}
                             {isDirty && <span className="ml-1 text-orange-600" title="Unsaved review changes">•</span>}
                         </TabsTrigger>
+                        <TabsTrigger
+                            value="warnings"
+                            className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-orange-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-warnings"
+                        >
+                            Warnings
+                            {warningCount > 0 && (
+                                <span className="ml-2 text-xs font-mono px-1.5 py-0.5 border border-orange-600 bg-orange-50 text-orange-700" data-testid="tab-warnings-count">
+                                    {warningCount}
+                                </span>
+                            )}
+                        </TabsTrigger>
                     </TabsList>
                 </div>
                 <div className="border-t border-black my-2"></div>
 
                 <div className="flex justify-center w-full">
                     {
-                        <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
+                        <TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[850px] h-auto p-1 bg-transparent`}>
                             <ScrollArea className="w-[130%] whitespace-nowrap py-3">
                                 {
                                     testTabs.map((test, index) => (
@@ -155,6 +170,10 @@ export const Dashboard: React.FC = () => {
                     <Tests/>
                 </TabsContent>
 
+                <TabsContent value="warnings">
+                    <Warnings/>
+                </TabsContent>
+
                 {
                     testTabs.map((test, index) => (
                         <TabsContent value={`${test.value}`} key={index}>

web-report/src/pages/Warnings.tsx

@@ -0,0 +1,56 @@
+import React, {useMemo} from "react";
+import {useAppContext} from "@/AppProvider.tsx";
+import {Warning} from "@/types/GeneratedTypes.tsx";
+import {AlertTriangle} from "lucide-react";
+
+export const Warnings: React.FC = () => {
+    const {data} = useAppContext();
+
+    const sortedWarnings = useMemo<Warning[]>(() => {
+        const warnings = data?.warnings ?? [];
+        return [...warnings].sort((a, b) => {
+            const pa = a.displayPriority ?? Number.MAX_SAFE_INTEGER;
+            const pb = b.displayPriority ?? Number.MAX_SAFE_INTEGER;
+            return pa - pb;
+        });
+    }, [data]);
+
+    return (
+        <div className="border-2 border-black p-3 sm:p-6 rounded-none" data-testid="warnings-page">
+            <div className="flex items-center gap-2 mb-4">
+                <AlertTriangle className="text-orange-500" size={22}/>
+                <h2 className="text-lg font-bold">Warnings</h2>
+                <span className="ml-2 font-mono text-xs px-2 py-1 border-2 border-black bg-white" data-testid="warnings-count">
+                    {sortedWarnings.length}
+                </span>
+            </div>
+
+            {sortedWarnings.length === 0 ? (
+                <div className="border-2 border-dashed border-gray-400 bg-gray-50 p-6 text-center text-sm text-gray-600 font-mono" data-testid="warnings-empty">
+                    No warnings reported.
+                </div>
+            ) : (
+                <div className="flex flex-col gap-3">
+                    {sortedWarnings.map((w, idx) => (
+                        <div
+                            key={idx}
+                            className="border-2 p-3 bg-blue-50 border-blue-500 text-blue-900"
+                            data-testid={`warning-${idx}`}
+                        >
+                            {w.category && (
+                                <div className="mb-2">
+                                    <span className="font-mono text-xs px-2 py-0.5 border-2 border-black bg-white" data-testid={`warning-${idx}-category`}>
+                                        {w.category}
+                                    </span>
+                                </div>
+                            )}
+                            <div className="text-sm whitespace-pre-wrap break-words" data-testid={`warning-${idx}-message`}>
+                                {w.message ?? <span className="italic text-gray-500">(no message)</span>}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};