orcheo-canvas 0.0.1

package/src/features/workflow/components/dialogs/credentials-table.tsx

@@ -0,0 +1,234 @@
+import React, { useMemo, useState } from "react";
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/design-system/ui/table";
+import {
+  Copy,
+  Edit,
+  Eye,
+  EyeOff,
+  Key,
+  Loader2,
+  MoreHorizontal,
+  Trash,
+} from "lucide-react";
+import type { Credential } from "@features/workflow/types/credential-vault";
+import { CredentialAccessBadge } from "./credential-access-badge";
+import { CredentialStatusBadge } from "./credential-status-badge";
+
+interface CredentialsTableProps {
+  credentials: Credential[];
+  isLoading?: boolean;
+  searchQuery: string;
+  onDeleteCredential?: (id: string) => Promise<void> | void;
+}
+
+const SECRET_PLACEHOLDER = "••••••••••••••••";
+
+export function CredentialsTable({
+  credentials,
+  isLoading,
+  searchQuery,
+  onDeleteCredential,
+}: CredentialsTableProps) {
+  const [visibleSecrets, setVisibleSecrets] = useState<Record<string, boolean>>(
+    {},
+  );
+
+  const filteredCredentials = useMemo(() => {
+    if (!searchQuery) {
+      return credentials;
+    }
+    const normalizedQuery = searchQuery.toLowerCase();
+    return credentials.filter((credential) => {
+      const type = credential.type?.toLowerCase() ?? "";
+      return (
+        credential.name.toLowerCase().includes(normalizedQuery) ||
+        type.includes(normalizedQuery)
+      );
+    });
+  }, [credentials, searchQuery]);
+
+  const toggleSecretVisibility = (credentialId: string) => {
+    setVisibleSecrets((prev) => ({
+      ...prev,
+      [credentialId]: !prev[credentialId],
+    }));
+  };
+
+  const copySecret = async (credential: Credential) => {
+    const secret = credential.secrets
+      ? Object.values(credential.secrets)[0]
+      : undefined;
+    if (!secret || typeof navigator === "undefined") {
+      return;
+    }
+    await navigator.clipboard.writeText(secret);
+  };
+
+  return (
+    <div className="border rounded-md">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Access</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Secret</TableHead>
+            <TableHead>Last Updated</TableHead>
+            <TableHead className="w-[80px]" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={7} className="py-6 text-center">
+                <div className="flex items-center justify-center gap-2 text-muted-foreground">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Loading credentials...
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : null}
+          {!isLoading && filteredCredentials.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={7} className="text-center py-8">
+                <div className="text-muted-foreground">
+                  No credentials found
+                  {searchQuery ? (
+                    <p className="text-sm">Try adjusting your search query</p>
+                  ) : null}
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : null}
+          {!isLoading &&
+            filteredCredentials.map((credential) => {
+              const secret = credential.secrets
+                ? Object.values(credential.secrets)[0]
+                : undefined;
+              const secretVisible = visibleSecrets[credential.id];
+              return (
+                <TableRow key={credential.id}>
+                  <TableCell className="font-medium">
+                    <div className="flex items-center gap-2">
+                      <Key className="h-4 w-4 text-muted-foreground" />
+                      {credential.name}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">
+                      {credential.type ?? "unknown"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <CredentialAccessBadge access={credential.access} />
+                  </TableCell>
+                  <TableCell>
+                    <CredentialStatusBadge status={credential.status} />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div className="font-mono text-xs bg-muted px-2 py-1 rounded">
+                        {secret
+                          ? secretVisible
+                            ? secret
+                            : SECRET_PLACEHOLDER
+                          : "Not available"}
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={() => toggleSecretVisibility(credential.id)}
+                        disabled={!secret}
+                      >
+                        {secretVisible ? (
+                          <EyeOff className="h-3 w-3" />
+                        ) : (
+                          <Eye className="h-3 w-3" />
+                        )}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={() => secret && copySecret(credential)}
+                        disabled={!secret}
+                      >
+                        <Copy className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {new Date(credential.updatedAt).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell>
+                    <CredentialActionsMenu
+                      credentialId={credential.id}
+                      onDeleteCredential={onDeleteCredential}
+                    />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+interface CredentialActionsMenuProps {
+  credentialId: string;
+  onDeleteCredential?: (id: string) => Promise<void> | void;
+}
+
+function CredentialActionsMenu({
+  credentialId,
+  onDeleteCredential,
+}: CredentialActionsMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuItem>
+          <Edit className="h-4 w-4 mr-2" />
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Copy className="h-4 w-4 mr-2" />
+          Duplicate
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-destructive focus:text-destructive"
+          onClick={() => onDeleteCredential && onDeleteCredential(credentialId)}
+        >
+          <Trash className="h-4 w-4 mr-2" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/features/workflow/components/dialogs/credentials-vault.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo, useState } from "react";
+import { Input } from "@/design-system/ui/input";
+import { Search } from "lucide-react";
+import type {
+  Credential,
+  CredentialInput,
+} from "@features/workflow/types/credential-vault";
+import { AddCredentialDialog } from "./add-credential-dialog";
+import { CredentialsTable } from "./credentials-table";
+
+interface CredentialsVaultProps {
+  credentials?: Credential[];
+  isLoading?: boolean;
+  onAddCredential?: (credential: CredentialInput) => Promise<void> | void;
+  onDeleteCredential?: (id: string) => Promise<void> | void;
+  className?: string;
+}
+
+export default function CredentialsVault({
+  credentials = [],
+  isLoading = false,
+  onAddCredential,
+  onDeleteCredential,
+  className,
+}: CredentialsVaultProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const containerClassName = useMemo(
+    () =>
+      ["space-y-4", className]
+        .filter((value): value is string => Boolean(value && value.trim()))
+        .join(" "),
+    [className],
+  );
+
+  return (
+    <div className={containerClassName}>
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-bold">Credential Vault</h2>
+        <AddCredentialDialog onAddCredential={onAddCredential} />
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search credentials..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+          />
+        </div>
+      </div>
+
+      <CredentialsTable
+        credentials={credentials}
+        isLoading={isLoading}
+        searchQuery={searchQuery}
+        onDeleteCredential={onDeleteCredential}
+      />
+    </div>
+  );
+}

package/src/features/workflow/components/dialogs/notification-channel-card.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Switch } from "@/design-system/ui/switch";
+import { Bell, Mail, MessageSquare, Trash, Webhook } from "lucide-react";
+import {
+  NotificationChannel,
+  NotificationEventKey,
+} from "./notification-settings.types";
+import NotificationEventToggles from "./notification-event-toggles";
+
+interface NotificationChannelCardProps {
+  channel: NotificationChannel;
+  onToggleEnabled?: (id: string, enabled: boolean) => void;
+  onToggleEvent?: (
+    id: string,
+    event: NotificationEventKey,
+    value: boolean,
+  ) => void;
+  onDeleteChannel?: (id: string) => void;
+}
+
+const getChannelIcon = (type: NotificationChannel["type"]) => {
+  switch (type) {
+    case "email":
+      return <Mail className="h-5 w-5" />;
+    case "slack":
+      return <MessageSquare className="h-5 w-5" />;
+    case "webhook":
+      return <Webhook className="h-5 w-5" />;
+    default:
+      return <Bell className="h-5 w-5" />;
+  }
+};
+
+const NotificationChannelCard: React.FC<NotificationChannelCardProps> = ({
+  channel,
+  onToggleEnabled,
+  onToggleEvent,
+  onDeleteChannel,
+}) => {
+  const handleToggleEvent = (event: NotificationEventKey, value: boolean) => {
+    onToggleEvent?.(channel.id, event, value);
+  };
+
+  return (
+    <Card className={!channel.enabled ? "opacity-60" : ""}>
+      <CardHeader className="pb-2">
+        <div className="flex justify-between items-start">
+          <div className="flex items-center gap-2">
+            {getChannelIcon(channel.type)}
+            <CardTitle className="text-lg">{channel.name}</CardTitle>
+          </div>
+          <Switch
+            checked={channel.enabled}
+            onCheckedChange={(checked) =>
+              onToggleEnabled?.(channel.id, checked)
+            }
+          />
+        </div>
+        <CardDescription>
+          {channel.type === "email" && (
+            <span>Email to {channel.config.recipients?.join(", ")}</span>
+          )}
+          {channel.type === "slack" && (
+            <span>Slack channel {channel.config.slackChannel}</span>
+          )}
+          {channel.type === "webhook" && (
+            <span className="truncate block">
+              Webhook: {channel.config.webhookUrl}
+            </span>
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-2">
+        <NotificationEventToggles
+          idPrefix={channel.id}
+          events={channel.events}
+          onToggle={handleToggleEvent}
+          disabled={!channel.enabled}
+          size="sm"
+        />
+      </CardContent>
+      <CardFooter className="pt-2">
+        <Button
+          variant="outline"
+          size="sm"
+          className="text-destructive hover:text-destructive"
+          onClick={() => onDeleteChannel?.(channel.id)}
+        >
+          <Trash className="h-3 w-3 mr-1" />
+          Remove
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default NotificationChannelCard;

package/src/features/workflow/components/dialogs/notification-event-toggles.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Label } from "@/design-system/ui/label";
+import { Switch } from "@/design-system/ui/switch";
+import {
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  Settings,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  NotificationChannelEvents,
+  NotificationEventKey,
+} from "./notification-settings.types";
+
+const EVENT_OPTIONS: Array<{
+  key: NotificationEventKey;
+  label: string;
+  icon: LucideIcon;
+  colorClass: string;
+}> = [
+  {
+    key: "workflowSuccess",
+    label: "Workflow Success",
+    icon: CheckCircle,
+    colorClass: "text-green-500",
+  },
+  {
+    key: "workflowFailure",
+    label: "Workflow Failure",
+    icon: AlertCircle,
+    colorClass: "text-red-500",
+  },
+  {
+    key: "workflowStart",
+    label: "Workflow Start",
+    icon: Clock,
+    colorClass: "text-blue-500",
+  },
+  {
+    key: "systemAlerts",
+    label: "System Alerts",
+    icon: Settings,
+    colorClass: "text-amber-500",
+  },
+];
+
+interface NotificationEventTogglesProps {
+  idPrefix: string;
+  events: NotificationChannelEvents;
+  onToggle: (event: NotificationEventKey, value: boolean) => void;
+  disabled?: boolean;
+  size?: "sm" | "md";
+  labelClassName?: string;
+}
+
+const NotificationEventToggles: React.FC<NotificationEventTogglesProps> = ({
+  idPrefix,
+  events,
+  onToggle,
+  disabled = false,
+  size = "md",
+  labelClassName,
+}) => {
+  const iconSize = size === "sm" ? "h-3 w-3" : "h-4 w-4";
+
+  return (
+    <div className="grid grid-cols-1 gap-3">
+      {EVENT_OPTIONS.map(({ key, label, icon: Icon, colorClass }) => (
+        <div key={key} className="flex items-center justify-between">
+          <Label
+            htmlFor={`${idPrefix}-${key}`}
+            className={cn(
+              "flex items-center gap-2",
+              size === "sm" ? "text-sm" : undefined,
+              labelClassName,
+            )}
+          >
+            <Icon className={cn(iconSize, colorClass)} />
+            {label}
+          </Label>
+          <Switch
+            id={`${idPrefix}-${key}`}
+            checked={events[key]}
+            onCheckedChange={(checked) => onToggle(key, checked)}
+            disabled={disabled}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NotificationEventToggles;

package/src/features/workflow/components/dialogs/notification-settings.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import { Separator } from "@/design-system/ui/separator";
+import { Bell, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import AddNotificationChannelDialog from "./add-notification-channel-dialog";
+import NotificationChannelCard from "./notification-channel-card";
+import {
+  NotificationEventKey,
+  NotificationSettingsProps,
+  NewNotificationChannel,
+} from "./notification-settings.types";
+
+export default function NotificationSettings({
+  channels = [],
+  onAddChannel,
+  onUpdateChannel,
+  onDeleteChannel,
+  className,
+}: NotificationSettingsProps) {
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+
+  const handleAddChannel = (channel: NewNotificationChannel) => {
+    onAddChannel?.(channel);
+  };
+
+  const handleToggleEvent = (
+    channelId: string,
+    event: NotificationEventKey,
+    value: boolean,
+  ) => {
+    const channel = channels.find((c) => c.id === channelId);
+    if (channel && onUpdateChannel) {
+      onUpdateChannel(channelId, {
+        events: {
+          ...channel.events,
+          [event]: value,
+        },
+      });
+    }
+  };
+
+  const handleToggleEnabled = (channelId: string, enabled: boolean) => {
+    onUpdateChannel?.(channelId, { enabled });
+  };
+
+  const handleDeleteChannel = (channelId: string) => {
+    onDeleteChannel?.(channelId);
+  };
+
+  const renderEmptyState = () => (
+    <div className="text-center py-8 border border-dashed rounded-lg">
+      <Bell className="h-10 w-10 mx-auto text-muted-foreground mb-4" />
+      <h3 className="text-lg font-medium mb-2">No notification channels</h3>
+      <p className="text-sm text-muted-foreground mb-4">
+        Add a notification channel to get alerts about workflow events
+      </p>
+      <Button onClick={() => setIsAddDialogOpen(true)}>
+        <Plus className="h-4 w-4 mr-2" />
+        Add Channel
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      <div className="flex justify-between items-center">
+        <div>
+          <h3 className="text-lg font-medium flex items-center gap-2">
+            <Bell className="h-5 w-5" />
+            Notification Settings
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            Configure how you want to be notified about workflow events
+          </p>
+        </div>
+        <Button onClick={() => setIsAddDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Channel
+        </Button>
+      </div>
+
+      <Separator />
+
+      {channels.length === 0 ? (
+        renderEmptyState()
+      ) : (
+        <div className="grid gap-6 md:grid-cols-2">
+          {channels.map((channel) => (
+            <NotificationChannelCard
+              key={channel.id}
+              channel={channel}
+              onToggleEnabled={handleToggleEnabled}
+              onToggleEvent={handleToggleEvent}
+              onDeleteChannel={handleDeleteChannel}
+            />
+          ))}
+        </div>
+      )}
+
+      <AddNotificationChannelDialog
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        onAddChannel={handleAddChannel}
+      />
+    </div>
+  );
+}

package/src/features/workflow/components/dialogs/notification-settings.types.ts

@@ -0,0 +1,34 @@
+export type NotificationChannelType = "email" | "slack" | "webhook";
+
+export interface NotificationChannelConfig {
+  recipients?: string[];
+  webhookUrl?: string;
+  slackChannel?: string;
+}
+
+export interface NotificationChannelEvents {
+  workflowSuccess: boolean;
+  workflowFailure: boolean;
+  workflowStart: boolean;
+  systemAlerts: boolean;
+}
+
+export interface NotificationChannel {
+  id: string;
+  type: NotificationChannelType;
+  name: string;
+  enabled: boolean;
+  config: NotificationChannelConfig;
+  events: NotificationChannelEvents;
+}
+
+export type NewNotificationChannel = Omit<NotificationChannel, "id">;
+export type NotificationEventKey = keyof NotificationChannelEvents;
+
+export interface NotificationSettingsProps {
+  channels?: NotificationChannel[];
+  onAddChannel?: (channel: NewNotificationChannel) => void;
+  onUpdateChannel?: (id: string, channel: Partial<NotificationChannel>) => void;
+  onDeleteChannel?: (id: string) => void;
+  className?: string;
+}

package/src/features/workflow/components/dialogs/use-command-palette-navigation.ts

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import type React from "react";
+import type { CommandItem } from "./command-palette-types";
+
+interface NavigationOptions {
+  open: boolean;
+  filteredItems: CommandItem[];
+  selectedIndex: number;
+  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
+  onSelect: (item: CommandItem) => void;
+  onClose: () => void;
+}
+
+export const useCommandPaletteNavigation = ({
+  open,
+  filteredItems,
+  selectedIndex,
+  setSelectedIndex,
+  onSelect,
+  onClose,
+}: NavigationOptions) => {
+  useEffect(() => {
+    const targetWindow = typeof window !== "undefined" ? window : undefined;
+    if (!targetWindow) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!open) return;
+
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setSelectedIndex((prev) =>
+            Math.min(prev + 1, filteredItems.length - 1),
+          );
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (filteredItems[selectedIndex]) {
+            onSelect(filteredItems[selectedIndex]);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          onClose();
+          break;
+        default:
+          break;
+      }
+    };
+
+    targetWindow.addEventListener("keydown", handleKeyDown);
+    return () => targetWindow.removeEventListener("keydown", handleKeyDown);
+  }, [filteredItems, onClose, onSelect, open, selectedIndex, setSelectedIndex]);
+};