fix: make each issue deeplinked into snyk project page

snyk-tech-services · Oct 14, 2022 · d5177a3 · d5177a3
1 parent 61c7a1a
commit d5177a3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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>
     );
   };
 };