jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix dropdown on nodes (#1569)

Browse source 
* Fixed dropdown overflow issue by changing it to ShadCN

* Changed name of API modal

* Fixed border on API Modal
This commit is contained in:
Lucas Oliveira 2024-03-27 23:52:36 +02:00 • committed by GitHub
commit b93476af87
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 88 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/components/cardComponent/index.tsx
View file

@ -250,7 +250,7 @@ export default function CollectionCardComponent({
> >
<Button <Button
variant="ghost" variant="ghost"
size="xs" size="icon"
className={ className={
"whitespace-nowrap" + "whitespace-nowrap" +
(!authorized ? " cursor-not-allowed" : "") (!authorized ? " cursor-not-allowed" : "")
@ -275,7 +275,7 @@ export default function CollectionCardComponent({
<Button <Button
disabled={loadingLike} disabled={loadingLike}
variant="ghost" variant="ghost"
size="xs" size="icon"
className={ className={
"whitespace-nowrap" + "whitespace-nowrap" +
(!authorized ? " cursor-not-allowed" : "") (!authorized ? " cursor-not-allowed" : "")
@ -312,7 +312,7 @@ export default function CollectionCardComponent({
<Button <Button
disabled={loading} disabled={loading}
variant="ghost" variant="ghost"
size="xs" size="icon"
className={ className={
"whitespace-nowrap" + "whitespace-nowrap" +
(!authorized ? " cursor-not-allowed" : "") + (!authorized ? " cursor-not-allowed" : "") +

5
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -223,7 +223,7 @@ export default function CodeTabsComponent({
<div className="api-modal-table-arrangement"> <div className="api-modal-table-arrangement">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="h-10 border-input text-xs font-medium text-ring"> <TableHeader className="h-10 border-input text-xs font-medium text-ring">
<TableRow className="dark:border-b-muted"> <TableRow className="">
<TableHead className="h-7 text-center"> <TableHead className="h-7 text-center">
PARAM PARAM
</TableHead> </TableHead>
@ -248,7 +248,7 @@ export default function CodeTabsComponent({
return ( return (
<TableRow <TableRow
key={indx} key={indx}
className="h-10 dark:border-b-muted" className="h-10"
> >
<TableCell className="p-0 text-center text-sm text-foreground"> <TableCell className="p-0 text-center text-sm text-foreground">
{templateField} {templateField}
@ -515,7 +515,6 @@ export default function CodeTabsComponent({
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
editNode={true} editNode={true}
apiModal={true}
options={ options={
node.data.node.template[ node.data.node.template[
templateField templateField

192
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -1,8 +1,21 @@
import { Listbox, Transition } from "@headlessui/react"; import { useRef, useState } from "react";
import { Fragment, useEffect, useState } from "react";
import { DropDownComponentType } from "../../types/components"; import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils/utils"; import { cn } from "../../utils/utils";
import IconComponent from "../genericIconComponent"; import { default as ForwardedIconComponent } from "../genericIconComponent";
import { Button } from "../ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "../ui/command";
import {
Popover,
PopoverContentWithoutPortal,
PopoverTrigger,
} from "../ui/popover";
export default function Dropdown({ export default function Dropdown({
disabled, disabled,
@ -11,124 +24,77 @@ export default function Dropdown({
options, options,
onSelect, onSelect,
editNode = false, editNode = false,
numberOfOptions = 0,
apiModal = false,
id = "", id = "",
}: DropDownComponentType): JSX.Element { }: DropDownComponentType): JSX.Element {
let [internalValue, setInternalValue] = useState( const [open, setOpen] = useState(false);
value === "" || !value ? "Choose an option" : value
);
useEffect(() => { const refButton = useRef<HTMLButtonElement>(null);
setInternalValue(value === "" || !value ? "Choose an option" : value);
}, [value]);
return ( return (
<> <>
{Object.keys(options)?.length > 0 ? ( {Object.keys(options)?.length > 0 ? (
<> <>
<Listbox <Popover open={open} onOpenChange={setOpen}>
value={internalValue} <PopoverTrigger asChild>
disabled={disabled} <Button
onChange={(value) => { disabled={disabled}
setInternalValue(value); variant="primary"
onSelect(value); size="xs"
}} role="combobox"
> ref={refButton}
{({ open }) => ( aria-expanded={open}
<> data-test={`${id ?? ""}`}
<div className={"relative"}> className={cn(
<Listbox.Button editNode
data-test={`${id ?? ""}`} ? "dropdown-component-outline"
className={ : "dropdown-component-false-outline",
editNode "w-full justify-between font-normal",
? "dropdown-component-outline" editNode ? "input-edit-node" : "py-2"
: "dropdown-component-false-outline" )}
} >
> {value
<span ? options.find((option) => option === value)
className="dropdown-component-display" : "Choose an option..."}
data-testid={`${id ?? ""}-display`} <ForwardedIconComponent
> name="ChevronsUpDown"
{internalValue} className="ml-2 h-4 w-4 shrink-0 opacity-50"
</span> />
<span className={"dropdown-component-arrow right-0"}> </Button>
<IconComponent </PopoverTrigger>
name="ChevronsUpDown" <PopoverContentWithoutPortal
className="dropdown-component-arrow-color" className="nocopy nowheel nopan nodelete nodrag noundo w-full p-0"
aria-hidden="true" style={{ minWidth: refButton?.current?.clientWidth ?? "200px" }}
/> >
</span> <Command>
</Listbox.Button> <CommandInput placeholder="Search options..." className="h-9" />
<CommandList>
<Transition <CommandEmpty>No values found.</CommandEmpty>
show={open} <CommandGroup defaultChecked={false}>
as={Fragment} {options?.map((option, id) => (
leave="transition ease-in duration-100" <CommandItem
leaveFrom="opacity-100" key={id}
leaveTo="opacity-0" value={option}
> onSelect={(currentValue) => {
<Listbox.Options onSelect(currentValue);
className={classNames( setOpen(false);
editNode }}
? "dropdown-component-true-options nowheel custom-scroll" data-testid={`${option}-${id ?? ""}-option`}
: "dropdown-component-false-options nowheel custom-scroll", >
apiModal ? "mb-2 w-[250px]" : "absolute w-full" {option}
)} <ForwardedIconComponent
> name="Check"
{options?.map((option, id) => ( className={cn(
<Listbox.Option "ml-auto h-4 w-4 text-primary",
key={id} value === option ? "opacity-100" : "opacity-0"
className={({ active }) =>
classNames(
active ? " bg-accent" : "",
editNode
? "dropdown-component-false-option"
: "dropdown-component-true-option"
)
}
value={option}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate "
)}
data-testid={`${option}-${id ?? ""}-option`}
>
{option}
</span>
{selected ? (
<span
className={classNames(
active ? "text-background " : "",
"dropdown-component-choosal"
)}
>
<IconComponent
name="Check"
className={
active
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"
}
aria-hidden="true"
/>
</span>
) : null}
</>
)} )}
</Listbox.Option> />
))} </CommandItem>
</Listbox.Options> ))}
</Transition> </CommandGroup>
</div> </CommandList>
</> </Command>
)} </PopoverContentWithoutPortal>
</Listbox> </Popover>
</> </>
) : ( ) : (
<> <>

3
src/frontend/src/components/ui/button.tsx
View file

@ -23,8 +23,9 @@ const buttonVariants = cva(
size: { size: {
default: "h-10 py-2 px-4", default: "h-10 py-2 px-4",
sm: "h-9 px-3 rounded-md", sm: "h-9 px-3 rounded-md",
xs: "py-1 px-1 rounded-md", xs: "py-0.5 px-3 rounded-md",
lg: "h-11 px-8 rounded-md", lg: "h-11 px-8 rounded-md",
icon: "py-1 px-1 rounded-md",
}, },
}, },
defaultVariants: { defaultVariants: {

2
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -225,7 +225,7 @@ const ApiModal = forwardRef(
<BaseModal open={open} setOpen={setOpen}> <BaseModal open={open} setOpen={setOpen}>
<BaseModal.Trigger asChild>{children}</BaseModal.Trigger> <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
<BaseModal.Header description={EXPORT_CODE_DIALOG}> <BaseModal.Header description={EXPORT_CODE_DIALOG}>
<span className="pr-2">Code</span> <span className="pr-2">API</span>
<IconComponent <IconComponent
name="Code2" name="Code2"
className="h-6 w-6 pl-1 text-gray-800 dark:text-white" className="h-6 w-6 pl-1 text-gray-800 dark:text-white"

1
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -399,7 +399,6 @@ const EditNodeModal = forwardRef(
.options ? ( .options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
numberOfOptions={nodeLength}
editNode={true} editNode={true}
options={ options={
myData.node.template[templateParam] myData.node.template[templateParam]

2
src/frontend/src/style/applies.css
View file

@ -480,7 +480,7 @@
@apply absolute inset-y-0 right-0 flex items-center pr-4; @apply absolute inset-y-0 right-0 flex items-center pr-4;
} }
.dropdown-component-check-icon { .dropdown-component-check-icon {
@apply h-5 w-5 text-black; @apply h-5 w-5 text-primary;
} }
.edit-flow-arrangement { .edit-flow-arrangement {

2
src/frontend/src/types/components/index.ts
View file

@ -43,8 +43,6 @@ export type DropDownComponentType = {
options: string[]; options: string[];
onSelect: (value: string) => void; onSelect: (value: string) => void;
editNode?: boolean; editNode?: boolean;
apiModal?: boolean;
numberOfOptions?: number;
id?: string; id?: string;
}; };
export type ParameterComponentType = { export type ParameterComponentType = {