orcheo-studio 0.21.1

package/src/features/workflow/components/dialogs/edit-credential-dialog.tsx

@@ -0,0 +1,264 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
+import { Input } from "@/design-system/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import type {
+  Credential,
+  CredentialUpdateInput,
+  CredentialVaultAccessLevel,
+} from "@features/workflow/types/credential-vault";
+
+type CredentialAccess = CredentialVaultAccessLevel;
+
+interface EditCredentialDialogProps {
+  credential: Credential | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUpdateCredential?: (
+    id: string,
+    updates: CredentialUpdateInput,
+  ) => Promise<void> | void;
+}
+
+export function EditCredentialDialog({
+  credential,
+  open,
+  onOpenChange,
+  onUpdateCredential,
+}: EditCredentialDialogProps) {
+  const [name, setName] = useState("");
+  const [provider, setProvider] = useState("");
+  const [access, setAccess] = useState<CredentialAccess>("scoped");
+  const [secret, setSecret] = useState("");
+  const [initialSecret, setInitialSecret] = useState("");
+  const [isSecretVisible, setIsSecretVisible] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (!credential || !open) {
+      return;
+    }
+
+    const credentialSecret = credential.secrets
+      ? (credential.secrets.secret ??
+        Object.values(credential.secrets)[0] ??
+        "")
+      : "";
+
+    setName(credential.name);
+    setProvider(credential.provider ?? "");
+    setAccess(credential.access);
+    setSecret(credentialSecret);
+    setInitialSecret(credentialSecret);
+    setIsSecretVisible(false);
+    setError(null);
+    setIsSaving(false);
+  }, [credential, open]);
+
+  const handleSave = async () => {
+    if (!credential || !onUpdateCredential) {
+      return;
+    }
+
+    const trimmedName = name.trim();
+    const trimmedProvider = provider.trim();
+    const trimmedSecret = secret.trim();
+    const trimmedInitialSecret = initialSecret.trim();
+    if (!trimmedName) {
+      setError("Credential name is required.");
+      return;
+    }
+    if (!trimmedProvider) {
+      setError("Provider is required.");
+      return;
+    }
+
+    const updates: CredentialUpdateInput = {};
+    if (trimmedName !== credential.name) {
+      updates.name = trimmedName;
+    }
+    const existingProvider = (credential.provider ?? "").trim();
+    if (trimmedProvider !== existingProvider) {
+      updates.provider = trimmedProvider;
+    }
+    if (access !== credential.access) {
+      updates.access = access;
+    }
+    if (trimmedSecret.length > 0 && trimmedSecret !== trimmedInitialSecret) {
+      updates.secrets = { secret: trimmedSecret };
+    }
+
+    if (Object.keys(updates).length === 0) {
+      setError("No changes detected.");
+      return;
+    }
+
+    setError(null);
+    setIsSaving(true);
+    try {
+      await onUpdateCredential(credential.id, updates);
+      onOpenChange(false);
+    } catch (updateError) {
+      setError(
+        updateError instanceof Error
+          ? updateError.message
+          : "Unable to update credential.",
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const isSaveDisabled = useMemo(
+    () => !credential || isSaving,
+    [credential, isSaving],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Edit Credential</DialogTitle>
+          <DialogDescription>
+            Update credential metadata or rotate the secret value.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="edit-credential-name"
+              className="text-right text-sm font-medium"
+            >
+              Name
+            </label>
+            <Input
+              id="edit-credential-name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="edit-credential-provider"
+              className="text-right text-sm font-medium"
+            >
+              Provider
+            </label>
+            <Input
+              id="edit-credential-provider"
+              value={provider}
+              onChange={(event) => setProvider(event.target.value)}
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="edit-credential-access"
+              className="text-right text-sm font-medium"
+            >
+              Access
+            </label>
+            <Select
+              value={access}
+              onValueChange={(value: CredentialAccess) => setAccess(value)}
+            >
+              <SelectTrigger id="edit-credential-access" className="col-span-3">
+                <SelectValue placeholder="Select access level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="scoped">Scoped</SelectItem>
+                <SelectItem value="shared">Shared</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {access === "scoped" && credential?.workflowId ? (
+            <div className="grid grid-cols-4 items-center gap-4">
+              <span className="text-right text-sm font-medium">
+                Workflow ID
+              </span>
+              <code
+                className="col-span-3 truncate rounded bg-muted px-2 py-1 text-xs font-mono"
+                title={credential.workflowId}
+                data-testid="edit-credential-workflow-id"
+              >
+                {credential.workflowId}
+              </code>
+            </div>
+          ) : null}
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="edit-credential-secret"
+              className="text-right text-sm font-medium"
+            >
+              Secret
+            </label>
+            <div className="col-span-3 flex items-center gap-2">
+              <Input
+                id="edit-credential-secret"
+                type={isSecretVisible ? "text" : "password"}
+                value={secret}
+                onChange={(event) => setSecret(event.target.value)}
+                className="flex-1"
+                placeholder="Enter a secret value"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 shrink-0"
+                onClick={() => setIsSecretVisible((previous) => !previous)}
+                disabled={!secret}
+                aria-label={`${isSecretVisible ? "Hide" : "Show"} secret value`}
+              >
+                {isSecretVisible ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+        {error ? (
+          <p className="px-1 text-sm text-destructive">{error}</p>
+        ) : null}
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSaving}
+          >
+            Cancel
+          </Button>
+          <Button onClick={() => void handleSave()} disabled={isSaveDisabled}>
+            {isSaving ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              "Save Changes"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/workflow/components/dialogs/update-workflow-dialog.tsx

@@ -0,0 +1,214 @@
+import { useCallback, useRef, useState } from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import { toast } from "@/hooks/use-toast";
+import { updateWorkflowFromFiles } from "@features/workflow/lib/workflow-storage";
+
+interface UpdateWorkflowDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  workflowId: string;
+  workflowName: string;
+}
+
+export function UpdateWorkflowDialog({
+  open,
+  onOpenChange,
+  workflowId,
+  workflowName,
+}: UpdateWorkflowDialogProps) {
+  const scriptInputRef = useRef<HTMLInputElement>(null);
+  const configInputRef = useRef<HTMLInputElement>(null);
+
+  const [scriptContent, setScriptContent] = useState<string | null>(null);
+  const [scriptFileName, setScriptFileName] = useState("");
+  const [configContent, setConfigContent] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const reset = useCallback(() => {
+    setScriptContent(null);
+    setScriptFileName("");
+    setConfigContent(null);
+    setIsUpdating(false);
+    setError(null);
+    if (scriptInputRef.current) {
+      scriptInputRef.current.value = "";
+    }
+    if (configInputRef.current) {
+      configInputRef.current.value = "";
+    }
+  }, []);
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) {
+        reset();
+      }
+      onOpenChange(nextOpen);
+    },
+    [onOpenChange, reset],
+  );
+
+  const handleScriptFileChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) {
+        return;
+      }
+      setScriptFileName(file.name);
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const text = e.target?.result;
+        if (typeof text === "string") {
+          setScriptContent(text);
+        }
+      };
+      reader.readAsText(file);
+    },
+    [],
+  );
+
+  const handleConfigFileChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const text = e.target?.result;
+        if (typeof text !== "string") {
+          return;
+        }
+        try {
+          const parsed = JSON.parse(text) as Record<string, unknown>;
+          setConfigContent(parsed);
+          setError(null);
+        } catch {
+          setError("config.json is not valid JSON.");
+          setConfigContent(null);
+        }
+      };
+      reader.readAsText(file);
+    },
+    [],
+  );
+
+  const handleUpdate = useCallback(async () => {
+    if (!scriptContent) {
+      return;
+    }
+    setIsUpdating(true);
+    setError(null);
+    try {
+      await updateWorkflowFromFiles(workflowId, scriptContent, configContent);
+      toast({
+        title: "Workflow updated",
+        description: `"${workflowName}" has been updated with a new version.`,
+      });
+      handleOpenChange(false);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Update failed. Please try again.";
+      setError(message);
+      toast({
+        title: "Update failed",
+        description: message,
+        variant: "destructive",
+      });
+    } finally {
+      setIsUpdating(false);
+    }
+  }, [
+    scriptContent,
+    configContent,
+    workflowId,
+    workflowName,
+    handleOpenChange,
+  ]);
+
+  const canUpdate = Boolean(scriptContent);
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Update Workflow</DialogTitle>
+          <DialogDescription>
+            Upload a new Python script and optional JSON config to create a new
+            version of &ldquo;{workflowName}&rdquo;.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="update-script">
+              Workflow Script <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="update-script"
+              ref={scriptInputRef}
+              type="file"
+              accept=".py"
+              onChange={handleScriptFileChange}
+              disabled={isUpdating}
+            />
+            {scriptFileName && (
+              <p className="text-xs text-muted-foreground">{scriptFileName}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="update-config">Config (optional)</Label>
+            <Input
+              id="update-config"
+              ref={configInputRef}
+              type="file"
+              accept=".json"
+              onChange={handleConfigFileChange}
+              disabled={isUpdating}
+            />
+          </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={isUpdating}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => void handleUpdate()}
+            disabled={!canUpdate || isUpdating}
+          >
+            {isUpdating ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Updating...
+              </>
+            ) : (
+              <>
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Update
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}