fix: Move systems to deploys

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/flow-diagram/ApprovalCheck.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/_components/flow-diagram/ApprovalCheck.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@ctrlplane/ui/button";
 
-import { ApprovalDialog } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/release/ApprovalDialog";
+import { ApprovalDialog } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/release/ApprovalDialog";
 import { api } from "~/trpc/react";
 import { Cancelled, Failing, Loading, Passing, Waiting } from "./StatusIcons";
 

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/page.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/checks/page.tsx

@@ -7,7 +7,7 @@ import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 import { ReactFlowProvider } from "~/app/[workspaceSlug]/(appv2)/_components/reactflow/ReactFlowProvider";
 import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
-import { FlowDiagram } from "./flow-diagram/FlowDiagram";
+import { FlowDiagram } from "./_components/flow-diagram/FlowDiagram";
 
 type PageProps = {
   params: Promise<{

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/EnvironmentApprovalRow.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/jobs/release-table/EnvironmentApprovalRow.tsx

@@ -4,7 +4,7 @@ import type { EnvironmentPolicyApproval, User } from "@ctrlplane/db/schema";
 
 import { Button } from "@ctrlplane/ui/button";
 
-import { ApprovalDialog } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/release/ApprovalDialog";
+import { ApprovalDialog } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/release/ApprovalDialog";
 
 type EnvironmentApprovalRowProps = {
   approval: EnvironmentPolicyApproval & { user?: User | null };

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/DeploymentCTA.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/DeploymentCTA.tsx

@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 
 import { Button } from "@ctrlplane/ui/button";
 
-import { CreateReleaseDialog } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/release/CreateRelease";
+import { CreateReleaseDialog } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/release/CreateRelease";
 import { CreateReleaseChannelDialog } from "../channels/CreateReleaseChannelDialog";
 import { CreateVariableDialog } from "../variables/CreateVariableDialog";
 

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ReleaseEnvironmentCell.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/ReleaseEnvironmentCell.tsx

@@ -11,7 +11,7 @@ import { JobStatus } from "@ctrlplane/validators/jobs";
 import { ReleaseStatus } from "@ctrlplane/validators/releases";
 
 import { useReleaseChannelDrawer } from "~/app/[workspaceSlug]/(app)/_components/release-channel-drawer/useReleaseChannelDrawer";
-import { ApprovalDialog } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/release/ApprovalDialog";
+import { ApprovalDialog } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/release/ApprovalDialog";
 import { api } from "~/trpc/react";
 import { DeployButton } from "./DeployButton";
 import { Release } from "./TableCells";

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/TableCells.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/_components/release-cell/TableCells.tsx

@@ -39,12 +39,12 @@ import {
   JobStatus,
 } from "@ctrlplane/validators/jobs";
 
-import { DeploymentBarChart } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/deployments/charts/DeploymentBarChart";
-import { ReleaseDropdownMenu } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/release/ReleaseDropdownMenu";
+import { DeploymentBarChart } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/deployments/charts/DeploymentBarChart";
+import { ReleaseDropdownMenu } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/release/ReleaseDropdownMenu";
 import {
   getStatusColor,
   statusColor,
-} from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_utils/status-color";
+} from "~/app/[workspaceSlug]/(appv2)/(deploy)/_utils/status-color";
 import { api } from "~/trpc/react";
 
 const ReleaseIcon: React.FC<{

apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/_components/SystemBreadcrumb.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import { useParams } from "next/navigation";
+import { IconMenu2 } from "@tabler/icons-react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
+
+import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
+import { urls } from "~/app/urls";
+
+type SystemBreadcrumbProps = {
+  system: SCHEMA.System;
+  page: string;
+};
+
+export const SystemBreadcrumb: React.FC<SystemBreadcrumbProps> = ({
+  system,
+  page,
+}) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+  const workspaceUrls = urls.workspace(workspaceSlug);
+  const systemsUrl = workspaceUrls.systems();
+  const systemUrl = workspaceUrls.system(system.slug).baseUrl();
+  return (
+    <div className="flex items-center gap-2">
+      <SidebarTrigger name={Sidebars.System}>
+        <IconMenu2 className="h-4 w-4" />
+      </SidebarTrigger>
+      <Separator orientation="vertical" className="mr-2 h-4" />
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem className="hidden md:block">
+            <BreadcrumbLink href={systemsUrl}>Systems</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem className="hidden md:block">
+            <BreadcrumbLink href={systemUrl}>{system.name}</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem className="hidden md:block">
+            <BreadcrumbPage>{page}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </div>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/deployments/TableDeployments.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/deployments/TableDeployments.tsx

@@ -8,8 +8,8 @@ import { IconLoader2 } from "@tabler/icons-react";
 import { cn } from "@ctrlplane/ui";
 import { Badge } from "@ctrlplane/ui/badge";
 
-import { DeploymentOptionsDropdown } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/deployments/dropdown/DeploymentOptionsDropdown";
-import { LazyDeploymentEnvironmentCell } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/deployments/environment-cell/DeploymentEnvironmentCell";
+import { DeploymentOptionsDropdown } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/deployments/dropdown/DeploymentOptionsDropdown";
+import { LazyDeploymentEnvironmentCell } from "~/app/[workspaceSlug]/(appv2)/(deploy)/_components/deployments/environment-cell/DeploymentEnvironmentCell";
 import { urls } from "~/app/urls";
 import { api } from "~/trpc/react";
 

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/deployments/page.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/deployments/page.tsx

@@ -1,20 +1,11 @@
 import { notFound } from "next/navigation";
-import { IconMenu2 } 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 { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { CreateDeploymentDialog } from "~/app/[workspaceSlug]/(appv2)/_components/deployments/CreateDeployment";
 import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
-import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
+import { SystemBreadcrumb } from "../_components/SystemBreadcrumb";
 import DeploymentTable from "./TableDeployments";
 
 export default async function EnvironmentsPage(props: {
@@ -36,19 +27,7 @@ export default async function EnvironmentsPage(props: {
   return (
     <div className="flex min-w-0 flex-col overflow-x-auto">
       <PageHeader className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <SidebarTrigger name={Sidebars.System}>
-            <IconMenu2 className="h-4 w-4" />
-          </SidebarTrigger>
-          <Separator orientation="vertical" className="mr-2 h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem className="hidden md:block">
-                <BreadcrumbPage>Deployments</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
+        <SystemBreadcrumb system={system} page="Deployments" />
 
         <CreateDeploymentDialog systemId={system.id}>
           <Button

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/environments/page.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/page.tsx

@@ -1,18 +1,8 @@
 import { notFound } from "next/navigation";
-import { IconMenu2 } from "@tabler/icons-react";
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@ctrlplane/ui/breadcrumb";
-import { Separator } from "@ctrlplane/ui/separator";
-import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
-import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
+import { SystemBreadcrumb } from "../_components/SystemBreadcrumb";
 import { EnvironmentRow } from "./EnvironmentRow";
 
 export default async function EnvironmentsPage(props: {
@@ -27,17 +17,7 @@ export default async function EnvironmentsPage(props: {
   return (
     <div>
       <PageHeader>
-        <SidebarTrigger name={Sidebars.System}>
-          <IconMenu2 className="h-4 w-4" />
-        </SidebarTrigger>
-        <Separator orientation="vertical" className="mr-2 h-4" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem className="hidden md:block">
-              <BreadcrumbPage>Environments</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+        <SystemBreadcrumb system={system} page="Environments" />
       </PageHeader>
 
       {environments.map((environment) => (

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/layout.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/layout.tsx

@@ -19,10 +19,10 @@ import {
   SidebarProvider,
 } from "@ctrlplane/ui/sidebar";
 
+import { SystemSelector } from "~/app/[workspaceSlug]/(appv2)/(deploy)/(sidebar)/systems/SystemSelector";
+import { SidebarLink } from "~/app/[workspaceSlug]/(appv2)/resources/(sidebar)/SidebarLink";
 import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
-import { SidebarLink } from "../../../resources/(sidebar)/SidebarLink";
-import { SystemSelector } from "../../SystemSelector";
 
 export const generateMetadata = async (props: {
   params: Promise<{ workspaceSlug: string; systemSlug: string }>;

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/runbooks/page.tsx

@@ -1,20 +1,11 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { IconMenu2 } from "@tabler/icons-react";
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@ctrlplane/ui/breadcrumb";
 import { buttonVariants } from "@ctrlplane/ui/button";
-import { Separator } from "@ctrlplane/ui/separator";
-import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
-import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
+import { SystemBreadcrumb } from "../_components/SystemBreadcrumb";
 import { RunbookGettingStarted } from "./RunbookGettingStarted";
 import { RunbookRow } from "./RunbookRow";
 
@@ -30,19 +21,7 @@ export default async function RunbooksPage(props: {
   return (
     <div>
       <PageHeader className="flex w-full items-center justify-between">
-        <div className="flex items-center gap-2">
-          <SidebarTrigger name={Sidebars.System}>
-            <IconMenu2 className="h-4 w-4" />
-          </SidebarTrigger>
-          <Separator orientation="vertical" className="mr-2 h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem className="hidden md:block">
-                <BreadcrumbPage>Runbooks</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
+        <SystemBreadcrumb system={system} page="Runbooks" />
 
         <Link
           href={`/${params.workspaceSlug}/systems/${params.systemSlug}/runbooks/create`}

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/settings/page.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/settings/page.tsx

@@ -1,20 +1,12 @@
 import { notFound } from "next/navigation";
-import { IconMenu2 } 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 { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
 import { DeleteSystemDialog } from "~/app/[workspaceSlug]/(appv2)/_components/system/DeleteSystemDialog";
-import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
+import { SystemBreadcrumb } from "../_components/SystemBreadcrumb";
 import { GeneralSettings } from "./GeneralSettings";
 
 export default async function SystemSettingsPage(props: {
@@ -25,17 +17,7 @@ export default async function SystemSettingsPage(props: {
   return (
     <div className="flex flex-col">
       <PageHeader>
-        <SidebarTrigger name={Sidebars.System}>
-          <IconMenu2 className="h-4 w-4" />
-        </SidebarTrigger>
-        <Separator orientation="vertical" className="mr-2 h-4" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem className="hidden md:block">
-              <BreadcrumbPage>Settings</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+        <SystemBreadcrumb system={system} page="Settings" />
       </PageHeader>
 
       <div className="container max-w-2xl space-y-8 overflow-y-auto py-8">

apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/variables/page.tsx

@@ -0,0 +1,37 @@
+import { notFound } from "next/navigation";
+
+import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
+import { api } from "~/trpc/server";
+import { SystemBreadcrumb } from "../_components/SystemBreadcrumb";
+import { VariableSetGettingStarted } from "./GettingStartedVariableSets";
+import { VariableSetsTable } from "./VariableSetsTable";
+
+export default async function SystemVariableSetsPage(props: {
+  params: Promise<{ workspaceSlug: string; systemSlug: string }>;
+}) {
+  const params = await props.params;
+  const workspace = await api.workspace
+    .bySlug(params.workspaceSlug)
+    .catch(() => notFound());
+  if (!workspace) notFound();
+  const system = await api.system.bySlug(params).catch(() => notFound());
+
+  const variableSets = await api.variableSet.bySystemId(system.id);
+  return (
+    <div>
+      <PageHeader>
+        <SystemBreadcrumb system={system} page="Variables" />
+      </PageHeader>
+
+      {variableSets.length === 0 && (
+        <VariableSetGettingStarted
+          systemId={system.id}
+          environments={system.environments}
+        />
+      )}
+      {variableSets.length !== 0 && (
+        <VariableSetsTable variableSets={variableSets} />
+      )}
+    </div>
+  );
+}

apps/webservice/src/app/[workspaceSlug]/(appv2)/deployments/page.tsx → apps/webservice/src/app/[workspaceSlug]/(appv2)/(deploy)/(sidebar)/deployments/page.tsx

@@ -1,11 +1,15 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { IconMenu2 } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
+import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
+import { DeploymentsCard } from "~/app/[workspaceSlug]/(appv2)/_components/deployments/Card";
+import { CreateDeploymentDialog } from "~/app/[workspaceSlug]/(appv2)/_components/deployments/CreateDeployment";
+import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
+import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
-import { DeploymentsCard } from "../_components/deployments/Card";
-import { CreateDeploymentDialog } from "../_components/deployments/CreateDeployment";
 
 export const metadata: Metadata = {
   title: "Deployments | Ctrlplane",
@@ -21,15 +25,18 @@ export default async function DeploymentsPage(props: Props) {
   if (workspace == null) notFound();
 
   return (
-    <div className="container m-8 mx-auto space-y-8">
-      <div className="flex w-full justify-between">
-        <h2 className="text-2xl font-bold">Deployments</h2>
+    <div className="flex flex-col">
+      <PageHeader className="z-10 flex items-center justify-between">
+        <SidebarTrigger name={Sidebars.Deployments}>
+          <IconMenu2 className="h-4 w-4" />
+        </SidebarTrigger>
         <CreateDeploymentDialog>
           <Button variant="outline" size="sm">
             Create Deployment
           </Button>
         </CreateDeploymentDialog>
-      </div>
+      </PageHeader>
+
       <DeploymentsCard workspaceId={workspace.id} />
     </div>
   );