Adding webview logic for non applicable vulnerabilities. (#63)

src/components/Page/Dependency/Dependency.test.tsx

@@ -116,6 +116,7 @@ describe('Dependency page component', () => {
 
 		const expectedTexts = [
 			TABS.WHAT_CAN_I_DO.label,
+			TABS.CONTEXTUAL_ANALYSIS.label,
 			TABS.CVE_INFORMATION.label,
 			TABS.IMPACT_GRAPH.label
 		]

src/components/Page/Dependency/Dependency.tsx

@@ -2,23 +2,22 @@ import css from './Dependency.module.css'
 import Header from '../../UI/Header/Header'
 import { IDependencyPage } from '../../../model'
 import InformationTabs, { TABS } from '../../UI/InformationTabs/InformationTabs'
-import ApplicabilityEvidence from './ApplicabilityEvidence'
 export interface Props {
 	data: IDependencyPage
 }
 
 export default function Dependency(props: Props): JSX.Element {
-	const showApplicabilityEvidence =
-		props.data.cve?.applicableData?.evidence ?? props.data.cve?.applicableData?.searchTarget
 	return (
 		<div className={css.PageContainer}>
 			<Header pageData={props.data} text={props.data.cve?.id ? props.data.cve.id : props.data.id} />
-			{props.data.cve?.applicableData && showApplicabilityEvidence && (
-				<ApplicabilityEvidence data={props.data.cve.applicableData} />
-			)}
 			<InformationTabs
 				data={props.data}
-				tabs={[TABS.WHAT_CAN_I_DO.key, TABS.CVE_INFORMATION.key, TABS.IMPACT_GRAPH.key]}
+				tabs={[
+					TABS.WHAT_CAN_I_DO.key,
+					TABS.CVE_INFORMATION.key,
+					TABS.IMPACT_GRAPH.key,
+					TABS.CONTEXTUAL_ANALYSIS.key
+				]}
 			/>
 		</div>
 	)

src/components/UI/InformationTabs/ApplicabilityEvidence.module.css

@@ -0,0 +1,41 @@
+.rowList {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+.defaultContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+.subtitle {
+	color: #f0f0f0;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: normal;
+}
+
+ul.bulletList {
+	list-style-type: disc;
+	padding-left: 20px;
+}
+ul.bulletList li {
+	color: white;
+	font-family: 'Arial', sans-serif;
+	margin-bottom: 10px;
+	display: flex;
+	align-items: center;
+}
+ul {
+	list-style-type: disc;
+	margin-left: 20px;
+}
+
+ol {
+	list-style-type: decimal;
+	margin-left: 20px;
+}
+li {
+	margin-bottom: 20px;
+}

src/components/UI/InformationTabs/ApplicabilityEvidence.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from '@testing-library/react'
+import ApplicabilityEvidence from './ApplicabilityEvidence'
+import { IApplicableDetails, IEvidence } from '../../../model'
+
+// Sample data for testing
+const applicableData: IApplicableDetails = {
+	isApplicable: true,
+	searchTarget: 'Example search target',
+	evidence: [
+		{
+			filePathEvidence: 'file/path/evidence',
+			codeEvidence: 'const example = "example";',
+			reason: 'Reason for applicability'
+		} as IEvidence
+	]
+}
+
+const notApplicableData: IApplicableDetails = {
+	isApplicable: false,
+	searchTarget: 'Example search target',
+	evidence: [
+		{
+			reason: 'Reason for non-applicability'
+		} as IEvidence
+	]
+}
+
+describe('ApplicabilityEvidence component', () => {
+	test('renders applicable CVE information correctly', () => {
+		render(<ApplicabilityEvidence data={applicableData} />)
+		expect(screen.getByText('Contextual Analysis')).toBeInTheDocument()
+		expect(screen.getByText('Why is this CVE applicable?')).toBeInTheDocument()
+		expect(screen.getByText('Reason for applicability')).toBeInTheDocument()
+		expect(screen.getByText('file/path/evidence')).toBeInTheDocument()
+		expect(screen.getByText('const example = "example";')).toBeInTheDocument()
+		expect(screen.getByText('What does the scanner check/look for?')).toBeInTheDocument()
+		expect(screen.getByText('Example search target')).toBeInTheDocument()
+	})
+
+	test('renders non-applicable CVE information correctly', () => {
+		render(<ApplicabilityEvidence data={notApplicableData} />)
+		expect(screen.getByText('Contextual Analysis')).toBeInTheDocument()
+		expect(screen.getByText('Why is this CVE not applicable?')).toBeInTheDocument()
+		expect(screen.getByText('Reason for non-applicability')).toBeInTheDocument()
+		expect(screen.getByText('What does the scanner check/look for?')).toBeInTheDocument()
+		expect(screen.getByText('Example search target')).toBeInTheDocument()
+	})
+
+	test('renders evidence section correctly when no evidence provided', () => {
+		const noEvidenceData: IApplicableDetails = {
+			isApplicable: true,
+			searchTarget: 'Example search target',
+			evidence: []
+		}
+		render(<ApplicabilityEvidence data={noEvidenceData} />)
+		expect(screen.getByText('Contextual Analysis')).toBeInTheDocument()
+		expect(screen.getByText('Why is this CVE applicable?')).toBeInTheDocument()
+		expect(screen.getByText('What does the scanner check/look for?')).toBeInTheDocument()
+		expect(screen.getByText('Example search target')).toBeInTheDocument()
+	})
+
+	test('renders correctly without searchTarget', () => {
+		const noSearchTargetData: IApplicableDetails = {
+			isApplicable: true,
+			evidence: [
+				{
+					filePathEvidence: 'file/path/evidence',
+					codeEvidence: 'const example = "example";',
+					reason: 'Reason for applicability'
+				} as IEvidence
+			]
+		}
+		render(<ApplicabilityEvidence data={noSearchTargetData} />)
+		expect(screen.getByText('Contextual Analysis')).toBeInTheDocument()
+		expect(screen.getByText('Why is this CVE applicable?')).toBeInTheDocument()
+		expect(screen.getByText('file/path/evidence')).toBeInTheDocument()
+		expect(screen.getByText('const example = "example";')).toBeInTheDocument()
+		expect(screen.queryByText('What does the scanner check/look for?')).not.toBeInTheDocument()
+	})
+})

src/components/Page/Dependency/ApplicabilityEvidence.tsx → src/components/UI/InformationTabs/ApplicabilityEvidence.tsx

@@ -16,12 +16,13 @@ export default function ApplicabilityEvidence(props: Props): JSX.Element {
 			expanded
 			header={
 				<h1>
-					<EvidenceSvg /> Applicability Evidence
+					<EvidenceSvg /> Contextual Analysis
 				</h1>
 			}
 		>
 			<div className={css.defaultContainer}>
-				{props.data.isApplicable && (
+				{/* If CVE is applicable */}
+				{props.data.isApplicable ? (
 					<>
 						<h6 className={css.subtitle}>Why is this CVE applicable?</h6>
 						<div>
@@ -37,6 +38,21 @@ export default function ApplicabilityEvidence(props: Props): JSX.Element {
 						</div>
 						<Divider />
 					</>
+				) : (
+					// If CVE is not applicable
+					<>
+						<h6 className={css.subtitle}>Why is this CVE not applicable?</h6>
+						<div>
+							<div className={css.rowList}>
+								{props.data.evidence?.map((evidence, i) => (
+									<div key={i}>
+										<Row title="Reason" data={evidence.reason} />
+									</div>
+								))}
+							</div>
+						</div>
+						<Divider />
+					</>
 				)}
 				{props.data.searchTarget && (
 					<>

src/components/UI/InformationTabs/InformationTabs.module.css

@@ -1,16 +1,21 @@
 .tabsContainer {
 	display: flex;
 	flex-direction: column;
-	gap: 16px;
+	justify-content: space-between;
+	gap: 8px;
+	flex-wrap: wrap;
 	overflow: hidden;
 }
 
 .container {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
+	flex: 1;
+	text-align: center;
 	gap: 16px;
 	width: 100%;
+	cursor: pointer;
 }
 
 .alignCenterFlex {

src/components/UI/InformationTabs/InformationTabs.tsx

@@ -23,6 +23,7 @@ import { TreeNode } from '../../../model/treeNode'
 import { toTreeNode } from '../../../utils/utils'
 import WhatCanIDoTab from './WhatCanIDoTab'
 import Markdown from '../Markdown/Markdown'
+import ApplicabilityEvidence from './ApplicabilityEvidence'
 
 export const TABS = {
 	WHAT_CAN_I_DO: {
@@ -40,6 +41,10 @@ export const TABS = {
 	IMPACT_GRAPH: {
 		label: 'Impact Graph',
 		key: 'impact_graph'
+	},
+	CONTEXTUAL_ANALYSIS: {
+		label: 'Contextual Analysis',
+		key: 'contextual_analysis'
 	}
 }
 export const LABELS = {
@@ -138,6 +143,12 @@ function InformationTabs(props: Props): JSX.Element {
 
 	const showMoreInformationTab =
 		props.tabs.includes(TABS.MORE_INFORMATION.key) && (props.data as ISastPage).description
+	const pageTypeDependency = props.data as IDependencyPage
+	const showApplicabilityEvidence =
+		pageTypeDependency.cve?.applicableData?.evidence ??
+		pageTypeDependency.cve?.applicableData?.searchTarget
+	const showContextualAnalysisTab =
+		showApplicabilityEvidence && props.tabs.includes(TABS.CONTEXTUAL_ANALYSIS.key)
 
 	return (
 		<div className={css.tabsContainer}>
@@ -154,6 +165,13 @@ function InformationTabs(props: Props): JSX.Element {
 						label={TABS.WHAT_CAN_I_DO.label}
 					/>
 				)}
+				{showContextualAnalysisTab && (
+					<Tab
+						className={tabClass(TABS.CONTEXTUAL_ANALYSIS.key)}
+						value={TABS.CONTEXTUAL_ANALYSIS.key}
+						label={TABS.CONTEXTUAL_ANALYSIS.label}
+					/>
+				)}
 				{showCveInformationTab && (
 					<Tab
 						className={tabClass(TABS.CVE_INFORMATION.key)}
@@ -180,13 +198,20 @@ function InformationTabs(props: Props): JSX.Element {
 				<CustomTabPanel value={selectedTabIndex} index={TABS.WHAT_CAN_I_DO.key}>
 					<WhatCanIDoTab
 						pageType={props.data.pageType}
-						component={(props.data as IDependencyPage).component}
-						impactGraph={(props.data as IDependencyPage).impactGraph}
-						fixedVersion={(props.data as IDependencyPage).fixedVersion}
+						component={pageTypeDependency.component}
+						impactGraph={pageTypeDependency.impactGraph}
+						fixedVersion={pageTypeDependency.fixedVersion}
 						remediation={remediation}
 					/>
 				</CustomTabPanel>
 			)}
+			{showContextualAnalysisTab && (
+				<CustomTabPanel value={selectedTabIndex} index={TABS.CONTEXTUAL_ANALYSIS.key}>
+					{pageTypeDependency.cve?.applicableData && showApplicabilityEvidence && (
+						<ApplicabilityEvidence data={pageTypeDependency.cve.applicableData} />
+					)}
+				</CustomTabPanel>
+			)}
 			{showMoreInformationTab && (
 				<CustomTabPanel value={selectedTabIndex} index={TABS.MORE_INFORMATION.key}>
 					<Collapse