Skip to content

Commit d938fb3

Browse files
CristhianzlCristhianzl
authored
Bugs - Global Variables (langflow-ai#1839)
Fixed height and resizability of Global Variables table, made value of credentials variable as password field
2 parents a2a1642 + fabb3c9 commit d938fb3

File tree

5 files changed

+118
-106
lines changed

5 files changed

+118
-106
lines changed

‎src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

+20-8
Original file line numberDiff line numberDiff line change
@@ -106,14 +106,26 @@ export default function AddNewVariableButton({ children }): JSX.Element {
106106
id={"type-global-variables"}
107107
></InputComponent>
108108
<Label>Value</Label>
109-
<Textarea
110-
value={value}
111-
onChange={(e) => {
112-
setValue(e.target.value);
113-
}}
114-
placeholder="Insert a value for the variable..."
115-
className="w-full resize-none custom-scroll"
116-
/>
109+
{type === "Credential" ? (
110+
<InputComponent
111+
password
112+
value={value}
113+
onChange={(e) => {
114+
setValue(e);
115+
}}
116+
placeholder="Insert a value for the variable..."
117+
/>
118+
) : (
119+
<Textarea
120+
value={value}
121+
onChange={(e) => {
122+
setValue(e.target.value);
123+
}}
124+
placeholder="Insert a value for the variable..."
125+
className="w-full resize-none custom-scroll"
126+
/>
127+
)}
128+
117129
<Label>Apply To Fields (optional)</Label>
118130
<InputComponent
119131
setSelectedOptions={(value) => setFields(value)}

‎src/frontend/src/components/inputComponent/index.tsx

+59-61
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function InputComponent({
7676
editNode ? " input-edit-node " : "",
7777
password && editNode ? "pr-8" : "",
7878
password && !editNode ? "pr-10" : "",
79-
className!
79+
className!,
8080
)}
8181
placeholder={password && editNode ? "Key" : placeholder}
8282
onChange={(e) => {
@@ -104,9 +104,9 @@ export default function InputComponent({
104104
(selectedOption !== "" || !onChange) && setSelectedOption
105105
? selectedOption
106106
: (selectedOptions?.length !== 0 || !onChange) &&
107-
setSelectedOptions
108-
? selectedOptions?.join(", ")
109-
: value
107+
setSelectedOptions
108+
? selectedOptions?.join(", ")
109+
: value
110110
}
111111
autoFocus={autoFocus}
112112
disabled={disabled}
@@ -120,7 +120,7 @@ export default function InputComponent({
120120
required={required}
121121
className={classNames(
122122
password &&
123-
selectedOption === "" &&
123+
(!setSelectedOption || selectedOption === "") &&
124124
!pwdVisible &&
125125
value !== ""
126126
? " text-clip password "
@@ -134,7 +134,7 @@ export default function InputComponent({
134134
? "pr-8"
135135
: "",
136136

137-
className!
137+
className!,
138138
)}
139139
placeholder={password && editNode ? "Key" : placeholder}
140140
onChange={(e) => {
@@ -194,15 +194,15 @@ export default function InputComponent({
194194
setSelectedOption(
195195
currentValue === selectedOption
196196
? ""
197-
: currentValue
197+
: currentValue,
198198
);
199199
setSelectedOptions &&
200200
setSelectedOptions(
201201
selectedOptions?.includes(currentValue)
202202
? selectedOptions.filter(
203-
(item) => item !== currentValue
203+
(item) => item !== currentValue,
204204
)
205-
: [...selectedOptions, currentValue]
205+
: [...selectedOptions, currentValue],
206206
);
207207
!setSelectedOptions && setShowOptions(false);
208208
}}
@@ -215,7 +215,7 @@ export default function InputComponent({
215215
selectedOption === option ||
216216
selectedOptions?.includes(option)
217217
? "opacity-100"
218-
: "opacity-0"
218+
: "opacity-0",
219219
)}
220220
>
221221
<div className="absolute opacity-100 transition-all group-hover:opacity-0">
@@ -254,7 +254,7 @@ export default function InputComponent({
254254
((selectedOptions?.length !== 0 || !onChange) &&
255255
setSelectedOptions)
256256
? ""
257-
: "hidden"
257+
: "hidden",
258258
)}
259259
onClick={
260260
((selectedOption !== "" || !onChange) && setSelectedOption) ||
@@ -275,7 +275,7 @@ export default function InputComponent({
275275
<span
276276
className={cn(
277277
password && selectedOption === "" ? "right-8" : "right-0",
278-
"absolute inset-y-0 flex items-center pr-2.5"
278+
"absolute inset-y-0 flex items-center pr-2.5",
279279
)}
280280
>
281281
<button
@@ -286,7 +286,7 @@ export default function InputComponent({
286286
selectedOption !== ""
287287
? "text-medium-indigo"
288288
: "text-muted-foreground",
289-
"hover:text-accent-foreground"
289+
"hover:text-accent-foreground",
290290
)}
291291
>
292292
<ForwardedIconComponent
@@ -298,67 +298,65 @@ export default function InputComponent({
298298
</span>
299299
)}
300300

301-
{password && selectedOption === "" && (
301+
{password && (!setSelectedOption || selectedOption === "") && (
302302
<button
303303
type="button"
304304
tabIndex={-1}
305305
className={classNames(
306306
"mb-px",
307307
editNode
308308
? "input-component-true-button"
309-
: "input-component-false-button"
309+
: "input-component-false-button",
310310
)}
311311
onClick={(event) => {
312312
event.preventDefault();
313313
setPwdVisible(!pwdVisible);
314314
}}
315315
>
316-
{password &&
317-
selectedOption === "" &&
318-
(pwdVisible ? (
319-
<svg
320-
xmlns="http://www.w3.org/2000/svg"
321-
fill="none"
322-
viewBox="0 0 24 24"
323-
strokeWidth={1.5}
324-
stroke="currentColor"
325-
className={classNames(
326-
editNode
327-
? "input-component-true-svg"
328-
: "input-component-false-svg"
329-
)}
330-
>
331-
<path
332-
strokeLinecap="round"
333-
strokeLinejoin="round"
334-
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"
335-
/>
336-
</svg>
337-
) : (
338-
<svg
339-
xmlns="http://www.w3.org/2000/svg"
340-
fill="none"
341-
viewBox="0 0 24 24"
342-
strokeWidth={1.5}
343-
stroke="currentColor"
344-
className={classNames(
345-
editNode
346-
? "input-component-true-svg"
347-
: "input-component-false-svg"
348-
)}
349-
>
350-
<path
351-
strokeLinecap="round"
352-
strokeLinejoin="round"
353-
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"
354-
/>
355-
<path
356-
strokeLinecap="round"
357-
strokeLinejoin="round"
358-
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
359-
/>
360-
</svg>
361-
))}
316+
{pwdVisible ? (
317+
<svg
318+
xmlns="http://www.w3.org/2000/svg"
319+
fill="none"
320+
viewBox="0 0 24 24"
321+
strokeWidth={1.5}
322+
stroke="currentColor"
323+
className={classNames(
324+
editNode
325+
? "input-component-true-svg"
326+
: "input-component-false-svg",
327+
)}
328+
>
329+
<path
330+
strokeLinecap="round"
331+
strokeLinejoin="round"
332+
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"
333+
/>
334+
</svg>
335+
) : (
336+
<svg
337+
xmlns="http://www.w3.org/2000/svg"
338+
fill="none"
339+
viewBox="0 0 24 24"
340+
strokeWidth={1.5}
341+
stroke="currentColor"
342+
className={classNames(
343+
editNode
344+
? "input-component-true-svg"
345+
: "input-component-false-svg",
346+
)}
347+
>
348+
<path
349+
strokeLinecap="round"
350+
strokeLinejoin="round"
351+
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"
352+
/>
353+
<path
354+
strokeLinecap="round"
355+
strokeLinejoin="round"
356+
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
357+
/>
358+
</svg>
359+
)}
362360
</button>
363361
)}
364362
</div>

‎src/frontend/src/components/tableComponent/index.tsx

+8-19
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,21 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
55
import { useDarkStore } from "../../stores/darkStore";
66
import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
77
import { cn } from "../../utils/utils";
8-
import { Card, CardContent } from "../ui/card";
98

109
const TableComponent = forwardRef<
1110
ElementRef<typeof AgGridReact>,
1211
ComponentPropsWithoutRef<typeof AgGridReact>
13-
>(({ pagination = true, ...props }, ref) => {
12+
>(({ ...props }, ref) => {
1413
const dark = useDarkStore((state) => state.dark);
1514

1615
return (
17-
<div className="flex h-full flex-col">
18-
<div
19-
className={cn(
20-
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
21-
"ag-theme-shadcn flex h-full flex-col",
22-
)} // applying the grid theme
23-
>
24-
<Card x-chunk="dashboard-04-chunk-2" className="pt-4">
25-
<CardContent>
26-
<AgGridReact
27-
overlayNoRowsTemplate="No data available"
28-
ref={ref}
29-
{...props}
30-
/>
31-
</CardContent>
32-
</Card>
33-
</div>
16+
<div
17+
className={cn(
18+
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
19+
"ag-theme-shadcn flex h-full flex-col",
20+
)} // applying the grid theme
21+
>
22+
<AgGridReact ref={ref} {...props} />
3423
</div>
3524
);
3625
});

‎src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx

+20-12
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Dropdown from "../../../../components/dropdownComponent";
88
import ForwardedIconComponent from "../../../../components/genericIconComponent";
99
import TableComponent from "../../../../components/tableComponent";
1010
import { Badge } from "../../../../components/ui/badge";
11+
import { Card, CardContent } from "../../../../components/ui/card";
1112
import { deleteGlobalVariable } from "../../../../controllers/API";
1213
import useAlertStore from "../../../../stores/alertStore";
1314
import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
@@ -81,7 +82,7 @@ export default function GlobalVariablesPage() {
8182
showDisabledCheckboxes: true,
8283
headerName: "Variable Name",
8384
field: "name",
84-
flex: 1,
85+
flex: 2,
8586
}, //This column will be twice as wide as the others
8687
{
8788
field: "type",
@@ -104,6 +105,7 @@ export default function GlobalVariablesPage() {
104105
field: "default_fields",
105106
flex: 1,
106107
editable: false,
108+
resizable: false,
107109
},
108110
]);
109111

@@ -168,17 +170,23 @@ export default function GlobalVariablesPage() {
168170
</div>
169171

170172
<div className="flex h-full w-full flex-col justify-between pb-8">
171-
<TableComponent
172-
onSelectionChanged={(event: SelectionChangedEvent) => {
173-
setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
174-
}}
175-
rowSelection="multiple"
176-
suppressRowClickSelection={true}
177-
domLayout="autoHeight"
178-
pagination={false}
179-
columnDefs={colDefs}
180-
rowData={rowData}
181-
/>
173+
<Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
174+
<CardContent className="h-full">
175+
<TableComponent
176+
overlayNoRowsTemplate="No data available"
177+
onSelectionChanged={(event: SelectionChangedEvent) => {
178+
setSelectedRows(
179+
event.api.getSelectedRows().map((row) => row.name),
180+
);
181+
}}
182+
rowSelection="multiple"
183+
suppressRowClickSelection={true}
184+
pagination={true}
185+
columnDefs={colDefs}
186+
rowData={rowData}
187+
/>
188+
</CardContent>
189+
</Card>
182190
</div>
183191
</div>
184192
);

‎src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
22
import { useState } from "react";
33
import ForwardedIconComponent from "../../../../components/genericIconComponent";
44
import TableComponent from "../../../../components/tableComponent";
5+
import { Card, CardContent } from "../../../../components/ui/card";
56

67
export default function ShortcutsPage() {
78
const advancedShortcut = "Ctrl + Shift + A";
@@ -95,12 +96,16 @@ export default function ShortcutsPage() {
9596
</div>
9697
</div>
9798
<div className="grid gap-6 pb-8">
98-
<TableComponent
99-
domLayout="autoHeight"
100-
pagination={false}
101-
columnDefs={colDefs}
102-
rowData={nodesRowData}
103-
/>
99+
<Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
100+
<CardContent className="h-full">
101+
<TableComponent
102+
domLayout="autoHeight"
103+
pagination={false}
104+
columnDefs={colDefs}
105+
rowData={nodesRowData}
106+
/>
107+
</CardContent>
108+
</Card>
104109
</div>
105110
</div>
106111
);

0 commit comments

Comments
 (0)