Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: publish restricted to alphanumeric, dashes, & underscores #1145

Merged
merged 1 commit into from
Jan 7, 2025
Merged

fix: publish restricted to alphanumeric, dashes, & underscores #1145

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 72 additions & 42 deletions ui/admin/app/components/agent/Publish.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { Eye } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { ControlledInput } from "~/components/form/controlledInputs";
import { Button } from "~/components/ui/button";
import {
Dialog,
Expand All @@ -10,18 +13,37 @@ import {
DialogTitle,
DialogTrigger,
} from "~/components/ui/dialog";
import { Input } from "~/components/ui/input";
import { Form } from "~/components/ui/form";

type PublishProps = {
className?: string;
alias: string;
onPublish: (alias: string) => void;
};

const publishSchema = z.object({
alias: z
.string()
.min(1, "Alias is required.")
.regex(
/^[a-zA-Z0-9_-]+$/,
"Only alphanumeric characters, dashes, and underscores are allowed."
),
});

type PublishFormValues = z.infer<typeof publishSchema>;

export function Publish({ className, alias: _alias, onPublish }: PublishProps) {
const [alias, setAlias] = useState(_alias);
const form = useForm<PublishFormValues>({
resolver: zodResolver(publishSchema),
defaultValues: {
alias: _alias,
},
});

const handlePublish = () => onPublish(alias);
const handlePublish = (values: PublishFormValues) => {
onPublish(values.alias);
};

return (
<Dialog>
Expand All @@ -32,46 +54,54 @@ export function Publish({ className, alias: _alias, onPublish }: PublishProps) {
</Button>
</DialogTrigger>
<DialogContent className="max-w-3xl p-10">
<div className="flex justify-between items-center w-full gap-2 pt-6">
<DialogTitle className="font-normal text-md">
Enter a handle for this agent:
</DialogTitle>
<Input
className="w-1/2"
value={alias}
onChange={(e) => setAlias(e.target.value)}
/>
</div>
<div className="space-y-4 py-4">
<p className="text-muted-foreground">
This agent will be available at:
</p>
<Form {...form}>
<form
onSubmit={form.handleSubmit(handlePublish)}
className="space-y-4"
>
<div className="flex justify-between w-full gap-2 pt-6">
<DialogTitle className="font-normal !text-md">
Enter a handle for this agent:
</DialogTitle>
<ControlledInput
classNames={{
wrapper: "w-1/2 relative top-[-0.5rem]",
}}
autoComplete="off"
control={form.control}
name="alias"
/>
</div>
<div className="space-y-4 py-4">
<p className="text-muted-foreground">
This agent will be available at:
</p>

<p className="text-primary">
{`${window.location.protocol}//${window.location.host}/${alias}`}
</p>
<p className="text-primary">
{`${window.location.protocol}//${window.location.host}/${form.watch("alias")}`}
</p>

<p className="text-muted-foreground">
If you have another agent with this handle, you will
need to unpublish it before this agent can be accessed
at the above URL.
</p>
</div>
<DialogFooter>
<div className="w-full flex justify-center items-center gap-10 pt-4">
<DialogClose asChild>
<Button className="w-1/2" variant="outline">
Cancel
</Button>
</DialogClose>
<DialogClose asChild>
<Button className="w-1/2" onClick={handlePublish}>
<Eye className="w-4 h-4" />
Publish
</Button>
</DialogClose>
</div>
</DialogFooter>
<p className="text-muted-foreground">
If you have another agent with this handle, you
will need to unpublish it before this agent can
be accessed at the above URL.
</p>
</div>
<DialogFooter>
<div className="w-full flex justify-center items-center gap-10 pt-4">
<DialogClose asChild>
<Button className="w-1/2" variant="outline">
Cancel
</Button>
</DialogClose>
<Button className="w-1/2" type="submit">
<Eye className="w-4 h-4" />
Publish
</Button>
</div>
</DialogFooter>
</form>
</Form>
</DialogContent>
</Dialog>
);
Expand Down