Added fix to check if all mandatory fields have value before submittign a credential

Author: j-sanaa

packages/agentflow/src/features/node-editor/AsyncInput.tsx

@@ -33,16 +33,19 @@ function AsyncOptionsInput({ inputParam, value, disabled, onChange, nodeName, in
     const [createDialogOpen, setCreateDialogOpen] = useState(false)
     const [editDialogOpen, setEditDialogOpen] = useState(false)
     const [reloadKey, setReloadKey] = useState(0)
+    // Holds the credential ID that was just created/edited. Passed directly to
+    // the remounted AsyncOptionsDropdown so it doesn't depend on the parent
+    // state cascade (which may not have flushed yet when inside ConfigInput).
+    const [pendingValue, setPendingValue] = useState<string | null>(null)
 
-    const selectedCredentialId = isCredential && typeof value === 'string' && value ? value : null
+    const effectiveValue = pendingValue ?? value
+    const selectedCredentialId = isCredential && typeof effectiveValue === 'string' && effectiveValue ? effectiveValue : null
 
     const handleCreated = useCallback(
         (newCredentialId: string) => {
             setCreateDialogOpen(false)
             onChange(newCredentialId)
-            // Changing reloadKey forces AsyncOptionsDropdown to remount, which
-            // re-runs useAsyncOptions and fetches fresh options including the
-            // newly created credential — matching original Flowise behaviour.
+            setPendingValue(newCredentialId)
             setReloadKey((k) => k + 1)
         },
         [onChange]
@@ -52,6 +55,7 @@ function AsyncOptionsInput({ inputParam, value, disabled, onChange, nodeName, in
         (credentialId: string) => {
             setEditDialogOpen(false)
             onChange(credentialId)
+            setPendingValue(credentialId)
             setReloadKey((k) => k + 1)
         },
         [onChange]
@@ -63,9 +67,12 @@ function AsyncOptionsInput({ inputParam, value, disabled, onChange, nodeName, in
                 <AsyncOptionsDropdown
                     key={reloadKey}
                     inputParam={inputParam}
-                    value={value}
+                    value={pendingValue ?? value}
                     disabled={disabled}
-                    onChange={onChange}
+                    onChange={(v) => {
+                        setPendingValue(null)
+                        onChange(v)
+                    }}
                     nodeName={nodeName}
                     inputValues={inputValues}
                     isCredential={isCredential}

packages/agentflow/src/features/node-editor/CreateCredentialDialog.test.tsx

@@ -212,13 +212,25 @@ describe('CreateCredentialDialog', () => {
         })
     })
 
-    it('Add button is enabled when credential name is filled', async () => {
+    it('Add button is disabled when required fields are empty', async () => {
         render(<CreateCredentialDialog {...defaultProps} />)
 
         await waitFor(() => screen.getByPlaceholderText('OpenAI API'))
 
+        // Fill credential name but leave required field empty
         fireEvent.change(screen.getByPlaceholderText('OpenAI API'), { target: { value: 'My Key' } })
 
+        expect(screen.getByText('Add')).toBeDisabled()
+    })
+
+    it('Add button is enabled when credential name and required fields are filled', async () => {
+        render(<CreateCredentialDialog {...defaultProps} />)
+
+        await waitFor(() => screen.getByPlaceholderText('OpenAI API'))
+
+        fireEvent.change(screen.getByPlaceholderText('OpenAI API'), { target: { value: 'My Key' } })
+        fireEvent.change(screen.getByDisplayValue(''), { target: { value: 'sk-test-key' } })
+
         expect(screen.getByText('Add')).not.toBeDisabled()
     })
 
@@ -228,6 +240,7 @@ describe('CreateCredentialDialog', () => {
         await waitFor(() => screen.getByPlaceholderText('OpenAI API'))
 
         fireEvent.change(screen.getByPlaceholderText('OpenAI API'), { target: { value: 'My OpenAI Key' } })
+        fireEvent.change(screen.getByDisplayValue(''), { target: { value: 'sk-test-key' } })
 
         await act(async () => {
             fireEvent.click(screen.getByText('Add'))
@@ -236,7 +249,7 @@ describe('CreateCredentialDialog', () => {
         expect(mockCreateCredential).toHaveBeenCalledWith({
             name: 'My OpenAI Key',
             credentialName: 'openAIApi',
-            plainDataObj: { openAIApiKey: '' }
+            plainDataObj: { openAIApiKey: 'sk-test-key' }
         })
         expect(defaultProps.onCreated).toHaveBeenCalledWith('new-cred-123')
     })
@@ -248,6 +261,7 @@ describe('CreateCredentialDialog', () => {
         await waitFor(() => screen.getByPlaceholderText('OpenAI API'))
 
         fireEvent.change(screen.getByPlaceholderText('OpenAI API'), { target: { value: 'My Key' } })
+        fireEvent.change(screen.getByDisplayValue(''), { target: { value: 'sk-test-key' } })
 
         await act(async () => {
             fireEvent.click(screen.getByText('Add'))

packages/agentflow/src/features/node-editor/CreateCredentialDialog.tsx

@@ -170,6 +170,14 @@ export function CreateCredentialDialog({ open, credentialNames, onClose, onCreat
         if (!submitting) onClose()
     }, [submitting, onClose])
 
+    // Check if all required fields have values
+    const hasEmptyRequiredFields = selectedSchema?.inputs
+        ?.filter((input) => !input.hidden && !input.optional)
+        .some((input) => {
+            const val = formValues[input.name]
+            return val === undefined || val === null || val === ''
+        })
+
     // Schema selection step (multiple credential types)
     const showSelection = !loading && !selectedSchema && schemas.length > 1
 
@@ -259,7 +267,11 @@ export function CreateCredentialDialog({ open, credentialNames, onClose, onCreat
                     Cancel
                 </Button>
                 {selectedSchema && (
-                    <Button variant='contained' onClick={handleSubmit} disabled={!credentialName.trim() || submitting}>
+                    <Button
+                        variant='contained'
+                        onClick={handleSubmit}
+                        disabled={!credentialName.trim() || hasEmptyRequiredFields || submitting}
+                    >
                         {submitting ? (isEditMode ? 'Saving...' : 'Adding...') : isEditMode ? 'Save' : 'Add'}
                     </Button>
                 )}