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

Add disabled property to DropDownComponentType, fix styleUtils import, and update RefreshButton component

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-04 16:19:35 -03:00
commit 5e0a8534f5
7 changed files with 65 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -253,15 +253,15 @@ export default function ParameterComponent({
{item.display_name === "" ? "" : " - "} {item.display_name === "" ? "" : " - "}
{item.display_name.split(", ").length > 2 {item.display_name.split(", ").length > 2
? item.display_name.split(", ").map((el, index) => ( ? item.display_name.split(", ").map((el, index) => (
<React.Fragment key={el + name}> <React.Fragment key={el + name}>
<span> <span>
{index === {index ===
item.display_name.split(", ").length - 1 item.display_name.split(", ").length - 1
? el ? el
: (el += `, `)} : (el += `, `)}
</span> </span>
</React.Fragment> </React.Fragment>
)) ))
: item.display_name} : item.display_name}
</span> </span>
) : ( ) : (
@ -270,14 +270,14 @@ export default function ParameterComponent({
{item.type === "" ? "" : " - "} {item.type === "" ? "" : " - "}
{item.type.split(", ").length > 2 {item.type.split(", ").length > 2
? item.type.split(", ").map((el, index) => ( ? item.type.split(", ").map((el, index) => (
<React.Fragment key={el + name}> <React.Fragment key={el + name}>
<span> <span>
{index === item.type.split(", ").length - 1 {index === item.type.split(", ").length - 1
? el ? el
: (el += `, `)} : (el += `, `)}
</span> </span>
</React.Fragment> </React.Fragment>
)) ))
: item.type} : item.type}
</span> </span>
)} )}
@ -346,7 +346,7 @@ export default function ParameterComponent({
className={ className={
"relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" + "relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
((name === "code" && type === "code") || ((name === "code" && type === "code") ||
(name.includes("code") && proxy) (name.includes("code") && proxy)
? " hidden " ? " hidden "
: "") : "")
} }
@ -355,21 +355,26 @@ export default function ParameterComponent({
<div <div
className={ className={
"w-full truncate text-sm" + "w-full truncate text-sm" +
(left ? "" : " gap-2 flex justify-end items-center") + (left ? "" : " flex items-center justify-end gap-2") +
(info !== "" ? " flex items-center" : "") (info !== "" ? " flex items-center" : "")
} }
> >
{!left && data.node?.pinned && {!left && data.node?.pinned && (
<div> <div>
<IconComponent className="w-5 h-5 text-ice" name={"Snowflake"} /> <IconComponent className="h-5 w-5 text-ice" name={"Snowflake"} />
</div>} </div>
)}
{proxy ? ( {proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}> <ShadTooltip content={<span>{proxy.id}</span>}>
<span className={!left && data.node?.pinned?" text-ice":""}>{title}</span> <span className={!left && data.node?.pinned ? " text-ice" : ""}>
{title}
</span>
</ShadTooltip> </ShadTooltip>
) : ( ) : (
<span className={!left && data.node?.pinned?" text-ice":""}>{title}</span> <span className={!left && data.node?.pinned ? " text-ice" : ""}>
)} {title}
</span>
)}
<span className={(info === "" ? "" : "ml-1 ") + " text-status-red"}> <span className={(info === "" ? "" : "ml-1 ") + " text-status-red"}>
{required ? " *" : ""} {required ? " *" : ""}
</span> </span>
@ -431,8 +436,8 @@ export default function ParameterComponent({
)} )}
{left === true && {left === true &&
type === "str" && type === "str" &&
!data.node?.template[name].options ? ( !data.node?.template[name].options ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
{data.node?.template[name].list ? ( {data.node?.template[name].list ? (
<div className="w-5/6 flex-grow"> <div className="w-5/6 flex-grow">
@ -440,7 +445,7 @@ export default function ParameterComponent({
disabled={disabled} disabled={disabled}
value={ value={
!data.node.template[name].value || !data.node.template[name].value ||
data.node.template[name].value === "" data.node.template[name].value === ""
? [""] ? [""]
: data.node.template[name].value : data.node.template[name].value
} }
@ -523,6 +528,7 @@ export default function ParameterComponent({
<div className="mt-2 flex w-full items-center"> <div className="mt-2 flex w-full items-center">
<div className="w-5/6 flex-grow"> <div className="w-5/6 flex-grow">
<Dropdown <Dropdown
disabled={disabled}
isLoading={isLoading} isLoading={isLoading}
options={data.node.template[name].options} options={data.node.template[name].options}
onSelect={handleOnNewValue} onSelect={handleOnNewValue}
@ -603,10 +609,10 @@ export default function ParameterComponent({
editNode={false} editNode={false}
value={ value={
!data.node!.template[name].value || !data.node!.template[name].value ||
data.node!.template[name].value?.toString() === "{}" data.node!.template[name].value?.toString() === "{}"
? { ? {
yourkey: "value", yourkey: "value",
} }
: data.node!.template[name].value : data.node!.template[name].value
} }
onChange={handleOnNewValue} onChange={handleOnNewValue}
@ -620,7 +626,7 @@ export default function ParameterComponent({
editNode={false} editNode={false}
value={ value={
data.node!.template[name].value?.length === 0 || data.node!.template[name].value?.length === 0 ||
!data.node!.template[name].value !data.node!.template[name].value
? [{ "": "" }] ? [{ "": "" }]
: convertObjToArray(data.node!.template[name].value) : convertObjToArray(data.node!.template[name].value)
} }

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

@ -5,6 +5,7 @@ import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
export default function Dropdown({ export default function Dropdown({
disabled,
isLoading, isLoading,
value, value,
options, options,
@ -28,6 +29,7 @@ export default function Dropdown({
<> <>
<Listbox <Listbox
value={internalValue} value={internalValue}
disabled={disabled}
onChange={(value) => { onChange={(value) => {
setInternalValue(value); setInternalValue(value);
onSelect(value); onSelect(value);

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

@ -4,7 +4,7 @@ import * as React from "react";
import { cn } from "../../utils/utils"; import { cn } from "../../utils/utils";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
{ {
variants: { variants: {
variant: { variant: {

16
src/frontend/src/components/ui/refreshButton.tsx
View file

@ -1,6 +1,7 @@
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { cn } from "../../utils/utils"; import { cn } from "../../utils/utils";
import { Button } from "./button";
function RefreshButton({ function RefreshButton({
isLoading, isLoading,
@ -24,10 +25,7 @@ function RefreshButton({
handleUpdateValues(name, data); handleUpdateValues(name, data);
}; };
const classNames = cn( const classNames = cn(className, disabled ? "cursor-not-allowed" : "");
className,
disabled ? "cursor-not-allowed" : "cursor-pointer"
);
// icon class name should take into account the disabled state and the loading state // icon class name should take into account the disabled state and the loading state
const disabledIconTextClass = disabled ? "text-muted-foreground" : ""; const disabledIconTextClass = disabled ? "text-muted-foreground" : "";
@ -38,13 +36,19 @@ function RefreshButton({
); );
return ( return (
<button className={classNames} onClick={handleClick} id={id}> <Button
variant="primary"
disabled={disabled}
className={classNames}
onClick={handleClick}
id={id}
>
<IconComponent <IconComponent
name={isLoading ? "Loader2" : "RefreshCcw"} name={isLoading ? "Loader2" : "RefreshCcw"}
className={iconClassName} className={iconClassName}
id={id + "-icon"} id={id + "-icon"}
/> />
</button> </Button>
); );
} }

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

@ -316,7 +316,7 @@
@apply border-none ring ring-[#FF9090]; @apply border-none ring ring-[#FF9090];
} }
.built-invalid-status-dark { .built-invalid-status-dark {
@apply border-none ring ring-[#751C1C] @apply border-none ring ring-[#751C1C];
} }
.building-status { .building-status {
@apply border-none ring; @apply border-none ring;
@ -431,7 +431,9 @@
.code-area-external-link:hover { .code-area-external-link:hover {
@apply hover:text-accent-foreground; @apply hover:text-accent-foreground;
} }
.dropdown-component-disabled {
@apply pointer-events-none cursor-not-allowed;
}
.dropdown-component-outline { .dropdown-component-outline {
@apply input-edit-node relative pr-8; @apply input-edit-node relative pr-8;
} }
@ -441,11 +443,17 @@
.dropdown-component-display { .dropdown-component-display {
@apply block w-full truncate bg-background; @apply block w-full truncate bg-background;
} }
.dropdown-component-display-disabled {
@apply text-muted-foreground;
}
.dropdown-component-arrow { .dropdown-component-arrow {
@apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2; @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2;
} }
.dropdown-component-arrow-color { .dropdown-component-arrow-color {
@apply extra-side-bar-save-disable h-5 w-5; @apply h-5 w-5 text-accent-foreground;
}
.dropdown-component-arrow-color-disable {
@apply h-5 w-5 text-muted-foreground;
} }
.dropdown-component-options { .dropdown-component-options {
@apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm; @apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
@ -902,7 +910,7 @@
@apply flex-max-width px-2 py-6 pl-4 pr-9; @apply flex-max-width px-2 py-6 pl-4 pr-9;
} }
.form-modal-chatbot-icon { .form-modal-chatbot-icon {
@apply flex flex-col mb-3 ml-3 mr-6 mt-1; @apply mb-3 ml-3 mr-6 mt-1 flex flex-col;
} }
.form-modal-chat-image { .form-modal-chat-image {
@apply flex flex-col items-center gap-1; @apply flex flex-col items-center gap-1;

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

@ -30,6 +30,7 @@ export type ToggleComponentType = {
editNode?: boolean; editNode?: boolean;
}; };
export type DropDownComponentType = { export type DropDownComponentType = {
disabled?: boolean;
isLoading?: boolean; isLoading?: boolean;
value: string; value: string;
options: string[]; options: string[];

3
src/frontend/src/utils/styleUtils.ts
View file

@ -6,7 +6,6 @@ import {
BookMarked, BookMarked,
BookmarkPlus, BookmarkPlus,
Bot, Bot,
Snowflake,
Boxes, Boxes,
Braces, Braces,
Cable, Cable,
@ -100,6 +99,7 @@ import {
Share2, Share2,
Shield, Shield,
Sliders, Sliders,
Snowflake,
Sparkles, Sparkles,
Square, Square,
Store, Store,
@ -443,6 +443,7 @@ export const nodeIconsLucide: iconsType = {
Link, Link,
ToyBrick, ToyBrick,
RefreshCcw, RefreshCcw,
ListRestart,
Combine, Combine,
TerminalIcon, TerminalIcon,
TerminalSquare, TerminalSquare,