Add message passing from the webview to the IDE

src/App.tsx

@@ -1,28 +1,21 @@
 import css from './App.module.css'
 import Dependency from './components/Page/Dependency/Dependency'
-import { IDependencyPage } from './model/dependencyPage'
-import { PageType } from './model/pageType'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import Eos from './components/Page/Eos/Eos'
-import { IEosPage } from './model/EosPage'
-import { IIaCPage } from './model/iacPage'
 import IaC from './components/Page/IaC/IaC'
-import { ISecretsPage } from './model/secretsPage'
 import Secrets from './components/Page/Secrets/Secrets'
+import { WebviewPage, PageType } from './model/webviewPages'
+import { EventManager } from './api/eventManager'
+import { eventManagerContext } from './store/eventContext'
 
 /**
  * The main page on which the Webview will be drawn based on the incoming request page type.
  */
 function App(): JSX.Element {
-	const [data, setDependencyData] = useState<IDependencyPage | IEosPage | IIaCPage | ISecretsPage>(
-		{} as IDependencyPage | IEosPage | IIaCPage | ISecretsPage
-	)
+	const [data, setDependencyData] = useState<WebviewPage>({} as WebviewPage)
+	const eventManager = useMemo(() => new EventManager(setDependencyData), [])
 	let page
 
-	window.addEventListener('message', event => {
-		setDependencyData(event.data.data)
-	})
-
 	switch (data.pageType) {
 		case PageType.Dependency:
 			page = <Dependency data={data} />
@@ -42,7 +35,9 @@ function App(): JSX.Element {
 
 	return (
 		<div className={css.App}>
-			<div className={css['App-body']}>{page}</div>
+			<eventManagerContext.Provider value={eventManager}>
+				<div className={css['App-body']}>{page}</div>
+			</eventManagerContext.Provider>
 		</div>
 	)
 }

src/api/eventManager.ts

@@ -0,0 +1,35 @@
+import { IAnalysisStep } from '../model/analysisStep'
+import { WebviewPage } from '../model/webviewPages'
+import { IdeEvent, IdeEventType, JumpToCodeEvent } from './ideEvent'
+import { WebviewEvent, webviewEventType } from './webviewEvent'
+
+export class EventManager {
+	private sendFunc = new Function('request', 'console.log(request)')
+
+	constructor(private setPageState: React.Dispatch<React.SetStateAction<WebviewPage>>) {
+		this.setEventReceiver()
+	}
+
+	private sendEvent = (req: IdeEvent): void => {
+		this.sendFunc(req)
+	}
+
+	private setEventReceiver(): void {
+		window.addEventListener('message', event => {
+			const eventData: WebviewEvent = event.data
+
+			switch (eventData.type) {
+				case webviewEventType.SetEmitter:
+					this.sendFunc = new Function(eventData.emitterFunc)()
+					break
+				case webviewEventType.ShowPage:
+					this.setPageState(eventData.pageData)
+					break
+			}
+		})
+	}
+
+	public jumpToCode(data: IAnalysisStep): void {
+		this.sendEvent({ type: IdeEventType.JUMP_TO_CODE, data: data } as JumpToCodeEvent)
+	}
+}

src/api/ideEvent.ts

@@ -0,0 +1,12 @@
+import { IAnalysisStep } from '../model/analysisStep'
+
+export interface JumpToCodeEvent {
+	type: IdeEventType.JUMP_TO_CODE
+	data: IAnalysisStep
+}
+
+export enum IdeEventType {
+	JUMP_TO_CODE = 'SHOW_CODE'
+}
+
+export type IdeEvent = JumpToCodeEvent

src/api/webviewEvent.ts

@@ -0,0 +1,18 @@
+import { WebviewPage } from '../model/webviewPages'
+
+export interface ShowPageEvent {
+	type: webviewEventType.ShowPage
+	pageData: WebviewPage
+}
+
+export interface SetEmitterEvent {
+	type: webviewEventType.SetEmitter
+	emitterFunc: string
+}
+
+export enum webviewEventType {
+	SetEmitter = 'SET_EMITTER',
+	ShowPage = 'SHOW_DATA'
+}
+
+export type WebviewEvent = ShowPageEvent | SetEmitterEvent

src/components/Page/Dependency/Dependency.tsx

@@ -3,8 +3,8 @@ import Summary from '../../UI/Summary/Summary'
 import Edited from '../../UI/Edited/Edited'
 import Header from '../../UI/Header/Header'
 import Navigator from './Navigator/Navigator'
-import { IDependencyPage } from '../../../model/dependencyPage'
 import CveVulnerability from '../../UI/Summary/CveVulnerability'
+import { IDependencyPage } from '../../../model/webviewPages'
 
 export interface Props {
 	data: IDependencyPage

src/components/Page/Dependency/Navigator/Navigator.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
-import { IDependencyPage } from '../../../../model/dependencyPage'
 import { IExtendedInformation } from '../../../../model/extendedInformation'
 import { IReference } from '../../../../model/reference'
 import { ActiveTab, ITab } from '../../../../model/tab'
 import PageHolder from './PageHolder'
 import Tab from './Tab'
+import { IDependencyPage } from '../../../../model/webviewPages'
 
 export interface Props {
 	data: IDependencyPage

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

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
-import { IDependencyPage } from '../../../../model/dependencyPage'
 import { ActiveTab } from '../../../../model/tab'
 import withMarkup, { getFakeDependencyPage } from '../../../../setupTests'
 import PageHolder from './PageHolder'
+import { IDependencyPage } from '../../../../model/webviewPages'
 describe('PageHolder component', () => {
 	describe('Research page', () => {
 		test('Renders short description', () => {

src/components/Page/Dependency/Navigator/PageHolder.tsx

@@ -2,13 +2,13 @@ import ContextualAnalysis from './page/ContextualAnalysis'
 import Reference from './page/Reference'
 import Research from './page/Research'
 import css from './Page.module.css'
-import { IDependencyPage } from '../../../../model/dependencyPage'
 import ImpactGraph from './page/ImpactGraph'
 import PublicSources from './page/PublicSources'
 import { useState, useEffect } from 'react'
 import { ActiveTab } from '../../../../model/tab'
 import { TreeNode } from '../../../../model/treeNode'
 import { toTreeNode } from '../../../../utils/utils'
+import { IDependencyPage } from '../../../../model/webviewPages'
 
 interface Props {
 	activeTab: ActiveTab

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

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
-import { ActiveTab } from '../../../../model'
 import Tab from './Tab'
+import { ActiveTab } from '../../../../model/tab'
 describe('Tab component', () => {
 	test('Renders three tabs', () => {
 		const FirstTab = 'First-Tab'

src/components/Page/Eos/Eos.tsx

@@ -1,13 +1,13 @@
 import css from './Eos.module.css'
 import Summary from '../../UI/Summary/Summary'
 import Header from '../../UI/Header/Header'
-import { IEosPage } from '../../../model/EosPage'
 import { ISeverity } from '../../../model/severity'
 import Vulnerability from '../../UI/Summary/Vulnerability'
 import VulnerabilityLine from '../../UI/Summary/VulnerabilityLine'
 import Research from './Research'
 import ContextualAnalysis from './ContextualAnalysis'
 import Severity from '../../UI/Summary/Severity'
+import { IEosPage } from '../../../model/webviewPages'
 
 export interface Props {
 	data: IEosPage
@@ -24,7 +24,7 @@ export default function Eos(props: Props): JSX.Element {
 			<Summary expandButton={false}>
 				<Vulnerability location={`${props.data.location.file}`} />
 				<Severity severity={props.data.severity ? props.data.severity : ISeverity.Unknown} />
-				<VulnerabilityLine line={`${props.data.location.row}`} />
+				<VulnerabilityLine line={`${props.data.location.startRow}`} />
 			</Summary>
 			<Research description={props.data.description} remediation={props.data.remediation} />
 			<ContextualAnalysis

src/components/Page/IaC/IaC.tsx

@@ -1,6 +1,6 @@
 import css from './IaC.module.css'
 import Header from '../../UI/Header/Header'
-import { IIaCPage } from '../../../model/iacPage'
+import { IIaCPage } from '../../../model/webviewPages'
 import Summary from '../../UI/Summary/Summary'
 import Severity from '../../UI/Summary/Severity'
 import Vulnerability from '../../UI/Summary/Vulnerability'
@@ -17,7 +17,7 @@ function IaC(props: Props): JSX.Element {
 		<div className={css.Container}>
 			<Header Severity={props.data.severity} text={props.data.header} isResearch={false} />
 			<Summary showAll expandButton={false}>
-				<Vulnerability location={`${props.data.location.file}: ${props.data.location.row}`} />
+				<Vulnerability location={`${props.data.location.file}: ${props.data.location.startRow}`} />
 				<Severity severity={props.data.severity} />
 				{props.data.abbreviation && <Abbreviation abbreviation={props.data.abbreviation} />}
 			</Summary>

src/components/Page/Secrets/Secrets.tsx

@@ -5,7 +5,7 @@ import Severity from '../../UI/Summary/Severity'
 import Vulnerability from '../../UI/Summary/Vulnerability'
 import Abbreviation from '../../UI/Summary/Abbreviation'
 import Findings from '../../UI/Findings/Findings'
-import { ISecretsPage } from '../../../model/secretsPage'
+import { ISecretsPage } from '../../../model/webviewPages'
 import { Collapse } from '../../UI/Collapse/Collapse'
 
 export interface Props {
@@ -17,7 +17,7 @@ function Secrets(props: Props): JSX.Element {
 		<div className={css.Container}>
 			<Header Severity={props.data.severity} text={props.data.header} isResearch={false} />
 			<Summary showAll expandButton={false}>
-				<Vulnerability location={`${props.data.location.file}: ${props.data.location.row}`} />
+				<Vulnerability location={`${props.data.location.file}: ${props.data.location.startRow}`} />
 				<Severity severity={props.data.severity} />
 				{props.data.abbreviation && <Abbreviation abbreviation={props.data.abbreviation} />}
 			</Summary>

src/components/UI/List/AnalysisStepsListElement.tsx

@@ -1,21 +1,35 @@
 import { IAnalysisStep } from '../../../model/analysisStep'
 import css from './AnalysisStepsListElement.module.css'
 import CodeBlock from '../CodeBlock/CodeBlock'
-
+import { useContext } from 'react'
+import { eventManagerContext } from '../../../store/eventContext'
 interface Props {
 	items: IAnalysisStep[]
 }
 
 export default function AnalysisStepsListElement(props: Props): JSX.Element {
+	const ctx = useContext(eventManagerContext)
+
+	const onClick = (event: React.MouseEvent<HTMLButtonElement>, item: IAnalysisStep): void => {
+		event.preventDefault()
+		ctx.jumpToCode(item)
+	}
+
 	return (
 		<>
 			{props.items.map((item, i) => (
-				<button key={i} className={css.container}>
+				<button
+					onClick={(event): void => {
+						onClick(event, item)
+					}}
+					key={i}
+					className={css.container}
+				>
 					<div className={css.file}>
 						<div className={css.number}>{i + 1}</div>
 						<div className={css.row}>
 							{' '}
-							{item.fileName} {item.row}:{' '}
+							{item.fileName} {item.startRow}:{' '}
 						</div>
 						{item.snippet && <CodeBlock codeString={item.snippet} id={i.toString()} />}
 					</div>

src/components/UI/Summary/CveVulnerability.tsx

@@ -1,5 +1,5 @@
+import { IDependencyPage } from '../../../model/webviewPages'
 import Row from '../Row/Row'
-import { IDependencyPage } from './../../../model/dependencyPage'
 import { getApplicabilityImg, getSeverityImage } from './../../../utils/utils'
 import css from './CveVulnerability.module.css'
 

src/components/UI/Summary/Severity.tsx

@@ -1,5 +1,5 @@
+import { ISeverity } from '../../../model/severity'
 import Row from '../Row/Row'
-import { ISeverity } from '../../../model'
 interface Props {
 	severity: ISeverity
 }

src/model/analysisStep.ts

@@ -1,7 +1,9 @@
 export interface IAnalysisStep {
 	file: string
 	fileName?: string
-	row: number
-	column: number
+	startRow: number
+	startColumn: number
+	endRow: number
+	endColumn: number
 	snippet?: string
 }