first commit
This commit is contained in:
Beyhan Oğur
49
ui/app/workspace/plugins/views/pluginsEmptyState.tsx
Normal file
49
ui/app/workspace/plugins/views/pluginsEmptyState.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Puzzle } from "lucide-react";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
|
||||
const CUSTOM_PLUGINS_DOCS_URL = "https://docs.getbifrost.ai/plugins";
|
||||
|
||||
interface PluginsEmptyStateProps {
|
||||
onCreateClick: () => void;
|
||||
canCreate?: boolean;
|
||||
}
|
||||
|
||||
export function PluginsEmptyState({ onCreateClick, canCreate = true }: PluginsEmptyStateProps) {
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-[80vh] w-full flex-col items-center justify-center gap-4 py-16 text-center"
|
||||
data-testid="plugins-empty-state"
|
||||
>
|
||||
<div className="text-muted-foreground">
|
||||
<Puzzle className="h-[5.5rem] w-[5.5rem]" strokeWidth={1} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-muted-foreground text-xl font-medium">Custom plugins extend Bifrost with your own business logic</h1>
|
||||
<div className="text-muted-foreground mx-auto mt-2 max-w-[600px] text-sm font-normal">
|
||||
Build and deploy plugins for custom integrations, workflow automation, and AI governance.
|
||||
</div>
|
||||
<div className="mx-auto mt-6 flex flex-row flex-wrap items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
aria-label="Read more about custom plugins (opens in new tab)"
|
||||
data-testid="plugins-button-read-more"
|
||||
onClick={() => {
|
||||
window.open(`${CUSTOM_PLUGINS_DOCS_URL}?utm_source=bfd`, "_blank", "noopener,noreferrer");
|
||||
}}
|
||||
>
|
||||
Read more <ArrowUpRight className="text-muted-foreground h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label="Create your first plugin"
|
||||
data-testid="plugins-button-install-new"
|
||||
onClick={onCreateClick}
|
||||
disabled={!canCreate}
|
||||
>
|
||||
Install New Plugin
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
345
ui/app/workspace/plugins/views/pluginsView.tsx
Normal file
345
ui/app/workspace/plugins/views/pluginsView.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
import ConfirmDeletePluginDialog from "@/app/workspace/plugins/dialogs/confirmDeletePluginDialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CodeEditor } from "@/components/ui/codeEditor";
|
||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { setPluginFormDirtyState, useAppDispatch, useAppSelector, useUpdatePluginMutation } from "@/lib/store";
|
||||
import { PluginType } from "@/lib/types/plugins";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { PlusIcon, SaveIcon, Trash2Icon } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import * as z from "zod";
|
||||
|
||||
interface Props {
|
||||
onDelete: () => void;
|
||||
onCreate: (pluginName: string) => void;
|
||||
}
|
||||
|
||||
const pluginFormSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
enabled: z.boolean(),
|
||||
path: z.string().optional(),
|
||||
config: z.string().optional(),
|
||||
hasConfig: z.boolean(),
|
||||
});
|
||||
|
||||
type PluginFormValues = z.infer<typeof pluginFormSchema>;
|
||||
|
||||
const getPluginTypeColor = (type: PluginType) => {
|
||||
switch (type) {
|
||||
case "llm":
|
||||
return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
|
||||
case "mcp":
|
||||
return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300";
|
||||
case "http":
|
||||
return "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300";
|
||||
}
|
||||
};
|
||||
|
||||
export default function PluginsView(props: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const hasUpdatePluginAccess = useRbac(RbacResource.Plugins, RbacOperation.Update);
|
||||
const hasDeletePluginAccess = useRbac(RbacResource.Plugins, RbacOperation.Delete);
|
||||
const [updatePlugin, { isLoading }] = useUpdatePluginMutation();
|
||||
const selectedPlugin = useAppSelector((state) => state.plugin.selectedPlugin);
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
|
||||
const form = useForm<PluginFormValues>({
|
||||
resolver: zodResolver(pluginFormSchema),
|
||||
defaultValues: {
|
||||
name: selectedPlugin?.name || "",
|
||||
enabled: selectedPlugin?.enabled || false,
|
||||
path: selectedPlugin?.path || undefined,
|
||||
config: selectedPlugin?.config ? JSON.stringify(selectedPlugin.config, null, 2) : undefined,
|
||||
hasConfig: Boolean(selectedPlugin?.config && Object.keys(selectedPlugin.config).length > 0),
|
||||
},
|
||||
});
|
||||
|
||||
// Update form when selectedPlugin changes
|
||||
useEffect(() => {
|
||||
if (selectedPlugin) {
|
||||
const hasConfig = Boolean(selectedPlugin.config && Object.keys(selectedPlugin.config).length > 0);
|
||||
setShowConfig(hasConfig);
|
||||
form.reset({
|
||||
name: selectedPlugin.name,
|
||||
enabled: selectedPlugin.enabled,
|
||||
path: selectedPlugin.path,
|
||||
config: hasConfig ? JSON.stringify(selectedPlugin.config, null, 2) : undefined,
|
||||
hasConfig,
|
||||
});
|
||||
}
|
||||
}, [selectedPlugin]);
|
||||
|
||||
// Track form dirty state
|
||||
useEffect(() => {
|
||||
const isDirty = form.formState.isDirty;
|
||||
dispatch(setPluginFormDirtyState(isDirty));
|
||||
}, [form.formState.isDirty, dispatch]);
|
||||
|
||||
const onSubmit = async (values: PluginFormValues) => {
|
||||
if (!selectedPlugin) return;
|
||||
|
||||
try {
|
||||
let config;
|
||||
if (values.hasConfig && values.config) {
|
||||
try {
|
||||
config = JSON.parse(values.config);
|
||||
} catch {
|
||||
toast.error("Invalid JSON in configuration");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await updatePlugin({
|
||||
name: selectedPlugin.name,
|
||||
data: {
|
||||
enabled: values.enabled,
|
||||
path: values.path ?? undefined,
|
||||
...(config !== undefined && { config }),
|
||||
},
|
||||
}).unwrap();
|
||||
toast.success("Plugin updated successfully");
|
||||
form.reset(values);
|
||||
} catch {
|
||||
toast.error("Failed to update plugin");
|
||||
}
|
||||
};
|
||||
|
||||
const onError = () => {
|
||||
toast.error("Please fix the form errors before submitting");
|
||||
};
|
||||
|
||||
const handleDeleteClick = () => {
|
||||
setShowDeleteDialog(true);
|
||||
};
|
||||
|
||||
const handleDeleteCancel = () => {
|
||||
setShowDeleteDialog(false);
|
||||
};
|
||||
|
||||
const handleDeleteSuccess = () => {
|
||||
setShowDeleteDialog(false);
|
||||
toast.success("Plugin deleted successfully");
|
||||
props.onDelete();
|
||||
};
|
||||
|
||||
if (!selectedPlugin) {
|
||||
return (
|
||||
<div className="ml-4 flex w-full items-center justify-center">
|
||||
<p className="text-muted-foreground">No plugin selected</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isErrorLog = (log: string) => {
|
||||
const errorKeywords = ["error", "failed", "exception", "panic", "fatal", "ERR"];
|
||||
return errorKeywords.some((keyword) => log.toLowerCase().includes(keyword.toLowerCase()));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ml-4 w-full">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit, onError)} className="space-y-6">
|
||||
<div className="">
|
||||
<h3 className="mb-4 text-lg font-semibold">Plugin Configuration</h3>
|
||||
<div className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Plugin name" {...field} readOnly disabled className="cursor-not-allowed" />
|
||||
</FormControl>
|
||||
<FormDescription>The name of the plugin</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{selectedPlugin.status?.types && selectedPlugin.status.types.length > 0 && (
|
||||
<FormItem>
|
||||
<FormLabel>Types</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedPlugin.status.types.map((type) => (
|
||||
<Badge
|
||||
key={type}
|
||||
variant="outline"
|
||||
className={cn("h-5 px-2 text-xs font-medium uppercase", getPluginTypeColor(type))}
|
||||
>
|
||||
{type}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="enabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel>Enabled</FormLabel>
|
||||
<FormDescription>Enable or disable this plugin</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="path"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Path</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Plugin path" {...field} value={field.value || ""} />
|
||||
</FormControl>
|
||||
<FormDescription>The file system path to the plugin</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{!showConfig ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setShowConfig(true);
|
||||
form.setValue("hasConfig", true);
|
||||
if (!form.getValues("config")) {
|
||||
form.setValue("config", "{}");
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<PlusIcon className="mr-2 h-4 w-4" />
|
||||
Add Configuration
|
||||
</Button>
|
||||
) : (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="config"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex items-center justify-between">
|
||||
<FormLabel>Configuration (JSON)</FormLabel>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setShowConfig(false);
|
||||
form.setValue("hasConfig", false);
|
||||
form.setValue("config", undefined);
|
||||
}}
|
||||
className="h-auto p-1 text-xs"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
<FormControl>
|
||||
<div className="rounded-sm border">
|
||||
<CodeEditor
|
||||
className="z-0 w-full"
|
||||
minHeight={200}
|
||||
maxHeight={400}
|
||||
wrap={true}
|
||||
code={field.value || "{}"}
|
||||
lang="json"
|
||||
onChange={field.onChange}
|
||||
options={{
|
||||
scrollBeyondLastLine: false,
|
||||
collapsibleBlocks: true,
|
||||
lineNumbers: "on",
|
||||
alwaysConsumeMouseWheel: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormDescription>Plugin configuration in JSON format</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedPlugin.status?.status !== "active" && (
|
||||
<div className="mt-4">
|
||||
<div className="space-y-4">
|
||||
{selectedPlugin.status?.logs && selectedPlugin.status.logs.length > 0 && (
|
||||
<div className="grid gap-2">
|
||||
<label className="text-sm font-medium">Logs</label>
|
||||
<div className="rounded-md border px-4 py-2 font-mono text-xs">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
{selectedPlugin.status.logs.map((log, index) => (
|
||||
<div key={index} className={isErrorLog(log) ? "text-red-400" : "text-green-600"}>
|
||||
{log}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
<Button
|
||||
className="border-destructive text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleDeleteClick}
|
||||
disabled={!hasDeletePluginAccess}
|
||||
>
|
||||
<Trash2Icon className="h-4 w-4" />
|
||||
Delete Plugin
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => form.reset()}
|
||||
disabled={!form.formState.isDirty || !hasUpdatePluginAccess}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading || !form.formState.isDirty || !hasUpdatePluginAccess}>
|
||||
<SaveIcon className="h-4 w-4" />
|
||||
{isLoading ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
{selectedPlugin && (
|
||||
<ConfirmDeletePluginDialog
|
||||
show={showDeleteDialog}
|
||||
onCancel={handleDeleteCancel}
|
||||
onDelete={handleDeleteSuccess}
|
||||
plugin={selectedPlugin}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user