orcheo-studio 0.21.1

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

@@ -0,0 +1,288 @@
+import { useCallback, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Loader2, Upload } 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 { uploadWorkflowFromFiles } from "@features/workflow/lib/workflow-storage";
+import { getWorkflowRouteRef } from "@features/workflow/lib/workflow-storage-helpers";
+import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
+import { getWorkspaceWorkflowPath } from "@/lib/workspace-routing";
+
+interface UploadWorkflowDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const MAX_SCRIPT_UPLOAD_BYTES = 1024 * 1024;
+const MAX_CONFIG_UPLOAD_BYTES = 256 * 1024;
+const JSON_CONFIG_MIME_TYPES = new Set(["", "application/json", "text/json"]);
+
+const formatUploadLimit = (bytes: number): string => {
+  if (bytes >= 1024 * 1024) {
+    return `${bytes / (1024 * 1024)} MB`;
+  }
+  return `${bytes / 1024} KB`;
+};
+
+const validateUploadFile = (
+  file: File,
+  options: {
+    label: string;
+    extension: string;
+    maxBytes: number;
+  },
+): string | null => {
+  if (!file.name.toLowerCase().endsWith(options.extension)) {
+    return `${options.label} must use the ${options.extension} extension.`;
+  }
+  if (file.size > options.maxBytes) {
+    return `${options.label} must be ${formatUploadLimit(options.maxBytes)} or smaller.`;
+  }
+  return null;
+};
+
+export function UploadWorkflowDialog({
+  open,
+  onOpenChange,
+}: UploadWorkflowDialogProps) {
+  const navigate = useNavigate();
+  const scriptInputRef = useRef<HTMLInputElement>(null);
+  const configInputRef = useRef<HTMLInputElement>(null);
+
+  const [workflowName, setWorkflowName] = useState("");
+  const [scriptContent, setScriptContent] = useState<string | null>(null);
+  const [scriptFileName, setScriptFileName] = useState("");
+  const [configContent, setConfigContent] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const reset = useCallback(() => {
+    setWorkflowName("");
+    setScriptContent(null);
+    setScriptFileName("");
+    setConfigContent(null);
+    setIsUploading(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;
+      }
+      const validationError = validateUploadFile(file, {
+        label: "Workflow script",
+        extension: ".py",
+        maxBytes: MAX_SCRIPT_UPLOAD_BYTES,
+      });
+      if (validationError) {
+        setError(validationError);
+        setScriptContent(null);
+        setScriptFileName("");
+        event.target.value = "";
+        return;
+      }
+      setError(null);
+      setScriptFileName(file.name);
+      if (!workflowName) {
+        const nameWithoutExt = file.name.replace(/\.py$/i, "");
+        setWorkflowName(nameWithoutExt);
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const text = e.target?.result;
+        if (typeof text === "string") {
+          setScriptContent(text);
+        }
+      };
+      reader.readAsText(file);
+    },
+    [workflowName],
+  );
+
+  const handleConfigFileChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) {
+        return;
+      }
+      const validationError = validateUploadFile(file, {
+        label: "Config file",
+        extension: ".json",
+        maxBytes: MAX_CONFIG_UPLOAD_BYTES,
+        acceptedMimeTypes: JSON_CONFIG_MIME_TYPES,
+      });
+      if (validationError) {
+        setError(validationError);
+        setConfigContent(null);
+        event.target.value = "";
+        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 handleUpload = useCallback(async () => {
+    if (!scriptContent || !workflowName.trim()) {
+      return;
+    }
+    setIsUploading(true);
+    setError(null);
+    try {
+      const stored = await uploadWorkflowFromFiles(
+        workflowName.trim(),
+        scriptContent,
+        configContent,
+      );
+      toast({
+        title: "Workflow uploaded",
+        description: `"${stored.name}" has been added to your workspace.`,
+      });
+      handleOpenChange(false);
+      navigate(
+        getWorkspaceWorkflowPath(
+          getSelectedWorkspaceSlug(),
+          getWorkflowRouteRef(stored),
+        ),
+      );
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Upload failed. Please try again.";
+      setError(message);
+      toast({
+        title: "Upload failed",
+        description: message,
+        variant: "destructive",
+      });
+    } finally {
+      setIsUploading(false);
+    }
+  }, [scriptContent, workflowName, configContent, handleOpenChange, navigate]);
+
+  const canUpload = Boolean(scriptContent) && workflowName.trim().length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Upload Workflow</DialogTitle>
+          <DialogDescription>
+            Upload a Python workflow script and an optional JSON config to
+            create a new workflow.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="upload-script">
+              Workflow Script <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="upload-script"
+              ref={scriptInputRef}
+              type="file"
+              accept=".py"
+              onChange={handleScriptFileChange}
+              disabled={isUploading}
+            />
+            {scriptFileName && (
+              <p className="text-xs text-muted-foreground">{scriptFileName}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="upload-config">Config (optional)</Label>
+            <Input
+              id="upload-config"
+              ref={configInputRef}
+              type="file"
+              accept=".json"
+              onChange={handleConfigFileChange}
+              disabled={isUploading}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="upload-name">Workflow Name</Label>
+            <Input
+              id="upload-name"
+              value={workflowName}
+              onChange={(e) => setWorkflowName(e.target.value)}
+              placeholder="Enter workflow name"
+              disabled={isUploading}
+            />
+          </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={isUploading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => void handleUpload()}
+            disabled={!canUpload || isUploading}
+          >
+            {isUploading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Uploading...
+              </>
+            ) : (
+              <>
+                <Upload className="mr-2 h-4 w-4" />
+                Upload
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/workflow/components/forms/schema-config-form.tsx

@@ -0,0 +1,41 @@
+import Form from "@rjsf/core";
+import type { RegistryFieldsType, RJSFSchema, UiSchema } from "@rjsf/utils";
+
+import {
+  customTemplates,
+  customWidgets,
+  validator,
+} from "@features/workflow/components/panels/rjsf-theme";
+
+interface SchemaConfigFormProps {
+  schema: RJSFSchema;
+  uiSchema?: UiSchema;
+  formData: Record<string, unknown>;
+  onChange: (next: Record<string, unknown>) => void;
+  fields?: RegistryFieldsType;
+}
+
+export function SchemaConfigForm({
+  schema,
+  uiSchema,
+  formData,
+  onChange,
+  fields,
+}: SchemaConfigFormProps) {
+  return (
+    <Form
+      schema={schema}
+      uiSchema={uiSchema}
+      formData={formData}
+      onChange={(event) => {
+        onChange((event.formData as Record<string, unknown>) ?? {});
+      }}
+      validator={validator}
+      widgets={customWidgets}
+      fields={fields}
+      templates={customTemplates}
+    >
+      <div className="hidden" />
+    </Form>
+  );
+}

package/src/features/workflow/components/layouts/sidebar-layout.tsx

@@ -0,0 +1,288 @@
+import React, { useEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/design-system/ui/button";
+import { cn } from "@/lib/utils";
+
+import { useSidebarResize } from "./use-sidebar-resize";
+
+export interface SidebarLayoutProps {
+  /**
+   * Sidebar content
+   */
+  sidebar: React.ReactNode;
+
+  /**
+   * Main content area
+   */
+  children: React.ReactNode;
+
+  /**
+   * Whether the sidebar is collapsed
+   */
+  isCollapsed?: boolean;
+
+  /**
+   * Callback when sidebar collapse state changes
+   */
+  onToggleCollapse?: () => void;
+
+  /**
+   * Sidebar width when expanded (default: 300px)
+   */
+  sidebarWidth?: number;
+
+  /**
+   * Sidebar width when collapsed (default: 50px)
+   */
+  collapsedWidth?: number;
+
+  /**
+   * Whether the sidebar is resizable
+   */
+  resizable?: boolean;
+
+  /**
+   * Minimum sidebar width when resizing (default: 200px)
+   */
+  minWidth?: number;
+
+  /**
+   * Maximum sidebar width when resizing (default: 500px)
+   */
+  maxWidth?: number;
+
+  /**
+   * Callback when sidebar width changes
+   */
+  onWidthChange?: (width: number) => void;
+
+  /**
+   * Whether to show collapse button
+   */
+  showCollapseButton?: boolean;
+
+  /**
+   * Sidebar position
+   */
+  position?: "left" | "right";
+
+  /**
+   * Additional CSS classes for the container
+   */
+  className?: string;
+
+  /**
+   * Additional CSS classes for the sidebar
+   */
+  sidebarClassName?: string;
+
+  /**
+   * Additional CSS classes for the main content
+   */
+  mainClassName?: string;
+
+  /**
+   * Whether the collapsed sidebar should overlay the content instead of
+   * reserving layout width.
+   */
+  collapsedOverlay?: boolean;
+}
+
+/**
+ * SidebarLayout - A reusable layout component with a collapsible, optionally
+ * resizable sidebar and a main content area.
+ *
+ * This component provides:
+ * - Collapsible sidebar with smooth transitions
+ * - Optional resize handle for adjusting sidebar width
+ * - Consistent styling across pages
+ * - Support for left or right sidebar positioning
+ * - Responsive behavior
+ */
+export default function SidebarLayout({
+  sidebar,
+  children,
+  isCollapsed = false,
+  onToggleCollapse,
+  sidebarWidth = 300,
+  collapsedWidth = 50,
+  resizable = false,
+  minWidth = 200,
+  maxWidth = 500,
+  onWidthChange,
+  showCollapseButton = true,
+  position = "left",
+  className,
+  sidebarClassName,
+  mainClassName,
+  collapsedOverlay = false,
+}: SidebarLayoutProps) {
+  const currentWidth = isCollapsed ? collapsedWidth : sidebarWidth;
+  const renderedWidth = isCollapsed && collapsedOverlay ? 0 : currentWidth;
+  const [isResizing, setIsResizing] = useState(false);
+  const leftAsideRef = useRef<HTMLElement | null>(null);
+  const rightAsideRef = useRef<HTMLElement | null>(null);
+
+  const setSidebarWidthVariable = (
+    aside: HTMLElement | null,
+    width: number,
+  ): void => {
+    aside?.style.setProperty("--sidebar-layout-width", `${width}px`);
+  };
+
+  useEffect(() => {
+    setSidebarWidthVariable(leftAsideRef.current, renderedWidth);
+    setSidebarWidthVariable(rightAsideRef.current, renderedWidth);
+  }, [renderedWidth]);
+
+  const { handleMouseDown } = useSidebarResize({
+    resizable,
+    isCollapsed,
+    sidebarWidth,
+    minWidth,
+    maxWidth,
+    position,
+    onWidthChange,
+    onLiveWidthChange: (width) => {
+      if (position === "left") {
+        setSidebarWidthVariable(leftAsideRef.current, width);
+        return;
+      }
+      setSidebarWidthVariable(rightAsideRef.current, width);
+    },
+    onResizeStart: () => {
+      setIsResizing(true);
+      // Immediately disable the CSS transition via direct DOM mutation so the
+      // sidebar edge snaps to the cursor on the very first RAF tick, before the
+      // React re-render that removes the transition class can fire.
+      const aside =
+        position === "left" ? leftAsideRef.current : rightAsideRef.current;
+      aside?.style.setProperty("transition", "none");
+    },
+    onResizeEnd: () => {
+      setIsResizing(false);
+      const aside =
+        position === "left" ? leftAsideRef.current : rightAsideRef.current;
+      aside?.style.removeProperty("transition");
+    },
+  });
+
+  return (
+    <div className={cn("flex h-full min-h-0 overflow-hidden", className)}>
+      {position === "left" && (
+        <>
+          <aside
+            ref={leftAsideRef}
+            className={cn(
+              "relative flex h-full shrink-0 flex-col",
+              isCollapsed && collapsedOverlay
+                ? "overflow-visible border-0 bg-transparent"
+                : "border-r border-border bg-card",
+              !isResizing && "transition-[width] duration-300",
+              sidebarClassName,
+            )}
+            style={{
+              width: "var(--sidebar-layout-width)",
+              willChange: isResizing ? "width" : undefined,
+            }}
+          >
+            {sidebar}
+
+            {isResizing && <div className="absolute inset-0 z-10" />}
+
+            {showCollapseButton && onToggleCollapse && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onToggleCollapse}
+                className="absolute top-3 right-3 z-10"
+                title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              >
+                {isCollapsed ? (
+                  <ChevronRight className="h-5 w-5" />
+                ) : (
+                  <ChevronLeft className="h-5 w-5" />
+                )}
+              </Button>
+            )}
+
+            {resizable && !isCollapsed && (
+              <div
+                data-testid="sidebar-resize-handle"
+                className="absolute top-0 right-0 bottom-0 w-2 cursor-col-resize hover:bg-primary/20 transition-colors"
+                onMouseDown={handleMouseDown}
+              />
+            )}
+          </aside>
+          <main
+            className={cn(
+              "flex-1 h-full min-h-0 min-w-0 overflow-hidden",
+              isResizing && "pointer-events-none",
+              mainClassName,
+            )}
+          >
+            {children}
+          </main>
+        </>
+      )}
+
+      {position === "right" && (
+        <>
+          <main
+            className={cn(
+              "flex-1 h-full min-h-0 min-w-0 overflow-hidden",
+              isResizing && "pointer-events-none",
+              mainClassName,
+            )}
+          >
+            {children}
+          </main>
+          <aside
+            ref={rightAsideRef}
+            className={cn(
+              "relative flex h-full shrink-0 flex-col",
+              isCollapsed && collapsedOverlay
+                ? "overflow-visible border-0 bg-transparent"
+                : "border-l border-border bg-card",
+              !isResizing && "transition-[width] duration-300",
+              sidebarClassName,
+            )}
+            style={{
+              width: "var(--sidebar-layout-width)",
+              willChange: isResizing ? "width" : undefined,
+            }}
+          >
+            {sidebar}
+
+            {isResizing && <div className="absolute inset-0 z-10" />}
+
+            {showCollapseButton && onToggleCollapse && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onToggleCollapse}
+                className="absolute top-3 left-3 z-10"
+                title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              >
+                {isCollapsed ? (
+                  <ChevronLeft className="h-5 w-5" />
+                ) : (
+                  <ChevronRight className="h-5 w-5" />
+                )}
+              </Button>
+            )}
+
+            {resizable && !isCollapsed && (
+              <div
+                data-testid="sidebar-resize-handle"
+                className="absolute top-0 left-0 bottom-0 w-2 cursor-col-resize hover:bg-primary/20 transition-colors"
+                onMouseDown={handleMouseDown}
+              />
+            )}
+          </aside>
+        </>
+      )}
+    </div>
+  );
+}