tab history

Author: omursahin

web-report/src/components/Dashboard.tsx

@@ -54,6 +54,10 @@ export const Dashboard: React.FC = () => {
 
     const [testTabs, setTestTabs] = useState<Array<ITestTabs>>([]);
 
+    const [openExamples, setOpenExamples] = useState<string[]>([]);
+    const [openEndpoint, setOpenEndpoint] = useState<string>("");
+    const [openTestFiles, setOpenTestFiles] = useState<string[]>([]);
+
     const addTestTab = (testName: string, event: React.MouseEvent<HTMLElement>) => {
         const origin = MAIN_TABS.has(activeTab)
             ? activeTab
@@ -195,15 +199,15 @@ export const Dashboard: React.FC = () => {
                 </TabsContent>
 
                 <TabsContent value="endpoints">
-                    <Endpoints addTestTab={addTestTab}/>
+                    <Endpoints addTestTab={addTestTab} openEndpoint={openEndpoint} setOpenEndpoint={setOpenEndpoint}/>
                 </TabsContent>
 
                 <TabsContent value="examples">
-                    <Examples addTestTab={addTestTab}/>
+                    <Examples addTestTab={addTestTab} openExamples={openExamples} setOpenExamples={setOpenExamples}/>
                 </TabsContent>
 
                 <TabsContent value="tests">
-                    <Tests/>
+                    <Tests openTestFiles={openTestFiles} setOpenTestFiles={setOpenTestFiles}/>
                 </TabsContent>
 
                 <TabsContent value="warnings">

web-report/src/pages/Endpoints.tsx

@@ -6,9 +6,11 @@ import {useAppContext} from "@/AppProvider.tsx";
 
 interface IProps {
     addTestTab: (value: string, event: React.MouseEvent<HTMLElement>) => void;
+    openEndpoint: string;
+    setOpenEndpoint: (value: string) => void;
 }
 
-export const Endpoints: React.FC<IProps> = ({addTestTab}) => {
+export const Endpoints: React.FC<IProps> = ({addTestTab, openEndpoint, setOpenEndpoint}) => {
 
     const {transformedReport, filteredEndpoints, statusFilters, setStatusFilters} = useAppContext();
 
@@ -21,10 +23,10 @@ export const Endpoints: React.FC<IProps> = ({addTestTab}) => {
                     <p className="text-black-400">{filteredEndpoints.length}</p> / <p className="text-red-400">{transformedReport.length}</p>
                 </div>
             </div>
-            <Accordion type="single" collapsible className="w-full">
+            <Accordion type="single" collapsible value={openEndpoint} onValueChange={setOpenEndpoint} className="w-full">
                 {
                     filteredEndpoints.map((item, index) => (
-                        <EndpointAccordion data-testid="endpoint" key={index} value={`_${index}`}
+                        <EndpointAccordion data-testid="endpoint" key={index} value={item.endpoint}
                                            endpoint={item.endpoint}
                                            statusCodes={item.httpStatusCodes} faults={item.faults}
                                            addTestTab={addTestTab}/>

web-report/src/pages/Examples.tsx

@@ -5,14 +5,16 @@ import {ChevronRight, Code} from "lucide-react";
 
 interface IProps {
     addTestTab: (testName: string, event: React.MouseEvent<HTMLElement>) => void;
+    openExamples: string[];
+    setOpenExamples: (value: string[]) => void;
 }
 
 interface ExampleEntry {
     name: string;
     cases: Array<{id: string; name: string}>;
 }
 
-export const Examples: React.FC<IProps> = ({addTestTab}) => {
+export const Examples: React.FC<IProps> = ({addTestTab, openExamples, setOpenExamples}) => {
     const {data} = useAppContext();
     const testCases = useMemo(() => data?.testCases ?? [], [data]);
 
@@ -75,11 +77,11 @@ export const Examples: React.FC<IProps> = ({addTestTab}) => {
             ) : filteredExamples.length === 0 ? (
                 <div className="text-gray-500 italic text-sm">No named examples match the current filter.</div>
             ) : (
-                <Accordion type="multiple" className="w-full">
+                <Accordion type="multiple" value={openExamples} onValueChange={setOpenExamples} className="w-full">
                     {filteredExamples.map((ex, idx) => (
                         <AccordionItem
                             key={ex.name}
-                            value={`example-${idx}`}
+                            value={ex.name}
                             className="border-2 border-black mb-4 overflow-hidden"
                             data-testid={`example-${idx}`}
                         >

web-report/src/pages/Tests.tsx

@@ -17,7 +17,12 @@ const filterButtonClass = (active: boolean) =>
             : "bg-white hover:bg-gray-100"
     }`;
 
-export const Tests: React.FC = () => {
+interface IProps {
+    openTestFiles: string[];
+    setOpenTestFiles: (value: string[]) => void;
+}
+
+export const Tests: React.FC<IProps> = ({openTestFiles, setOpenTestFiles}) => {
     const {
         data,
         reviews,
@@ -153,13 +158,13 @@ export const Tests: React.FC = () => {
                 ))}
             </div>
 
-            <Accordion type="multiple" className="w-full">
+            <Accordion type="multiple" value={openTestFiles} onValueChange={setOpenTestFiles} className="w-full">
                 {testFilePaths.map((file, idx) => {
                     const items = grouped.get(file) ?? [];
                     return (
                         <AccordionItem
                             key={file}
-                            value={`file-${idx}`}
+                            value={file}
                             className="border-2 border-black mb-4 overflow-hidden"
                             data-testid={`test-file-${idx}`}
                         >

web-report/src/pages/Warnings.tsx

@@ -3,6 +3,21 @@ import {useAppContext} from "@/AppProvider.tsx";
 import {Warning} from "@/types/GeneratedTypes.tsx";
 import {AlertTriangle} from "lucide-react";
 
+type Palette = {container: string; badge: string};
+
+const CATEGORY_PALETTE: Palette[] = [
+    {container: "bg-blue-50 border-blue-500 text-blue-900", badge: "bg-blue-200 border-blue-700 text-blue-900"},
+    {container: "bg-amber-50 border-amber-500 text-amber-900", badge: "bg-amber-200 border-amber-700 text-amber-900"},
+    {container: "bg-emerald-50 border-emerald-500 text-emerald-900", badge: "bg-emerald-200 border-emerald-700 text-emerald-900"},
+    {container: "bg-purple-50 border-purple-500 text-purple-900", badge: "bg-purple-200 border-purple-700 text-purple-900"},
+    {container: "bg-pink-50 border-pink-500 text-pink-900", badge: "bg-pink-200 border-pink-700 text-pink-900"},
+];
+
+const UNCATEGORIZED_PALETTE: Palette = {
+    container: "bg-gray-50 border-gray-400 text-gray-900",
+    badge: "bg-gray-200 border-gray-600 text-gray-900",
+};
+
 export const Warnings: React.FC = () => {
     const {data} = useAppContext();
 
@@ -15,6 +30,17 @@ export const Warnings: React.FC = () => {
         });
     }, [data]);
 
+    const categoryPalette = useMemo<Map<string, Palette>>(() => {
+        const map = new Map<string, Palette>();
+        for (const w of sortedWarnings) {
+            if (!w.category) continue;
+            if (!map.has(w.category)) {
+                map.set(w.category, CATEGORY_PALETTE[map.size % CATEGORY_PALETTE.length]);
+            }
+        }
+        return map;
+    }, [sortedWarnings]);
+
     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">
@@ -31,24 +57,28 @@ export const Warnings: React.FC = () => {
                 </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`}>
+                    {sortedWarnings.map((w, idx) => {
+                        const palette = w.category ? (categoryPalette.get(w.category) ?? UNCATEGORIZED_PALETTE) : UNCATEGORIZED_PALETTE;
+                        return (
+                            <div
+                                key={idx}
+                                className={`border-2 p-3 flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-3 ${palette.container}`}
+                                data-testid={`warning-${idx}`}
+                            >
+                                {w.category && (
+                                    <span
+                                        className={`shrink-0 self-start font-mono text-xs px-2 py-0.5 border-2 ${palette.badge}`}
+                                        data-testid={`warning-${idx}-category`}
+                                    >
                                         {w.category}
                                     </span>
+                                )}
+                                <div className="text-sm whitespace-pre-wrap break-words flex-1" data-testid={`warning-${idx}-message`}>
+                                    {w.message ?? <span className="italic text-gray-500">(no message)</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>