frontend: Adjusting ProjectCatalog chipsRow to allow a target and aut…

…o-set based on location (#2965)
lyft · Mar 26, 2024 · 4f338ca · 4f338ca
1 parent 6c719a3
commit 4f338ca
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git 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
@@ -2,28 +2,46 @@ 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}
           {url && <ChevronRightIcon fontSize="small" style={{ marginRight: "-12px" }} />}
         </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>
       );
     })}