chore: argocd view

Author: adityachoudhari26

apps/web/app/routes/ws/deployments/settings/_components/ArgoCD.tsx

@@ -0,0 +1,97 @@
+import type { UseFormReturn } from "react-hook-form";
+import Editor from "@monaco-editor/react";
+import yaml from "js-yaml";
+import _ from "lodash";
+import { z } from "zod";
+
+import { useTheme } from "~/components/ThemeProvider";
+import { FormField } from "~/components/ui/form";
+
+// Example default ArgoCD Application YAML config shown if the config is empty
+const DEFAULT_CONFIG = {
+  apiVersion: "argoproj.io/v1alpha1",
+  kind: "Application",
+  metadata: {
+    name: "{{.Resource.Name}}-application",
+    namespace: "argocd",
+    labels: {
+      "app.kubernetes.io/name": "{{.Resource.Name}}",
+      environment: "{{.Environment.Name}}",
+      deployment: "{{.Deployment.Name}}",
+      resource: "{{.Resource.Name}}",
+    },
+  },
+  spec: {
+    project: "default",
+    source: {
+      repoURL: "https://github.com/YOUR_ORG/YOUR_REPO.git",
+      path: "YOUR_PATH_IN_REPO",
+      targetRevision: "HEAD",
+      helm: {
+        releaseName: "{{.Resource.Name}}",
+      },
+    },
+    destination: {
+      name: "{{.Resource.Identifier}}",
+      namespace: "default",
+    },
+    syncPolicy: {
+      automated: {
+        prune: true,
+        selfHeal: true,
+      },
+      syncOptions: ["CreateNamespace=true"],
+    },
+  },
+};
+
+const formSchema = z.object({
+  jobAgentId: z.string(),
+  jobAgentConfig: z.record(z.any()),
+});
+
+function getParsedConfig(config: Record<string, any>): Record<string, any> {
+  const template = config.template ?? "";
+  const yamlParsed = yaml.load(template) as Record<string, any>;
+  if ("spec" in yamlParsed) return yamlParsed;
+
+  const jsonParsed = JSON.parse(template) as Record<string, any>;
+  if ("spec" in jsonParsed) return jsonParsed;
+
+  return DEFAULT_CONFIG;
+}
+
+type Form = UseFormReturn<z.infer<typeof formSchema>>;
+
+type ArgoCDConfigProps = { form: Form };
+
+export function ArgoCDConfig({ form }: ArgoCDConfigProps) {
+  const { theme } = useTheme();
+  console.log(theme);
+  return (
+    <FormField
+      control={form.control}
+      name="jobAgentConfig"
+      render={({ field: { value, onChange } }) => {
+        const config = getParsedConfig(value);
+        const configString = yaml.dump(config);
+
+        const handleChange = (newValue: string) =>
+          onChange({ template: newValue });
+
+        return (
+          <div className="border">
+            <Editor
+              language="yaml"
+              theme={theme === "dark" ? "vs-dark" : "vs-light"}
+              options={{ minimap: { enabled: false } }}
+              value={configString}
+              onChange={(newValue) => handleChange(newValue ?? "")}
+              height="400px"
+            />
+          </div>
+        );
+      }}
+    />
+  );
+}

apps/web/app/routes/ws/deployments/settings/page.$deploymentId.job-agent.tsx

@@ -25,6 +25,7 @@ import {
 } from "~/components/ui/select";
 import { useWorkspace } from "~/components/WorkspaceProvider";
 import { useDeployment } from "../_components/DeploymentProvider";
+import { ArgoCDConfig } from "./_components/ArgoCD";
 import { GithubAgentConfig } from "./_components/GithubAgentConfig";
 import { useAllJobAgents, useSelectedJobAgent } from "./_hooks/job-agents";
 
@@ -90,6 +91,9 @@ function JobAgentConfigSection({
               {selectedJobAgent?.type === "github-app" && (
                 <GithubAgentConfig form={form} />
               )}
+              {selectedJobAgent?.type === "argo-cd" && (
+                <ArgoCDConfig form={form} />
+              )}
             </>
           </FormControl>
           <FormMessage />

apps/web/package.json

@@ -17,7 +17,7 @@
     "@dagrejs/dagre": "^1.1.5",
     "@hookform/resolvers": "catalog:",
     "@icons-pack/react-simple-icons": "^10.2.0",
-    "@monaco-editor/react": "^4.7.0",
+    "@monaco-editor/react": "4.8.0-rc.2",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -51,6 +51,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "isbot": "^5.1.31",
+    "js-yaml": "^4.1.0",
     "ldrs": "^1.1.9",
     "lodash": "catalog:",
     "lucide-react": "^0.441.0",
@@ -80,6 +81,7 @@
     "@openapitools/openapi-generator-cli": "^2.21.0",
     "@react-router/dev": "^7.9.2",
     "@tailwindcss/vite": "^4.1.13",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "catalog:",
     "@types/node": "^22",
     "@types/react": "catalog:react19",