From 384977e156e03d73e95556e77594640f28e2b7be Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 7 Jun 2024 15:07:53 -0300 Subject: [PATCH] updateTable component --- .../components/csvOutputComponent/index.tsx | 1 + .../recordsOutputComponent/index.tsx | 1 + .../components/TableOptions/index.tsx | 95 +++++++++++++++++++ .../src/components/tableComponent/index.tsx | 37 ++++++-- .../IOModal/components/SessionView/index.tsx | 56 ++++------- src/frontend/src/modals/IOModal/index.tsx | 47 ++++----- .../src/modals/editNodeModal/index.tsx | 7 +- .../src/modals/flowLogsModal/index.tsx | 1 + .../components/ApiKeyHeader/index.tsx | 16 ---- .../SettingsPage/pages/ApiKeysPage/index.tsx | 7 +- .../pages/GlobalVariablesPage/index.tsx | 16 +--- .../pages/ShortcutsPage/index.tsx | 1 + .../components/headerMessages/index.tsx | 17 ---- .../SettingsPage/pages/messagesPage/index.tsx | 2 + 14 files changed, 185 insertions(+), 119 deletions(-) create mode 100644 src/frontend/src/components/tableComponent/components/TableOptions/index.tsx diff --git a/src/frontend/src/components/csvOutputComponent/index.tsx b/src/frontend/src/components/csvOutputComponent/index.tsx index a98d9c028..b6f5be515 100644 --- a/src/frontend/src/components/csvOutputComponent/index.tsx +++ b/src/frontend/src/components/csvOutputComponent/index.tsx @@ -115,6 +115,7 @@ function CsvOutputComponent({ style={{ height: "100%", width: "100%" }} > void; + duplicateRow?: () => void; + deleteRow?: () => void; + hasSelection: boolean; + stateChange: boolean; +}): JSX.Element { + return ( +
+
+
+ + + +
+ {duplicateRow && ( +
+ Select items to duplicate + ) : ( + Duplicate selected items + ) + } + > + + +
+ )} + {deleteRow && ( +
+ Select items to delete + ) : ( + Delete selected items + ) + } + > + + +
+ )}{" "} +
+
+ ); +} diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 7f4dc865f..64cc1d45a 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, useRef } from "react"; +import { ElementRef, forwardRef, useRef, useState } from "react"; import { DEFAULT_TABLE_ALERT_MSG, DEFAULT_TABLE_ALERT_TITLE, @@ -11,7 +11,7 @@ import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid import { cn, toTitleCase } from "../../utils/utils"; import ForwardedIconComponent from "../genericIconComponent"; import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; -import ResetColumns from "./components/ResetColumns"; +import TableOptions from "./components/TableOptions"; import resetGrid from "./utils/reset-grid-columns"; import { useParams } from "react-router-dom"; @@ -21,8 +21,8 @@ interface TableComponentProps extends AgGridReactProps { alertTitle?: string; alertDescription?: string; editable?: boolean | string[]; - onDelete?: (selectedRows: any) => void; - onDuplicate?: (selectedRows: any) => void; + onDelete?: () => void; + onDuplicate?: () => void; } const TableComponent = forwardRef< @@ -70,9 +70,12 @@ const TableComponent = forwardRef< }); const gridRef = useRef(null); // @ts-ignore - const realRef = ref?.current ? ref : gridRef; + const realRef: React.MutableRefObject = ref?.current + ? ref + : gridRef; const dark = useDarkStore((state) => state.dark); const initialColumnDefs = useRef(colDef); + const [columnStateChange, setColumnStateChange] = useState(false); const makeLastColumnNonResizable = (columnDefs) => { columnDefs.forEach((colDef, index) => { @@ -88,6 +91,9 @@ const TableComponent = forwardRef< params.api.setGridOption("columnDefs", updatedColumnDefs); initialColumnDefs.current = params.api.getColumnDefs(); if (props.onGridReady) props.onGridReady(params); + setTimeout(() => { + setColumnStateChange(false); + }, 50); }; const onColumnMoved = (params) => { @@ -132,8 +138,27 @@ const TableComponent = forwardRef< pagination={true} onGridReady={onGridReady} onColumnMoved={onColumnMoved} + onStateUpdated={(e) => { + if ( + e.sources.includes("columnVisibility") || + e.sources.includes("columnOrder") + ) { + setColumnStateChange(true); + } + }} + /> + 0} + duplicateRow={props.onDuplicate ? props.onDuplicate : undefined} + deleteRow={props.onDelete ? props.onDelete : undefined} + resetGrid={() => { + resetGrid(realRef, initialColumnDefs); + setTimeout(() => { + setColumnStateChange(false); + }, 100); + }} /> - resetGrid(realRef, initialColumnDefs)} /> ); }, diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx index b21a786a1..b20ed6c57 100644 --- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx @@ -44,43 +44,23 @@ export default function SessionView({ rows }: { rows: Array }) { } return ( -
- <> -
-
- -
-
- - { - handleUpdateMessage(event); - }} - editable={["Sender Name", "Message"]} - overlayNoRowsTemplate="No data available" - onSelectionChanged={(event: SelectionChangedEvent) => { - setSelectedRows(event.api.getSelectedRows().map((row) => row.index)); - }} - rowSelection="multiple" - suppressRowClickSelection={true} - pagination={true} - columnDefs={columns} - rowData={rows} - /> -
+ { + handleUpdateMessage(event); + }} + editable={["Sender Name", "Message"]} + overlayNoRowsTemplate="No data available" + onSelectionChanged={(event: SelectionChangedEvent) => { + setSelectedRows(event.api.getSelectedRows().map((row) => row.index)); + }} + rowSelection="multiple" + suppressRowClickSelection={true} + pagination={true} + columnDefs={columns} + rowData={rows} + /> ); } diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index e93bfab7a..47f826b50 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -36,25 +36,25 @@ export default function IOModal({ const allNodes = useFlowStore((state) => state.nodes); const setMessages = useMessagesStore((state) => state.setMessages); const inputs = useFlowStore((state) => state.inputs).filter( - (input) => input.type !== "ChatInput" + (input) => input.type !== "ChatInput", ); const chatInput = useFlowStore((state) => state.inputs).find( - (input) => input.type === "ChatInput" + (input) => input.type === "ChatInput", ); const outputs = useFlowStore((state) => state.outputs).filter( - (output) => output.type !== "ChatOutput" + (output) => output.type !== "ChatOutput", ); const chatOutput = useFlowStore((state) => state.outputs).find( - (output) => output.type === "ChatOutput" + (output) => output.type === "ChatOutput", ); const nodes = useFlowStore((state) => state.nodes).filter( (node) => inputs.some((input) => input.id === node.id) || - outputs.some((output) => output.id === node.id) + outputs.some((output) => output.id === node.id), ); const haveChat = chatInput || chatOutput; const [selectedTab, setSelectedTab] = useState( - inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0 + inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0, ); const setErrorData = useAlertStore((state) => state.setErrorData); const setSuccessData = useAlertStore((state) => state.setSuccessData); @@ -111,6 +111,9 @@ export default function IOModal({ setLockChat(false); }); } + const { rows, columns } = await getMessagesTable("union", currentFlow!.id); + setMessages(rows); + setColumns(columns); setLockChat(false); if (chatInput) { setNode(chatInput.id, (node: NodeType) => { @@ -124,7 +127,7 @@ export default function IOModal({ const { handleRemoveSession } = useRemoveSession( setSuccessData, - setErrorData + setErrorData, ); useEffect(() => { @@ -185,7 +188,7 @@ export default function IOModal({
{nodes .filter((node) => - inputs.some((input) => input.id === node.id) + inputs.some((input) => input.id === node.id), ) .map((node, index) => { const input = inputs.find( - (input) => input.id === node.id + (input) => input.id === node.id, )!; return (
{nodes .filter((node) => - outputs.some((output) => output.id === node.id) + outputs.some((output) => output.id === node.id), ) .map((node, index) => { const output = outputs.find( - (output) => output.id === node.id + (output) => output.id === node.id, )!; return (
- f_session?.session_id === session + f_session?.session_id === session, ) ? "Active Session" : "Inactive Session" @@ -392,10 +395,10 @@ export default function IOModal({ "h-2 w-2 rounded-full", flow_sessions.some( (f_session) => - f_session?.session_id === session + f_session?.session_id === session, ) ? "bg-status-green" - : "bg-slate-500" + : "bg-slate-500", )} >
@@ -413,7 +416,7 @@ export default function IOModal({
@@ -432,7 +435,7 @@ export default function IOModal({
{inputs.some( - (input) => input.id === selectedViewField.id + (input) => input.id === selectedViewField.id, ) && ( )} {outputs.some( - (output) => output.id === selectedViewField.id + (output) => output.id === selectedViewField.id, ) && ( )} {sessions.some( - (session) => session === selectedViewField.id + (session) => session === selectedViewField.id, ) && ( - message.session_id === selectedViewField.id + message.session_id === selectedViewField.id, )} /> )} @@ -467,7 +470,7 @@ export default function IOModal({
{haveChat ? ( @@ -499,7 +502,7 @@ export default function IOModal({ "h-4 w-4", isBuilding ? "animate-spin" - : "fill-current text-medium-indigo" + : "fill-current text-medium-indigo", )} /> ), diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 2627d8eca..4e00e540c 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -22,7 +22,7 @@ const EditNodeModal = forwardRef( setOpen: (open: boolean) => void; data: NodeDataType; }, - ref + ref, ) => { const myData = useRef(data); @@ -43,7 +43,7 @@ const EditNodeModal = forwardRef( data, handleOnNewValue, changeAdvanced, - open + open, ); const [gridApi, setGridApi] = useState(null); @@ -92,6 +92,7 @@ const EditNodeModal = forwardRef(
{nodeLength > 0 && ( { setGridApi(params.api); }} @@ -107,7 +108,7 @@ const EditNodeModal = forwardRef( ); - } + }, ); export default EditNodeModal; diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx index 78e978a9b..1ba42f9eb 100644 --- a/src/frontend/src/modals/flowLogsModal/index.tsx +++ b/src/frontend/src/modals/flowLogsModal/index.tsx @@ -86,6 +86,7 @@ export default function FlowLogsModal({ void; fetchApiKeys: () => void; userId: string; }; const ApiKeyHeaderComponent = ({ selectedRows, - handleDeleteKey, fetchApiKeys, userId, }: ApiKeyHeaderComponentProps) => { @@ -30,20 +28,6 @@ const ApiKeyHeaderComponent = ({

{API_PAGE_PARAGRAPH}

-
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx index 966dccd4a..e7ee5d09e 100644 --- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx @@ -113,6 +113,7 @@ export default function ShortcutsPage() {
{ return ( <> @@ -26,22 +25,6 @@ const HeaderMessagesComponent = ({ behaviors.

-
- -
); diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx index f4358c62e..8b6f2a0a0 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx @@ -53,6 +53,8 @@ export default function MessagesPage() {
{ handleUpdateMessage(event);