From d5177a3599dab9ff7ae8e9734ea6feb1d6f2c90b Mon Sep 17 00:00:00 2001
From: Antoine Arlaud <antoine@snyk.io>
Date: Fri, 14 Oct 2022 23:08:13 +0200
Subject: [PATCH] fix: make each issue deeplinked into snyk project page

---
 .../components/SnykIssuesComponent.tsx        |  8 ++--
 .../components/SnykLicenseIssuesComponent.tsx |  8 ++--
 .../SnykEntityComponent/snykTab.tsx           | 44 +++++++++----------
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/components/SnykEntityComponent/components/SnykIssuesComponent.tsx b/src/components/SnykEntityComponent/components/SnykIssuesComponent.tsx
index 9c479db..7431564 100644
--- a/src/components/SnykEntityComponent/components/SnykIssuesComponent.tsx
+++ b/src/components/SnykEntityComponent/components/SnykIssuesComponent.tsx
@@ -1,12 +1,13 @@
 import React, { FC } from "react";
-import { Table, TableColumn } from "@backstage/core-components";
+import { Table, TableColumn, Link } from "@backstage/core-components";
 import { Issue } from "../../../types/types";
 
 type DenseTableProps = {
   issues: Array<Issue>;
+  pageUrl: string;
 };
 
-export const IssuesTable: FC<DenseTableProps> = ({ issues }) => {
+export const IssuesTable: FC<DenseTableProps> = ({ issues, pageUrl }) => {
   const columns: TableColumn[] = [
     { title: "Severity", field: "severity" },
     { title: "ID", field: "id" },
@@ -17,9 +18,10 @@ export const IssuesTable: FC<DenseTableProps> = ({ issues }) => {
   ];
 
   const data = issues.map((issue) => {
+    const deepLinkToIssue = <Link to={`${pageUrl}#issue-${issue.id}`}>{issue.id}</Link>
     return {
       severity: issue.issueData.severity,
-      id: issue.id,
+      id: deepLinkToIssue,
       name: issue.pkgName,
       versions: issue.pkgVersions,
       description: issue.issueData.title,
diff --git a/src/components/SnykEntityComponent/components/SnykLicenseIssuesComponent.tsx b/src/components/SnykEntityComponent/components/SnykLicenseIssuesComponent.tsx
index 15eb97e..c2a6b3b 100644
--- a/src/components/SnykEntityComponent/components/SnykLicenseIssuesComponent.tsx
+++ b/src/components/SnykEntityComponent/components/SnykLicenseIssuesComponent.tsx
@@ -1,12 +1,13 @@
 import React, { FC } from "react";
-import { Table, TableColumn } from "@backstage/core-components";
+import { Table, TableColumn, Link } from "@backstage/core-components";
 import { Issue } from "../../../types/types";
 
 type DenseTableProps = {
   issues: Array<Issue>;
+  pageUrl: string;
 };
 
-export const LicenseIssuesTable: FC<DenseTableProps> = ({ issues }) => {
+export const LicenseIssuesTable: FC<DenseTableProps> = ({ issues, pageUrl }) => {
   const columns: TableColumn[] = [
     { title: "Severity", field: "severity" },
     { title: "ID", field: "id" },
@@ -16,9 +17,10 @@ export const LicenseIssuesTable: FC<DenseTableProps> = ({ issues }) => {
   ];
   //@ts-ignore
   const data = issues.map((issue) => {
+    const deepLinkToIssue = <Link to={`${pageUrl}#issue-${issue.id}`}>{issue.id}</Link>
     return {
       severity: issue.issueData.severity,
-      id: issue.id,
+      id: deepLinkToIssue,
       name: issue.pkgName,
       versions: issue.pkgVersions,
       description: issue.issueData.title,
diff --git a/src/components/SnykEntityComponent/snykTab.tsx b/src/components/SnykEntityComponent/snykTab.tsx
index 3f588c0..f7165af 100644
--- a/src/components/SnykEntityComponent/snykTab.tsx
+++ b/src/components/SnykEntityComponent/snykTab.tsx
@@ -111,31 +111,31 @@ export const generateSnykTabForProject = (
             </Grid>
           </Grid>
 
-          <Grid container spacing={2} justify="space-between" direction="row">
-            <Grid item xs={12}>
-              <TabbedCard deepLink={linkInfo}>
-                <CardTab label="Issues">
-                  <IssuesTable issues={value.vulnsIssues.issues} />
-                </CardTab>
-                <CardTab label="License Issues">
-                  <LicenseIssuesTable issues={value.licenseIssues.issues} />
-                </CardTab>
-                <CardTab label="Dependencies">
-                  <Grid container>
-                    <DepGraphInfo depGraph={value.depGraph} />
-                  </Grid>
-                </CardTab>
-                <CardTab label="Ignored">
-                  <IgnoredIssuesTable issues={value.ignoredIssues.issues} />
-                </CardTab>
-                {/* <CardTab label="Trends">
-                      <div style={cardContentStyle}>Some content 4</div>
-                    </CardTab> */}
-              </TabbedCard>
-            </Grid>
+        <Grid container spacing={2} justify="space-between" direction="row">
+          <Grid item xs={12}>
+            <TabbedCard deepLink={linkInfo}>
+              <CardTab label="Issues">
+                <IssuesTable issues={value.vulnsIssues.issues} pageUrl={linkInfo.link} />
+              </CardTab>
+              <CardTab label="License Issues">
+                <LicenseIssuesTable issues={value.licenseIssues.issues} pageUrl={linkInfo.link} />
+              </CardTab>
+              <CardTab label="Dependencies">
+                <Grid container>
+                  <DepGraphInfo depGraph={value.depGraph} />
+                </Grid>
+              </CardTab>
+              <CardTab label="Ignored">
+                <IgnoredIssuesTable issues={value.ignoredIssues.issues} />
+              </CardTab>
+              {/* <CardTab label="Trends">
+                    <div style={cardContentStyle}>Some content 4</div>
+                  </CardTab> */}
+            </TabbedCard>
           </Grid>
         </Grid>
       </Grid>
+    </Grid>
     );
   };
 };