add datagrid field type

packages/ui/src/ui-component/grid/DataGrid.js

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types'
+import { useState, useCallback } from 'react'
+import { DataGrid as MUIDataGrid, GridActionsCellItem } from '@mui/x-data-grid'
+import { IconPlus } from '@tabler/icons'
+import { Button } from '@mui/material'
+import DeleteIcon from '@mui/icons-material/Delete'
+import { cloneDeep } from 'lodash'
+import { formatDataGridRows } from 'utils/genericHelper'
+
+export const DataGrid = ({ columns, rows, style, disabled = false, hideFooter = false, onChange }) => {
+    const [rowValues, setRowValues] = useState(formatDataGridRows(rows) ?? [])
+
+    const deleteItem = useCallback(
+        (id) => () => {
+            let updatedRows = []
+            setRowValues((prevRows) => {
+                let allRows = [...cloneDeep(prevRows)]
+                allRows = allRows.filter((row) => row.id !== id)
+                updatedRows = allRows
+                return allRows
+            })
+            onChange(JSON.stringify(updatedRows))
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    )
+
+    const addCols = (columns) => {
+        return [
+            ...columns,
+            {
+                field: 'actions',
+                type: 'actions',
+                width: 80,
+                getActions: (params) => [
+                    <GridActionsCellItem key={'Delete'} icon={<DeleteIcon />} label='Delete' onClick={deleteItem(params.id)} />
+                ]
+            }
+        ]
+    }
+
+    const colValues = addCols(columns)
+
+    const handleProcessRowUpdate = (newRow) => {
+        let updatedRows = []
+        setRowValues((prevRows) => {
+            let allRows = [...cloneDeep(prevRows)]
+            const indexToUpdate = allRows.findIndex((row) => row.id === newRow.id)
+            if (indexToUpdate >= 0) {
+                allRows[indexToUpdate] = { ...newRow }
+            }
+            updatedRows = allRows
+            return allRows
+        })
+        onChange(JSON.stringify(updatedRows))
+        return newRow
+    }
+
+    const getEmptyJsonObj = () => {
+        const obj = {}
+        for (let i = 0; i < colValues.length; i += 1) {
+            obj[colValues[i]?.field] = ''
+        }
+        return obj
+    }
+
+    const addNewRow = () => {
+        setRowValues((prevRows) => {
+            let allRows = [...cloneDeep(prevRows)]
+            const lastRowId = allRows.length ? allRows[allRows.length - 1].id + 1 : 1
+            allRows.push({
+                ...getEmptyJsonObj(),
+                id: lastRowId
+            })
+            return allRows
+        })
+    }
+
+    return (
+        <>
+            {rowValues && colValues && (
+                <div style={{ marginTop: 10, height: 210, width: '100%', ...style }}>
+                    <MUIDataGrid
+                        processRowUpdate={handleProcessRowUpdate}
+                        isCellEditable={() => {
+                            return !disabled
+                        }}
+                        hideFooter={hideFooter}
+                        onProcessRowUpdateError={(error) => console.error(error)}
+                        rows={rowValues}
+                        columns={colValues}
+                    />
+                </div>
+            )}
+            {!disabled && (
+                <Button sx={{ mt: 1 }} variant='outlined' onClick={addNewRow} startIcon={<IconPlus />}>
+                    Add Item
+                </Button>
+            )}
+        </>
+    )
+}
+
+DataGrid.propTypes = {
+    rows: PropTypes.array,
+    columns: PropTypes.array,
+    style: PropTypes.any,
+    disabled: PropTypes.bool,
+    hideFooter: PropTypes.bool,
+    onChange: PropTypes.func
+}

packages/ui/src/utils/genericHelper.js

@@ -43,6 +43,7 @@ export const initNode = (nodeData, newNodeId) => {
         'asyncOptions',
         'options',
         'multiOptions',
+        'datagrid',
         'string',
         'number',
         'boolean',
@@ -422,3 +423,17 @@ export const isValidURL = (url) => {
         return undefined
     }
 }
+
+export const formatDataGridRows = (rows) => {
+    try {
+        const parsedRows = typeof rows === 'string' ? JSON.parse(rows) : rows
+        return parsedRows.map((sch, index) => {
+            return {
+                ...sch,
+                id: index
+            }
+        })
+    } catch (e) {
+        return []
+    }
+}

packages/ui/src/views/canvas/NodeInputHandler.js

@@ -14,6 +14,7 @@ import { Dropdown } from 'ui-component/dropdown/Dropdown'
 import { MultiDropdown } from 'ui-component/dropdown/MultiDropdown'
 import { AsyncDropdown } from 'ui-component/dropdown/AsyncDropdown'
 import { Input } from 'ui-component/input/Input'
+import { DataGrid } from 'ui-component/grid/DataGrid'
 import { File } from 'ui-component/file/File'
 import { SwitchInput } from 'ui-component/switch/Switch'
 import { flowContext } from 'store/context/ReactFlowContext'
@@ -258,6 +259,15 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
                                 value={data.inputs[inputParam.name] ?? inputParam.default ?? false}
                             />
                         )}
+                        {inputParam.type === 'datagrid' && (
+                            <DataGrid
+                                disabled={disabled}
+                                columns={inputParam.datagrid}
+                                hideFooter={true}
+                                rows={data.inputs[inputParam.name] ?? JSON.stringify(inputParam.default) ?? []}
+                                onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
+                            />
+                        )}
                         {(inputParam.type === 'string' || inputParam.type === 'password' || inputParam.type === 'number') && (
                             <Input
                                 key={data.inputs[inputParam.name]}

packages/ui/src/views/tools/ToolDialog.js

@@ -28,7 +28,7 @@ import useApi from 'hooks/useApi'
 
 // utils
 import useNotifier from 'utils/useNotifier'
-import { generateRandomGradient } from 'utils/genericHelper'
+import { generateRandomGradient, formatDataGridRows } from 'utils/genericHelper'
 import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
 
 const exampleAPIFunc = `/*
@@ -142,20 +142,6 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
         [deleteItem]
     )
 
-    const formatSchema = (schema) => {
-        try {
-            const parsedSchema = JSON.parse(schema)
-            return parsedSchema.map((sch, index) => {
-                return {
-                    ...sch,
-                    id: index
-                }
-            })
-        } catch (e) {
-            return []
-        }
-    }
-
     useEffect(() => {
         if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
         else dispatch({ type: HIDE_CANVAS_DIALOG })
@@ -167,7 +153,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
             setToolId(getSpecificToolApi.data.id)
             setToolName(getSpecificToolApi.data.name)
             setToolDesc(getSpecificToolApi.data.description)
-            setToolSchema(formatSchema(getSpecificToolApi.data.schema))
+            setToolSchema(formatDataGridRows(getSpecificToolApi.data.schema))
             if (getSpecificToolApi.data.func) setToolFunc(getSpecificToolApi.data.func)
             else setToolFunc('')
         }
@@ -180,7 +166,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
             setToolName(dialogProps.data.name)
             setToolDesc(dialogProps.data.description)
             setToolIcon(dialogProps.data.iconSrc)
-            setToolSchema(formatSchema(dialogProps.data.schema))
+            setToolSchema(formatDataGridRows(dialogProps.data.schema))
             if (dialogProps.data.func) setToolFunc(dialogProps.data.func)
             else setToolFunc('')
         } else if (dialogProps.type === 'EDIT' && dialogProps.toolId) {
@@ -191,7 +177,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
             setToolName(dialogProps.data.name)
             setToolDesc(dialogProps.data.description)
             setToolIcon(dialogProps.data.iconSrc)
-            setToolSchema(formatSchema(dialogProps.data.schema))
+            setToolSchema(formatDataGridRows(dialogProps.data.schema))
             if (dialogProps.data.func) setToolFunc(dialogProps.data.func)
             else setToolFunc('')
         } else if (dialogProps.type === 'TEMPLATE' && dialogProps.data) {
@@ -199,7 +185,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm }) =
             setToolName(dialogProps.data.name)
             setToolDesc(dialogProps.data.description)
             setToolIcon(dialogProps.data.iconSrc)
-            setToolSchema(formatSchema(dialogProps.data.schema))
+            setToolSchema(formatDataGridRows(dialogProps.data.schema))
             if (dialogProps.data.func) setToolFunc(dialogProps.data.func)
             else setToolFunc('')
         } else if (dialogProps.type === 'ADD') {