add requests tools

packages/ui/src/ui-component/tooltip/TooltipWithParser.js

@@ -4,18 +4,27 @@ import parser from 'html-react-parser'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 
-export const TooltipWithParser = ({ title }) => {
+export const TooltipWithParser = ({ title, style }) => {
     const customization = useSelector((state) => state.customization)
 
     return (
         <Tooltip title={parser(title)} placement='right'>
-            <IconButton sx={{ height: 25, width: 25 }}>
-                <Info style={{ background: 'transparent', color: customization.isDarkMode ? 'white' : 'inherit', height: 18, width: 18 }} />
+            <IconButton sx={{ height: 15, width: 15 }}>
+                <Info
+                    style={{
+                        ...style,
+                        background: 'transparent',
+                        color: customization.isDarkMode ? 'white' : 'inherit',
+                        height: 15,
+                        width: 15
+                    }}
+                />
             </IconButton>
         </Tooltip>
     )
 }
 
 TooltipWithParser.propTypes = {
-    title: PropTypes.node
+    title: PropTypes.node,
+    style: PropTypes.any
 }

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

@@ -134,7 +134,16 @@ const CanvasNode = ({ data }) => {
                         <NodeInputHandler key={index} inputParam={inputParam} data={data} />
                     ))}
                     {data.inputParams.find((param) => param.additionalParams) && (
-                        <div style={{ textAlign: 'center' }}>
+                        <div
+                            style={{
+                                textAlign: 'center',
+                                marginTop:
+                                    data.inputParams.filter((param) => param.additionalParams).length ===
+                                    data.inputParams.length + data.inputAnchors.length
+                                        ? 20
+                                        : 0
+                            }}
+                        >
                             <Button sx={{ borderRadius: 25, width: '90%', mb: 2 }} variant='outlined' onClick={onDialogClicked}>
                                 Additional Parameters
                             </Button>

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

@@ -17,6 +17,7 @@ import { SwitchInput } from 'ui-component/switch/Switch'
 import { flowContext } from 'store/context/ReactFlowContext'
 import { isValidConnection, getAvailableNodesForVariable } from 'utils/genericHelper'
 import { JsonEditorInput } from 'ui-component/json/JsonEditor'
+import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
 
 const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
     [`& .${tooltipClasses.tooltip}`]: {
@@ -123,6 +124,7 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
                             <Typography>
                                 {inputParam.label}
                                 {!inputParam.optional && <span style={{ color: 'red' }}>&nbsp;*</span>}
+                                {inputParam.description && <TooltipWithParser style={{ marginLeft: 10 }} title={inputParam.description} />}
                             </Typography>
                             <div style={{ flexGrow: 1 }}></div>
                             {inputParam.type === 'string' && inputParam.rows && (