Build Reachability Frontend by Hubtrick-Git · Pull Request #72 · l3montree-dev/devguard-documentation

Hubtrick-Git · 2026-01-29T14:52:23Z

Minimal requirements:

Creating the new page
A working search for the hero section
- Api request to vex-server is mocked
- Results are logged to the console

Functional Requirements:

Display the response in a table
Add a good description to the page
Make each vuln clickable?

Stylistic Requirements:

Overhaul the visuals
Unify looks with other similar pages

Finalized status

The functionality of the frontend page is provided.
Since the api endpoint does not exist yet I do not know the format of the data received so I cannot yet display it visually organized.
The same is true for the detail-page of a specific analysis.
Therefor the UI looks kinda ugly and is just a placeholder to have some guiding lines when finalizing the page later on in the process of merging different docu frontend pages.

seb-kw · 2026-02-02T09:27:37Z

Looks nice 😊 - like that small micro animation when typing away.....

timbastin

Overall, this looks really great! I love the splitting in table and hero. I think we can improve this further by extracting the whole logic into a container component which just renders some presentational components while providing state and mutation functions.

.gitignore

src/components/reachabilityAnalysis/reachability-analysis.tsx

src/pages/_meta.ts

…skeleton load and proper display in a table

…g merged with other frontends

revert gitignore

Copilot

Pull request overview

This PR introduces a new reachability analysis feature to the frontend, adding search functionality and visualization for vulnerability reachability data. The feature includes a main search page, detail pages for individual packages, and supporting UI components. The implementation uses placeholder API endpoints since the backend is not yet finalized, as noted in the PR description.

Changes:

Added new reachability analysis pages with search and display functionality
Integrated new dependencies (SWR for data fetching, TanStack Table for data tables, Recharts for future visualizations)
Created reusable UI components (table, skeleton, input) following shadcn/ui patterns

Reviewed changes

Copilot reviewed 14 out of 16 changed files in this pull request and generated 26 comments.

Show a summary per file

File	Description
src/pages/reachability-analysis.mdx	Main entry point for reachability analysis page
src/pages/reachability-analysis/[purl].mdx	Dynamic route for package-specific details with custom styling
src/pages/_meta.ts	Navigation configuration for new reachability page
src/lib/fetcher.js	Simple fetcher utility for SWR data fetching
src/components/ui/table.tsx	Reusable table component following shadcn/ui patterns
src/components/ui/skeleton.tsx	Loading skeleton component for better UX
src/components/ui/input.tsx	Form input component with consistent styling
src/components/reachabilityAnalysis/reachability-types.tsx	TypeScript type definitions for API responses
src/components/reachabilityAnalysis/reachability-analysis-results-table.tsx	Table component displaying search results with pagination
src/components/reachabilityAnalysis/reachability-analysis-page.tsx	Main page component managing search state and API calls
src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx	Detail view for individual packages with collapsible sections
src/components/reachabilityAnalysis/reachability-analysis-hero.tsx	Hero section with search input
src/components/reachabilityAnalysis/columns.tsx	Column definitions for data table
package.json	Added dependencies for SWR, TanStack Table, Recharts, and date-fns
package-lock.json	Lockfile updates for new dependencies
.gitignore	Minor cleanup and reorganization

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-13T19:18:30Z

src/components/reachabilityAnalysis/reachability-analysis-page.tsx

+import { fetcher } from 'src/lib/fetcher'
+import useSWR from 'swr'
+
+const apiBaseURL = 'http://localhost:8080/api/v1/vulndb/reachability/'


The unused constant 'apiBaseURL' is declared but never used. Consider removing it or using it instead of the hardcoded URL on line 26.

Copilot · 2026-02-13T19:18:31Z

src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx

+
+
+
+export default function CVEDetailComponent({ purl }: { purl?: string }) {


The function is named 'CVEDetailComponent' but it displays package details for reachability analysis, not CVE details. The name should be updated to 'PackageDetailComponent' or 'ReachabilityAnalysisPackageDetails' to accurately reflect its purpose.

Suggested change

export default function CVEDetailComponent({ purl }: { purl?: string }) {

export default function ReachabilityAnalysisPackageDetails({ purl }: { purl?: string }) {

Copilot · 2026-02-13T19:18:31Z

src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx

+                        <Skeleton className="h-6 w-48"
+                    />


There's a missing closing tag for the Skeleton component. The line should end with '/>' instead of just '/>'. This will cause a syntax error.

Suggested change

<Skeleton className="h-6 w-48"

/>

<Skeleton className="h-6 w-48" />

Copilot · 2026-02-13T19:18:31Z

src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx

+                            <div>
+                                {data.vulnerabilities.map((vuln) => (
+                                    <div className='flex'>
+                                        <p className='px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50'>{vuln.id}</p>
+                                        <p className='px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50'>{vuln['bom-ref']}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>


Missing key prop in the map function. Each element in the list should have a unique 'key' prop for React to efficiently update the list. Add a unique key based on vulnerability data.

Suggested change

<div>

{data.vulnerabilities.map((vuln) => (

<div className='flex'>

<p className='px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50'>{vuln.id}</p>

<p className='px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50'>{vuln['bom-ref']}</p>

</div>

))}

</div>

</div>

<div>

{data.vulnerabilities.map((vuln) => (

<div className="flex" key={vuln.id}>

<p className="px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">{vuln.id}</p>

<p className="px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">{vuln['bom-ref']}</p>

</div>

))}

</div>

</div>

Copilot · 2026-02-13T19:18:32Z

src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx

+                    <button
+                        onClick={() => setIsVulnerabilitiesOpen(!isVulnerabilitiesOpen)}
+                        className="flex w-full items-center justify-between p-6 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                    >
+                        <h2 className="text-lg font-medium text-gray-950 dark:text-white">
+                            Vulnerabilities (
+                            {data.vulnerabilities.length})
+                        </h2>
+                        <svg
+                            className={`h-5 w-5 transition-transform ${isVulnerabilitiesOpen ? 'rotate-180' : ''}`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M19 9l-7 7-7-7"
+                            />
+                        </svg>
+                    </button>


Similar to the Components section, this collapsible Vulnerabilities button lacks proper ARIA attributes. Add aria-expanded={isVulnerabilitiesOpen} to indicate its state to screen reader users.

Copilot · 2026-02-13T19:18:36Z

src/components/reachabilityAnalysis/columns.tsx

+            const description = row.getValue('type') as string
+            return <div className="w-108">{description}</div>


The variable 'description' is misleading since it's actually holding the 'type' value, not a description. Rename to 'type' or 'packageType' for clarity.

Suggested change

const description = row.getValue('type') as string

return <div className="w-108">{description}</div>

const packageType = row.getValue('type') as string

return <div className="w-108">{packageType}</div>

Copilot · 2026-02-13T19:18:36Z

src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx

+import { useState } from 'react'
+import { Container } from '../top-level-pages/container'
+import { ReachabilityAnalysisResponse } from 'src/components/reachabilityAnalysis/reachability-types'
+import { Label, Pie, PieChart } from 'recharts'


The imports 'Label', 'Pie', and 'PieChart' from 'recharts' are unused and should be removed.

Suggested change

import { Label, Pie, PieChart } from 'recharts'

Copilot · 2026-02-13T19:18:37Z

src/components/reachabilityAnalysis/reachability-analysis-package-details.tsx

+                                {data.components.map((comp) => (
+                                    <div className='flex'>
+                                        <p className='px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50'>{comp.name}</p>
+                                        <p className='px-4 mx-8 my-4 py-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50'>{comp.type}</p>
+                                    </div>
+                                ))}


Missing key prop in the map function. Each element in the list should have a unique 'key' prop for React to efficiently update the list. Add a unique key based on component data.

Copilot · 2026-02-13T19:18:37Z

src/components/reachabilityAnalysis/reachability-types.tsx

+export interface ReachabilityAnalysisResponse{
+    bomFormat : string
+    specVersion : string
+    serialNumber : string
+    version : number
+    metadata : Metadata
+    components : Component[]
+    vulnerabilities : Vulnerability[]
+}
+
+interface Metadata{
+    timestamp : string
+    tools : Tool[]
+}
+
+interface Tool{
+    vendor : string
+    name : string
+    version : string
+}
+
+interface Component {
+    type : string
+    name : string
+    purl : string
+    "bom-ref" : string
+}
+
+interface Vulnerability{
+    "bom-ref" : string
+    id : string
+    description : string
+    affects : Affect[]
+    analysis : Analysis
+}
+
+interface Affect{
+    ref : string
+}
+
+interface Analysis {
+    state : string
+    detail : string
+    evidence : Evidence[]
+}
+
+interface Evidence {
+    path : PathElement[]
+}
+
+
+interface PathElement{
+    id: number;
+    cve_id: string;
+    signature: string;
+    filename: string;
+    start_line: number;
+    end_line: number;
+    evidence: string;
+    purl: string;
+    calls_id: number | null;
+}


The interface properties are using inline type definitions with spaces around the colon (e.g., 'bomFormat : string'). TypeScript convention is to have no space before the colon and one space after (e.g., 'bomFormat: string') for consistency with the rest of the codebase.

Copilot · 2026-02-13T19:18:37Z

src/components/reachabilityAnalysis/reachability-analysis-results-table.tsx

+
+    if (!isLoading && data.length == 0) {
+        return (
+            <div className='my-40'>


When there's no data and not loading, an empty div is returned with no user feedback. Consider displaying a message like "No packages found. Try searching for a package." to improve user experience.

Suggested change

<div className='my-40'>

<div className="my-40 flex items-center justify-center text-sm text-muted-foreground">

No packages found. Try searching for a package.

Hubtrick-Git added 2 commits January 29, 2026 15:47

first prototype for minimum requirements

ecb21e7

built a prototype table to display results

7add69d

timbastin reviewed Feb 3, 2026

View reviewed changes

Hubtrick-Git added 5 commits February 12, 2026 19:45

adjusted structure and design ti match other frontend designs

ee7431b

first working version for reachability main page with data fetching, …

00e71fc

…skeleton load and proper display in a table

saving before checkout

68bd768

functional version of frontend, visuals will be finalized when gettin…

3b0dd39

…g merged with other frontends

Update .gitignore to include .env and Sentry files

c3ca7d8

revert gitignore

Hubtrick-Git self-assigned this Feb 13, 2026

Hubtrick-Git requested a review from Copilot February 13, 2026 19:11

Copilot started reviewing on behalf of Hubtrick-Git February 13, 2026 19:12 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes




		export default function CVEDetailComponent({ purl }: { purl?: string }) {

	export default function CVEDetailComponent({ purl }: { purl?: string }) {
	export default function ReachabilityAnalysisPackageDetails({ purl }: { purl?: string }) {

	<Skeleton className="h-6 w-48"
	/>
	<Skeleton className="h-6 w-48" />

		const description = row.getValue('type') as string
		return <div className="w-108">{description}</div>

	<div className='my-40'>
	<div className="my-40 flex items-center justify-center text-sm text-muted-foreground">
	No packages found. Try searching for a package.

Conversation

Hubtrick-Git commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Minimal requirements:

Functional Requirements:

Stylistic Requirements:

Finalized status

Uh oh!

seb-kw commented Feb 2, 2026

Uh oh!

timbastin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Hubtrick-Git commented Jan 29, 2026 •

edited

Loading