add additional params

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>
         </>
     )
 }