Skip to content

Commit 46d307f

Browse files
arcuri82arcuri82
authored
Merge pull request #5 from WebFuzzing/minor-display-issues
Minor display issues
2 parents 5fd21bb + c7fc15b commit 46d307f

8 files changed

Lines changed: 65 additions & 37 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ describe('App test', () => {
107107
const overviewTab = screen.getByTestId('tab-overview');
108108

109109
// check if the endpoints tab is active
110-
expect(overviewTab).toHaveClass('data-[state=active]:bg-white');
110+
expect(overviewTab).toHaveClass('data-[state=active]:bg-blue-100');
111111

112112
});
113113
const endpointsTab = screen.getByTestId('tab-endpoints');
@@ -120,7 +120,7 @@ describe('App test', () => {
120120

121121
await waitFor(() => {
122122
// check if the endpoints tab is active
123-
expect(endpointsTab).toHaveClass('data-[state=active]:bg-white');
123+
expect(endpointsTab).toHaveClass('data-[state=active]:bg-blue-100');
124124
});
125125

126126
await waitFor(() => {

‎web-report/src/assets/info.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
"code_number_identifiers": "Code number identifiers for detected fault types",
55
"identifier_name": "Identifier name for the fault type.",
66
"test_files_located": "{number_of_test_cases} test cases are located in {file_name}",
7-
"http_endpoint_codes": "{number_of_endpoints} endpoints have {code} HTTP code out of {total_endpoints} endpoints.",
7+
"http_endpoint_codes": "Test cases cover {number_of_endpoints} endpoints returning {code} HTTP codes out of {total_endpoints} endpoints.",
88
"number_of_faults_per_code": "Number of faults detected for each code.",
9-
"distribution_of_endpoints_per_code": "Distribution of endpoints per code (Affected/Total Endpoints).",
10-
"distribution_tooltip": "{operation_count} {endpoint_text} {code} error code out of {totalEndpointNumber} endpoints.",
9+
"distribution_of_endpoints_per_code": "Faulty endpoints per code (Affected/Total Endpoints).",
10+
"distribution_tooltip": "{operation_count} {endpoint_text} {code} error code out of {total_endpoints} endpoints.",
1111
"generated_test_files": "Number of generated test files.",
1212
"generated_test_cases": "Number of generated test cases.",
1313
"total_faults": "Total number of faults detected in the API.",

‎web-report/src/components/Dashboard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,18 @@ export const Dashboard: React.FC = () => {
6363
schema_version={data.schema_version}
6464
tool_name_version={`${data.tool_name}-${data.tool_version}`}/>
6565
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
66-
<div className="flex justify-center mb-8 w-full">
66+
<div className="flex justify-center mb-2 w-full">
6767
<TabsList className={`flex gap-4 w-[80%] max-w-[700px] h-auto p-1 bg-transparent`}>
6868
<TabsTrigger
6969
value="overview"
70-
className="min-w-[150px] py-3 border border-gray-300 data-[state=active]:bg-white data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
70+
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)]"
7171
data-testid="tab-overview"
7272
>
7373
Overview
7474
</TabsTrigger>
7575
<TabsTrigger
7676
value="endpoints"
77-
className="min-w-[150px] py-3 border border-gray-300 data-[state=active]:bg-white data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
77+
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)]"
7878
data-testid="tab-endpoints"
7979
>
8080
Endpoints
@@ -83,7 +83,7 @@ export const Dashboard: React.FC = () => {
8383
</div>
8484
<div className="border-t border-black my-2"></div>
8585

86-
<div className="flex justify-center mb-8 w-full">
86+
<div className="flex justify-center w-full">
8787
{
8888
<TabsList className={`flex gap-4 w-[80%] max-w-[700px] h-auto p-1 bg-transparent`}>
8989
<ScrollArea className="w-[130%] whitespace-nowrap py-3">

‎web-report/src/components/EndpointAccordion.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,16 +77,16 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
7777
</div>
7878
</AccordionTrigger>
7979
<AccordionContent className="p-4">
80-
<div className="mb-6">
81-
<div className="font-bold text-lg mb-2">HTTP CODES</div>
80+
<div className="flex mb-6">
81+
<div className="flex font-bold text-lg mb-2 mr-2">HTTP CODES:</div>
8282
<div className="flex flex-wrap gap-2">
8383
{
8484
sortedStatusCodes.map((code, index) => (
8585
<Badge key={index} onClick={() => {
8686
setSelectedCode(code.code);
8787
setIsFault(false);
8888
}}
89-
className={`${getColor(code.code, true, false)} ${getSelectedStyle(code.code, false)} hover:bg-green-600 cursor-pointer text-white px-4 py-2 text-base font-bold border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
89+
className={`${getColor(code.code, true, false)} ${getSelectedStyle(code.code, false)} hover:bg-green-600 cursor-pointer text-white font-mono text-base border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
9090
{code.code}
9191
</Badge>
9292
))
@@ -98,16 +98,16 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
9898
</div>
9999
</div>
100100

101-
<div>
102-
<div className="font-bold text-lg mb-2 text-red-500">FAULT CODES</div>
101+
<div className="flex mb-6">
102+
<div className="flex font-bold text-lg mb-2 mr-2 text-red-500">FAULT CODES:</div>
103103
<div className="flex flex-wrap gap-2">
104104
{
105105
sortedFaults.map((fault, index) => (
106106
<Badge key={index} onClick={() => {
107107
setSelectedCode(fault.code)
108108
setIsFault(true);
109109
}}
110-
className={`${faultColors[index % faultColors.length]} ${getSelectedStyle(fault.code, true)} hover:bg-red-400 cursor-pointer text-white px-4 py-2 text-base font-bold border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
110+
className={`${faultColors[index % faultColors.length]} ${getSelectedStyle(fault.code, true)} hover:bg-red-400 cursor-pointer text-white text-base font-mono border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
111111
{fault.code}
112112
</Badge>
113113
))

‎web-report/src/components/FaultsComponent.tsx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -46,22 +46,6 @@ export const FaultsComponent: React.FC<Faults> = ({total_number, found_faults})
4646
</div>
4747
</div>
4848
</div>
49-
50-
{/*<div className="mt-6">*/}
51-
{/* <div className="grid grid-cols-4 gap-4 p-4 font-semibold text-gray-700 border-b">*/}
52-
{/* <ReportTooltip tooltipText={info.code_number_identifiers}>*/}
53-
{/* <span>Codes</span>*/}
54-
{/* </ReportTooltip>*/}
55-
{/* <ReportTooltip tooltipText={info.identifier_name}>*/}
56-
{/* <span>Name</span>*/}
57-
{/* </ReportTooltip>*/}
58-
{/* <ReportTooltip tooltipText={info.number_of_faults_per_code}>*/}
59-
{/* <span>Distribution</span>*/}
60-
{/* </ReportTooltip>*/}
61-
{/* <ReportTooltip tooltipText={info.number_of_faults_per_code}>*/}
62-
{/* <span>#</span>*/}
63-
{/* </ReportTooltip>*/}
64-
{/* </div>*/}
6549
<div className="mt-6">
6650
<div className="bg-gray-50 rounded-t-lg">
6751
<div className="grid grid-cols-12 gap-4 p-6 font-semibold text-gray-700 border-b">
@@ -72,7 +56,7 @@ export const FaultsComponent: React.FC<Faults> = ({total_number, found_faults})
7256
<div>Name</div>
7357
</ReportTooltip>
7458
<ReportTooltip className="col-span-2 text-center" tooltipText={info.distribution_of_endpoints_per_code}>
75-
<div>Distribution</div>
59+
<div>Ratio</div>
7660
</ReportTooltip>
7761
<ReportTooltip className="col-span-2 text-center" tooltipText={info.number_of_faults_per_code}>
7862
<div>#</div>
@@ -90,7 +74,7 @@ export const FaultsComponent: React.FC<Faults> = ({total_number, found_faults})
9074
operation_count: fault.operation_count,
9175
endpoint_text: fault.operation_count > 1 ? "endpoints have" : "endpoint has",
9276
code: fault.code,
93-
totalEndpointNumber:totalEndpointNumber ? totalEndpointNumber : 0
77+
total_endpoints:totalEndpointNumber ? totalEndpointNumber : 0
9478
})}>
9579
<div>{fault.operation_count}/{totalEndpointNumber}</div>
9680
</ReportTooltip>

‎web-report/src/components/TestCaseButton.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useState } from "react"
2+
import { ChevronRight, Code } from "lucide-react"
3+
import {getColor} from "@/lib/utils.tsx";
4+
5+
interface TestCaseButtonProps {
6+
testName: string
7+
statusCode: number | string
8+
onClick: (value: string, event: React.MouseEvent<HTMLElement>) => void
9+
isFault: boolean
10+
}
11+
12+
export function TestCaseButton({ testName, statusCode, onClick, isFault }: TestCaseButtonProps) {
13+
const [isHovered, setIsHovered] = useState(false)
14+
15+
return (
16+
<button
17+
className={`w-full group flex items-center justify-between p-4 mb-2 border rounded-lg transition-all duration-200 ${
18+
isHovered
19+
? "bg-blue-50 border-blue-300 shadow-md transform translate-y-[-1px]"
20+
: "bg-white border-gray-200 hover:bg-blue-50 hover:border-blue-300"
21+
}`}
22+
onClick={(event) => onClick(testName, event)}
23+
onMouseEnter={() => setIsHovered(true)}
24+
onMouseLeave={() => setIsHovered(false)}
25+
>
26+
<div className="flex items-center">
27+
<Code
28+
className={`mr-3 ${isHovered ? "text-blue-600" : "text-gray-500"} transition-colors duration-200`}
29+
size={20}
30+
/>
31+
<span className="font-mono text-sm text-left">{testName}</span>
32+
</div>
33+
<div className="flex items-center">
34+
<span className={`font-bold mr-2 ${getColor(statusCode, false, isFault)}`}>{statusCode}</span>
35+
<ChevronRight
36+
className={`${
37+
isHovered ? "text-blue-600 transform translate-x-1" : "text-gray-400"
38+
} transition-all duration-200`}
39+
size={18}
40+
/>
41+
</div>
42+
</button>
43+
)
44+
}

‎web-report/src/components/TestCases.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Card} from "@/components/ui/card.tsx";
22
import type React from "react";
3-
import {getColor} from "@/lib/utils";
43
import {ReportTooltip} from "@/components/ui/report-tooltip.tsx";
4+
import {TestCaseButton} from "@/components/TestCaseButton.tsx";
55

66
interface ITestCaseProps {
77
code: string | number;
@@ -15,15 +15,13 @@ export const TestCases: React.FC<ITestCaseProps> = ({code, test_cases, addTestTa
1515
return (
1616
<>
1717
<div className="border-t border-black my-2"></div>
18-
<div className={`font-bold cursor-default text-lg mb-2 mt-4 ${getColor(code, false, isFault)}`}>{code}</div>
1918
<Card className="border-2 border-black p-0 rounded-none">
2019
<div className="max-h-[300px] overflow-auto">
2120
{
2221
// Test Cases
2322
test_cases.map((testCase, key) => (
2423
<ReportTooltip key={key} tooltipText="Press CTRL while clicking to open without navigating it.">
25-
<div onClick={(event) => addTestTab(testCase, event)}
26-
className="border-b-2 border-black p-3 hover:bg-gray-100 cursor-pointer">{testCase}</div>
24+
<TestCaseButton testName={testCase} statusCode={code} onClick={addTestTab} isFault={isFault}/>
2725
</ReportTooltip>
2826
))
2927
}

‎web-report/src/lib/utils.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,8 @@ export const getLanguage = (file_name: string) => {
186186
return 'python';
187187
case 'ts':
188188
return 'typescript';
189+
case 'kt':
190+
return 'kotlin';
189191
default:
190192
return 'plaintext';
191193
}

0 commit comments

Comments
 (0)