From 4526c815afafa9f9738034080569cc9630fb82ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Cort=C3=A9s?= <jecr@users.noreply.github.com>
Date: Thu, 14 Mar 2024 10:45:41 -0600
Subject: [PATCH] frontend: add support for icons in quick links (#2951)

This PR adds updates to the QuickLinks component:

- Reduce padding for dropdown elements
before:
<img width="186" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/260bd128-86cf-49ff-8c64-cc71bf524d95">

after:
<img width="180" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/e46b26c1-ff62-4ea8-b426-c4dde376042b">

- Prepend an icon if passed in the `link` object
<img width="181" alt="image"
src="https://github.com/lyft/clutch/assets/5430603/bca143ab-1fa7-4fb1-a4ff-abdbb29b35a1">


### Testing Performed
manual
---
 frontend/packages/core/src/quick-links.tsx    | 30 ++++++++++++-------
 .../core/src/stories/quick-links.stories.tsx  | 23 ++++++++++++++
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/frontend/packages/core/src/quick-links.tsx b/frontend/packages/core/src/quick-links.tsx
index 582b01492b..7082a39c3e 100644
--- a/frontend/packages/core/src/quick-links.tsx
+++ b/frontend/packages/core/src/quick-links.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import type { clutch as IClutch } from "@clutch-sh/api";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Badge, BadgeProps } from "@mui/material";
+import { Badge, BadgeProps, SvgIcon } from "@mui/material";
 
 import { IconButton } from "./button";
 import { Card } from "./card";
@@ -29,8 +29,16 @@ const StyledButton = styled("button")({
   display: "flex",
 });
 
-const StyledSpan = styled("span")({
-  whiteSpace: "nowrap",
+const StyledPopperItem = styled(PopperItem)({
+  "&&&": {
+    height: "auto",
+  },
+  "& span.MuiTypography-root": {
+    padding: "0",
+  },
+  "& a.MuiTypography-root": {
+    padding: "4px 16px",
+  },
 });
 
 interface LinkGroupProps {
@@ -40,6 +48,7 @@ interface LinkGroupProps {
 
 interface QLink extends IClutch.core.project.v1.ILink {
   trackingId?: string;
+  icon?: React.ElementType;
 }
 
 interface QuickLinkProps extends LinkGroupProps {
@@ -84,13 +93,13 @@ const QuickLink = ({ link, linkGroupName, linkGroupImage }: QuickLinkProps) =>
   ) : null;
 
 interface QuickLinkGroupProps extends LinkGroupProps {
-  links: IClutch.core.project.v1.ILink[];
+  links: QLink[];
 }
 // Have a popper in the case of multiple links per group
 const QuickLinkGroup = ({ linkGroupName, linkGroupImage, links }: QuickLinkGroupProps) => {
   const anchorRef = React.useRef(null);
   const [open, setOpen] = React.useState(false);
-  const [validLinks, setValidLinks] = React.useState<IClutch.core.project.v1.ILink[]>([]);
+  const [validLinks, setValidLinks] = React.useState<QLink[]>([]);
 
   React.useEffect(() => {
     if (links) {
@@ -110,17 +119,18 @@ const QuickLinkGroup = ({ linkGroupName, linkGroupImage, links }: QuickLinkGroup
         placement="bottom-end"
       >
         {validLinks.map(link => (
-          <PopperItem key={link.name}>
+          <StyledPopperItem key={link.name}>
             {link?.url && (
               <Link href={link.url}>
-                <StyledSpan>
-                  <Typography color="inherit" variant="body4">
+                <Grid container alignItems="center" gap={1}>
+                  {link?.icon && <SvgIcon component={link.icon} fontSize="small" />}
+                  <Typography color="inherit" variant="body4" noWrap>
                     {link.name}
                   </Typography>
-                </StyledSpan>
+                </Grid>
               </Link>
             )}
-          </PopperItem>
+          </StyledPopperItem>
         ))}
       </Popper>
     </QuickLinkContainer>
diff --git a/frontend/packages/core/src/stories/quick-links.stories.tsx b/frontend/packages/core/src/stories/quick-links.stories.tsx
index 68b24e561f..5451ae9ebc 100644
--- a/frontend/packages/core/src/stories/quick-links.stories.tsx
+++ b/frontend/packages/core/src/stories/quick-links.stories.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Home as HomeIcon, OpenInNew as OpenInNewIcon } from "@mui/icons-material";
 import { Meta, Story } from "@storybook/react";
 
 import QuickLinksCard, { QuickLinksProps } from "../quick-links";
@@ -139,6 +140,23 @@ const withBadges = [
   },
 ];
 
+const withIcons = [
+  {
+    links: [
+      {
+        ...linkGroups[0].links[0],
+        icon: HomeIcon,
+      },
+      {
+        ...linkGroups[0].links[1],
+        icon: OpenInNewIcon,
+      },
+    ],
+    name: "Group 1",
+    imagePath,
+  },
+];
+
 export const Default = Template.bind({});
 Default.args = {
   linkGroups,
@@ -153,3 +171,8 @@ export const WithBadges = Template.bind({});
 WithBadges.args = {
   linkGroups: withBadges,
 };
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+  linkGroups: withIcons,
+};