frontend: Moving Quick Links to Core (#2816)

lyft · Oct 19, 2023 · 63bd3e1 · 63bd3e1
1 parent 577944a
commit 63bd3e1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/frontend/packages/core/src/index.tsx b/frontend/packages/core/src/index.tsx
@@ -40,6 +40,7 @@ export * from "./NPS";
 export { default as ExpansionPanel } from "./panel";
 export { default as Paper } from "./paper";
 export { Popper, PopperItem } from "./popper";
+export { default as QuickLinksCard } from "./quick-links";
 export { default as Resolver } from "./Resolver";
 export { Step, Stepper } from "./stepper";
 export { default as styled } from "./styled";

diff --git a/...rojectCatalog/src/details/quick-links.tsx → frontend/packages/core/src/quick-links.tsx b/...rojectCatalog/src/details/quick-links.tsx → frontend/packages/core/src/quick-links.tsx
@@ -1,25 +1,26 @@
 import React from "react";
 import type { clutch as IClutch } from "@clutch-sh/api";
-import {
-  Card,
-  Grid,
-  IconButton,
-  Link,
-  Popper,
-  PopperItem,
-  Tooltip,
-  TooltipContainer,
-  Typography,
-} from "@clutch-sh/core";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
+import { IconButton } from "./button";
+import { Card } from "./card";
+import { Tooltip, TooltipContainer } from "./Feedback";
+import Grid from "./grid";
+import { Link } from "./link";
+import { Popper, PopperItem } from "./popper";
+import { Typography } from "./typography";
+
 interface LinkGroupProps {
   linkGroupName: string;
   linkGroupImage: string;
 }
 
+interface QLink extends IClutch.core.project.v1.ILink {
+  trackingId?: string;
+}
+
 interface QuickLinkProps extends LinkGroupProps {
-  link: IClutch.core.project.v1.ILink;
+  link: QLink;
 }
 
 interface QuickLinkContainerProps {
@@ -48,7 +49,7 @@ const QuickLinkContainer = ({ keyProp, name, children }: QuickLinkContainerProps
 const QuickLink = ({ link, linkGroupName, linkGroupImage }: QuickLinkProps) =>
   link?.url ? (
     <QuickLinkContainer keyProp={link.name} name={linkGroupName}>
-      <Link href={link.url}>
+      <Link href={link.url} data-tracking-action={link.trackingId}>
         <img
           width={ICON_SIZE}
           height={ICON_SIZE}
@@ -113,14 +114,19 @@ const QuickLinkGroup = ({ linkGroupName, linkGroupImage, links }: QuickLinkGroup
     </QuickLinkContainer>
   );
 };
+
+interface LinkGroup extends IClutch.core.project.v1.ILinkGroup {
+  links?: QLink[];
+}
+
 export interface QuickLinksProps {
-  linkGroups: IClutch.core.project.v1.ILinkGroup[];
+  linkGroups: LinkGroup[];
 }
 
 // TODO(smonero): Wasn't sure if I should make an interface for this or just reuse
 // or not make one at all since its so simple
 interface SlicedLinkGroupProps {
-  slicedLinkGroups: IClutch.core.project.v1.ILinkGroup[];
+  slicedLinkGroups: LinkGroup[];
 }
 
 const SlicedLinkGroup = ({ slicedLinkGroups }: SlicedLinkGroupProps) => {
@@ -166,7 +172,9 @@ const QuickLinksCard = ({ linkGroups }: QuickLinksProps) => {
         direction="row"
         alignItems="center"
         spacing={1}
+        justifyContent="space-around"
         style={{ padding: "10px", margin: "-4px" }}
+        flexWrap="nowrap"
       >
         <SlicedLinkGroup slicedLinkGroups={firstFive} />
         {overflow.length > 0 && (

diff --git a/frontend/workflows/projectCatalog/src/details/index.tsx b/frontend/workflows/projectCatalog/src/details/index.tsx
@@ -1,7 +1,15 @@
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import type { clutch as IClutch } from "@clutch-sh/api";
-import { FeatureOn, Grid, IconButton, SimpleFeatureFlag, styled, Tooltip } from "@clutch-sh/core";
+import {
+  FeatureOn,
+  Grid,
+  IconButton,
+  QuickLinksCard,
+  SimpleFeatureFlag,
+  styled,
+  Tooltip,
+} from "@clutch-sh/core";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import GroupIcon from "@mui/icons-material/Group";
@@ -15,7 +23,6 @@ import { ProjectDetailsContext } from "./context";
 import ProjectHeader from "./header";
 import { fetchProjectInfo } from "./helpers";
 import ProjectInfoCard from "./info";
-import QuickLinksCard from "./quick-links";
 
 const StyledContainer = styled(Grid)({
   padding: "16px",
@@ -44,7 +51,7 @@ const QuickLinksAndSettingsBtn = ({ linkGroups }) => {
       justifyContent="flex-end"
       spacing={1}
       style={{
-        padding: "8px 32px 0px 0px",
+        padding: "8px 0px 0px 0px",
       }}
     >
       {!isEmpty(linkGroups) && (