fix: disable Generate button when required fields are not filled (#5927)

* fix: disable Generate button when required fields are not filled

* add onBlur handler to Input component and simplify data handling in DocStoreInputHandler

---------

Co-authored-by: Henry <hzj94@hotmail.com>

Author: mykh-hailo

packages/ui/src/ui-component/input/Input.jsx

@@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles'
 import SelectVariable from '@/ui-component/json/SelectVariable'
 import { getAvailableNodesForVariable } from '@/utils/genericHelper'
 
-export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disabled = false }) => {
+export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, onBlur, disabled = false }) => {
     const theme = useTheme()
     const [myValue, setMyValue] = useState(value ?? '')
     const [anchorEl, setAnchorEl] = useState(null)
@@ -70,6 +70,9 @@ export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disab
                             setMyValue(e.target.value)
                             onChange(e.target.value)
                         }}
+                        onBlur={(e) => {
+                            if (onBlur) onBlur(e.target.value)
+                        }}
                         inputProps={{
                             step: inputParam.step ?? 1,
                             style: {
@@ -106,6 +109,9 @@ export const Input = ({ inputParam, value, nodes, edges, nodeId, onChange, disab
                             setMyValue(e.target.value)
                             onChange(e.target.value)
                         }}
+                        onBlur={(e) => {
+                            if (onBlur) onBlur(e.target.value)
+                        }}
                         inputProps={{
                             step: inputParam.step ?? 1,
                             style: {
@@ -153,6 +159,7 @@ Input.propTypes = {
     inputParam: PropTypes.object,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onChange: PropTypes.func,
+    onBlur: PropTypes.func,
     disabled: PropTypes.bool,
     nodes: PropTypes.array,
     edges: PropTypes.array,

packages/ui/src/views/docstore/DocStoreInputHandler.jsx

@@ -41,8 +41,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false, onNodeDataCh
 
     const handleDataChange = ({ inputParam, newValue }) => {
         data.inputs[inputParam.name] = newValue
-        const allowedShowHideInputTypes = ['boolean', 'asyncOptions', 'asyncMultiOptions', 'options', 'multiOptions']
-        if (allowedShowHideInputTypes.includes(inputParam.type) && nodeDataChangeHandler) {
+        if (nodeDataChangeHandler) {
             nodeDataChangeHandler({ nodeId: data.id, inputParam, newValue })
         }
     }
@@ -157,7 +156,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false, onNodeDataCh
                             <File
                                 disabled={disabled}
                                 fileType={inputParam.fileType || '*'}
-                                onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
+                                onChange={(newValue) => handleDataChange({ inputParam, newValue })}
                                 value={data.inputs[inputParam.name] ?? inputParam.default ?? 'Choose a file to upload'}
                             />
                         )}
@@ -174,7 +173,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false, onNodeDataCh
                                 columns={inputParam.datagrid}
                                 hideFooter={true}
                                 rows={data.inputs[inputParam.name] ?? JSON.stringify(inputParam.default) ?? []}
-                                onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
+                                onChange={(newValue) => handleDataChange({ inputParam, newValue })}
                             />
                         )}
                         {inputParam.type === 'code' && (
@@ -200,6 +199,7 @@ const DocStoreInputHandler = ({ inputParam, data, disabled = false, onNodeDataCh
                                 disabled={disabled}
                                 inputParam={inputParam}
                                 onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
+                                onBlur={(newValue) => handleDataChange({ inputParam, newValue })}
                                 value={data.inputs[inputParam.name] ?? inputParam.default ?? ''}
                                 nodeId={data.id}
                             />