diff --git a/ui/admin/app/components/agent/UserAuthorizationSelect.tsx b/ui/admin/app/components/agent/UserAuthorizationSelect.tsx index cac30296..9e272e9e 100644 --- a/ui/admin/app/components/agent/UserAuthorizationSelect.tsx +++ b/ui/admin/app/components/agent/UserAuthorizationSelect.tsx @@ -1,4 +1,4 @@ -import { UserIcon, XIcon } from "lucide-react"; +import { UserIcon, UsersIcon, XIcon } from "lucide-react"; import { toast } from "sonner"; import useSWR, { mutate } from "swr"; @@ -7,6 +7,7 @@ import { User } from "~/lib/model/users"; import { AgentService } from "~/lib/service/api/agentService"; import { ComboBox } from "~/components/composed/ComboBox"; +import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"; import { Button } from "~/components/ui/button"; import { Checkbox } from "~/components/ui/checkbox"; import { ScrollArea } from "~/components/ui/scroll-area"; @@ -70,6 +71,11 @@ export function UserAuthorizationSelect({ removeAuthorizationFromAgent.executeAsync(agentId, userID); }; + const validateCreate = (str: string) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(str); + }; + // add Everyone option if it's not already in the list const options = ( allUsers.has("*") @@ -85,12 +91,14 @@ export function UserAuthorizationSelect({
@@ -116,7 +124,18 @@ export function UserAuthorizationSelect({
- + {authorization.userID === "*" ? ( + + ) : authorization.user ? ( + + + + + + + ) : ( + + )}

{authorization.userID === "*" ? "Everyone" diff --git a/ui/admin/app/components/composed/ComboBox.tsx b/ui/admin/app/components/composed/ComboBox.tsx index f1ba355e..43ed91ca 100644 --- a/ui/admin/app/components/composed/ComboBox.tsx +++ b/ui/admin/app/components/composed/ComboBox.tsx @@ -36,8 +36,10 @@ type ComboBoxProps = { onChange: (option: T | null) => void; onCreate?: (value: string) => void; options: (T | GroupedOption)[]; + closeOnSelect?: boolean; placeholder?: string; renderOption?: (option: T) => ReactNode; + validateCreate?: (value: string) => boolean; value?: T | null; }; @@ -115,9 +117,11 @@ function ComboBoxList({ options, setOpen, renderOption, + validateCreate, value, placeholder = "Filter...", emptyLabel = "No results found.", + closeOnSelect = true, }: { setOpen: (open: boolean) => void } & ComboBoxProps) { const [filteredOptions, setFilteredOptions] = useState(options); @@ -179,7 +183,7 @@ function ComboBoxList({ { onChange(null); - setOpen(false); + if (closeOnSelect) setOpen(false); }} > {clearLabel ?? "Clear Selection"} @@ -193,6 +197,7 @@ function ComboBoxList({ onCreate?.(savedValue); setOpen(false); }} + disabled={validateCreate ? !validateCreate(savedValue) : false} > Add "{savedValue}" @@ -226,7 +231,7 @@ function ComboBoxList({ value={option.name} onSelect={() => { onChange(option); - setOpen(false); + if (closeOnSelect) setOpen(false); }} className="justify-between" >