fix: Add workflow link to github agent form

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/workflow/DeploymentJobAgentGithubConfig.tsx

@@ -3,12 +3,14 @@ import { useState } from "react";
 import Link from "next/link";
 import {
   IconBrandGithub,
+  IconExternalLink,
   IconLoader2,
   IconSelector,
 } from "@tabler/icons-react";
 
+import { cn } from "@ctrlplane/ui";
 import { Avatar, AvatarFallback, AvatarImage } from "@ctrlplane/ui/avatar";
-import { Button } from "@ctrlplane/ui/button";
+import { Button, buttonVariants } from "@ctrlplane/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -27,7 +29,8 @@ export const DeploymentJobAgentGithubConfig: React.FC<{
   jobAgentId: string;
   value: Record<string, any>;
   onChange: (v: Record<string, any>) => void;
-}> = ({ jobAgentId, value, onChange }) => {
+  disabled?: boolean;
+}> = ({ jobAgentId, value, onChange, disabled = false }) => {
   const [repoOpen, setRepoOpen] = useState(false);
   const [workflowOpen, setWorkflowOpen] = useState(false);
 
@@ -47,6 +50,10 @@ export const DeploymentJobAgentGithubConfig: React.FC<{
   const workflows = selectedRepo?.workflows ?? [];
   const selectedWorkflow = workflows.find((w) => w.id === value.workflowId);
 
+  const isChanged =
+    selectedRepo?.name !== value.repo ||
+    selectedWorkflow?.id !== value.workflowId;
+
   if (isGithubAgentLoading || isReposLoading)
     return (
       <div className="flex w-96 items-center justify-center gap-2 text-sm text-muted-foreground">
@@ -57,26 +64,17 @@ export const DeploymentJobAgentGithubConfig: React.FC<{
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-2">
         <Avatar className="size-14">
           <AvatarImage src={githubAgent?.ghEntity.avatarUrl ?? ""} />
           <AvatarFallback>
             <IconBrandGithub />
           </AvatarFallback>
         </Avatar>
-        <div className="flex flex-col">
-          <span className="text-2xl font-semibold">
-            {githubAgent?.ghEntity.slug}
-          </span>
-          <Link
-            href={`https://github.com/${githubAgent?.ghEntity.slug ?? ""}`}
-            className="text-sm hover:text-primary"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            View on GitHub
-          </Link>
-        </div>
+
+        <span className="text-2xl font-semibold">
+          {githubAgent?.ghEntity.slug}
+        </span>
       </div>
 
       <div className="flex w-96 flex-col gap-6">
@@ -188,6 +186,27 @@ export const DeploymentJobAgentGithubConfig: React.FC<{
           />
         </div>
       </div>
+
+      <div className="flex items-center gap-2">
+        <Button type="submit" disabled={disabled || !isChanged}>
+          Save
+        </Button>
+
+        {selectedWorkflow != null && (
+          <Link
+            href={selectedWorkflow.html_url}
+            className={cn(
+              buttonVariants({ variant: "outline" }),
+              "flex items-center gap-2",
+            )}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconExternalLink className="h-4 w-4" />
+            Workflow
+          </Link>
+        )}
+      </div>
     </div>
   );
 };

apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/workflow/JobAgentSection.tsx

@@ -7,7 +7,6 @@ import _ from "lodash";
 import { z } from "zod";
 
 import { Alert, AlertDescription, AlertTitle } from "@ctrlplane/ui/alert";
-import { Button } from "@ctrlplane/ui/button";
 import { Form, FormField, useForm } from "@ctrlplane/ui/form";
 import { JobAgentType } from "@ctrlplane/validators/jobs";
 
@@ -38,7 +37,7 @@ const JobAgentForm: React.FC<{
     update.mutateAsync({ id: deploymentId, data }).then(() => router.refresh()),
   );
 
-  const { jobAgentId, jobAgentConfig: formConfig } = form.watch();
+  const { jobAgentId } = form.watch();
   const selectedJobAgent = jobAgents.find((j) => j.id === jobAgentId);
 
   return (
@@ -75,6 +74,7 @@ const JobAgentForm: React.FC<{
                 <DeploymentJobAgentGithubConfig
                   jobAgentId={jobAgentId}
                   {...field}
+                  disabled={update.isPending}
                 />
               )}
               {selectedJobAgent?.type.startsWith("exec-") && (
@@ -85,18 +85,12 @@ const JobAgentForm: React.FC<{
                       : "shell"
                   }
                   {...field}
+                  disabled={update.isPending}
                 />
               )}
             </>
           )}
         />
-
-        <Button
-          type="submit"
-          disabled={update.isPending || _.isEqual(formConfig, jobAgentConfig)}
-        >
-          Save
-        </Button>
       </form>
     </Form>
   );

apps/webservice/src/components/form/job-agent/JobAgentKubernetesConfig.tsx

@@ -4,6 +4,8 @@ import React, { useEffect } from "react";
 import Editor, { loader } from "@monaco-editor/react";
 import colors from "tailwindcss/colors";
 
+import { Button } from "@ctrlplane/ui/button";
+
 const defaultManifest = `apiVersion: batch/v1
 kind: Job
 metadata:
@@ -32,7 +34,8 @@ spec:
 export const JobAgentKubernetesConfig: React.FC<{
   value: Record<string, any>;
   onChange: (v: Record<string, any>) => void;
-}> = ({ value, onChange }) => {
+  disabled?: boolean;
+}> = ({ value, onChange, disabled = false }) => {
   useEffect(() => {
     loader.init().then((monaco) => {
       monaco.editor.defineTheme("vs-dark-custom", {
@@ -52,14 +55,17 @@ export const JobAgentKubernetesConfig: React.FC<{
     }
   }, [value, onChange]);
   return (
-    <div className="p-2">
+    <div className="space-y-4 p-2">
       <Editor
         height="500px"
         defaultLanguage="yaml"
         value={value.manifest}
         theme="vs-dark-custom"
         onChange={(v) => onChange({ manifest: v })}
       />
+      <Button type="submit" disabled={disabled}>
+        Save
+      </Button>
     </div>
   );
 };

apps/webservice/src/components/form/job-agent/JobAgentScriptConfig.tsx

@@ -4,6 +4,8 @@ import React, { useEffect } from "react";
 import Editor, { loader } from "@monaco-editor/react";
 import colors from "tailwindcss/colors";
 
+import { Button } from "@ctrlplane/ui/button";
+
 const defaultBash = `echo "Releasing {{ .release.version }} on {{ .resource.name }}"
 `;
 
@@ -14,7 +16,8 @@ export const JobAgentScriptConfig: React.FC<{
   type: "shell" | "powershell";
   value: Record<string, any>;
   onChange: (v: Record<string, any>) => void;
-}> = ({ type, value, onChange }) => {
+  disabled?: boolean;
+}> = ({ type, value, onChange, disabled = false }) => {
   useEffect(() => {
     loader.init().then((monaco) => {
       monaco.editor.defineTheme("vs-dark-custom", {
@@ -35,14 +38,17 @@ export const JobAgentScriptConfig: React.FC<{
   }, [type, value, onChange]);
 
   return (
-    <div className="p-2">
+    <div className="space-y-4 p-2">
       <Editor
         height="500px"
         defaultLanguage={type}
         value={value.script}
         theme="vs-dark-custom"
         onChange={(v) => onChange({ script: v })}
       />
+      <Button type="submit" disabled={disabled}>
+        Save
+      </Button>
     </div>
   );
 };