Skip to content

Commit

Permalink
fix: Move out deployment page header
Browse files Browse the repository at this point in the history
  • Loading branch information
@adityachoudhari26
adityachoudhari26 committed Feb 22, 2025
1 parent f478806 commit 2785cf1
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 198 deletions.
10 changes: 3 additions & 7 deletions ...ppv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentCTA.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import React from "react";
import { usePathname } from "next/navigation";
import { IconPlus, IconRocket } from "@tabler/icons-react";

import { Button } from "@ctrlplane/ui/button";

Expand All @@ -20,8 +19,7 @@ export const DeploymentCTA: React.FC<{
if (tab === "variables")
return (
<CreateVariableDialog deploymentId={deploymentId}>
<Button variant="outline" className="flex items-center gap-2">
<IconPlus className="h-4 w-4" />
<Button variant="outline" className="flex items-center gap-2" size="sm">
Add Variable
</Button>
</CreateVariableDialog>
Expand All @@ -30,8 +28,7 @@ export const DeploymentCTA: React.FC<{
if (tab === "releases")
return (
<CreateReleaseDialog deploymentId={deploymentId} systemId={systemId}>
<Button variant="outline" className="flex items-center gap-2">
<IconRocket className="h-4 w-4" />
<Button variant="outline" className="flex items-center gap-2" size="sm">
New Release
</Button>
</CreateReleaseDialog>
Expand All @@ -40,8 +37,7 @@ export const DeploymentCTA: React.FC<{
if (tab === "channels")
return (
<CreateReleaseChannelDialog deploymentId={deploymentId}>
<Button variant="outline" className="flex items-center gap-2">
<IconPlus className="h-4 w-4" />
<Button variant="outline" className="flex items-center gap-2" size="sm">
New Channel
</Button>
</CreateReleaseChannelDialog>
Expand Down
42 changes: 1 addition & 41 deletions ...ppv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/channels/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
import Link from "next/link";
import { notFound } from "next/navigation";
import { IconArrowLeft } from "@tabler/icons-react";

import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from "@ctrlplane/ui/breadcrumb";
import { Button } from "@ctrlplane/ui/button";
import { Separator } from "@ctrlplane/ui/separator";

import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
import { api } from "~/trpc/server";
import { CreateReleaseChannelDialog } from "./CreateReleaseChannelDialog";
import { ReleaseChannelsTable } from "./ReleaseChannelsTable";

export default async function ReleaseChannelsPage(props: {
Expand All @@ -37,32 +24,5 @@ export default async function ReleaseChannelsPage(props: {
const releaseChannels =
await api.deployment.releaseChannel.list.byDeploymentId(deployment.id);

return (
<div>
<PageHeader className="justify-between">
<div className="flex shrink-0 items-center gap-4">
<Link
href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
>
<IconArrowLeft className="size-5" />
</Link>
<Separator orientation="vertical" className="h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>Channels</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>

<CreateReleaseChannelDialog deploymentId={deployment.id}>
<Button variant="outline" size="sm">
Create Channel
</Button>
</CreateReleaseChannelDialog>
</PageHeader>
<ReleaseChannelsTable releaseChannels={releaseChannels} />
</div>
);
return <ReleaseChannelsTable releaseChannels={releaseChannels} />;
}
81 changes: 58 additions & 23 deletions ...lug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import Link from "next/link";
import { notFound } from "next/navigation";
import { IconArrowLeft } from "@tabler/icons-react";

import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@ctrlplane/ui/breadcrumb";
import { Separator } from "@ctrlplane/ui/separator";
import {
Sidebar,
SidebarContent,
Expand All @@ -12,6 +22,8 @@ import {
import { SidebarLink } from "~/app/[workspaceSlug]/(appv2)/resources/(sidebar)/SidebarLink";
import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
import { api } from "~/trpc/server";
import { PageHeader } from "../../../../../../_components/PageHeader";
import { DeploymentCTA } from "./DeploymentCTA";

export default async function DeploymentLayout(props: {
children: React.ReactNode;
Expand All @@ -29,29 +41,52 @@ export default async function DeploymentLayout(props: {
const url = (tab: string) =>
`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments/${params.deploymentSlug}/${tab}`;
return (
<SidebarProvider
className="relative h-full"
sidebarNames={[Sidebars.Deployment]}
>
<Sidebar
className="absolute left-0 top-0 h-full"
name={Sidebars.Deployment}
<div className="h-full w-full">
<PageHeader className="justify-between">
<div className="flex shrink-0 items-center gap-4">
<Link
href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
>
<IconArrowLeft className="size-5" />
</Link>
<Separator orientation="vertical" className="h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>Deployments</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{deployment.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>

<DeploymentCTA deploymentId={deployment.id} systemId={system.id} />
</PageHeader>
<SidebarProvider
className="relative h-full"
sidebarNames={[Sidebars.Deployment]}
>
<SidebarContent>
<SidebarGroup>
<SidebarMenu>
<SidebarLink href={url("properties")}>Properties</SidebarLink>
<SidebarLink href={url("workflow")}>Workflow</SidebarLink>
<SidebarLink href={url("releases")}>Releases</SidebarLink>
<SidebarLink href={url("channels")}>Channels</SidebarLink>
<SidebarLink href={url("variables")}>Variables</SidebarLink>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset className="h-full w-[calc(100%-255px-1px)]">
{props.children}
</SidebarInset>
</SidebarProvider>
<Sidebar
className="absolute left-0 top-0 h-full"
name={Sidebars.Deployment}
>
<SidebarContent>
<SidebarGroup>
<SidebarMenu>
<SidebarLink href={url("properties")}>Properties</SidebarLink>
<SidebarLink href={url("workflow")}>Workflow</SidebarLink>
<SidebarLink href={url("releases")}>Releases</SidebarLink>
<SidebarLink href={url("channels")}>Channels</SidebarLink>
<SidebarLink href={url("variables")}>Variables</SidebarLink>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset className="h-full w-[calc(100%-255px-1px)]">
{props.children}
</SidebarInset>
</SidebarProvider>
</div>
);
}
59 changes: 15 additions & 44 deletions ...v2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/properties/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,16 @@ import type {
ResourceCondition,
} from "@ctrlplane/validators/resources";
import React from "react";
import Link from "next/link";
import { notFound } from "next/navigation";
import { IconArrowLeft } from "@tabler/icons-react";
import LZString from "lz-string";
import { isPresent } from "ts-is-present";

import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from "@ctrlplane/ui/breadcrumb";
import { Card } from "@ctrlplane/ui/card";
import { Separator } from "@ctrlplane/ui/separator";
import {
ResourceFilterType,
ResourceOperator,
} from "@ctrlplane/validators/resources";

import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
import { api } from "~/trpc/server";
import { VariableTable } from "../variables/VariableTable";
import { EditDeploymentSection } from "./EditDeploymentSection";
Expand Down Expand Up @@ -165,42 +155,23 @@ export default async function DeploymentPage(props: {
if (deployment == null) return notFound();

return (
<div>
<PageHeader className="justify-between">
<div className="flex shrink-0 items-center gap-4">
<Link
href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
>
<IconArrowLeft className="size-5" />
</Link>
<Separator orientation="vertical" className="h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>Properties</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</PageHeader>
<div className="container mx-auto flex max-w-5xl gap-12">
<div className="sticky top-8 my-8 h-full w-[150px] flex-shrink-0">
<div>
<SidebarSection id="properties">Properties</SidebarSection>
<SidebarSection id="job-agent">Job Agent</SidebarSection>
<SidebarSection id="variables">Variables</SidebarSection>
</div>
</div>
<div className="mb-16 flex-grow space-y-10">
<EditDeploymentSection
deployment={deployment}
systems={systems}
workspaceId={workspaceId}
/>

<Variables workspaceId={workspaceId} deployment={deployment} />
<div className="container mx-auto flex max-w-5xl gap-12">
<div className="sticky top-8 my-8 h-full w-[150px] flex-shrink-0">
<div>
<SidebarSection id="properties">Properties</SidebarSection>
<SidebarSection id="job-agent">Job Agent</SidebarSection>
<SidebarSection id="variables">Variables</SidebarSection>
</div>
</div>
<div className="mb-16 flex-grow space-y-10">
<EditDeploymentSection
deployment={deployment}
systems={systems}
workspaceId={workspaceId}
/>

<Variables workspaceId={workspaceId} deployment={deployment} />
</div>
</div>
);
}
48 changes: 5 additions & 43 deletions ...ppv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/releases/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,9 @@
"use server";

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { IconArrowLeft } from "@tabler/icons-react";

import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
} from "@ctrlplane/ui/breadcrumb";
import { Button } from "@ctrlplane/ui/button";
import { Separator } from "@ctrlplane/ui/separator";

import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
import { api } from "~/trpc/server";
import { CreateReleaseDialog } from "./CreateRelease";
import { DeploymentPageContent } from "./DeploymentPageContent";

type PageProps = {
Expand Down Expand Up @@ -51,35 +38,10 @@ export default async function DeploymentPage(props: PageProps) {
)
: null;
return (
<div>
<PageHeader className="justify-between">
<div className="flex shrink-0 items-center gap-4">
<Link
href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
>
<IconArrowLeft className="size-5" />
</Link>
<Separator orientation="vertical" className="h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>Releases</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>

<CreateReleaseDialog deploymentId={deployment.id} systemId={system.id}>
<Button variant="outline" size="sm">
Create Release
</Button>
</CreateReleaseDialog>
</PageHeader>
<DeploymentPageContent
deployment={deployment}
environments={environments}
releaseChannel={releaseChannel}
/>
</div>
<DeploymentPageContent
deployment={deployment}
environments={environments}
releaseChannel={releaseChannel}
/>
);
}
Loading

0 comments on commit 2785cf1

Please sign in to comment.