From 4f338cade7adc47bc5e119a87f08e0dcaf0ba1c4 Mon Sep 17 00:00:00 2001
From: Josh Slaughter <8338893+jdslaugh@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:07:45 -0700
Subject: [PATCH] frontend: Adjusting ProjectCatalog chipsRow to allow a target
 and auto-set based on location (#2965)

---
 frontend/package.json                         |  6 ++---
 .../src/details/info/chipsRow.tsx             | 22 +++++++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 0a8c12930d..be93d7efca 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,9 +40,9 @@
     "start": "yarn clean && yarn compile:watch & FORCE_COLOR=true yarn workspace @clutch-sh/app start | cat",
     "storybook": "rm -rf node_modules/.cache/storybook/ && start-storybook --disable-telemetry -p 6006 -h localhost",
     "storybook:build": "NODE_OPTIONS=--max_old_space_size=4096 build-storybook --no-dll -o netlify/storybook-static",
-    "test": "lerna run test --stream --no-bail --",
-    "test:coverage": "lerna run test:coverage --stream --no-bail --",
-    "test:e2e": "lerna run test:e2e",
+    "test": "lerna run test --stream --no-bail -- --silent",
+    "test:coverage": "lerna run test:coverage --stream --no-bail -- --silent",
+    "test:e2e": "lerna run test:e2e --stream --no-bail --",
     "test:licenses": "node license-linter.js",
     "test:update": "yarn test:coverage -u",
     "test:watch": "lerna run test:watch --parallel"
diff --git a/frontend/workflows/projectCatalog/src/details/info/chipsRow.tsx b/frontend/workflows/projectCatalog/src/details/info/chipsRow.tsx
index 358e74f7de..4dcf50358e 100644
--- a/frontend/workflows/projectCatalog/src/details/info/chipsRow.tsx
+++ b/frontend/workflows/projectCatalog/src/details/info/chipsRow.tsx
@@ -2,18 +2,20 @@ import React from "react";
 import type { CHIP_VARIANTS } from "@clutch-sh/core";
 import { Chip, Grid, Link, Tooltip } from "@clutch-sh/core";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import type { LinkProps } from "@mui/material";
 
 export interface ProjectInfoChip {
   text: string;
   title?: string;
   icon?: React.ReactElement;
   url?: string;
+  urlTarget?: LinkProps["target"];
   variant?: typeof CHIP_VARIANTS[number];
 }
 
 const ChipsRow = ({ chips = [] }: { chips: ProjectInfoChip[] }) => (
   <>
-    {chips.map(({ variant = "neutral", text, icon, title, url }) => {
+    {chips.map(({ variant = "neutral", text, icon, title, url, urlTarget }) => {
       const chipText = (
         <Grid container direction="row" wrap="nowrap">
           {text}
@@ -21,9 +23,25 @@ const ChipsRow = ({ chips = [] }: { chips: ProjectInfoChip[] }) => (
         </Grid>
       );
       const chipElem = <Chip variant={variant} label={chipText} size="small" icon={icon} />;
+
+      if (!urlTarget) {
+        const externalRoute = url && url.startsWith("http");
+
+        // eslint-disable-next-line no-param-reassign
+        urlTarget = externalRoute ? "_blank" : "_self";
+      }
+
       return (
         <Tooltip title={title ?? text} key={`chip-${title}`}>
-          <Grid item>{url ? <Link href={url}>{chipElem}</Link> : chipElem}</Grid>
+          <Grid item>
+            {url ? (
+              <Link href={url} {...(urlTarget ? { target: urlTarget } : {})}>
+                {chipElem}
+              </Link>
+            ) : (
+              chipElem
+            )}
+          </Grid>
         </Tooltip>
       );
     })}