From 5bbba6799a7158d11cd87724e56b2b29dc060cf0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 4 Jun 2024 17:46:52 -0300 Subject: [PATCH 01/44] Fixed backend not returning createdAt --- .../base/langflow/services/database/models/api_key/model.py | 1 + 1 file changed, 1 insertion(+) diff --git a/src/backend/base/langflow/services/database/models/api_key/model.py b/src/backend/base/langflow/services/database/models/api_key/model.py index cb216d9ae..157b08b32 100644 --- a/src/backend/base/langflow/services/database/models/api_key/model.py +++ b/src/backend/base/langflow/services/database/models/api_key/model.py @@ -55,6 +55,7 @@ class ApiKeyRead(ApiKeyBase): id: UUID api_key: str = Field(schema_extra={"validate_default": True}) user_id: UUID = Field() + created_at: datetime = Field() @field_validator("api_key") @classmethod From d4a0c161c58f1ccf991b5ec0a7a4e01980b61ce1 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 4 Jun 2024 17:53:24 -0300 Subject: [PATCH 02/44] Added table renderer on API Keys page --- .../components/tableAutoCellRender/index.tsx | 1 + src/frontend/src/pages/ApiKeysPage/index.tsx | 287 ++++++++++-------- src/frontend/src/utils/utils.ts | 6 +- 3 files changed, 164 insertions(+), 130 deletions(-) diff --git a/src/frontend/src/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableAutoCellRender/index.tsx index 21b598dd2..d38e55a9d 100644 --- a/src/frontend/src/components/tableAutoCellRender/index.tsx +++ b/src/frontend/src/components/tableAutoCellRender/index.tsx @@ -24,6 +24,7 @@ export default function TableAutoCellRender({ } break; case "string": + console.log(isTimeStampString(value), value); if (isTimeStampString(value)) { return ; } diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx index 49f38715e..c971042d0 100644 --- a/src/frontend/src/pages/ApiKeysPage/index.tsx +++ b/src/frontend/src/pages/ApiKeysPage/index.tsx @@ -30,6 +30,8 @@ import { } from "../../constants/constants"; import useAlertStore from "../../stores/alertStore"; import { ApiKey } from "../../types/components"; +import TableComponent from "../../components/tableComponent"; +import TableAutoCellRender from "../../components/tableAutoCellRender"; export default function ApiKeysPage() { const [loadingKeys, setLoadingKeys] = useState(true); @@ -48,7 +50,10 @@ export default function ApiKeysPage() { if (userData) { getApiKey() .then((keys: [ApiKey]) => { - keysList.current = keys["api_keys"]; + keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({ + ...apikey, + last_used_at: apikey.last_used_at ?? "Never", + })); setUserId(keys["user_id"]); setLoadingKeys(false); }) @@ -89,6 +94,26 @@ export default function ApiKeysPage() { ); } + const columnDefs = [ + { headerName: "Name", field: "name", cellRenderer: TableAutoCellRender }, + { headerName: "Key", field: "api_key", cellRenderer: TableAutoCellRender }, + { + headerName: "Created", + field: "created_at", + cellRenderer: TableAutoCellRender, + }, + { + headerName: "Last Used", + field: "last_used_at", + cellRenderer: TableAutoCellRender, + }, + { + headerName: "Total Uses", + field: "total_uses", + cellRenderer: TableAutoCellRender, + }, + ]; + return ( <>
@@ -128,141 +153,147 @@ export default function ApiKeysPage() { )}
{keysList.current && keysList.current.length > 0 && !loadingKeys && ( - - - - Name - Key - Created - - Last Used - -
- -
- - - Total Uses - - - - {!loadingKeys && ( - - {keysList.current.map( - (api_keys: ApiKey, index: number) => ( - - - - - {api_keys.name ? api_keys.name : "-"} - - - - - - {api_keys.api_key} - - - - -
- {moment(api_keys.created_at).format( - "YYYY-MM-DD HH:mm" - )} -
- - - - -
- {moment(api_keys.last_used_at).format( - "YYYY-MM-DD HH:mm" - ) === "Invalid date" - ? "Never" - : moment( - api_keys.last_used_at - ).format("YYYY-MM-DD HH:mm")} -
- - - - {api_keys.total_uses} - - -
- { - handleDeleteKey(keys); - }} - > - - - Are you sure you want to delete - this key? This action cannot be - undone. - - - - - - -
- - - ) - )} - - )} -
+ <> + + )}
- + {/* + + + Name + Key + Created + + Last Used + +
+ +
+ + + Total Uses + + + + {!loadingKeys && ( + + {keysList.current.map( + (api_keys: ApiKey, index: number) => ( + + + + + {api_keys.name ? api_keys.name : "-"} + + + + + + {api_keys.api_key} + + + + +
+ {moment(api_keys.created_at).format( + "YYYY-MM-DD HH:mm" + )} +
+ + + + +
+ {moment(api_keys.last_used_at).format( + "YYYY-MM-DD HH:mm" + ) === "Invalid date" + ? "Never" + : moment( + api_keys.last_used_at + ).format("YYYY-MM-DD HH:mm")} +
+ + + + {api_keys.total_uses} + + +
+ { + handleDeleteKey(keys); + }} + > + + + Are you sure you want to delete + this key? This action cannot be + undone. + + + + + + +
+ + + ) + )} + + )} +
*/}
Date: Tue, 4 Jun 2024 17:58:46 -0300 Subject: [PATCH 03/44] Added API Keys page into Settings --- src/frontend/src/pages/SettingsPage/index.tsx | 11 +- .../SettingsPage/pages/ApiKeysPage/index.tsx | 194 ++++++++++++++++++ src/frontend/src/routes.tsx | 3 +- 3 files changed, 206 insertions(+), 2 deletions(-) create mode 100644 src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx index 0abab2aec..841af6033 100644 --- a/src/frontend/src/pages/SettingsPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/index.tsx @@ -25,7 +25,6 @@ export default function SettingsPage(): JSX.Element { /> ), }, - { title: "Global Variables", href: "/settings/global-variables", @@ -36,6 +35,16 @@ export default function SettingsPage(): JSX.Element { /> ), }, + { + title: "API Keys", + href: "/settings/api-keys", + icon: ( + + ), + }, { title: "Shortcuts", href: "/settings/shortcuts", diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx new file mode 100644 index 000000000..c6eb048d7 --- /dev/null +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx @@ -0,0 +1,194 @@ +import IconComponent from "../../../../components/genericIconComponent"; +import { Button } from "../../../../components/ui/button"; + +import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community"; +import { useEffect, useState } from "react"; +import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton"; +import Dropdown from "../../../../components/dropdownComponent"; +import ForwardedIconComponent from "../../../../components/genericIconComponent"; +import TableComponent from "../../../../components/tableComponent"; +import { Badge } from "../../../../components/ui/badge"; +import { Card, CardContent } from "../../../../components/ui/card"; +import { deleteGlobalVariable } from "../../../../controllers/API"; +import useAlertStore from "../../../../stores/alertStore"; +import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables"; +import { cn } from "../../../../utils/utils"; + +export default function ApiKeysPage() { + const globalVariablesEntries = useGlobalVariablesStore( + (state) => state.globalVariablesEntries, + ); + const removeGlobalVariable = useGlobalVariablesStore( + (state) => state.removeGlobalVariable, + ); + const globalVariables = useGlobalVariablesStore( + (state) => state.globalVariables, + ); + const setErrorData = useAlertStore((state) => state.setErrorData); + const getVariableId = useGlobalVariablesStore((state) => state.getVariableId); + + const BadgeRenderer = (props) => { + return props.value !== "" ? ( +
+ + {props.value} + +
+ ) : ( +
+ ); + }; + + const [rowData, setRowData] = useState< + { + type: string | undefined; + id: string; + name: string; + default_fields: string | undefined; + }[] + >([]); + + useEffect(() => { + const rows: Array<{ + type: string | undefined; + id: string; + name: string; + default_fields: string | undefined; + }> = []; + if (globalVariablesEntries === undefined) return; + globalVariablesEntries.forEach((entrie) => { + const globalVariableObj = globalVariables[entrie]; + rows.push({ + type: globalVariableObj.type, + id: globalVariableObj.id, + default_fields: (globalVariableObj.default_fields ?? []).join(", "), + name: entrie, + }); + }); + setRowData(rows); + }, [globalVariables]); + + const DropdownEditor = ({ options, value, onValueChange }) => { + return ( + +
+ + ); + }; + // Column Definitions: Defines the columns to be displayed. + const [colDefs, setColDefs] = useState<(ColDef | ColGroupDef)[]>([ + { + headerCheckboxSelection: true, + checkboxSelection: true, + showDisabledCheckboxes: true, + headerName: "Variable Name", + field: "name", + flex: 2, + }, //This column will be twice as wide as the others + { + field: "type", + cellRenderer: BadgeRenderer, + cellEditor: DropdownEditor, + cellEditorParams: { + options: ["Generic", "Credential"], + }, + flex: 1, + editable: false, + }, + // { + // field: "value", + // cellEditor: "agLargeTextCellEditor", + // flex: 2, + // editable: false, + // }, + { + headerName: "Apply To Fields", + field: "default_fields", + flex: 1, + editable: false, + resizable: false, + }, + ]); + + const [selectedRows, setSelectedRows] = useState([]); + + async function removeVariables() { + const deleteGlobalVariablesPromise = selectedRows.map(async (row) => { + const id = getVariableId(row); + const deleteGlobalVariables = deleteGlobalVariable(id!); + await deleteGlobalVariables; + }); + Promise.all(deleteGlobalVariablesPromise) + .then(() => { + selectedRows.forEach((row) => { + removeGlobalVariable(row); + }); + }) + .catch(() => { + setErrorData({ + title: `Error deleting global variables.`, + }); + }); + } + + return ( +
+
+
+

+ Global Variables + +

+

+ Manage global variables and assign them to fields. +

+
+
+ + + + +
+
+ +
+ + + { + setSelectedRows( + event.api.getSelectedRows().map((row) => row.name), + ); + }} + rowSelection="multiple" + suppressRowClickSelection={true} + pagination={true} + columnDefs={colDefs} + rowData={rowData} + /> + + +
+
+ ); +} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index d49e035f7..12be22d9e 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -6,7 +6,6 @@ import { CatchAllRoute } from "./components/catchAllRoutes"; import { StoreGuard } from "./components/storeGuard"; import AdminPage from "./pages/AdminPage"; import LoginAdminPage from "./pages/AdminPage/LoginPage"; -import ApiKeysPage from "./pages/ApiKeysPage"; import DeleteAccountPage from "./pages/DeleteAccountPage"; import FlowPage from "./pages/FlowPage"; import LoginPage from "./pages/LoginPage"; @@ -16,6 +15,7 @@ import PlaygroundPage from "./pages/Playground"; import SettingsPage from "./pages/SettingsPage"; import GeneralPage from "./pages/SettingsPage/pages/GeneralPage"; import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage"; +import ApiKeysPage from "./pages/SettingsPage/pages/ApiKeysPage"; import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage"; import SignUp from "./pages/SignUpPage"; import StorePage from "./pages/StorePage"; @@ -56,6 +56,7 @@ const Router = () => { > } /> } /> + } /> } /> } /> From 24ba353a104caa8cef964db84a623488adc2964e Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 4 Jun 2024 18:13:53 -0300 Subject: [PATCH 04/44] Added table of API Keys at settings page --- .../src/constants/alerts_constants.tsx | 2 + src/frontend/src/constants/constants.ts | 7 +- src/frontend/src/pages/ApiKeysPage/index.tsx | 7 +- .../SettingsPage/pages/ApiKeysPage/index.tsx | 234 +++++++++--------- 4 files changed, 129 insertions(+), 121 deletions(-) diff --git a/src/frontend/src/constants/alerts_constants.tsx b/src/frontend/src/constants/alerts_constants.tsx index c3e3ba946..ebc7543d5 100644 --- a/src/frontend/src/constants/alerts_constants.tsx +++ b/src/frontend/src/constants/alerts_constants.tsx @@ -23,6 +23,7 @@ export const USER_EDIT_ERROR_ALERT = "Error on edit user"; export const USER_ADD_ERROR_ALERT = "Error when adding new user"; export const SIGNIN_ERROR_ALERT = "Error signing in"; export const DEL_KEY_ERROR_ALERT = "Error on delete key"; +export const DEL_KEY_ERROR_ALERT_PLURAL = "Error on delete keys"; export const UPLOAD_ERROR_ALERT = "Error uploading file"; export const WRONG_FILE_ERROR_ALERT = "Invalid file type"; export const UPLOAD_ALERT_LIST = "Please upload a JSON file"; @@ -54,6 +55,7 @@ export const USER_DEL_SUCCESS_ALERT = "Success! User deleted!"; export const USER_EDIT_SUCCESS_ALERT = "Success! User edited!"; export const USER_ADD_SUCCESS_ALERT = "Success! New user added!"; export const DEL_KEY_SUCCESS_ALERT = "Success! Key deleted!"; +export const DEL_KEY_SUCCESS_ALERT_PLURAL = "Success! Keys deleted!"; export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`; export const SAVE_SUCCESS_ALERT = "Changes saved successfully!"; diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index b0a0b55c5..ce9bf4d37 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -613,11 +613,8 @@ export const FETCH_ERROR_DESCRIPION = export const SIGN_UP_SUCCESS = "Account created! Await admin activation. "; -export const API_PAGE_PARAGRAPH_1 = - "Your secret API keys are listed below. Please note that we do not display your secret API keys again after you generate them."; - -export const API_PAGE_PARAGRAPH_2 = - "Do not share your API key with others, or expose it in the browser or other client-side code."; +export const API_PAGE_PARAGRAPH = + "Your secret API keys are listed below. Do not share your API key with others, or expose it in the browser or other client-side code."; export const API_PAGE_USER_KEYS = "This user does not have any keys assigned at the moment."; diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx index c971042d0..4e271825e 100644 --- a/src/frontend/src/pages/ApiKeysPage/index.tsx +++ b/src/frontend/src/pages/ApiKeysPage/index.tsx @@ -22,8 +22,7 @@ import { DEL_KEY_SUCCESS_ALERT, } from "../../constants/alerts_constants"; import { - API_PAGE_PARAGRAPH_1, - API_PAGE_PARAGRAPH_2, + API_PAGE_PARAGRAPH, API_PAGE_USER_KEYS, LAST_USED_SPAN_1, LAST_USED_SPAN_2, @@ -128,9 +127,7 @@ export default function ApiKeysPage() { API keys

- {API_PAGE_PARAGRAPH_1} -
- {API_PAGE_PARAGRAPH_2} + {API_PAGE_PARAGRAPH}

diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx index c6eb048d7..96eca02d5 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx @@ -2,149 +2,154 @@ import IconComponent from "../../../../components/genericIconComponent"; import { Button } from "../../../../components/ui/button"; import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community"; -import { useEffect, useState } from "react"; +import { useContext, useEffect, useRef, useState } from "react"; import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton"; import Dropdown from "../../../../components/dropdownComponent"; import ForwardedIconComponent from "../../../../components/genericIconComponent"; import TableComponent from "../../../../components/tableComponent"; import { Badge } from "../../../../components/ui/badge"; import { Card, CardContent } from "../../../../components/ui/card"; -import { deleteGlobalVariable } from "../../../../controllers/API"; +import { + deleteApiKey, + deleteGlobalVariable, + getApiKey, +} from "../../../../controllers/API"; import useAlertStore from "../../../../stores/alertStore"; import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables"; import { cn } from "../../../../utils/utils"; +import { + API_PAGE_PARAGRAPH, + LAST_USED_SPAN_1, + LAST_USED_SPAN_2, +} from "../../../../constants/constants"; +import TableAutoCellRender from "../../../../components/tableAutoCellRender"; +import { + DEL_KEY_SUCCESS_ALERT, + DEL_KEY_ERROR_ALERT, + DEL_KEY_SUCCESS_ALERT_PLURAL, + DEL_KEY_ERROR_ALERT_PLURAL, +} from "../../../../constants/alerts_constants"; +import { AuthContext } from "../../../../contexts/authContext"; +import { ApiKey } from "../../../../types/components"; +import SecretKeyModal from "../../../../modals/secretKeyModal"; export default function ApiKeysPage() { - const globalVariablesEntries = useGlobalVariablesStore( - (state) => state.globalVariablesEntries, - ); - const removeGlobalVariable = useGlobalVariablesStore( - (state) => state.removeGlobalVariable, - ); - const globalVariables = useGlobalVariablesStore( - (state) => state.globalVariables, - ); + const [loadingKeys, setLoadingKeys] = useState(true); + const [selectedRows, setSelectedRows] = useState([]); + const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); - const getVariableId = useGlobalVariablesStore((state) => state.getVariableId); - - const BadgeRenderer = (props) => { - return props.value !== "" ? ( -
- - {props.value} - -
- ) : ( -
- ); - }; - - const [rowData, setRowData] = useState< - { - type: string | undefined; - id: string; - name: string; - default_fields: string | undefined; - }[] - >([]); + const { userData } = useContext(AuthContext); + const [userId, setUserId] = useState(""); + const keysList = useRef([]); useEffect(() => { - const rows: Array<{ - type: string | undefined; - id: string; - name: string; - default_fields: string | undefined; - }> = []; - if (globalVariablesEntries === undefined) return; - globalVariablesEntries.forEach((entrie) => { - const globalVariableObj = globalVariables[entrie]; - rows.push({ - type: globalVariableObj.type, - id: globalVariableObj.id, - default_fields: (globalVariableObj.default_fields ?? []).join(", "), - name: entrie, - }); - }); - setRowData(rows); - }, [globalVariables]); + getKeys(); + }, [userData]); - const DropdownEditor = ({ options, value, onValueChange }) => { + function getKeys() { + setLoadingKeys(true); + if (userData) { + getApiKey() + .then((keys: [ApiKey]) => { + keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({ + ...apikey, + last_used_at: apikey.last_used_at ?? "Never", + })); + setUserId(keys["user_id"]); + setLoadingKeys(false); + }) + .catch((error) => { + setLoadingKeys(false); + }); + } + } + + function resetFilter() { + getKeys(); + } + + function handleDeleteKey() { + Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow))) + .then((res) => { + resetFilter(); + setSuccessData({ + title: + selectedRows.length === 1 + ? DEL_KEY_SUCCESS_ALERT + : DEL_KEY_SUCCESS_ALERT_PLURAL, + }); + }) + .catch((error) => { + setErrorData({ + title: + selectedRows.length === 1 + ? DEL_KEY_ERROR_ALERT + : DEL_KEY_ERROR_ALERT_PLURAL, + list: [error["response"]["data"]["detail"]], + }); + }); + } + + function lastUsedMessage() { return ( - -
- +
+ + {LAST_USED_SPAN_1} +

{LAST_USED_SPAN_2} + +
); - }; - // Column Definitions: Defines the columns to be displayed. - const [colDefs, setColDefs] = useState<(ColDef | ColGroupDef)[]>([ + } + + const columnDefs = [ { headerCheckboxSelection: true, checkboxSelection: true, showDisabledCheckboxes: true, - headerName: "Variable Name", + headerName: "Name", field: "name", + cellRenderer: TableAutoCellRender, flex: 2, - }, //This column will be twice as wide as the others - { - field: "type", - cellRenderer: BadgeRenderer, - cellEditor: DropdownEditor, - cellEditorParams: { - options: ["Generic", "Credential"], - }, - flex: 1, - editable: false, }, - // { - // field: "value", - // cellEditor: "agLargeTextCellEditor", - // flex: 2, - // editable: false, - // }, { - headerName: "Apply To Fields", - field: "default_fields", + headerName: "Key", + field: "api_key", + cellRenderer: TableAutoCellRender, + flex: 1, + }, + { + headerName: "Created", + field: "created_at", + cellRenderer: TableAutoCellRender, + flex: 1, + }, + { + headerName: "Last Used", + field: "last_used_at", + cellRenderer: TableAutoCellRender, + flex: 1, + }, + { + headerName: "Total Uses", + field: "total_uses", + cellRenderer: TableAutoCellRender, flex: 1, - editable: false, resizable: false, }, - ]); - - const [selectedRows, setSelectedRows] = useState([]); - - async function removeVariables() { - const deleteGlobalVariablesPromise = selectedRows.map(async (row) => { - const id = getVariableId(row); - const deleteGlobalVariables = deleteGlobalVariable(id!); - await deleteGlobalVariables; - }); - Promise.all(deleteGlobalVariablesPromise) - .then(() => { - selectedRows.forEach((row) => { - removeGlobalVariable(row); - }); - }) - .catch(() => { - setErrorData({ - title: `Error deleting global variables.`, - }); - }); - } + ]; return (

- Global Variables + API Keys

-

- Manage global variables and assign them to fields. -

+

{API_PAGE_PARAGRAPH}

- + - +
@@ -177,14 +189,14 @@ export default function ApiKeysPage() { overlayNoRowsTemplate="No data available" onSelectionChanged={(event: SelectionChangedEvent) => { setSelectedRows( - event.api.getSelectedRows().map((row) => row.name), + event.api.getSelectedRows().map((row) => row.id), ); }} rowSelection="multiple" suppressRowClickSelection={true} pagination={true} - columnDefs={colDefs} - rowData={rowData} + columnDefs={columnDefs} + rowData={keysList.current} /> From 828df1ab7b5bc33c95194a2ef83eb8548fe29a80 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 4 Jun 2024 18:15:14 -0300 Subject: [PATCH 05/44] Removed API Keys page --- src/frontend/src/pages/ApiKeysPage/index.tsx | 319 ------------------- 1 file changed, 319 deletions(-) delete mode 100644 src/frontend/src/pages/ApiKeysPage/index.tsx diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx deleted file mode 100644 index 4e271825e..000000000 --- a/src/frontend/src/pages/ApiKeysPage/index.tsx +++ /dev/null @@ -1,319 +0,0 @@ -import { useContext, useEffect, useRef, useState } from "react"; -import IconComponent from "../../components/genericIconComponent"; -import ShadTooltip from "../../components/shadTooltipComponent"; -import { Button } from "../../components/ui/button"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "../../components/ui/table"; -import { AuthContext } from "../../contexts/authContext"; -import { deleteApiKey, getApiKey } from "../../controllers/API"; -import ConfirmationModal from "../../modals/confirmationModal"; -import SecretKeyModal from "../../modals/secretKeyModal"; - -import moment from "moment"; -import Header from "../../components/headerComponent"; -import { - DEL_KEY_ERROR_ALERT, - DEL_KEY_SUCCESS_ALERT, -} from "../../constants/alerts_constants"; -import { - API_PAGE_PARAGRAPH, - API_PAGE_USER_KEYS, - LAST_USED_SPAN_1, - LAST_USED_SPAN_2, -} from "../../constants/constants"; -import useAlertStore from "../../stores/alertStore"; -import { ApiKey } from "../../types/components"; -import TableComponent from "../../components/tableComponent"; -import TableAutoCellRender from "../../components/tableAutoCellRender"; - -export default function ApiKeysPage() { - const [loadingKeys, setLoadingKeys] = useState(true); - const setSuccessData = useAlertStore((state) => state.setSuccessData); - const setErrorData = useAlertStore((state) => state.setErrorData); - const { userData } = useContext(AuthContext); - const [userId, setUserId] = useState(""); - const keysList = useRef([]); - - useEffect(() => { - getKeys(); - }, [userData]); - - function getKeys() { - setLoadingKeys(true); - if (userData) { - getApiKey() - .then((keys: [ApiKey]) => { - keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({ - ...apikey, - last_used_at: apikey.last_used_at ?? "Never", - })); - setUserId(keys["user_id"]); - setLoadingKeys(false); - }) - .catch((error) => { - setLoadingKeys(false); - }); - } - } - - function resetFilter() { - getKeys(); - } - - function handleDeleteKey(keys) { - deleteApiKey(keys) - .then((res) => { - resetFilter(); - setSuccessData({ - title: DEL_KEY_SUCCESS_ALERT, - }); - }) - .catch((error) => { - setErrorData({ - title: DEL_KEY_ERROR_ALERT, - list: [error["response"]["data"]["detail"]], - }); - }); - } - - function lastUsedMessage() { - return ( -
- - {LAST_USED_SPAN_1} -

{LAST_USED_SPAN_2} - -
- ); - } - - const columnDefs = [ - { headerName: "Name", field: "name", cellRenderer: TableAutoCellRender }, - { headerName: "Key", field: "api_key", cellRenderer: TableAutoCellRender }, - { - headerName: "Created", - field: "created_at", - cellRenderer: TableAutoCellRender, - }, - { - headerName: "Last Used", - field: "last_used_at", - cellRenderer: TableAutoCellRender, - }, - { - headerName: "Total Uses", - field: "total_uses", - cellRenderer: TableAutoCellRender, - }, - ]; - - return ( - <> -
- {userData && ( -
-
-
-
-
-
-

- API keys -

-

- {API_PAGE_PARAGRAPH} -

-
-
-
- - {keysList.current && - keysList.current.length === 0 && - !loadingKeys && ( - <> -
-

{API_PAGE_USER_KEYS}

-
- - )} - <> - {loadingKeys && ( -
- Loading... -
- )} -
- {keysList.current && - keysList.current.length > 0 && - !loadingKeys && ( - <> - - - )} -
- {/* - - - Name - Key - Created - - Last Used - -
- -
- - - Total Uses - - - - {!loadingKeys && ( - - {keysList.current.map( - (api_keys: ApiKey, index: number) => ( - - - - - {api_keys.name ? api_keys.name : "-"} - - - - - - {api_keys.api_key} - - - - -
- {moment(api_keys.created_at).format( - "YYYY-MM-DD HH:mm" - )} -
- - - - -
- {moment(api_keys.last_used_at).format( - "YYYY-MM-DD HH:mm" - ) === "Invalid date" - ? "Never" - : moment( - api_keys.last_used_at - ).format("YYYY-MM-DD HH:mm")} -
- - - - {api_keys.total_uses} - - -
- { - handleDeleteKey(keys); - }} - > - - - Are you sure you want to delete - this key? This action cannot be - undone. - - - - - - -
- - - ) - )} - - )} -
*/} -
-
- - - -
-
- -
-
-
-
- )} - - ); -} From 3ab1aa0d8edbefc588d414fbbea3cbc572b337bd Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 4 Jun 2024 18:26:43 -0300 Subject: [PATCH 06/44] Added Untitled as name of API Keys without name --- .../src/pages/SettingsPage/pages/ApiKeysPage/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx index 96eca02d5..d78a65afb 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx @@ -53,6 +53,7 @@ export default function ApiKeysPage() { .then((keys: [ApiKey]) => { keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({ ...apikey, + name: apikey.name && apikey.name !== "" ? apikey.name : "Untitled", last_used_at: apikey.last_used_at ?? "Never", })); setUserId(keys["user_id"]); @@ -166,14 +167,7 @@ export default function ApiKeysPage() { )} /> - +
{onSubmit ? ( -
{ event.preventDefault(); onSubmit(); @@ -275,7 +276,7 @@ function BaseModal({ {ContentFooter && (
{ContentFooter}
)} -
+ ) : ( <>
Date: Tue, 4 Jun 2024 18:33:30 -0300 Subject: [PATCH 08/44] Added JSX Element to description types on BaseModal --- src/frontend/src/modals/baseModal/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index 897f14e2e..59336d405 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -53,10 +53,10 @@ const Trigger: React.FC = ({ ); }; -const Header: React.FC<{ children: ReactNode; description: string | null }> = ({ - children, - description, -}: modalHeaderType): JSX.Element => { +const Header: React.FC<{ + children: ReactNode; + description: string | JSX.Element | null; +}> = ({ children, description }: modalHeaderType): JSX.Element => { return ( {children} From 37238ca2ca4284db6b41d3077a27ce9aa055fccf Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 4 Jun 2024 18:52:10 -0300 Subject: [PATCH 09/44] Fixed secret key modal, made it congruent with existing design --- .../src/modals/secretKeyModal/index.tsx | 170 +++++++----------- src/frontend/src/types/components/index.ts | 6 +- 2 files changed, 70 insertions(+), 106 deletions(-) diff --git a/src/frontend/src/modals/secretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx index 879280dd5..f700501d1 100644 --- a/src/frontend/src/modals/secretKeyModal/index.tsx +++ b/src/frontend/src/modals/secretKeyModal/index.tsx @@ -11,15 +11,10 @@ import { nodeIconsLucide } from "../../utils/styleUtils"; import BaseModal from "../baseModal"; export default function SecretKeyModal({ - title, - cancelText, - confirmationText, children, - icon, data, onCloseModal, }: ApiKeyType) { - const Icon: any = nodeIconsLucide[icon]; const [open, setOpen] = useState(false); const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? ""); const [apiKeyValue, setApiKeyValue] = useState(""); @@ -66,118 +61,91 @@ export default function SecretKeyModal({ .catch((err) => {}); } + function handleSubmitForm() { + if (!renderKey) { + setRenderKey(true); + handleAddNewKey(); + } else { + setOpen(false); + } + } + return ( - + {children} - - {title} - - - {renderKey === true && ( - <> - + + {" "} Please save this secret key somewhere safe and accessible. For security reasons,{" "} you won't be able to view it again through your account. If you lose this secret key, you'll need to generate a new one. - -
+ + ) : ( + <>Create a secret API Key to use Langflow API. + ) + } + > + Create API Key +
); - break; case "bool": return ( -
- {" "} - { - handleOnNewValue(isEnabled, templateData.key); - }} - size="small" - editNode={true} - /> -
+ { + handleOnNewValue(isEnabled, templateData.key); + }} + size="small" + editNode={true} + /> ); case "float": return ( -
- { - handleOnNewValue(value, templateData.key); - }} - /> -
+ { + handleOnNewValue(value, templateData.key); + }} + /> ); case "int": return ( -
- { - handleOnNewValue(value, templateData.key); - }} - /> -
+ { + handleOnNewValue(value, templateData.key); + }} + /> ); - break; case "file": return ( -
- { - handleOnNewValue(value, templateData.key); - }} - fileTypes={templateData.fileTypes} - onFileChange={(filePath: string) => { - templateData.file_path = filePath; - }} - > -
+ { + handleOnNewValue(value, templateData.key); + }} + fileTypes={templateData.fileTypes} + onFileChange={(filePath: string) => { + templateData.file_path = filePath; + }} + /> ); case "prompt": return ( -
- { - nodeClass = value; - }} - value={templateValue ?? ""} - onChange={(value: string | string[]) => { - handleOnNewValue(value, templateData.key); - }} - id={"prompt-area-edit-" + templateData.name} - data-testid={"modal-prompt-input-" + templateData.name} - /> -
+ { + nodeClass = value; + }} + value={templateValue ?? ""} + onChange={(value: string | string[]) => { + handleOnNewValue(value, templateData.key); + }} + id={"prompt-area-edit-" + templateData.name} + data-testid={"modal-prompt-input-" + templateData.name} + /> ); - break; case "code": return ( -
- { - nodeClass = value; - }} - nodeClass={nodeClass} - disabled={disabled} - editNode={true} - value={templateData.value ?? ""} - onChange={(value: string | string[]) => { - handleOnNewValue(value, templateData.key); - }} - id={"code-area-edit" + templateData.name} - /> -
+ { + nodeClass = value; + }} + nodeClass={nodeClass} + disabled={disabled} + editNode={true} + value={templateValue ?? ""} + onChange={(value: string | string[]) => { + handleOnNewValue(value, templateData.key); + }} + id={"code-area-edit" + templateData.name} + /> ); - break; case "Any": return <>-; - break; default: return String(templateValue); } } return ( -
+
{getCellType()}
); diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx index ef1dc0d33..e76518f03 100644 --- a/src/frontend/src/components/toggleShadComponent/index.tsx +++ b/src/frontend/src/components/toggleShadComponent/index.tsx @@ -29,20 +29,18 @@ export default function ToggleShadComponent({ } return ( -
- { - setEnabled(isEnabled); - }} - > -
+ { + setEnabled(isEnabled); + }} + > ); } diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 771129d94..90aa35b22 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -1,5 +1,5 @@ import { cloneDeep } from "lodash"; -import { forwardRef, useEffect, useState } from "react"; +import { forwardRef, useEffect, useRef, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import { Badge } from "../../components/ui/badge"; import { @@ -35,36 +35,28 @@ const EditNodeModal = forwardRef( const dataFromStore = nodes.find((node) => node.id === node.id)?.data; - const [myData, setMyData] = useState(dataFromStore ?? data); + const myData = useRef(dataFromStore ?? data); const setNode = useFlowStore((state) => state.setNode); function changeAdvanced(n) { - setMyData((old) => { - let newData = cloneDeep(old); - newData.node!.template[n].advanced = - !newData.node!.template[n].advanced; - return newData; - }); + myData.current.node!.template[n].advanced = + !myData.current.node!.template[n].advanced; } const handleOnNewValue = (newValue: any, name) => { - setMyData((old) => { - let newData = cloneDeep(old); - newData.node!.template[name].value = newValue; - return newData; - }); + myData.current.node!.template[name].value = newValue; }; useEffect(() => { if (open) { - setMyData(data); // reset data to what it is on node when opening modal + myData.current = data; // reset data to what it is on node when opening modal } }, [open]); - const rowData = Object.keys(myData.node!.template) + const rowData = Object.keys(myData.current.node!.template) .filter((key: string) => { - const templateParam = myData.node!.template[ + const templateParam = myData.current.node!.template[ key ] as TemplateVariableType; return ( @@ -78,7 +70,7 @@ const EditNodeModal = forwardRef( ); }) .map((key: string) => { - const templateParam = myData.node!.template[ + const templateParam = myData.current.node!.template[ key ] as TemplateVariableType; return { @@ -115,21 +107,16 @@ const EditNodeModal = forwardRef( field: "value", cellRenderer: TableNodeCellRender, valueGetter: (params: ValueGetterParams) => { - console.log("params", params); return { value: params.data.value, - nodeClass: myData.node, + nodeClass: myData.current.node, handleOnNewValue: handleOnNewValue, handleOnChangeDb: (value, key) => { - setMyData((oldData) => { - let newData = cloneDeep(oldData); - newData.node!.template[key].load_from_db = value; - return newData; - }); + myData.current.node!.template[key].load_from_db = value; }, }; }, - minWidth: 300, + minWidth: 330, flex: 1, resizable: false, }, @@ -159,14 +146,14 @@ const EditNodeModal = forwardRef( open={open} setOpen={setOpen} onChangeOpenModal={(open) => { - setMyData(data); + myData.current = data; }} onSubmit={() => { setNode(data.id, (old) => ({ ...old, data: { ...old.data, - node: myData.node, + node: myData.current.node, }, })); setOpen(false); @@ -175,9 +162,9 @@ const EditNodeModal = forwardRef( <> - - {myData.type} - ID: {myData.id} + + {myData.current.type} + ID: {myData.current.id}
From 1259a8a58164cdbfa0705e1cbfc593e138e574c2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 14:08:08 -0300 Subject: [PATCH 15/44] Fixed popover not in front of other table rows --- .../src/components/dropdownComponent/index.tsx | 5 ++--- .../inputComponent/components/popover/index.tsx | 13 ++++++++++--- .../components/popoverObject/index.tsx | 15 ++++++++++++--- .../src/components/inputComponent/index.tsx | 1 + .../src/components/tableNodeCellRender/index.tsx | 2 +- 5 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index 8402d166e..4aa9dcf07 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -33,9 +33,8 @@ export default function Dropdown({ const refButton = useRef(null); - const PopoverContentDropdown = children - ? PopoverContent - : PopoverContentWithoutPortal; + const PopoverContentDropdown = + children || editNode ? PopoverContent : PopoverContentWithoutPortal; return ( <> diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx index 78fc5bd3d..e93f69207 100644 --- a/src/frontend/src/components/inputComponent/components/popover/index.tsx +++ b/src/frontend/src/components/inputComponent/components/popover/index.tsx @@ -10,7 +10,11 @@ import { CommandList, } from "../../../ui/command"; import { Input } from "../../../ui/input"; -import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover"; +import { + Popover, + PopoverContent, + PopoverContentWithoutPortal, +} from "../../../ui/popover"; const CustomInputPopover = ({ id, refInput, @@ -39,6 +43,9 @@ const CustomInputPopover = ({ showOptions, }) => { const setErrorData = useAlertStore.getState().setErrorData; + const PopoverContentInput = editNode + ? PopoverContent + : PopoverContentWithoutPortal; const handleInputChange = (e) => { if (password) { @@ -107,7 +114,7 @@ const CustomInputPopover = ({ data-testid={editNode ? id + "-edit" : id} /> - - + ); }; diff --git a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx index 7b30ac897..e907ec239 100644 --- a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx +++ b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx @@ -9,7 +9,11 @@ import { CommandList, } from "../../../ui/command"; import { Input } from "../../../ui/input"; -import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover"; +import { + Popover, + PopoverContent, + PopoverContentWithoutPortal, +} from "../../../ui/popover"; const CustomInputPopoverObject = ({ id, refInput, @@ -23,6 +27,7 @@ const CustomInputPopoverObject = ({ disabled, setShowOptions, required, + editNode, className, placeholder, onChange, @@ -34,6 +39,10 @@ const CustomInputPopoverObject = ({ handleKeyDown, showOptions, }) => { + const PopoverContentInput = editNode + ? PopoverContent + : PopoverContentWithoutPortal; + const handleInputChange = (e) => { onChange && onChange(e.target.value); }; @@ -79,7 +88,7 @@ const CustomInputPopoverObject = ({ data-testid={id} /> - - + ); }; diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 8fb749279..5327c11e3 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -108,6 +108,7 @@ export default function InputComponent({ setSelectedOptions={setSelectedOptions} options={objectOptions} value={value} + editNode={editNode} autoFocus={autoFocus} disabled={disabled} setShowOptions={setShowOptions} diff --git a/src/frontend/src/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableNodeCellRender/index.tsx index 0db35ee57..5291b1cce 100644 --- a/src/frontend/src/components/tableNodeCellRender/index.tsx +++ b/src/frontend/src/components/tableNodeCellRender/index.tsx @@ -120,7 +120,7 @@ export default function TableNodeCellRender({ onSelect={(value) => handleOnNewValue(value, templateData.key)} value={templateValue ?? "Choose an option"} id={"dropdown-edit-" + templateData.name} - > + /> ); } From 6bb7ea3ee7478f689586d865f03ab161c2dfd638 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 14:14:08 -0300 Subject: [PATCH 16/44] Fixed input not changing on InputGlobalComponent --- .../components/inputGlobalComponent/index.tsx | 33 +++++++------------ .../components/parameterComponent/index.tsx | 2 +- 2 files changed, 13 insertions(+), 22 deletions(-) diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx index e9edd2e50..3f74d2c1d 100644 --- a/src/frontend/src/components/inputGlobalComponent/index.tsx +++ b/src/frontend/src/components/inputGlobalComponent/index.tsx @@ -32,11 +32,11 @@ export default function InputGlobalComponent({ const setErrorData = useAlertStore((state) => state.setErrorData); useEffect(() => { - if (data.node?.template[name]) + if (data) if ( globalVariablesEntries && - !globalVariablesEntries.includes(data.node?.template[name].value) && - data.node?.template[name].load_from_db + !globalVariablesEntries.includes(data.value) && + data.load_from_db ) { setTimeout(() => { onChange("", true); @@ -46,17 +46,11 @@ export default function InputGlobalComponent({ }, [globalVariablesEntries]); useEffect(() => { - if ( - !data.node?.template[name].value && - data.node?.template[name].display_name - ) { - if ( - unavaliableFields[data.node?.template[name].display_name!] && - !disabled - ) { + if (!data.value && data.display_name) { + if (unavaliableFields[data.display_name!] && !disabled) { setTimeout(() => { setDb(true); - onChange(unavaliableFields[data.node?.template[name].display_name!]); + onChange(unavaliableFields[data.display_name!]); }, 100); } } @@ -68,10 +62,7 @@ export default function InputGlobalComponent({ await deleteGlobalVariable(id) .then(() => { removeGlobalVariable(key); - if ( - data?.node?.template[name].value === key && - data?.node?.template[name].load_from_db - ) { + if (data?.value === key && data?.load_from_db) { onChange(""); setDb(false); } @@ -94,8 +85,8 @@ export default function InputGlobalComponent({ id={"input-" + name} editNode={editNode} disabled={disabled} - password={data.node?.template[name].password ?? false} - value={data.node?.template[name].value ?? ""} + password={data.password ?? false} + value={data.value ?? ""} options={globalVariablesEntries} optionsPlaceholder={"Global Variables"} optionsIcon="Globe" @@ -138,10 +129,10 @@ export default function InputGlobalComponent({ )} selectedOption={ - data?.node?.template[name].load_from_db && + data?.load_from_db && globalVariablesEntries && - globalVariablesEntries.includes(data?.node?.template[name].value ?? "") - ? data?.node?.template[name].value + globalVariablesEntries.includes(data?.value ?? "") + ? data?.value : "" } setSelectedOption={(value) => { diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx index cb49554c6..41ab876fe 100644 --- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx @@ -392,7 +392,7 @@ export default function ParameterComponent({ }); }} name={name} - data={data} + data={data.node?.template[name]} />
{data.node?.template[name]?.refresh_button && ( From 778e3a50f35769682883f1d778594b4820ac93a0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 14:30:14 -0300 Subject: [PATCH 17/44] Implemented truncate multiline on the advanced table --- src/frontend/src/components/stringReaderComponent/index.tsx | 6 +++++- src/frontend/src/components/tableAutoCellRender/index.tsx | 1 - src/frontend/src/modals/editNodeModal/index.tsx | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/stringReaderComponent/index.tsx b/src/frontend/src/components/stringReaderComponent/index.tsx index 8b1b0e41f..bc24c4510 100644 --- a/src/frontend/src/components/stringReaderComponent/index.tsx +++ b/src/frontend/src/components/stringReaderComponent/index.tsx @@ -3,5 +3,9 @@ export default function StringReader({ }: { string: string; }): JSX.Element { - return {string}; + return ( + + {string} + + ); } diff --git a/src/frontend/src/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableAutoCellRender/index.tsx index d38e55a9d..5c59f6430 100644 --- a/src/frontend/src/components/tableAutoCellRender/index.tsx +++ b/src/frontend/src/components/tableAutoCellRender/index.tsx @@ -44,7 +44,6 @@ export default function TableAutoCellRender({ } else { return ; } - break; case "number": return ; default: diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 90aa35b22..b250e62eb 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -99,6 +99,7 @@ const EditNodeModal = forwardRef( headerName: "Description", field: "info", cellRenderer: TableAutoCellRender, + autoHeight: true, flex: 2, resizable: false, }, From 51586f3a51404cdea39532c167a643f30ce68f25 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 14:49:25 -0300 Subject: [PATCH 18/44] Added tooltip to info --- .../src/components/shadTooltipComponent/index.tsx | 2 +- .../src/components/tableTooltipRender/index.tsx | 9 +++++++++ src/frontend/src/modals/editNodeModal/index.tsx | 14 +++++++++++--- 3 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 src/frontend/src/components/tableTooltipRender/index.tsx diff --git a/src/frontend/src/components/shadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx index 6bfad61ee..51254cf68 100644 --- a/src/frontend/src/components/shadTooltipComponent/index.tsx +++ b/src/frontend/src/components/shadTooltipComponent/index.tsx @@ -11,7 +11,7 @@ export default function ShadTooltip({ delayDuration = 500, }: ShadToolTipType): JSX.Element { return ( - + {children} + {value} +
+ ); +} diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index b250e62eb..548dfebb3 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -14,7 +14,8 @@ import TableComponent from "../../components/tableComponent"; import TableAutoCellRender from "../../components/tableAutoCellRender"; import { TemplateVariableType } from "../../types/api"; import TableNodeCellRender from "../../components/tableNodeCellRender"; -import { ValueGetterParams } from "ag-grid-community"; +import { ColDef, ValueGetterParams } from "ag-grid-community"; +import TableTooltipRender from "../../components/tableTooltipRender"; const EditNodeModal = forwardRef( ( @@ -79,7 +80,7 @@ const EditNodeModal = forwardRef( }; }); - const columnDefs = [ + const columnDefs: ColDef[] = [ { headerName: "Name", field: "display_name", @@ -98,6 +99,8 @@ const EditNodeModal = forwardRef( { headerName: "Description", field: "info", + tooltipField: "info", + tooltipComponent: TableTooltipRender, cellRenderer: TableAutoCellRender, autoHeight: true, flex: 2, @@ -180,7 +183,12 @@ const EditNodeModal = forwardRef( {nodeLength > 0 && (
- +
)} From 246de048a5a83dbfd0cffc32f984382924609153 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 5 Jun 2024 16:52:01 -0300 Subject: [PATCH 19/44] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(tableAutoCellRender?= =?UTF-8?q?):=20remove=20console.log=20statement=20for=20cleaner=20code=20?= =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(tableComponent):=20remove=20unused=20useC?= =?UTF-8?q?allback=20import=20and=20fix=20formatting=20=E2=99=BB=EF=B8=8F?= =?UTF-8?q?=20(editNodeModal):=20refactor=20advanced=20column=20to=20use?= =?UTF-8?q?=20ToggleShadComponent=20=E2=9C=A8=20(ApiKeyHeader):=20add=20ne?= =?UTF-8?q?w=20ApiKeyHeaderComponent=20for=20API=20keys=20management=20?= =?UTF-8?q?=E2=9C=A8=20(ApiKeysPage):=20add=20column=20definitions=20helpe?= =?UTF-8?q?r=20for=20API=20keys=20table?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ (ApiKeysPage): add custom hooks for fetching and deleting API keys ♻️ (ApiKeysPage): refactor ApiKeysPage to use new custom hooks ♻️ (types): change optional type syntax for better readability ✅ (dropdownComponent.spec.ts): remove trailing commas in test assertions --- .../components/tableAutoCellRender/index.tsx | 1 - .../src/components/tableComponent/index.tsx | 8 +- .../src/modals/editNodeModal/index.tsx | 62 +++--- .../components/ApiKeyHeader/index.tsx | 58 ++++++ .../pages/ApiKeysPage/helpers/column-defs.ts | 40 ++++ .../pages/ApiKeysPage/hooks/use-api-keys.tsx | 26 +++ .../hooks/use-handle-delete-key.tsx | 42 ++++ .../SettingsPage/pages/ApiKeysPage/index.tsx | 179 +++--------------- src/frontend/src/types/components/index.ts | 2 +- 9 files changed, 233 insertions(+), 185 deletions(-) create mode 100644 src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx create mode 100644 src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts create mode 100644 src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx create mode 100644 src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx diff --git a/src/frontend/src/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableAutoCellRender/index.tsx index 5c59f6430..37f58f3ac 100644 --- a/src/frontend/src/components/tableAutoCellRender/index.tsx +++ b/src/frontend/src/components/tableAutoCellRender/index.tsx @@ -24,7 +24,6 @@ export default function TableAutoCellRender({ } break; case "string": - console.log(isTimeStampString(value), value); if (isTimeStampString(value)) { return ; } diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 6113316be..42211b3a8 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -1,7 +1,7 @@ import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { ElementRef, forwardRef, useCallback } from "react"; +import { ElementRef, forwardRef } from "react"; import { DEFAULT_TABLE_ALERT_MSG, DEFAULT_TABLE_ALERT_TITLE, @@ -46,7 +46,6 @@ const TableComponent = forwardRef<
); } - return (
{ + console.log(params); + + return params.data.id; + }} />
); diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 548dfebb3..417b5bbb9 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -1,21 +1,17 @@ -import { cloneDeep } from "lodash"; -import { forwardRef, useEffect, useRef, useState } from "react"; -import IconComponent from "../../components/genericIconComponent"; -import { Badge } from "../../components/ui/badge"; -import { - LANGFLOW_SUPPORTED_TYPES, - limitScrollFieldsModal, -} from "../../constants/constants"; -import useFlowStore from "../../stores/flowStore"; -import { NodeDataType } from "../../types/flow"; -import { classNames } from "../../utils/utils"; -import BaseModal from "../baseModal"; -import TableComponent from "../../components/tableComponent"; -import TableAutoCellRender from "../../components/tableAutoCellRender"; -import { TemplateVariableType } from "../../types/api"; -import TableNodeCellRender from "../../components/tableNodeCellRender"; import { ColDef, ValueGetterParams } from "ag-grid-community"; +import { forwardRef, useEffect, useRef } from "react"; +import IconComponent from "../../components/genericIconComponent"; +import TableAutoCellRender from "../../components/tableAutoCellRender"; +import TableComponent from "../../components/tableComponent"; +import TableNodeCellRender from "../../components/tableNodeCellRender"; import TableTooltipRender from "../../components/tableTooltipRender"; +import ToggleShadComponent from "../../components/toggleShadComponent"; +import { Badge } from "../../components/ui/badge"; +import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants"; +import useFlowStore from "../../stores/flowStore"; +import { TemplateVariableType } from "../../types/api"; +import { NodeDataType } from "../../types/flow"; +import BaseModal from "../baseModal"; const EditNodeModal = forwardRef( ( @@ -42,7 +38,7 @@ const EditNodeModal = forwardRef( function changeAdvanced(n) { myData.current.node!.template[n].advanced = - !myData.current.node!.template[n].advanced; + !myData.current.node!.template[n]?.advanced; } const handleOnNewValue = (newValue: any, name) => { @@ -51,7 +47,7 @@ const EditNodeModal = forwardRef( useEffect(() => { if (open) { - myData.current = data; // reset data to what it is on node when opening modal + myData.current = data; } }, [open]); @@ -77,6 +73,7 @@ const EditNodeModal = forwardRef( return { ...templateParam, key: key, + id: key, }; }); @@ -127,18 +124,25 @@ const EditNodeModal = forwardRef( { headerName: "Show", field: "advanced", - cellRenderer: "agCheckboxCellRenderer", - cellEditor: "agCheckboxCellEditor", - valueGetter: (params) => { - return !params.data.advanced; + cellRenderer: (params) => { + const templateParam = params.data; + return ( + <> + { + changeAdvanced(params.data.key); + }} + size="small" + editNode={true} + /> + + ); }, - valueSetter: (params) => { - changeAdvanced(params.data.key); - return true; - }, - editable: true, - flex: 1, - maxWidth: 70, + + editable: false, + maxWidth: 80, resizable: false, }, ]; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx new file mode 100644 index 000000000..cdd7c7c27 --- /dev/null +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx @@ -0,0 +1,58 @@ +import ForwardedIconComponent from "../../../../../../components/genericIconComponent"; +import { Button } from "../../../../../../components/ui/button"; +import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants"; +import SecretKeyModal from "../../../../../../modals/secretKeyModal"; +import { cn } from "../../../../../../utils/utils"; + +type ApiKeyHeaderComponentProps = { + selectedRows: string[]; + handleDeleteKey: () => void; + fetchApiKeys: () => void; + userId: string; +}; +const ApiKeyHeaderComponent = ({ + selectedRows, + handleDeleteKey, + fetchApiKeys, + userId, +}: ApiKeyHeaderComponentProps) => { + return ( + <> +
+
+

+ API Keys + +

+

{API_PAGE_PARAGRAPH}

+
+
+ + + + +
+
+ + ); +}; +export default ApiKeyHeaderComponent; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts new file mode 100644 index 000000000..b9845098a --- /dev/null +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts @@ -0,0 +1,40 @@ +import TableAutoCellRender from "../../../../../components/tableAutoCellRender"; + +export const getColumnDefs = () => { + return [ + { + headerCheckboxSelection: true, + checkboxSelection: true, + showDisabledCheckboxes: true, + headerName: "Name", + field: "name", + cellRenderer: TableAutoCellRender, + flex: 2, + }, + { + headerName: "Key", + field: "api_key", + cellRenderer: TableAutoCellRender, + flex: 1, + }, + { + headerName: "Created", + field: "created_at", + cellRenderer: TableAutoCellRender, + flex: 1, + }, + { + headerName: "Last Used", + field: "last_used_at", + cellRenderer: TableAutoCellRender, + flex: 1, + }, + { + headerName: "Total Uses", + field: "total_uses", + cellRenderer: TableAutoCellRender, + flex: 1, + resizable: false, + }, + ]; +}; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx new file mode 100644 index 000000000..8af9b4a0b --- /dev/null +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx @@ -0,0 +1,26 @@ +import { getApiKey } from "../../../../../controllers/API"; + +const useApiKeys = (userData, setLoadingKeys, keysList, setUserId) => { + const fetchApiKeys = () => { + setLoadingKeys(true); + getApiKey() + .then((keys) => { + keysList.current = keys["api_keys"].map((apikey) => ({ + ...apikey, + name: apikey.name && apikey.name !== "" ? apikey.name : "Untitled", + last_used_at: apikey.last_used_at ?? "Never", + })); + setUserId(keys["user_id"]); + setLoadingKeys(false); + }) + .catch((error) => { + setLoadingKeys(false); + }); + }; + + return { + fetchApiKeys, + }; +}; + +export default useApiKeys; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx new file mode 100644 index 000000000..74d5dae99 --- /dev/null +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx @@ -0,0 +1,42 @@ +import { + DEL_KEY_ERROR_ALERT, + DEL_KEY_ERROR_ALERT_PLURAL, + DEL_KEY_SUCCESS_ALERT, + DEL_KEY_SUCCESS_ALERT_PLURAL, +} from "../../../../../constants/alerts_constants"; +import { deleteApiKey } from "../../../../../controllers/API"; + +const useDeleteApiKeys = ( + selectedRows, + resetFilter, + setSuccessData, + setErrorData, +) => { + const handleDeleteKey = () => { + Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow))) + .then(() => { + resetFilter(); + setSuccessData({ + title: + selectedRows.length === 1 + ? DEL_KEY_SUCCESS_ALERT + : DEL_KEY_SUCCESS_ALERT_PLURAL, + }); + }) + .catch((error) => { + setErrorData({ + title: + selectedRows.length === 1 + ? DEL_KEY_ERROR_ALERT + : DEL_KEY_ERROR_ALERT_PLURAL, + list: [error?.response?.data?.detail], + }); + }); + }; + + return { + handleDeleteKey, + }; +}; + +export default useDeleteApiKeys; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx index d78a65afb..8efa2e3f9 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx @@ -1,37 +1,13 @@ -import IconComponent from "../../../../components/genericIconComponent"; -import { Button } from "../../../../components/ui/button"; - -import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community"; +import { SelectionChangedEvent } from "ag-grid-community"; import { useContext, useEffect, useRef, useState } from "react"; -import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton"; -import Dropdown from "../../../../components/dropdownComponent"; -import ForwardedIconComponent from "../../../../components/genericIconComponent"; import TableComponent from "../../../../components/tableComponent"; -import { Badge } from "../../../../components/ui/badge"; import { Card, CardContent } from "../../../../components/ui/card"; -import { - deleteApiKey, - deleteGlobalVariable, - getApiKey, -} from "../../../../controllers/API"; -import useAlertStore from "../../../../stores/alertStore"; -import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables"; -import { cn } from "../../../../utils/utils"; -import { - API_PAGE_PARAGRAPH, - LAST_USED_SPAN_1, - LAST_USED_SPAN_2, -} from "../../../../constants/constants"; -import TableAutoCellRender from "../../../../components/tableAutoCellRender"; -import { - DEL_KEY_SUCCESS_ALERT, - DEL_KEY_ERROR_ALERT, - DEL_KEY_SUCCESS_ALERT_PLURAL, - DEL_KEY_ERROR_ALERT_PLURAL, -} from "../../../../constants/alerts_constants"; import { AuthContext } from "../../../../contexts/authContext"; -import { ApiKey } from "../../../../types/components"; -import SecretKeyModal from "../../../../modals/secretKeyModal"; +import useAlertStore from "../../../../stores/alertStore"; +import ApiKeyHeaderComponent from "./components/ApiKeyHeader"; +import { getColumnDefs } from "./helpers/column-defs"; +import useApiKeys from "./hooks/use-api-keys"; +import useDeleteApiKeys from "./hooks/use-handle-delete-key"; export default function ApiKeysPage() { const [loadingKeys, setLoadingKeys] = useState(true); @@ -43,138 +19,37 @@ export default function ApiKeysPage() { const keysList = useRef([]); useEffect(() => { - getKeys(); + fetchApiKeys(); }, [userData]); - function getKeys() { - setLoadingKeys(true); - if (userData) { - getApiKey() - .then((keys: [ApiKey]) => { - keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({ - ...apikey, - name: apikey.name && apikey.name !== "" ? apikey.name : "Untitled", - last_used_at: apikey.last_used_at ?? "Never", - })); - setUserId(keys["user_id"]); - setLoadingKeys(false); - }) - .catch((error) => { - setLoadingKeys(false); - }); - } - } + const { fetchApiKeys } = useApiKeys( + userData, + setLoadingKeys, + keysList, + setUserId, + ); function resetFilter() { - getKeys(); + fetchApiKeys(); } - function handleDeleteKey() { - Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow))) - .then((res) => { - resetFilter(); - setSuccessData({ - title: - selectedRows.length === 1 - ? DEL_KEY_SUCCESS_ALERT - : DEL_KEY_SUCCESS_ALERT_PLURAL, - }); - }) - .catch((error) => { - setErrorData({ - title: - selectedRows.length === 1 - ? DEL_KEY_ERROR_ALERT - : DEL_KEY_ERROR_ALERT_PLURAL, - list: [error["response"]["data"]["detail"]], - }); - }); - } + const { handleDeleteKey } = useDeleteApiKeys( + selectedRows, + resetFilter, + setSuccessData, + setErrorData, + ); - function lastUsedMessage() { - return ( -
- - {LAST_USED_SPAN_1} -

{LAST_USED_SPAN_2} - -
- ); - } - - const columnDefs = [ - { - headerCheckboxSelection: true, - checkboxSelection: true, - showDisabledCheckboxes: true, - headerName: "Name", - field: "name", - cellRenderer: TableAutoCellRender, - flex: 2, - }, - { - headerName: "Key", - field: "api_key", - cellRenderer: TableAutoCellRender, - flex: 1, - }, - { - headerName: "Created", - field: "created_at", - cellRenderer: TableAutoCellRender, - flex: 1, - }, - { - headerName: "Last Used", - field: "last_used_at", - cellRenderer: TableAutoCellRender, - flex: 1, - }, - { - headerName: "Total Uses", - field: "total_uses", - cellRenderer: TableAutoCellRender, - flex: 1, - resizable: false, - }, - ]; + const columnDefs = getColumnDefs(); return (
-
-
-

- API Keys - -

-

{API_PAGE_PARAGRAPH}

-
-
- - - - -
-
+
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index b87f3c57d..ee7c1cd83 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -38,7 +38,7 @@ export type InputComponentType = { export type ToggleComponentType = { enabled: boolean; setEnabled: (state: boolean) => void; - disabled: boolean | undefined; + disabled?: boolean | undefined; size: "small" | "medium" | "large"; id?: string; editNode?: boolean; From ecad6353fcd467b5f74f40fda0a819cb8b505f82 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 5 Jun 2024 16:58:40 -0300 Subject: [PATCH 20/44] =?UTF-8?q?=E2=9C=A8=20(App.css):=20add=20CSS=20rule?= =?UTF-8?q?s=20to=20remove=20border=20for=20cells=20with=20'no-border'=20c?= =?UTF-8?q?lass=20=E2=9C=A8=20(editNodeModal):=20add=20'no-border'=20class?= =?UTF-8?q?=20to=20specific=20table=20columns=20to=20remove=20borders?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/App.css | 10 ++++++++++ src/frontend/src/modals/editNodeModal/index.tsx | 5 ++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index a4ff01961..809959757 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -164,3 +164,13 @@ body { .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover { background-color: #bbb; } + +/* This CSS is to not apply the border for the column having 'no-border' class */ +.no-border.ag-cell:focus { + border: none !important; + outline: none; +} +.no-border.ag-cell { + border: none !important; + outline: none; +} diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 417b5bbb9..4de784ed8 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -92,6 +92,7 @@ const EditNodeModal = forwardRef( cellRenderer: TableAutoCellRender, flex: 1, resizable: false, + cellClass: "no-border", }, { headerName: "Description", @@ -102,6 +103,7 @@ const EditNodeModal = forwardRef( autoHeight: true, flex: 2, resizable: false, + cellClass: "no-border", }, { headerName: "Value", @@ -120,6 +122,7 @@ const EditNodeModal = forwardRef( minWidth: 330, flex: 1, resizable: false, + cellClass: "no-border", }, { headerName: "Show", @@ -140,10 +143,10 @@ const EditNodeModal = forwardRef( ); }, - editable: false, maxWidth: 80, resizable: false, + cellClass: "no-border", }, ]; From 1ebf2d29ef768ddda010b11b4a64f3f32ae68b29 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 17:02:16 -0300 Subject: [PATCH 21/44] Fixed toggle cell renderer not updating itself --- .../tableToggleCellRender/index.tsx | 49 +++++++++++++++++++ .../src/modals/editNodeModal/index.tsx | 25 ++++------ 2 files changed, 59 insertions(+), 15 deletions(-) create mode 100644 src/frontend/src/components/tableToggleCellRender/index.tsx diff --git a/src/frontend/src/components/tableToggleCellRender/index.tsx b/src/frontend/src/components/tableToggleCellRender/index.tsx new file mode 100644 index 000000000..fe27efcf2 --- /dev/null +++ b/src/frontend/src/components/tableToggleCellRender/index.tsx @@ -0,0 +1,49 @@ +import { CustomCellEditorProps, CustomCellRendererProps } from "ag-grid-react"; +import { classNames, cn, isTimeStampString } from "../../utils/utils"; +import ArrayReader from "../arrayReaderComponent"; +import DateReader from "../dateReaderComponent"; +import NumberReader from "../numberReader"; +import ObjectRender from "../objectRender"; +import StringReader from "../stringReaderComponent"; +import { Badge } from "../ui/badge"; +import { cloneDeep } from "lodash"; +import { type } from "os"; +import { + convertObjToArray, + convertValuesToNumbers, + hasDuplicateKeys, + scapedJSONStringfy, +} from "../../utils/reactflowUtils"; +import CodeAreaComponent from "../codeAreaComponent"; +import DictComponent from "../dictComponent"; +import Dropdown from "../dropdownComponent"; +import FloatComponent from "../floatComponent"; +import InputFileComponent from "../inputFileComponent"; +import InputGlobalComponent from "../inputGlobalComponent"; +import InputListComponent from "../inputListComponent"; +import IntComponent from "../intComponent"; +import KeypairListComponent from "../keypairListComponent"; +import PromptAreaComponent from "../promptComponent"; +import TextAreaComponent from "../textAreaComponent"; +import ToggleShadComponent from "../toggleShadComponent"; +import { useState } from "react"; +import useFlowStore from "../../stores/flowStore"; + +export default function TableToggleCellRender({ + value: { name, enabled, setEnabled }, +}: CustomCellRendererProps) { + const [value, setValue] = useState(enabled); + + return ( + { + setValue(e); + setEnabled(e); + }} + size="small" + editNode={true} + /> + ); +} diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 4de784ed8..a9922386e 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -12,6 +12,7 @@ import useFlowStore from "../../stores/flowStore"; import { TemplateVariableType } from "../../types/api"; import { NodeDataType } from "../../types/flow"; import BaseModal from "../baseModal"; +import TableToggleCellRender from "../../components/tableToggleCellRender"; const EditNodeModal = forwardRef( ( @@ -127,21 +128,15 @@ const EditNodeModal = forwardRef( { headerName: "Show", field: "advanced", - cellRenderer: (params) => { - const templateParam = params.data; - return ( - <> - { - changeAdvanced(params.data.key); - }} - size="small" - editNode={true} - /> - - ); + cellRenderer: TableToggleCellRender, + valueGetter: (params: ValueGetterParams) => { + return { + name: params.data.name, + enabled: !params.data.advanced, + setEnabled: () => { + changeAdvanced(params.data.key); + }, + }; }, editable: false, maxWidth: 80, From a17910a5352bc4a5ebb255337655c46f9c17dac7 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 5 Jun 2024 17:12:04 -0300 Subject: [PATCH 22/44] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(frontend):=20replac?= =?UTF-8?q?e=20TableToggleCellRender=20with=20TableNodeCellRender=20for=20?= =?UTF-8?q?better=20modularity=20and=20maintainability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ (frontend): add table toggle cell render component for node editing modal ✨ (frontend): add table tooltip render component for node editing modal ✨ (frontend): add use-column-defs hook for dynamic column definitions ✨ (frontend): add use-row-data hook for dynamic row data generation ♻️ (editNodeModal): refactor to use custom hooks for columnDefs and rowData --- .../tableToggleCellRender/index.tsx | 49 -------- .../components/tableNodeCellRender/index.tsx | 47 ++++---- .../tableToggleCellRender/index.tsx | 22 ++++ .../components/tableTooltipRender/index.tsx | 0 .../editNodeModal/hooks/use-column-defs.tsx | 86 ++++++++++++++ .../editNodeModal/hooks/use-row-data.tsx | 37 ++++++ .../src/modals/editNodeModal/index.tsx | 112 ++---------------- 7 files changed, 176 insertions(+), 177 deletions(-) delete mode 100644 src/frontend/src/components/tableToggleCellRender/index.tsx rename src/frontend/src/{ => modals/editNodeModal}/components/tableNodeCellRender/index.tsx (85%) create mode 100644 src/frontend/src/modals/editNodeModal/components/tableToggleCellRender/index.tsx rename src/frontend/src/{ => modals/editNodeModal}/components/tableTooltipRender/index.tsx (100%) create mode 100644 src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx create mode 100644 src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx diff --git a/src/frontend/src/components/tableToggleCellRender/index.tsx b/src/frontend/src/components/tableToggleCellRender/index.tsx deleted file mode 100644 index fe27efcf2..000000000 --- a/src/frontend/src/components/tableToggleCellRender/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { CustomCellEditorProps, CustomCellRendererProps } from "ag-grid-react"; -import { classNames, cn, isTimeStampString } from "../../utils/utils"; -import ArrayReader from "../arrayReaderComponent"; -import DateReader from "../dateReaderComponent"; -import NumberReader from "../numberReader"; -import ObjectRender from "../objectRender"; -import StringReader from "../stringReaderComponent"; -import { Badge } from "../ui/badge"; -import { cloneDeep } from "lodash"; -import { type } from "os"; -import { - convertObjToArray, - convertValuesToNumbers, - hasDuplicateKeys, - scapedJSONStringfy, -} from "../../utils/reactflowUtils"; -import CodeAreaComponent from "../codeAreaComponent"; -import DictComponent from "../dictComponent"; -import Dropdown from "../dropdownComponent"; -import FloatComponent from "../floatComponent"; -import InputFileComponent from "../inputFileComponent"; -import InputGlobalComponent from "../inputGlobalComponent"; -import InputListComponent from "../inputListComponent"; -import IntComponent from "../intComponent"; -import KeypairListComponent from "../keypairListComponent"; -import PromptAreaComponent from "../promptComponent"; -import TextAreaComponent from "../textAreaComponent"; -import ToggleShadComponent from "../toggleShadComponent"; -import { useState } from "react"; -import useFlowStore from "../../stores/flowStore"; - -export default function TableToggleCellRender({ - value: { name, enabled, setEnabled }, -}: CustomCellRendererProps) { - const [value, setValue] = useState(enabled); - - return ( - { - setValue(e); - setEnabled(e); - }} - size="small" - editNode={true} - /> - ); -} diff --git a/src/frontend/src/components/tableNodeCellRender/index.tsx b/src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx similarity index 85% rename from src/frontend/src/components/tableNodeCellRender/index.tsx rename to src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx index 5291b1cce..a6656f07c 100644 --- a/src/frontend/src/components/tableNodeCellRender/index.tsx +++ b/src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx @@ -1,33 +1,26 @@ -import { CustomCellEditorProps, CustomCellRendererProps } from "ag-grid-react"; -import { classNames, cn, isTimeStampString } from "../../utils/utils"; -import ArrayReader from "../arrayReaderComponent"; -import DateReader from "../dateReaderComponent"; -import NumberReader from "../numberReader"; -import ObjectRender from "../objectRender"; -import StringReader from "../stringReaderComponent"; -import { Badge } from "../ui/badge"; +import { CustomCellRendererProps } from "ag-grid-react"; import { cloneDeep } from "lodash"; -import { type } from "os"; +import { useState } from "react"; +import CodeAreaComponent from "../../../../components/codeAreaComponent"; +import DictComponent from "../../../../components/dictComponent"; +import Dropdown from "../../../../components/dropdownComponent"; +import FloatComponent from "../../../../components/floatComponent"; +import InputFileComponent from "../../../../components/inputFileComponent"; +import InputGlobalComponent from "../../../../components/inputGlobalComponent"; +import InputListComponent from "../../../../components/inputListComponent"; +import IntComponent from "../../../../components/intComponent"; +import KeypairListComponent from "../../../../components/keypairListComponent"; +import PromptAreaComponent from "../../../../components/promptComponent"; +import TextAreaComponent from "../../../../components/textAreaComponent"; +import ToggleShadComponent from "../../../../components/toggleShadComponent"; +import useFlowStore from "../../../../stores/flowStore"; import { convertObjToArray, convertValuesToNumbers, hasDuplicateKeys, scapedJSONStringfy, -} from "../../utils/reactflowUtils"; -import CodeAreaComponent from "../codeAreaComponent"; -import DictComponent from "../dictComponent"; -import Dropdown from "../dropdownComponent"; -import FloatComponent from "../floatComponent"; -import InputFileComponent from "../inputFileComponent"; -import InputGlobalComponent from "../inputGlobalComponent"; -import InputListComponent from "../inputListComponent"; -import IntComponent from "../intComponent"; -import KeypairListComponent from "../keypairListComponent"; -import PromptAreaComponent from "../promptComponent"; -import TextAreaComponent from "../textAreaComponent"; -import ToggleShadComponent from "../toggleShadComponent"; -import { useState } from "react"; -import useFlowStore from "../../stores/flowStore"; +} from "../../../../utils/reactflowUtils"; +import { classNames } from "../../../../utils/utils"; export default function TableNodeCellRender({ node: { data }, @@ -70,8 +63,8 @@ export default function TableNodeCellRender({ ...id, proxy: templateData.proxy, } - : id, - ), + : id + ) ) ?? false; function getCellType() { switch (templateData.type) { @@ -142,7 +135,7 @@ export default function TableNodeCellRender({
1 ? "my-3" : "", + templateValue?.length > 1 ? "my-3" : "" )} > { + setValue(e); + setEnabled(e); + }} + size="small" + editNode={true} + /> + ); +} diff --git a/src/frontend/src/components/tableTooltipRender/index.tsx b/src/frontend/src/modals/editNodeModal/components/tableTooltipRender/index.tsx similarity index 100% rename from src/frontend/src/components/tableTooltipRender/index.tsx rename to src/frontend/src/modals/editNodeModal/components/tableTooltipRender/index.tsx diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx new file mode 100644 index 000000000..577c10b67 --- /dev/null +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -0,0 +1,86 @@ +import { ColDef, ValueGetterParams } from "ag-grid-community"; +import { useMemo } from "react"; +import TableAutoCellRender from "../../../components/tableAutoCellRender"; +import TableNodeCellRender from "../components/tableNodeCellRender"; +import TableToggleCellRender from "../components/tableToggleCellRender"; +import TableTooltipRender from "../components/tableTooltipRender"; + +const useColumnDefs = ( + myData: any, + handleOnNewValue: (newValue: any, name: string) => void, + changeAdvanced: (n: string) => void +) => { + const columnDefs: ColDef[] = useMemo( + () => [ + { + headerName: "Name", + field: "display_name", + valueGetter: (params) => { + const templateParam = params.data; + return ( + (templateParam.display_name + ? templateParam.display_name + : templateParam.name) ?? params.data.key + ); + }, + cellRenderer: TableAutoCellRender, + flex: 1, + resizable: false, + cellClass: "no-border", + }, + { + headerName: "Description", + field: "info", + tooltipField: "info", + tooltipComponent: TableTooltipRender, + cellRenderer: TableAutoCellRender, + autoHeight: true, + flex: 2, + resizable: false, + cellClass: "no-border", + }, + { + headerName: "Value", + field: "value", + cellRenderer: TableNodeCellRender, + valueGetter: (params: ValueGetterParams) => { + return { + value: params.data.value, + nodeClass: myData.current.node, + handleOnNewValue: handleOnNewValue, + handleOnChangeDb: (value, key) => { + myData.current.node!.template[key].load_from_db = value; + }, + }; + }, + minWidth: 330, + flex: 1, + resizable: false, + cellClass: "no-border", + }, + { + headerName: "Show", + field: "advanced", + cellRenderer: TableToggleCellRender, + valueGetter: (params: ValueGetterParams) => { + return { + name: params.data.name, + enabled: !params.data.advanced, + setEnabled: () => { + changeAdvanced(params.data.key); + }, + }; + }, + editable: false, + maxWidth: 80, + resizable: false, + cellClass: "no-border", + }, + ], + [] + ); + + return columnDefs; +}; + +export default useColumnDefs; diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx new file mode 100644 index 000000000..0cc515dc3 --- /dev/null +++ b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx @@ -0,0 +1,37 @@ +import { useMemo } from "react"; +import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants"; +import { TemplateVariableType } from "../../../types/api"; + +const useRowData = (myData) => { + const rowData = useMemo(() => { + return Object.keys(myData.current.node!.template) + .filter((key: string) => { + const templateParam = myData.current.node!.template[ + key + ] as TemplateVariableType; + return ( + key.charAt(0) !== "_" && + templateParam.show && + LANGFLOW_SUPPORTED_TYPES.has(templateParam.type) && + !( + (key === "code" && templateParam.type === "code") || + (key.includes("code") && templateParam.proxy) + ) + ); + }) + .map((key: string) => { + const templateParam = myData.current.node!.template[ + key + ] as TemplateVariableType; + return { + ...templateParam, + key: key, + id: key, + }; + }); + }, [myData.current.node!.template]); + + return rowData; +}; + +export default useRowData; diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index a9922386e..9de14977f 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -1,18 +1,13 @@ -import { ColDef, ValueGetterParams } from "ag-grid-community"; +import { ColDef } from "ag-grid-community"; import { forwardRef, useEffect, useRef } from "react"; import IconComponent from "../../components/genericIconComponent"; -import TableAutoCellRender from "../../components/tableAutoCellRender"; import TableComponent from "../../components/tableComponent"; -import TableNodeCellRender from "../../components/tableNodeCellRender"; -import TableTooltipRender from "../../components/tableTooltipRender"; -import ToggleShadComponent from "../../components/toggleShadComponent"; import { Badge } from "../../components/ui/badge"; -import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants"; import useFlowStore from "../../stores/flowStore"; -import { TemplateVariableType } from "../../types/api"; import { NodeDataType } from "../../types/flow"; import BaseModal from "../baseModal"; -import TableToggleCellRender from "../../components/tableToggleCellRender"; +import useColumnDefs from "./hooks/use-column-defs"; +import useRowData from "./hooks/use-row-data"; const EditNodeModal = forwardRef( ( @@ -27,7 +22,7 @@ const EditNodeModal = forwardRef( setOpen: (open: boolean) => void; data: NodeDataType; }, - ref, + ref ) => { const nodes = useFlowStore((state) => state.nodes); @@ -52,98 +47,13 @@ const EditNodeModal = forwardRef( } }, [open]); - const rowData = Object.keys(myData.current.node!.template) - .filter((key: string) => { - const templateParam = myData.current.node!.template[ - key - ] as TemplateVariableType; - return ( - key.charAt(0) !== "_" && - templateParam.show && - LANGFLOW_SUPPORTED_TYPES.has(templateParam.type) && - !( - (key === "code" && templateParam.type === "code") || - (key.includes("code") && templateParam.proxy) - ) - ); - }) - .map((key: string) => { - const templateParam = myData.current.node!.template[ - key - ] as TemplateVariableType; - return { - ...templateParam, - key: key, - id: key, - }; - }); + const rowData = useRowData(myData); - const columnDefs: ColDef[] = [ - { - headerName: "Name", - field: "display_name", - valueGetter: (params) => { - const templateParam = params.data; - return ( - (templateParam.display_name - ? templateParam.display_name - : templateParam.name) ?? params.data.key - ); - }, - cellRenderer: TableAutoCellRender, - flex: 1, - resizable: false, - cellClass: "no-border", - }, - { - headerName: "Description", - field: "info", - tooltipField: "info", - tooltipComponent: TableTooltipRender, - cellRenderer: TableAutoCellRender, - autoHeight: true, - flex: 2, - resizable: false, - cellClass: "no-border", - }, - { - headerName: "Value", - field: "value", - cellRenderer: TableNodeCellRender, - valueGetter: (params: ValueGetterParams) => { - return { - value: params.data.value, - nodeClass: myData.current.node, - handleOnNewValue: handleOnNewValue, - handleOnChangeDb: (value, key) => { - myData.current.node!.template[key].load_from_db = value; - }, - }; - }, - minWidth: 330, - flex: 1, - resizable: false, - cellClass: "no-border", - }, - { - headerName: "Show", - field: "advanced", - cellRenderer: TableToggleCellRender, - valueGetter: (params: ValueGetterParams) => { - return { - name: params.data.name, - enabled: !params.data.advanced, - setEnabled: () => { - changeAdvanced(params.data.key); - }, - }; - }, - editable: false, - maxWidth: 80, - resizable: false, - cellClass: "no-border", - }, - ]; + const columnDefs: ColDef[] = useColumnDefs( + myData, + handleOnNewValue, + changeAdvanced + ); return ( ); - }, + } ); export default EditNodeModal; From 532eaca0717d956696af72dca5af06b70e68cca6 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 5 Jun 2024 17:34:01 -0300 Subject: [PATCH 23/44] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(tableComponent):=20?= =?UTF-8?q?remove=20unnecessary=20console.log=20and=20fix=20formatting=20?= =?UTF-8?q?=E2=9C=A8=20(use-row-data):=20add=20open=20parameter=20to=20use?= =?UTF-8?q?RowData=20for=20reactivity=20=E2=99=BB=EF=B8=8F=20(editNodeModa?= =?UTF-8?q?l):=20clone=20data=20before=20assigning=20to=20myData.current?= =?UTF-8?q?=20=E2=9C=85=20(dropdownComponent.spec):=20add=20waitForTimeout?= =?UTF-8?q?=20to=20stabilize=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/components/tableComponent/index.tsx | 2 -- .../src/modals/editNodeModal/hooks/use-row-data.tsx | 4 ++-- src/frontend/src/modals/editNodeModal/index.tsx | 12 +++++++----- .../tests/end-to-end/dropdownComponent.spec.ts | 2 ++ 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 42211b3a8..3a037e32e 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -61,8 +61,6 @@ const TableComponent = forwardRef< }} ref={ref} getRowId={(params) => { - console.log(params); - return params.data.id; }} /> diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx index 0cc515dc3..d2ff622a6 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx @@ -2,7 +2,7 @@ import { useMemo } from "react"; import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants"; import { TemplateVariableType } from "../../../types/api"; -const useRowData = (myData) => { +const useRowData = (myData, open) => { const rowData = useMemo(() => { return Object.keys(myData.current.node!.template) .filter((key: string) => { @@ -29,7 +29,7 @@ const useRowData = (myData) => { id: key, }; }); - }, [myData.current.node!.template]); + }, [open]); return rowData; }; diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 9de14977f..3e60a39d7 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -1,4 +1,5 @@ import { ColDef } from "ag-grid-community"; +import { cloneDeep } from "lodash"; import { forwardRef, useEffect, useRef } from "react"; import IconComponent from "../../components/genericIconComponent"; import TableComponent from "../../components/tableComponent"; @@ -22,7 +23,7 @@ const EditNodeModal = forwardRef( setOpen: (open: boolean) => void; data: NodeDataType; }, - ref + ref, ) => { const nodes = useFlowStore((state) => state.nodes); @@ -43,16 +44,17 @@ const EditNodeModal = forwardRef( useEffect(() => { if (open) { - myData.current = data; + const cloneData = cloneDeep(dataFromStore ?? data); + myData.current = cloneData; } }, [open]); - const rowData = useRowData(myData); + const rowData = useRowData(myData, open); const columnDefs: ColDef[] = useColumnDefs( myData, handleOnNewValue, - changeAdvanced + changeAdvanced, ); return ( @@ -110,7 +112,7 @@ const EditNodeModal = forwardRef( ); - } + }, ); export default EditNodeModal; diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts index b5ff9ef00..f402bead2 100644 --- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts +++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts @@ -62,6 +62,8 @@ test("dropDownComponent", async ({ page }) => { expect(false).toBeTruthy(); } + await page.waitForTimeout(1000); + await page.getByTestId("more-options-modal").click(); await page.getByTestId("edit-button-modal").click(); From ab3a651e9a5472a96d12b6a859a04f79a83d66fe Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 17:31:04 -0300 Subject: [PATCH 24/44] Fixed modal height to consider the entire modal when height is relative --- .../baseModal/helpers/switch-case-size.ts | 17 ++++---- src/frontend/src/modals/baseModal/index.tsx | 11 ++++-- .../src/modals/editNodeModal/index.tsx | 39 +++++++++---------- 3 files changed, 35 insertions(+), 32 deletions(-) diff --git a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts index 35004c2ec..a0c5f0362 100644 --- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts +++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts @@ -4,7 +4,7 @@ export const switchCaseModalSize = (size: string) => { switch (size) { case "x-small": minWidth = "min-w-[20vw]"; - height = "h-full"; + height = ""; break; case "smaller": minWidth = "min-w-[40vw]"; @@ -12,7 +12,7 @@ export const switchCaseModalSize = (size: string) => { break; case "smaller-h-full": minWidth = "min-w-[40vw]"; - height = "h-full"; + height = ""; break; case "small": minWidth = "min-w-[40vw]"; @@ -20,16 +20,19 @@ export const switchCaseModalSize = (size: string) => { break; case "small-h-full": minWidth = "min-w-[40vw]"; - height = "h-full"; + height = ""; break; case "medium": minWidth = "min-w-[60vw]"; height = "h-[60vh]"; break; + case "medium-tall": + minWidth = "min-w-[60vw]"; + height = "h-[90vh]"; + break; case "medium-h-full": minWidth = "min-w-[60vw]"; - height = "h-full"; - + height = ""; break; case "large": minWidth = "min-w-[85vw]"; @@ -56,11 +59,11 @@ export const switchCaseModalSize = (size: string) => { case "large-h-full": minWidth = "min-w-[80vw]"; - height = "h-full"; + height = ""; break; default: minWidth = "min-w-[80vw]"; - height = "h-[80vh]"; + height = "h-[90vh]"; break; } return { minWidth, height }; diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index b2c4e755e..314ad1066 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -112,6 +112,7 @@ interface BaseModalProps { | "smaller" | "small" | "medium" + | "medium-tall" | "large" | "three-cards" | "large-thin" @@ -180,7 +181,9 @@ function BaseModal({ ) : ( {triggerChild} - +
{headerChild}
@@ -190,10 +193,10 @@ function BaseModal({ event.preventDefault(); onSubmit(); }} - className="flex flex-col gap-6" + className="flex flex-1 flex-col gap-6" >
{ContentChild}
@@ -204,7 +207,7 @@ function BaseModal({ ) : ( <>
{ContentChild}
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 3e60a39d7..15b929f3f 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -60,7 +60,7 @@ const EditNodeModal = forwardRef( return ( { @@ -85,27 +85,24 @@ const EditNodeModal = forwardRef( ID: {myData.current.id} -
- - Parameters -
+
+
+ + Parameters +
-
- {nodeLength > 0 && ( -
-
- -
-
- )} +
+ {nodeLength > 0 && ( + + )} +
From 92042149d6c952d75e331416ff6811429a97ee63 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 17:40:50 -0300 Subject: [PATCH 25/44] fixed local of table components and height of table toggle --- .../components}/tableAutoCellRender/index.tsx | 14 ++++----- .../components/tableNodeCellRender/index.tsx | 30 +++++++++---------- .../tableToggleCellRender/index.tsx | 24 +++++++++++++++ .../components/tableTooltipRender/index.tsx | 0 .../tableToggleCellRender/index.tsx | 22 -------------- .../editNodeModal/hooks/use-column-defs.tsx | 12 ++++---- .../pages/ApiKeysPage/helpers/column-defs.ts | 2 +- src/frontend/src/utils/utils.ts | 2 +- 8 files changed, 54 insertions(+), 52 deletions(-) rename src/frontend/src/components/{ => tableComponent/components}/tableAutoCellRender/index.tsx (78%) rename src/frontend/src/{modals/editNodeModal => components/tableComponent}/components/tableNodeCellRender/index.tsx (88%) create mode 100644 src/frontend/src/components/tableComponent/components/tableToggleCellRender/index.tsx rename src/frontend/src/{modals/editNodeModal => components/tableComponent}/components/tableTooltipRender/index.tsx (100%) delete mode 100644 src/frontend/src/modals/editNodeModal/components/tableToggleCellRender/index.tsx diff --git a/src/frontend/src/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx similarity index 78% rename from src/frontend/src/components/tableAutoCellRender/index.tsx rename to src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx index 37f58f3ac..9fdb684a1 100644 --- a/src/frontend/src/components/tableAutoCellRender/index.tsx +++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx @@ -1,11 +1,11 @@ import { CustomCellRendererProps } from "ag-grid-react"; -import { cn, isTimeStampString } from "../../utils/utils"; -import ArrayReader from "../arrayReaderComponent"; -import DateReader from "../dateReaderComponent"; -import NumberReader from "../numberReader"; -import ObjectRender from "../objectRender"; -import StringReader from "../stringReaderComponent"; -import { Badge } from "../ui/badge"; +import { cn, isTimeStampString } from "../../../../utils/utils"; +import ArrayReader from "../../../arrayReaderComponent"; +import DateReader from "../../../dateReaderComponent"; +import NumberReader from "../../../numberReader"; +import ObjectRender from "../../../objectRender"; +import StringReader from "../../../stringReaderComponent"; +import { Badge } from "../../../ui/badge"; export default function TableAutoCellRender({ value, diff --git a/src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx similarity index 88% rename from src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx rename to src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx index a6656f07c..cddabd330 100644 --- a/src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx +++ b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx @@ -1,18 +1,18 @@ import { CustomCellRendererProps } from "ag-grid-react"; import { cloneDeep } from "lodash"; import { useState } from "react"; -import CodeAreaComponent from "../../../../components/codeAreaComponent"; -import DictComponent from "../../../../components/dictComponent"; -import Dropdown from "../../../../components/dropdownComponent"; -import FloatComponent from "../../../../components/floatComponent"; -import InputFileComponent from "../../../../components/inputFileComponent"; -import InputGlobalComponent from "../../../../components/inputGlobalComponent"; -import InputListComponent from "../../../../components/inputListComponent"; -import IntComponent from "../../../../components/intComponent"; -import KeypairListComponent from "../../../../components/keypairListComponent"; -import PromptAreaComponent from "../../../../components/promptComponent"; -import TextAreaComponent from "../../../../components/textAreaComponent"; -import ToggleShadComponent from "../../../../components/toggleShadComponent"; +import CodeAreaComponent from "../../../codeAreaComponent"; +import DictComponent from "../../../dictComponent"; +import Dropdown from "../../../dropdownComponent"; +import FloatComponent from "../../../floatComponent"; +import InputFileComponent from "../../../inputFileComponent"; +import InputGlobalComponent from "../../../inputGlobalComponent"; +import InputListComponent from "../../../inputListComponent"; +import IntComponent from "../../../intComponent"; +import KeypairListComponent from "../../../keypairListComponent"; +import PromptAreaComponent from "../../../promptComponent"; +import TextAreaComponent from "../../../textAreaComponent"; +import ToggleShadComponent from "../../../toggleShadComponent"; import useFlowStore from "../../../../stores/flowStore"; import { convertObjToArray, @@ -63,8 +63,8 @@ export default function TableNodeCellRender({ ...id, proxy: templateData.proxy, } - : id - ) + : id, + ), ) ?? false; function getCellType() { switch (templateData.type) { @@ -135,7 +135,7 @@ export default function TableNodeCellRender({
1 ? "my-3" : "" + templateValue?.length > 1 ? "my-3" : "", )} > + { + setValue(e); + setEnabled(e); + }} + size="small" + editNode={true} + /> +
+ ); +} diff --git a/src/frontend/src/modals/editNodeModal/components/tableTooltipRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableTooltipRender/index.tsx similarity index 100% rename from src/frontend/src/modals/editNodeModal/components/tableTooltipRender/index.tsx rename to src/frontend/src/components/tableComponent/components/tableTooltipRender/index.tsx diff --git a/src/frontend/src/modals/editNodeModal/components/tableToggleCellRender/index.tsx b/src/frontend/src/modals/editNodeModal/components/tableToggleCellRender/index.tsx deleted file mode 100644 index 9f9634dca..000000000 --- a/src/frontend/src/modals/editNodeModal/components/tableToggleCellRender/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { CustomCellRendererProps } from "ag-grid-react"; -import { useState } from "react"; -import ToggleShadComponent from "../../../../components/toggleShadComponent"; - -export default function TableToggleCellRender({ - value: { name, enabled, setEnabled }, -}: CustomCellRendererProps) { - const [value, setValue] = useState(enabled); - - return ( - { - setValue(e); - setEnabled(e); - }} - size="small" - editNode={true} - /> - ); -} diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index 577c10b67..12bfbf302 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -1,14 +1,14 @@ import { ColDef, ValueGetterParams } from "ag-grid-community"; import { useMemo } from "react"; -import TableAutoCellRender from "../../../components/tableAutoCellRender"; -import TableNodeCellRender from "../components/tableNodeCellRender"; -import TableToggleCellRender from "../components/tableToggleCellRender"; -import TableTooltipRender from "../components/tableTooltipRender"; +import TableAutoCellRender from "../../../components/tableComponent/components/tableAutoCellRender"; +import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender"; +import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender"; +import TableTooltipRender from "../../../components/tableComponent/components/tableTooltipRender"; const useColumnDefs = ( myData: any, handleOnNewValue: (newValue: any, name: string) => void, - changeAdvanced: (n: string) => void + changeAdvanced: (n: string) => void, ) => { const columnDefs: ColDef[] = useMemo( () => [ @@ -77,7 +77,7 @@ const useColumnDefs = ( cellClass: "no-border", }, ], - [] + [], ); return columnDefs; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts index b9845098a..9ea7af469 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts @@ -1,4 +1,4 @@ -import TableAutoCellRender from "../../../../../components/tableAutoCellRender"; +import TableAutoCellRender from "../../../../../components/tableComponent/components/tableAutoCellRender"; export const getColumnDefs = () => { return [ diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 4680cf8a9..b4a4c058f 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -1,7 +1,7 @@ import { ColDef, ColGroupDef } from "ag-grid-community"; import clsx, { ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; -import TableAutoCellRender from "../components/tableAutoCellRender"; +import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender"; import { APIDataType, TemplateVariableType } from "../types/api"; import { groupedObjType, From 6955e7e6dfd8a23b2272247d0fac153df626257f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 17:44:48 -0300 Subject: [PATCH 26/44] Separated multiline cell renderer into different component --- .../components/tableMultilineCellRender/index.tsx | 11 +++++++++++ .../modals/editNodeModal/hooks/use-column-defs.tsx | 3 ++- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/frontend/src/components/tableComponent/components/tableMultilineCellRender/index.tsx diff --git a/src/frontend/src/components/tableComponent/components/tableMultilineCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableMultilineCellRender/index.tsx new file mode 100644 index 000000000..27e1fc180 --- /dev/null +++ b/src/frontend/src/components/tableComponent/components/tableMultilineCellRender/index.tsx @@ -0,0 +1,11 @@ +import { CustomCellRendererProps } from "ag-grid-react"; + +export default function TableMultilineCellRender({ + value, +}: CustomCellRendererProps) { + return ( + + {value} + + ); +} diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index 12bfbf302..ab0395b92 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -4,6 +4,7 @@ import TableAutoCellRender from "../../../components/tableComponent/components/t import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender"; import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender"; import TableTooltipRender from "../../../components/tableComponent/components/tableTooltipRender"; +import TableMultilineCellRender from "../../../components/tableComponent/components/tableMultilineCellRender"; const useColumnDefs = ( myData: any, @@ -33,7 +34,7 @@ const useColumnDefs = ( field: "info", tooltipField: "info", tooltipComponent: TableTooltipRender, - cellRenderer: TableAutoCellRender, + cellRenderer: TableMultilineCellRender, autoHeight: true, flex: 2, resizable: false, From b1ea0a1795f921919445146a4b73925354c2fe06 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 17:47:38 -0300 Subject: [PATCH 27/44] added auto height and tooltip to Name column --- .../src/modals/editNodeModal/hooks/use-column-defs.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index ab0395b92..7023fb49e 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -24,7 +24,10 @@ const useColumnDefs = ( : templateParam.name) ?? params.data.key ); }, - cellRenderer: TableAutoCellRender, + tooltipField: "display_name", + tooltipComponent: TableTooltipRender, + cellRenderer: TableMultilineCellRender, + autoHeight: true, flex: 1, resizable: false, cellClass: "no-border", From a1e521f2c6b6be8f9e6c3654a743fdffdc3e9d7e Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jun 2024 18:39:36 -0300 Subject: [PATCH 28/44] Fixed edit node modal not being updated with opening of modal --- .../editNodeModal/hooks/use-column-defs.tsx | 3 +- .../src/modals/editNodeModal/index.tsx | 39 +++++++++---------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index 7023fb49e..40b395a02 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -10,6 +10,7 @@ const useColumnDefs = ( myData: any, handleOnNewValue: (newValue: any, name: string) => void, changeAdvanced: (n: string) => void, + open: boolean, ) => { const columnDefs: ColDef[] = useMemo( () => [ @@ -81,7 +82,7 @@ const useColumnDefs = ( cellClass: "no-border", }, ], - [], + [open], ); return columnDefs; diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 15b929f3f..a3149b115 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -1,6 +1,6 @@ -import { ColDef } from "ag-grid-community"; +import { ColDef, GridApi } from "ag-grid-community"; import { cloneDeep } from "lodash"; -import { forwardRef, useEffect, useRef } from "react"; +import { forwardRef, useEffect, useRef, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import TableComponent from "../../components/tableComponent"; import { Badge } from "../../components/ui/badge"; @@ -25,11 +25,7 @@ const EditNodeModal = forwardRef( }, ref, ) => { - const nodes = useFlowStore((state) => state.nodes); - - const dataFromStore = nodes.find((node) => node.id === node.id)?.data; - - const myData = useRef(dataFromStore ?? data); + const myData = useRef(data); const setNode = useFlowStore((state) => state.setNode); @@ -42,30 +38,30 @@ const EditNodeModal = forwardRef( myData.current.node!.template[name].value = newValue; }; - useEffect(() => { - if (open) { - const cloneData = cloneDeep(dataFromStore ?? data); - myData.current = cloneData; - } - }, [open]); - const rowData = useRowData(myData, open); const columnDefs: ColDef[] = useColumnDefs( myData, handleOnNewValue, changeAdvanced, + open, ); + const [gridApi, setGridApi] = useState(null); + + useEffect(() => { + if (gridApi && open) { + myData.current = data; + gridApi.refreshCells(); + } + }, [gridApi, open]); + return ( { - myData.current = data; - }} onSubmit={() => { setNode(data.id, (old) => ({ ...old, @@ -80,9 +76,9 @@ const EditNodeModal = forwardRef( <> - - {myData.current.type} - ID: {myData.current.id} + + {data.type} + ID: {data.id}
@@ -97,6 +93,9 @@ const EditNodeModal = forwardRef(
{nodeLength > 0 && ( { + setGridApi(params.api); + }} tooltipShowDelay={0.5} columnDefs={columnDefs} rowData={rowData} From eb67b0e007c5e96f9629d77d320c4212bea09bf7 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 08:49:20 -0300 Subject: [PATCH 29/44] Made cells align themself at middle of table --- src/frontend/src/style/classes.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css index 29140e7fa..ab031629a 100644 --- a/src/frontend/src/style/classes.css +++ b/src/frontend/src/style/classes.css @@ -100,3 +100,9 @@ select:-webkit-autofill:focus { .json-view-dark { background-color: #141924 !important; } + +.ag-row .ag-cell { + display: flex; + justify-content: center; /* align horizontal */ + align-items: center; +} From 856b1c07dbfacd21c12a0345d171b555927ded7b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 08:49:46 -0300 Subject: [PATCH 30/44] Fix Input list component to take entire width --- src/frontend/src/components/inputListComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index 3690fcaf6..a16863d0b 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -31,7 +31,7 @@ export default function InputListComponent({
1 && editNode ? "my-1" : "", - "flex flex-col gap-3", + "flex w-full flex-col gap-3", )} > {value.map((singleValue, idx) => { From 5898a1b12ef1dcf7d66f2d7a61e444e42b29302d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 08:50:14 -0300 Subject: [PATCH 31/44] Fix dict component to take entire width --- src/frontend/src/components/dictComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx index 39850e6e3..2d9a84237 100644 --- a/src/frontend/src/components/dictComponent/index.tsx +++ b/src/frontend/src/components/dictComponent/index.tsx @@ -29,7 +29,7 @@ export default function DictComponent({
1 && editNode ? "my-1" : "", - "flex flex-col gap-3", + "flex w-full flex-col gap-3", )} > { From f0a09a0cf5fb2d89f562da532763e24d294f173d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 08:50:32 -0300 Subject: [PATCH 32/44] Made string reader not be multiline, to not break other tables --- src/frontend/src/components/stringReaderComponent/index.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/frontend/src/components/stringReaderComponent/index.tsx b/src/frontend/src/components/stringReaderComponent/index.tsx index bc24c4510..8b1b0e41f 100644 --- a/src/frontend/src/components/stringReaderComponent/index.tsx +++ b/src/frontend/src/components/stringReaderComponent/index.tsx @@ -3,9 +3,5 @@ export default function StringReader({ }: { string: string; }): JSX.Element { - return ( - - {string} - - ); + return {string}; } From 7b89eeb8e7c57ce0daca0d4150a55ff5d0160ade Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 08:50:56 -0300 Subject: [PATCH 33/44] Added padding to tableNodeCellRenderer in the case of the Auto Height --- .../tableComponent/components/tableNodeCellRender/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx index cddabd330..37e19339b 100644 --- a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx +++ b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx @@ -259,7 +259,7 @@ export default function TableNodeCellRender({ } return ( -
+
{getCellType()}
); From c4eaff75e29c3efa9801ee58b45f20c59b77ca61 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 08:51:06 -0300 Subject: [PATCH 34/44] Removed unused code --- .../genericNode/components/parameterComponent/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx index 41ab876fe..bf0b8b885 100644 --- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx @@ -67,7 +67,6 @@ export default function ParameterComponent({ const ref = useRef(null); const refHtml = useRef(null); const infoHtml = useRef(null); - const setErrorData = useAlertStore((state) => state.setErrorData); const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const nodes = useFlowStore((state) => state.nodes); const edges = useFlowStore((state) => state.edges); From 47ad09b2b3d2b2e80eb232ec6bedeee9dd472273 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 08:51:18 -0300 Subject: [PATCH 35/44] Added Auto Height to values column --- src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index 40b395a02..f351475df 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -59,6 +59,7 @@ const useColumnDefs = ( }; }, minWidth: 330, + autoHeight: true, flex: 1, resizable: false, cellClass: "no-border", From 8151da0d1c9b9270ad268ec5fbfa52dfcb0408f0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 09:31:32 -0300 Subject: [PATCH 36/44] removed unused console log --- src/frontend/src/modals/apiModal/views/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/modals/apiModal/views/index.tsx b/src/frontend/src/modals/apiModal/views/index.tsx index a26cd62d1..59b3c13ee 100644 --- a/src/frontend/src/modals/apiModal/views/index.tsx +++ b/src/frontend/src/modals/apiModal/views/index.tsx @@ -65,7 +65,6 @@ const ApiModal = forwardRef( ); const pythonCode = getPythonCode(flow?.name, tweak); const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin); - console.log("flow", flow); const includeWebhook = flow.webhook; const tweaksCode = buildTweaks(flow); const codesArray = [ From adf123525718fa68b73b7713c0eeb21936b96799 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 09:31:48 -0300 Subject: [PATCH 37/44] fixed classes for refreshable component --- .../genericNode/components/parameterComponent/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx index bf0b8b885..f636bded7 100644 --- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx @@ -447,8 +447,8 @@ export default function ParameterComponent({ data.node?.template[name]?.real_time_refresh) } > -
-
+
+
From abf6955ec9a612d870e39cb7684b7c61815f546b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 6 Jun 2024 09:32:21 -0300 Subject: [PATCH 38/44] Fixed refresh button to use loading --- src/frontend/src/components/ui/refreshButton.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/components/ui/refreshButton.tsx b/src/frontend/src/components/ui/refreshButton.tsx index b039772d8..a1bdc18e6 100644 --- a/src/frontend/src/components/ui/refreshButton.tsx +++ b/src/frontend/src/components/ui/refreshButton.tsx @@ -31,11 +31,7 @@ function RefreshButton({ // icon class name should take into account the disabled state and the loading state const disabledIconTextClass = disabled ? "text-muted-foreground" : ""; - const iconClassName = cn( - "h-4 w-4", - isLoading ? "animate-spin" : "animate-wiggle", - disabledIconTextClass - ); + const iconClassName = cn("h-4 w-4 animate-wiggle", disabledIconTextClass); return (