DEVPROD-4724 Add link to task queue page from distro settings (#104)

evergreen-ci · May 3, 2024 · c6d2cdb · c6d2cdb
1 parent 712d234
commit c6d2cdb
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/apps/spruce/cypress/integration/distroSettings/navigation.ts b/apps/spruce/cypress/integration/distroSettings/navigation.ts
@@ -13,6 +13,13 @@ describe("using the distro dropdown", () => {
     cy.location("pathname").should("not.contain", "localhost");
     cy.location("pathname").should("contain", "rhel71-power8-large");
   });
+  it("navigates to the task queue for the selected distro", () => {
+    cy.dataCy("navitem-task-queue-link").should(
+      "have.attr",
+      "href",
+      "/task-queue/localhost",
+    );
+  });
 
   describe("warning modal", () => {
     it("warns when navigating away from distro settings with unsaved changes and allows returning to distro settings", () => {

diff --git a/apps/spruce/src/components/styles/SideNav.tsx b/apps/spruce/src/components/styles/SideNav.tsx
@@ -1,10 +1,16 @@
 import styled from "@emotion/styled";
+import { palette } from "@leafygreen-ui/palette";
 import {
   SideNav as LGSideNav,
   SideNavItem as LGSideNavItem,
   SideNavGroup as LGSideNavGroup,
 } from "@leafygreen-ui/side-nav";
-import { zIndex } from "constants/tokens";
+import { Body, BodyProps } from "@leafygreen-ui/typography";
+import { Link } from "react-router-dom";
+import Icon from "components/Icon";
+import { zIndex, size } from "constants/tokens";
+
+const { blue } = palette;
 
 export const SideNav = styled(LGSideNav)`
   grid-area: sidenav;
@@ -14,3 +20,29 @@ export const SideNav = styled(LGSideNav)`
 export const SideNavGroup = LGSideNavGroup;
 
 export const SideNavItem = LGSideNavItem;
+
+interface SideNavItemProps
+  extends Omit<React.ComponentProps<typeof LGSideNavItem>, "as"> {
+  to?: string;
+  href?: string;
+  glyph?: React.ReactNode;
+}
+export const SideNavItemLink: React.FC<SideNavItemProps> = ({
+  children,
+  glyph,
+  ...props
+}) => (
+  <StyledSideNavItemLink as={Link} {...props}>
+    <StyledBody weight="medium">{children}</StyledBody>
+    <Icon glyph="ArrowRight" />
+  </StyledSideNavItemLink>
+);
+
+// @ts-expect-error
+const StyledSideNavItemLink = styled(LGSideNavItem)<SideNavItemProps>`
+  color: ${blue.base};
+`;
+const StyledBody = styled(Body)<BodyProps>`
+  color: ${blue.base};
+  margin-right: ${size.xxs};
+`;
diff --git a/apps/spruce/src/pages/distroSettings/index.tsx b/apps/spruce/src/pages/distroSettings/index.tsx
@@ -2,15 +2,18 @@ import { useQuery } from "@apollo/client";
 import styled from "@emotion/styled";
 import { sideNavItemSidePadding } from "@leafygreen-ui/side-nav";
 import { useParams, Link, Navigate } from "react-router-dom";
+import Icon from "components/Icon";
 import {
   SideNav,
   SideNavGroup,
   SideNavItem,
   PageWrapper,
 } from "components/styles";
+import { SideNavItemLink } from "components/styles/SideNav";
 import {
   DistroSettingsTabRoutes,
   getDistroSettingsRoute,
+  getTaskQueueRoute,
   slugs,
 } from "constants/routes";
 import { size } from "constants/tokens";
@@ -73,6 +76,14 @@ const DistroSettings: React.FC = () => {
             </SideNavItem>
           ))}
         </SideNavGroup>
+        <SideNavGroup glyph={<Icon glyph="Link" />} header="Links">
+          <SideNavItemLink
+            to={getTaskQueueRoute(distroId)}
+            data-cy="navitem-task-queue-link"
+          >
+            Task Queue
+          </SideNavItemLink>
+        </SideNavGroup>
       </SideNav>
       <PageWrapper data-cy="distro-settings-page">
         {!loading && data?.distro && (