🐛 Render dependency versions as links

client/src/app/components/ExternalLink.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Flex, FlexItem, Icon, Text } from "@patternfly/react-core";
+import ExternalLinkAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-alt-icon";
+
+/**
+ * Render a link open an external href in another tab with appropriate styling.
+ */
+export const ExternalLink: React.FC<{
+ href: string;
+ children: React.ReactNode;
+}> = ({ href, children }) => (
+ <Flex spaceItems={{ default: "spaceItemsSm" }}>
+ <FlexItem>
+ <Text component="a" href={href} target="_blank">
+ {children}
+ </Text>
+ </FlexItem>
+ <FlexItem>
+ <Icon size="sm" status="info">
+ <ExternalLinkAltIcon />
+ </Icon>
+ </FlexItem>
+ </Flex>
+);
+
+export default ExternalLink;

client/src/app/pages/dependencies/dependency-apps-table.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import {
+ Text,
  TextContent,
  Toolbar,
  ToolbarContent,
@@ -21,12 +22,14 @@ import {
  TableHeaderContentWithControls,
  TableRowContentWithControls,
 } from "@app/components/TableControls";
+import { ExternalLink } from "@app/components/ExternalLink";
 import { SimplePagination } from "@app/components/SimplePagination";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
 import { useFetchAppDependencies } from "@app/queries/dependencies";
 import { useFetchBusinessServices } from "@app/queries/businessservices";
 import { useFetchTagsWithTagItems } from "@app/queries/tags";
 import { getParsedLabel } from "@app/utils/rules-utils";
+import { extractFirstSha } from "@app/utils/utils";
 
 export interface IDependencyAppsTableProps {
  dependency: AnalysisDependency;
@@ -184,7 +187,7 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
  <Tbody>
  {currentPageAppDependencies?.map((appDependency, rowIndex) => (
  <Tr
- key={appDependency.name}
+ key={appDependency.id}
  {...getTrProps({ item: appDependency })}
  >
  <TableRowContentWithControls
@@ -200,7 +203,7 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
  modifier="nowrap"
  {...getTdProps({ columnKey: "version" })}
  >
- {appDependency.dependency.version}
+ <DependencyVersionColumn appDependency={appDependency} />
  </Td>
  <Td
  width={20}
@@ -248,3 +251,27 @@ const DependencyManagementColumn = ({
 
  return <TextContent>{isJavaDependency ? "Managed" : "Embedded"}</TextContent>;
 };
+
+const DependencyVersionColumn = ({
+ appDependency: {
+ dependency: { provider, name, version, sha },
+ },
+}: {
+ appDependency: AnalysisAppDependency;
+}) => {
+ const isJavaDependency = name && version && sha && provider === "java";
+
+ const mavenCentralLink = isJavaDependency
+ ? `https://search.maven.org/search?q=1:${extractFirstSha(sha)}`
+ : undefined;
+
+ return (
+ <TextContent>
+ {mavenCentralLink ? (
+ <ExternalLink href={mavenCentralLink}>{version}</ExternalLink>
+ ) : (
+ <Text>{version}</Text>
+ )}
+ </TextContent>
+ );
+};

client/src/app/utils/utils.test.ts

@@ -7,6 +7,7 @@ import {
  gitUrlRegex,
  standardURLRegex,
  formatPath,
+ extractFirstSha,
 } from "./utils";
 import { Paths } from "@app/Paths";
 
@@ -157,6 +158,7 @@ describe("utils", () => {
  expect(standardURLRegex.test(url)).toBe(true);
  });
 });
+
 describe("formatPath function", () => {
  it("should replace path parameters with values", () => {
  const path = Paths.applicationsImportsDetails;
@@ -174,3 +176,46 @@ describe("formatPath function", () => {
  expect(result).toBe("/applications/assessment/:assessmentId");
  });
 });
+
+describe("SHA extraction", () => {
+ it("empty string is undefined", () => {
+ const first = extractFirstSha("");
+ expect(first).toBeUndefined();
+ });
+
+ it("no SHA is undefined", () => {
+ const first = extractFirstSha(
+ "The quick brown fox jumps over the lazy dog."
+ );
+ expect(first).toBeUndefined();
+ });
+
+ it("a SHA is found", () => {
+ const tests = [
+ "83cd2cd674a217ade95a4bb83a8a14f351f48bd0",
+ " 83cd2cd674a217ade95a4bb83a8a14f351f48bd0 ",
+ "83cd2cd674a217ade95a4bb83a8a14f351f48bd0 The quick brown fox jumps over the lazy dog.",
+ "The quick brown fox jumps over the lazy dog. 83cd2cd674a217ade95a4bb83a8a14f351f48bd0",
+ "The quick brown fox 83cd2cd674a217ade95a4bb83a8a14f351f48bd0 jumps over the lazy dog.",
+ ];
+
+ for (const test of tests) {
+ const first = extractFirstSha(test);
+ expect(first).toBe("83cd2cd674a217ade95a4bb83a8a14f351f48bd0");
+ }
+ });
+
+ it("multiple SHAs are in the string, only the first is returned", () => {
+ const first = extractFirstSha(
+ "83cd2cd674a217ade95a4bb83a8a14f351f48bd0 9c04cd6372077e9b11f70ca111c9807dc7137e4b"
+ );
+ expect(first).toBe("83cd2cd674a217ade95a4bb83a8a14f351f48bd0");
+ });
+
+ it("multiple SHAs are in the string, only the first is returned even if it is shorter", () => {
+ const first = extractFirstSha(
+ "9c04cd6372077e9b11f70ca111c9807dc7137e4b 83cd2cd674a217ade95a4bb83a8a14f351f48bd0 b47cc0f104b62d4c7c30bcd68fd8e67613e287dc4ad8c310ef10cbadea9c4380"
+ );
+ expect(first).toBe("9c04cd6372077e9b11f70ca111c9807dc7137e4b");
+ });
+});

client/src/app/utils/utils.ts

@@ -151,3 +151,20 @@ export const formatPath = (path: Paths, data: any) => {
 
  return url;
 };
+
+/**
+ * Regular expression to match a SHA hash in a string. Different versions of the SHA
+ * hash have different lengths. Check in descending length order so the longest SHA
+ * string can be captured.
+ */
+const SHA_REGEX =
+ /([a-f0-9]{128}|[a-f0-9]{96}|[a-f0-9]{64}|[a-f0-9]{56}|[a-f0-9]{40})/g;
+
+/**
+ * In any given string, find the first thing that looks like a sha hash and return it.
+ * If nothing looks like a sha hash, return undefined.
+ */
+export const extractFirstSha = (str: string): string | undefined => {
+ const match = str.match(SHA_REGEX);
+ return match && match[0] ? match[0] : undefined;
+};