fix: disable Generate button when required fields are not filled

[mykh-hailo]

Description

This PR improves the data handling and field validation in the DocStore input component by ensuring all input field types properly trigger parent component change handlers.

Closes: #5450

Changes

• Expanded input type support: Extended the allowShowHideInputTypes array to include additional field types: string, password, number, code, json, datagrid, and array. This enables these field types to trigger parent node data change handlers, allowing for proper validation and state management.
• Consistent change handling: Refactored file, datagrid, code, and JSON input handlers to use the centralized handleDataChange function instead of direct data mutations. This ensures all input field changes are tracked consistently and trigger appropriate parent component updates.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the robustness of data handling and field validation within the DocStoreInputHandler component. By expanding the range of input types that trigger parent change handlers and centralizing the data change logic, it ensures that all relevant input modifications are properly propagated. This is crucial for enabling features like dynamically disabling a 'Generate' button when required fields are not adequately filled, leading to a more reliable and responsive user interface.

Highlights

• Expanded Input Type Support: The allowedShowHideInputTypes array has been extended to include additional field types such as string, password, number, code, json, datagrid, and array. This ensures that changes in these input types properly trigger the parent component's nodeDataChangeHandler for validation and state management.
• Consistent Change Handling: The onChange handlers for File, Datagrid, Code, and JsonEditorInput components have been refactored to consistently use the centralized handleDataChange function. This standardizes how input changes are tracked and ensures appropriate parent component updates across various input types.

Changelog

• packages/ui/src/views/docstore/DocStoreInputHandler.jsx
  • Expanded the allowedShowHideInputTypes array to include additional input types like 'string', 'password', 'number', 'code', 'json', 'datagrid', and 'array'.
  • Updated the File component's onChange prop to utilize the handleDataChange function.
  • Modified the Datagrid component's onChange prop to call the handleDataChange function.
  • Refactored the Code component's onChange prop to use the handleDataChange function.
  • Adjusted the JsonEditorInput component's onChange prop to invoke the handleDataChange function.

Activity

• No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request aims to improve validation by ensuring all input field changes trigger the necessary parent handlers. The approach of centralizing the logic in handleDataChange and expanding the list of tracked input types is good. However, the implementation is incomplete. The handlers for code and array input types have not been updated to use handleDataChange. Additionally, while the file input handler has been updated, its type has not been added to the list of types that trigger the parent handler. These omissions prevent the validation from working for these input types, which undermines the goal of this PR. I've left a detailed comment with a suggestion to address these issues.

[mykh-hailo]

@HenryHengZJ I am very happy for my first PR for Flowise.
Can you review this PR and leave comments for improvement?
Thank you.

[HenryHengZJ]

hey @mykh-hailo ! thanks for the PR.
However this is already fixed and merged: #5607
Closing for now

[mykh-hailo]

@HenryHengZJ thanks for notifying me that.
The problem is that Generate button is not disabled even if all required fields are set.
And it is enabled even all required fields are not set.

Here are the steps to reproduce the bug:

1. Open AgentFlow Canvas
2. Press Generate Agentflow button
3. Input prompt.
4. Select ChatOllama from the model list.
5. Set the Model Name which is required

Expected Behavior:
The Generate button should be enabled because all required fields are set.

Actual Behavior:
The Generate button is disabled

Here is another step:
After doing the above steps:
6. Close the Generate Agentflow modal
7. Open Agentflow modal again(You can see ChatOllama is selected)
8. Input prompt and check that Generate button is enabled(It's enabled)
9. Remove Model Name from Ollama Model Parameter

Expected Behavior:
The Generate button should be disabled because Model Name is required.

Actual Behavior:
The Generate button is enabled.

This PR is to resolve this all validation issues.

cc @yau-wd @jocelynlin-wd

[mykh-hailo]

@HenryHengZJ can you share your ideas for my comments please?

[mykh-hailo]

Hi @HenryHengZJ I'd appreciate it if you share your ideas on it.

[mykh-hailo]

@HenryHengZJ I'd appreciate it if you review my PR very quick.
Thank you.

[HenryHengZJ]

@mykh-hailo while your method works - but this causes re-rendering on handleDataChange for every onChange. I changed the approach to use onBlur.

When the user fills in "Model Name" (a string field) for ChatOllama and tabs/clicks away, onBlur fires → handleDataChange → nodeDataChangeHandler → handleChatModelDataChange in the dialog → setSelectedChatModel → React re-renders → checkMandatoryFields() re-evaluates → button becomes enabled

[mykh-hailo]

@HenryHengZJ Thank you for the kind updates.

[HenryHengZJ]

can you test the changes and see if you're good with that or there is any other issues

[mykh-hailo]

@HenryHengZJ I checked your update and LGTM.
Thank you