Function SecretPicker

packages/react/src/plugins/secret-picker.tsx:51–191

(props: {
  readonly value: string | null;
  readonly valueOwner?: Owner;
  readonly onSelect: (id: string, owner: Owner) => void;
  readonly secrets: readonly SecretPickerSecret[];
  readonly placeholder?: string;
  /** When provided, renders a "+ New" row at the top of the dropdown. */
  readonly onCreateNew?: () => void;
})

};

export function SecretPicker(props: {
  readonly value: string | null;
  readonly valueOwner?: Owner;
  readonly onSelect: (id: string, owner: Owner) => void;
  readonly secrets: readonly SecretPickerSecret[];
  readonly placeholder?: string;
  /** When provided, renders a "+ New" row at the top of the dropdown. */
  readonly onCreateNew?: () => void;
}) {
  const {
    value,
    valueOwner,
    onSelect,
    secrets,
    placeholder = "Search credentials…",
    onCreateNew,
  } = props;
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const ownerDisplay = useOwnerDisplay();

  const selected =
    secrets.find(
      (secret) => secret.id === value && (valueOwner === undefined || secret.owner === valueOwner),
    ) ??
    secrets.find((secret) => secret.id === value) ??
    null;

  const grouped = new Map<string, SecretPickerSecret[]>();
  for (const secret of secrets) {
    const key = providerLabel(secret.provider);
    const group = grouped.get(key);
    if (group) {
      group.push(secret);
    } else {
      grouped.set(key, [secret]);
    }
  }

  const groups: [string, SecretPickerSecret[]][] = [...grouped.entries()]
    .map(([label, items]): [string, SecretPickerSecret[]] => [
      label,
      [...items].sort((a, b) => a.name.localeCompare(b.name)),
    ])
    .sort(([a], [b]) => a.localeCompare(b));
  const showGroupHeadings = groups.length > 1;

  return (
    <div className="relative w-full">
      <Popover open={open} onOpenChange={setOpen} modal={false}>
        <PopoverAnchor asChild>
          <Input
            value={open ? query : selected ? selected.name : (value ?? "")}
            onChange={(event: ChangeEvent<HTMLInputElement>) => {
              setQuery(event.target.value);
              if (!open) setOpen(true);
            }}
            onFocus={() => setOpen(true)}