Skip to content

Commit

Permalink
[UI v2] feat: Adds Deployment description tab content
Browse files Browse the repository at this point in the history
  • Loading branch information
@devinvillarosa
devinvillarosa committed Feb 7, 2025
1 parent 0794427 commit de2219f
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 70 deletions.
15 changes: 15 additions & 0 deletions ui-v2/src/components/deployments/deployment-description.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Deployment } from "@/api/deployments";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";

type DeploymentDescriptionProps = {
deployment: Deployment;
};

export const DeploymentDescription = ({
deployment,
}: DeploymentDescriptionProps) => (
<Markdown className="prose" remarkPlugins={[remarkGfm]}>
{deployment.description}
</Markdown>
);
2 changes: 1 addition & 1 deletion ui-v2/src/components/deployments/deployment-details-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
</div>
<div className="grid gap-4" style={{ gridTemplateColumns: "3fr 1fr" }}>
<div className="flex flex-col gap-5">
<DeploymentDetailsTabs />
<DeploymentDetailsTabs deployment={data} />
</div>
<div className="flex flex-col gap-3">
<div className="border border-red-400">
Expand Down
146 changes: 77 additions & 69 deletions ui-v2/src/components/deployments/deployment-details-tabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { Deployment } from "@/api/deployments";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type { DeploymentDetailsTabOptions } from "@/routes/deployments/deployment.$id";
import { Link, getRouteApi } from "@tanstack/react-router";
import { type JSX } from "react";

import { DeploymentDescription } from "./deployment-description";

const routeApi = getRouteApi("/deployments/deployment/$id");

type TabOption = {
Expand All @@ -11,77 +14,82 @@ type TabOption = {
ViewComponent: () => JSX.Element;
};

const TAB_OPTIONS = [
{
value: "Runs",
LinkComponent: () => (
<Link to="." search={{ tab: "Runs" }}>
<TabsTrigger value="Runs">Runs</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Runs">
<div className="border border-red-400">{"<RunsView />"}</div>
</TabsContent>
),
},
{
value: "Upcoming",
LinkComponent: () => (
<Link to="." search={{ tab: "Upcoming" }}>
<TabsTrigger value="Upcoming">Upcoming</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Upcoming">
<div className="border border-red-400">{"<UpcomingView />"}</div>
</TabsContent>
),
},
{
value: "Parameters",
LinkComponent: () => (
<Link to="." search={{ tab: "Parameters" }}>
<TabsTrigger value="Parameters">Parameters</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Parameters">
<div className="border border-red-400">{"<ParametersView />"}</div>
</TabsContent>
),
},
{
value: "Configuration",
LinkComponent: () => (
<Link to="." search={{ tab: "Configuration" }}>
<TabsTrigger value="Configuration">Configuration</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Configuration">
<div className="border border-red-400">{"<ConfigurationView />"}</div>
</TabsContent>
),
},
{
value: "Description",
LinkComponent: () => (
<Link to="." search={{ tab: "Description" }}>
<TabsTrigger value="Description">Description</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Description">
<div className="border border-red-400">{"<DescriptionView />"}</div>
</TabsContent>
),
},
] as const satisfies Array<TabOption>;

export const DeploymentDetailsTabs = (): JSX.Element => {
type DeploymentDetailsTabsProps = {
deployment: Deployment;
};
export const DeploymentDetailsTabs = ({
deployment,
}: DeploymentDetailsTabsProps): JSX.Element => {
const { tab } = routeApi.useSearch();

const TAB_OPTIONS = [
{
value: "Runs",
LinkComponent: () => (
<Link to="." search={{ tab: "Runs" }}>
<TabsTrigger value="Runs">Runs</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Runs">
<div className="border border-red-400">{"<RunsView />"}</div>
</TabsContent>
),
},
{
value: "Upcoming",
LinkComponent: () => (
<Link to="." search={{ tab: "Upcoming" }}>
<TabsTrigger value="Upcoming">Upcoming</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Upcoming">
<div className="border border-red-400">{"<UpcomingView />"}</div>
</TabsContent>
),
},
{
value: "Parameters",
LinkComponent: () => (
<Link to="." search={{ tab: "Parameters" }}>
<TabsTrigger value="Parameters">Parameters</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Parameters">
<div className="border border-red-400">{"<ParametersView />"}</div>
</TabsContent>
),
},
{
value: "Configuration",
LinkComponent: () => (
<Link to="." search={{ tab: "Configuration" }}>
<TabsTrigger value="Configuration">Configuration</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Configuration">
<div className="border border-red-400">{"<ConfigurationView />"}</div>
</TabsContent>
),
},
{
value: "Description",
LinkComponent: () => (
<Link to="." search={{ tab: "Description" }}>
<TabsTrigger value="Description">Description</TabsTrigger>
</Link>
),
ViewComponent: () => (
<TabsContent value="Description">
<DeploymentDescription deployment={deployment} />
</TabsContent>
),
},
] as const satisfies Array<TabOption>;

return (
<Tabs defaultValue={TAB_OPTIONS[0].value} value={tab}>
<TabsList>
Expand Down

0 comments on commit de2219f

Please # to comment.