diff --git a/apps/spruce/cypress/integration/distroSettings/navigation.ts b/apps/spruce/cypress/integration/distroSettings/navigation.ts index 10f85c94b..28284d942 100644 --- 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 index 6106a39ab..1de9bee30 100644 --- 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, "as"> { + to?: string; + href?: string; + glyph?: React.ReactNode; +} +export const SideNavItemLink: React.FC = ({ + children, + glyph, + ...props +}) => ( + + {children} + + +); + +// @ts-expect-error +const StyledSideNavItemLink = styled(LGSideNavItem)` + color: ${blue.base}; +`; +const StyledBody = styled(Body)` + 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 index b2a126c94..30965833d 100644 --- 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 = () => { ))} + } header="Links"> + + Task Queue + + {!loading && data?.distro && (