feat: show diff of current vs proposed rendered argo CR

Author: adityachoudhari26

apps/web/app/lib/plan-sections.ts

@@ -0,0 +1,62 @@
+import yaml from "js-yaml";
+
+export type PlanSection = { name: string; content: string };
+
+const isArgoApplication = (doc: unknown): boolean => {
+  const d = doc as { apiVersion?: unknown; kind?: unknown } | null;
+  return (
+    typeof d?.apiVersion === "string" &&
+    d.apiVersion.startsWith("argoproj.io/") &&
+    d.kind === "Application"
+  );
+};
+
+function tryParseYamlStream(stream: string): unknown[] | null {
+  try {
+    return yaml
+      .loadAll(stream)
+      .filter(
+        (d) =>
+          d != null && (typeof d !== "object" || Object.keys(d).length > 0),
+      );
+  } catch {
+    return null;
+  }
+}
+
+export function extractPlanSections(stream: string): PlanSection[] {
+  if (!stream.trim()) return [];
+
+  const docs = tryParseYamlStream(stream);
+  if (docs == null) return [{ name: "Rendered Manifests", content: stream }];
+
+  const cr = docs.filter(isArgoApplication);
+  const manifests = docs.filter((d) => !isArgoApplication(d));
+
+  return [
+    ...(cr.length > 0
+      ? [
+          {
+            name: "Application CR",
+            content: cr.map((d) => yaml.dump(d)).join("---\n"),
+          },
+        ]
+      : []),
+    ...(manifests.length > 0
+      ? [
+          {
+            name: "Rendered Manifests",
+            content: manifests.map((d) => yaml.dump(d)).join("---\n"),
+          },
+        ]
+      : []),
+  ];
+}
+
+export function unionSectionNames(...streams: string[]): string[] {
+  const names = new Set<string>();
+  for (const s of streams) {
+    for (const sec of extractPlanSections(s)) names.add(sec.name);
+  }
+  return [...names];
+}

apps/web/app/routes/ws/deployments/_components/plans/PlanDetailPageHeader.tsx

@@ -0,0 +1,68 @@
+import { Link, useParams } from "react-router";
+
+import { trpc } from "~/api/trpc";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+import { Separator } from "~/components/ui/separator";
+import { SidebarTrigger } from "~/components/ui/sidebar";
+import { useWorkspace } from "~/components/WorkspaceProvider";
+import { useDeployment } from "../DeploymentProvider";
+import { DeploymentsNavbarTabs } from "../DeploymentsNavbarTabs";
+
+export function PlanDetailPageHeader() {
+  const { workspace } = useWorkspace();
+  const { deployment } = useDeployment();
+  const { planId } = useParams<{ planId: string }>();
+
+  const resultsQuery = trpc.deployment.plans.results.useQuery(
+    { deploymentId: deployment.id, planId: planId! },
+    { enabled: !!planId },
+  );
+  const version = resultsQuery.data?.version;
+
+  return (
+    <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-b pr-4">
+      <div className="flex items-center gap-2 px-4">
+        <SidebarTrigger className="-ml-1" />
+        <Separator
+          orientation="vertical"
+          className="mr-2 data-[orientation=vertical]:h-4"
+        />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <Link to={`/${workspace.slug}/deployments`}>Deployments</Link>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <Link to={`/${workspace.slug}/deployments/${deployment.id}`}>
+                {deployment.name}
+              </Link>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <Link
+                to={`/${workspace.slug}/deployments/${deployment.id}/plans`}
+              >
+                Plans
+              </Link>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbPage className="max-w-xs truncate font-mono">
+              {version?.name ?? version?.tag ?? planId}
+            </BreadcrumbPage>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <DeploymentsNavbarTabs />
+      </div>
+    </header>
+  );
+}