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

Bugs - Global Variables (#1839)

Browse source 
Fixed height and resizability of Global Variables table, made value of
credentials variable as password field
This commit is contained in:
Cristhian Zanforlin Lousa 2024-05-06 15:37:07 -03:00 • committed by GitHub
commit d938fb3a3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 118 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -106,14 +106,26 @@ export default function AddNewVariableButton({ children }): JSX.Element {
id={"type-global-variables"} id={"type-global-variables"}
></InputComponent> ></InputComponent>
<Label>Value</Label> <Label>Value</Label>
<Textarea {type === "Credential" ? (
value={value} <InputComponent
onChange={(e) => { password
setValue(e.target.value); value={value}
}} onChange={(e) => {
placeholder="Insert a value for the variable..." setValue(e);
className="w-full resize-none custom-scroll" }}
/> placeholder="Insert a value for the variable..."
/>
) : (
<Textarea
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
placeholder="Insert a value for the variable..."
className="w-full resize-none custom-scroll"
/>
)}
<Label>Apply To Fields (optional)</Label> <Label>Apply To Fields (optional)</Label>
<InputComponent <InputComponent
setSelectedOptions={(value) => setFields(value)} setSelectedOptions={(value) => setFields(value)}

120
src/frontend/src/components/inputComponent/index.tsx
View file

@ -76,7 +76,7 @@ export default function InputComponent({
editNode ? " input-edit-node " : "", editNode ? " input-edit-node " : "",
password && editNode ? "pr-8" : "", password && editNode ? "pr-8" : "",
password && !editNode ? "pr-10" : "", password && !editNode ? "pr-10" : "",
className! className!,
)} )}
placeholder={password && editNode ? "Key" : placeholder} placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => { onChange={(e) => {
@ -104,9 +104,9 @@ export default function InputComponent({
(selectedOption !== "" || !onChange) && setSelectedOption (selectedOption !== "" || !onChange) && setSelectedOption
? selectedOption ? selectedOption
: (selectedOptions?.length !== 0 || !onChange) && : (selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions setSelectedOptions
? selectedOptions?.join(", ") ? selectedOptions?.join(", ")
: value : value
} }
autoFocus={autoFocus} autoFocus={autoFocus}
disabled={disabled} disabled={disabled}
@ -120,7 +120,7 @@ export default function InputComponent({
required={required} required={required}
className={classNames( className={classNames(
password && password &&
selectedOption === "" && (!setSelectedOption || selectedOption === "") &&
!pwdVisible && !pwdVisible &&
value !== "" value !== ""
? " text-clip password " ? " text-clip password "
@ -134,7 +134,7 @@ export default function InputComponent({
? "pr-8" ? "pr-8"
: "", : "",
className! className!,
)} )}
placeholder={password && editNode ? "Key" : placeholder} placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => { onChange={(e) => {
@ -194,15 +194,15 @@ export default function InputComponent({
setSelectedOption( setSelectedOption(
currentValue === selectedOption currentValue === selectedOption
? "" ? ""
: currentValue : currentValue,
); );
setSelectedOptions && setSelectedOptions &&
setSelectedOptions( setSelectedOptions(
selectedOptions?.includes(currentValue) selectedOptions?.includes(currentValue)
? selectedOptions.filter( ? selectedOptions.filter(
(item) => item !== currentValue (item) => item !== currentValue,
) )
: [...selectedOptions, currentValue] : [...selectedOptions, currentValue],
); );
!setSelectedOptions && setShowOptions(false); !setSelectedOptions && setShowOptions(false);
}} }}
@ -215,7 +215,7 @@ export default function InputComponent({
selectedOption === option || selectedOption === option ||
selectedOptions?.includes(option) selectedOptions?.includes(option)
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0",
)} )}
> >
<div className="absolute opacity-100 transition-all group-hover:opacity-0"> <div className="absolute opacity-100 transition-all group-hover:opacity-0">
@ -254,7 +254,7 @@ export default function InputComponent({
((selectedOptions?.length !== 0 || !onChange) && ((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions) setSelectedOptions)
? "" ? ""
: "hidden" : "hidden",
)} )}
onClick={ onClick={
((selectedOption !== "" || !onChange) && setSelectedOption) || ((selectedOption !== "" || !onChange) && setSelectedOption) ||
@ -275,7 +275,7 @@ export default function InputComponent({
<span <span
className={cn( className={cn(
password && selectedOption === "" ? "right-8" : "right-0", password && selectedOption === "" ? "right-8" : "right-0",
"absolute inset-y-0 flex items-center pr-2.5" "absolute inset-y-0 flex items-center pr-2.5",
)} )}
> >
<button <button
@ -286,7 +286,7 @@ export default function InputComponent({
selectedOption !== "" selectedOption !== ""
? "text-medium-indigo" ? "text-medium-indigo"
: "text-muted-foreground", : "text-muted-foreground",
"hover:text-accent-foreground" "hover:text-accent-foreground",
)} )}
> >
<ForwardedIconComponent <ForwardedIconComponent
@ -298,7 +298,7 @@ export default function InputComponent({
</span> </span>
)} )}
{password && selectedOption === "" && ( {password && (!setSelectedOption || selectedOption === "") && (
<button <button
type="button" type="button"
tabIndex={-1} tabIndex={-1}
@ -306,59 +306,57 @@ export default function InputComponent({
"mb-px", "mb-px",
editNode editNode
? "input-component-true-button" ? "input-component-true-button"
: "input-component-false-button" : "input-component-false-button",
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
setPwdVisible(!pwdVisible); setPwdVisible(!pwdVisible);
}} }}
> >
{password && {pwdVisible ? (
selectedOption === "" && <svg
(pwdVisible ? ( xmlns="http://www.w3.org/2000/svg"
<svg fill="none"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" strokeWidth={1.5}
viewBox="0 0 24 24" stroke="currentColor"
strokeWidth={1.5} className={classNames(
stroke="currentColor" editNode
className={classNames( ? "input-component-true-svg"
editNode : "input-component-false-svg",
? "input-component-true-svg" )}
: "input-component-false-svg" >
)} <path
> strokeLinecap="round"
<path strokeLinejoin="round"
strokeLinecap="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
strokeLinejoin="round" />
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" </svg>
/> ) : (
</svg> <svg
) : ( xmlns="http://www.w3.org/2000/svg"
<svg fill="none"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" strokeWidth={1.5}
viewBox="0 0 24 24" stroke="currentColor"
strokeWidth={1.5} className={classNames(
stroke="currentColor" editNode
className={classNames( ? "input-component-true-svg"
editNode : "input-component-false-svg",
? "input-component-true-svg" )}
: "input-component-false-svg" >
)} <path
> strokeLinecap="round"
<path strokeLinejoin="round"
strokeLinecap="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
strokeLinejoin="round" />
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" <path
/> strokeLinecap="round"
<path strokeLinejoin="round"
strokeLinecap="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
strokeLinejoin="round" />
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" </svg>
/> )}
</svg>
))}
</button> </button>
)} )}
</div> </div>

27
src/frontend/src/components/tableComponent/index.tsx
View file

@ -5,32 +5,21 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
import { useDarkStore } from "../../stores/darkStore"; import { useDarkStore } from "../../stores/darkStore";
import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
import { cn } from "../../utils/utils"; import { cn } from "../../utils/utils";
import { Card, CardContent } from "../ui/card";
const TableComponent = forwardRef< const TableComponent = forwardRef<
ElementRef<typeof AgGridReact>, ElementRef<typeof AgGridReact>,
ComponentPropsWithoutRef<typeof AgGridReact> ComponentPropsWithoutRef<typeof AgGridReact>
>(({ pagination = true, ...props }, ref) => { >(({ ...props }, ref) => {
const dark = useDarkStore((state) => state.dark); const dark = useDarkStore((state) => state.dark);
return ( return (
<div className="flex h-full flex-col"> <div
<div className={cn(
className={cn( dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz", "ag-theme-shadcn flex h-full flex-col",
"ag-theme-shadcn flex h-full flex-col", )} // applying the grid theme
)} // applying the grid theme >
> <AgGridReact ref={ref} {...props} />
<Card x-chunk="dashboard-04-chunk-2" className="pt-4">
<CardContent>
<AgGridReact
overlayNoRowsTemplate="No data available"
ref={ref}
{...props}
/>
</CardContent>
</Card>
</div>
</div> </div>
); );
}); });

32
src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
View file

@ -8,6 +8,7 @@ import Dropdown from "../../../../components/dropdownComponent";
import ForwardedIconComponent from "../../../../components/genericIconComponent"; import ForwardedIconComponent from "../../../../components/genericIconComponent";
import TableComponent from "../../../../components/tableComponent"; import TableComponent from "../../../../components/tableComponent";
import { Badge } from "../../../../components/ui/badge"; import { Badge } from "../../../../components/ui/badge";
import { Card, CardContent } from "../../../../components/ui/card";
import { deleteGlobalVariable } from "../../../../controllers/API"; import { deleteGlobalVariable } from "../../../../controllers/API";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import { useGlobalVariablesStore } from "../../../../stores/globalVariables"; import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
@ -81,7 +82,7 @@ export default function GlobalVariablesPage() {
showDisabledCheckboxes: true, showDisabledCheckboxes: true,
headerName: "Variable Name", headerName: "Variable Name",
field: "name", field: "name",
flex: 1, flex: 2,
}, //This column will be twice as wide as the others }, //This column will be twice as wide as the others
{ {
field: "type", field: "type",
@ -104,6 +105,7 @@ export default function GlobalVariablesPage() {
field: "default_fields", field: "default_fields",
flex: 1, flex: 1,
editable: false, editable: false,
resizable: false,
}, },
]); ]);
@ -168,17 +170,23 @@ export default function GlobalVariablesPage() {
</div> </div>
<div className="flex h-full w-full flex-col justify-between pb-8"> <div className="flex h-full w-full flex-col justify-between pb-8">
<TableComponent <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
onSelectionChanged={(event: SelectionChangedEvent) => { <CardContent className="h-full">
setSelectedRows(event.api.getSelectedRows().map((row) => row.name)); <TableComponent
}} overlayNoRowsTemplate="No data available"
rowSelection="multiple" onSelectionChanged={(event: SelectionChangedEvent) => {
suppressRowClickSelection={true} setSelectedRows(
domLayout="autoHeight" event.api.getSelectedRows().map((row) => row.name),
pagination={false} );
columnDefs={colDefs} }}
rowData={rowData} rowSelection="multiple"
/> suppressRowClickSelection={true}
pagination={true}
columnDefs={colDefs}
rowData={rowData}
/>
</CardContent>
</Card>
</div> </div>
</div> </div>
); );

17
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
View file

@ -2,6 +2,7 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
import { useState } from "react"; import { useState } from "react";
import ForwardedIconComponent from "../../../../components/genericIconComponent"; import ForwardedIconComponent from "../../../../components/genericIconComponent";
import TableComponent from "../../../../components/tableComponent"; import TableComponent from "../../../../components/tableComponent";
import { Card, CardContent } from "../../../../components/ui/card";
export default function ShortcutsPage() { export default function ShortcutsPage() {
const advancedShortcut = "Ctrl + Shift + A"; const advancedShortcut = "Ctrl + Shift + A";
@ -95,12 +96,16 @@ export default function ShortcutsPage() {
</div> </div>
</div> </div>
<div className="grid gap-6 pb-8"> <div className="grid gap-6 pb-8">
<TableComponent <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
domLayout="autoHeight" <CardContent className="h-full">
pagination={false} <TableComponent
columnDefs={colDefs} domLayout="autoHeight"
rowData={nodesRowData} pagination={false}
/> columnDefs={colDefs}
rowData={nodesRowData}
/>
</CardContent>
</Card>
</div> </div>
</div> </div>
); );