add additional params

packages/ui/src/ui-component/dialog/AdditionalParamsDialog.js

@@ -0,0 +1,64 @@
+import { createPortal } from 'react-dom'
+import { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Dialog, DialogContent } from '@mui/material'
+import PerfectScrollbar from 'react-perfect-scrollbar'
+import NodeInputHandler from 'views/canvas/NodeInputHandler'
+
+const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
+    const portalElement = document.getElementById('portal')
+
+    const [inputParams, setInputParams] = useState([])
+    const [data, setData] = useState({})
+
+    useEffect(() => {
+        if (dialogProps.inputParams) setInputParams(dialogProps.inputParams)
+        if (dialogProps.data) setData(dialogProps.data)
+
+        return () => {
+            setInputParams([])
+            setData({})
+        }
+    }, [dialogProps])
+
+    const component = show ? (
+        <Dialog
+            onClose={onCancel}
+            open={show}
+            fullWidth
+            maxWidth='sm'
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogContent>
+                <PerfectScrollbar
+                    style={{
+                        height: '100%',
+                        maxHeight: 'calc(100vh - 220px)',
+                        overflowX: 'hidden'
+                    }}
+                >
+                    {inputParams.map((inputParam, index) => (
+                        <NodeInputHandler
+                            disabled={dialogProps.disabled}
+                            key={index}
+                            inputParam={inputParam}
+                            data={data}
+                            isAdditionalParams={true}
+                        />
+                    ))}
+                </PerfectScrollbar>
+            </DialogContent>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+AdditionalParamsDialog.propTypes = {
+    show: PropTypes.bool,
+    dialogProps: PropTypes.object,
+    onCancel: PropTypes.func
+}
+
+export default AdditionalParamsDialog

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

@@ -1,14 +1,15 @@
 import PropTypes from 'prop-types'
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
 
 // material-ui
 import { styled, useTheme } from '@mui/material/styles'
-import { IconButton, Box, Typography, Divider } from '@mui/material'
+import { IconButton, Box, Typography, Divider, Button } from '@mui/material'
 
 // project imports
 import MainCard from 'ui-component/cards/MainCard'
 import NodeInputHandler from './NodeInputHandler'
 import NodeOutputHandler from './NodeOutputHandler'
+import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
 
 // const
 import { baseURL } from 'store/constant'
@@ -35,6 +36,20 @@ const CanvasNode = ({ data }) => {
     const theme = useTheme()
     const { deleteNode, duplicateNode } = useContext(flowContext)
 
+    const [showDialog, setShowDialog] = useState(false)
+    const [dialogProps, setDialogProps] = useState({})
+
+    const onDialogClicked = () => {
+        const dialogProps = {
+            data,
+            inputParams: data.inputParams.filter((param) => param.additionalParams),
+            confirmButtonName: 'Save',
+            cancelButtonName: 'Cancel'
+        }
+        setDialogProps(dialogProps)
+        setShowDialog(true)
+    }
+
     return (
         <>
             <CardWrapper
@@ -118,7 +133,13 @@ const CanvasNode = ({ data }) => {
                     {data.inputParams.map((inputParam, index) => (
                         <NodeInputHandler key={index} inputParam={inputParam} data={data} />
                     ))}
-
+                    {data.inputParams.find((param) => param.additionalParams) && (
+                        <div style={{ textAlign: 'center' }}>
+                            <Button sx={{ borderRadius: 25, width: '90%', mb: 2 }} variant='outlined' onClick={onDialogClicked}>
+                                Additional Parameters
+                            </Button>
+                        </div>
+                    )}
                     <Divider />
                     <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
                         <Typography
@@ -137,6 +158,11 @@ const CanvasNode = ({ data }) => {
                     ))}
                 </Box>
             </CardWrapper>
+            <AdditionalParamsDialog
+                show={showDialog}
+                dialogProps={dialogProps}
+                onCancel={() => setShowDialog(false)}
+            ></AdditionalParamsDialog>
         </>
     )
 }

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

@@ -24,7 +24,7 @@ const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...prop
 
 // ===========================|| NodeInputHandler ||=========================== //
 
-const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) => {
+const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isAdditionalParams = false }) => {
     const theme = useTheme()
     const ref = useRef(null)
     const { reactFlowInstance } = useContext(flowContext)
@@ -96,7 +96,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false }) =
                 </>
             )}
 
-            {inputParam && (
+            {((inputParam && !inputParam.additionalParams) || isAdditionalParams) && (
                 <>
                     {inputParam.acceptVariable && (
                         <CustomWidthTooltip placement='left' title={inputParam.type}>
@@ -186,7 +186,8 @@ NodeInputHandler.propTypes = {
     inputAnchor: PropTypes.object,
     inputParam: PropTypes.object,
     data: PropTypes.object,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    isAdditionalParams: PropTypes.bool
 }
 
 export default NodeInputHandler

packages/ui/src/views/marketplaces/MarketplaceCanvasNode.js

@@ -1,13 +1,15 @@
 import PropTypes from 'prop-types'
+import { useState } from 'react'
 
 // material-ui
 import { styled, useTheme } from '@mui/material/styles'
-import { Box, Typography, Divider } from '@mui/material'
+import { Box, Typography, Divider, Button } from '@mui/material'
 
 // project imports
 import MainCard from 'ui-component/cards/MainCard'
 import NodeInputHandler from 'views/canvas/NodeInputHandler'
 import NodeOutputHandler from 'views/canvas/NodeOutputHandler'
+import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
 
 // const
 import { baseURL } from 'store/constant'
@@ -31,6 +33,21 @@ const CardWrapper = styled(MainCard)(({ theme }) => ({
 const MarketplaceCanvasNode = ({ data }) => {
     const theme = useTheme()
 
+    const [showDialog, setShowDialog] = useState(false)
+    const [dialogProps, setDialogProps] = useState({})
+
+    const onDialogClicked = () => {
+        const dialogProps = {
+            data,
+            inputParams: data.inputParams.filter((param) => param.additionalParams),
+            disabled: true,
+            confirmButtonName: 'Save',
+            cancelButtonName: 'Cancel'
+        }
+        setDialogProps(dialogProps)
+        setShowDialog(true)
+    }
+
     return (
         <>
             <CardWrapper
@@ -93,7 +110,13 @@ const MarketplaceCanvasNode = ({ data }) => {
                     {data.inputParams.map((inputParam, index) => (
                         <NodeInputHandler disabled={true} key={index} inputParam={inputParam} data={data} />
                     ))}
-
+                    {data.inputParams.find((param) => param.additionalParams) && (
+                        <div style={{ textAlign: 'center' }}>
+                            <Button sx={{ borderRadius: 25, width: '90%', mb: 2 }} variant='outlined' onClick={onDialogClicked}>
+                                Additional Parameters
+                            </Button>
+                        </div>
+                    )}
                     <Divider />
                     <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
                         <Typography
@@ -112,6 +135,11 @@ const MarketplaceCanvasNode = ({ data }) => {
                     ))}
                 </Box>
             </CardWrapper>
+            <AdditionalParamsDialog
+                show={showDialog}
+                dialogProps={dialogProps}
+                onCancel={() => setShowDialog(false)}
+            ></AdditionalParamsDialog>
         </>
     )
 }