Skip to content

Commit

Permalink
[UI v2] feat: Have Breadcrumb link be connected with tanstack router (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
devinvillarosa authored Dec 29, 2024
1 parent d62209c commit 2133d67
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Link } from "@tanstack/react-router";

type Props = {
tag: string;
Expand All @@ -17,8 +16,11 @@ export const NavHeader = ({ tag }: Props) => {
<div className="flex items-center gap-2">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbLink asChild className="text-xl font-semibold">
<Link to="/concurrency-limits">Concurrency Limits </Link>
<BreadcrumbLink
to="/concurrency-limits"
className="text-xl font-semibold"
>
Concurrency Limits
</BreadcrumbLink>
<BreadcrumbSeparator />
<BreadcrumbItem className="text-xl font-semibold">
Expand Down
32 changes: 18 additions & 14 deletions ui-v2/src/components/ui/breadcrumb.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
import { Slot } from "@radix-ui/react-slot";
import { createLink } from "@tanstack/react-router";

import * as React from "react";

import { cn } from "@/lib/utils";
Expand Down Expand Up @@ -50,20 +52,22 @@ type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<"a"> & {
className?: string;
};

const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";

return (
<Comp
ref={ref}
className={cn("transition-colors hover:text-foreground", className)}
{...props}
/>
);
},
);
BreadcrumbLink.displayName = "BreadcrumbLink";
const BreadcrumbLinkComponent = React.forwardRef<
HTMLAnchorElement,
BreadcrumbLinkProps
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";

return (
<Comp
ref={ref}
className={cn("transition-colors hover:text-foreground", className)}
{...props}
/>
);
});
BreadcrumbLinkComponent.displayName = "BreadcrumbLink";
const BreadcrumbLink = createLink(BreadcrumbLinkComponent);

type BreadcrumbPageProps = React.ComponentPropsWithoutRef<"span"> & {
className?: string;
Expand Down
31 changes: 14 additions & 17 deletions ui-v2/src/components/ui/run-card/run-card.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { components } from "@/api/prefect";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
Expand All @@ -10,7 +10,6 @@ import { Icon } from "@/components/ui/icons";
import { StateBadge } from "@/components/ui/state-badge";
import { TagBadgeGroup } from "@/components/ui/tag-badge-group";
import { Typography } from "@/components/ui/typography";
import { Link } from "@tanstack/react-router";
import { cva } from "class-variance-authority";
import { format, parseISO } from "date-fns";
import humanizeDuration from "humanize-duration";
Expand Down Expand Up @@ -81,27 +80,25 @@ const ConcurrencyLimitTaskRunBreadcrumb = ({
<Breadcrumb>
<BreadcrumbList>
{flow && (
<BreadcrumbItem className="text-lg font-semibold">
<Link to="/flows/flow/$id" params={{ id: flow.id }}>
{flow.name}
</Link>
</BreadcrumbItem>
<BreadcrumbLink
className="text-lg font-semibold"
to="/flows/flow/$id"
params={{ id: flow.id }}
>
{flow.name}
</BreadcrumbLink>
)}
{flow && flowRun && <BreadcrumbSeparator />}
{flowRun && (
<BreadcrumbItem>
<Link to="/runs/flow-run/$id" params={{ id: flowRun.id }}>
{flowRun.name}
</Link>
</BreadcrumbItem>
<BreadcrumbLink to="/runs/flow-run/$id" params={{ id: flowRun.id }}>
{flowRun.name}
</BreadcrumbLink>
)}
{flowRun && taskRun && <BreadcrumbSeparator />}
{taskRun && (
<BreadcrumbItem>
<Link to="/runs/task-run/$id" params={{ id: taskRun.id }}>
{taskRun.name}
</Link>
</BreadcrumbItem>
<BreadcrumbLink to="/runs/task-run/$id" params={{ id: taskRun.id }}>
{taskRun.name}
</BreadcrumbLink>
)}
</BreadcrumbList>
</Breadcrumb>
Expand Down

0 comments on commit 2133d67

Please sign in to comment.