refactor(workflow-tool): update types and improve modal handling

[CodingOnStar]

Summary

• Removed explicit 'any' types in favor of 'unknown' for better type safety.
• Refactored the WorkflowToolConfigureButton component to utilize a custom hook for managing modal state and logic.
• Introduced new components for input and output tables to streamline the workflow tool configuration process.
• Enhanced the form handling logic with a dedicated hook for managing form state and validation.
• Cleaned up unused imports and improved overall code organization.

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran make lint and make type-check (backend) and cd web && npx lint-staged (frontend) to appease the lint gods

[gemini-code-assist]

Summary of Changes

Hello @CodingOnStar, 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 focuses on a significant refactoring of the workflow tool configuration feature. The primary goal is to enhance code maintainability, improve type safety, and streamline the user interface for configuring workflow tools. By introducing custom hooks for state and form management, and dedicated components for input/output tables, the changes lead to a more modular and robust codebase, making future development and debugging more efficient.

Highlights

• Type Safety Enhancement: Replaced explicit 'any' types with 'unknown' in core type definitions for improved type safety across the workflow tool module.
• Refactored WorkflowToolConfigureButton: The WorkflowToolConfigureButton component has been significantly refactored to delegate its state management, data fetching, and logic to a new custom hook, useConfigureButton.
• New UI Components for Tool Configuration: Introduced dedicated ToolInputTable and ToolOutputTable components to streamline the display and management of workflow tool input and output parameters within the configuration modal.
• Centralized Form Handling Logic: A new custom hook, useWorkflowToolForm, was created to centralize and manage the form state, validation, and submission logic for the workflow tool configuration modal.
• Modularized Modal State Management: Added a useModalState hook for simplified and reusable management of modal open/close states, enhancing code organization.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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

The pull request effectively refactors the workflow tool configuration, moving state management and logic into custom hooks (useConfigureButton, useWorkflowToolForm, useModalState). This significantly improves code organization, readability, and maintainability. The introduction of ToolInputTable and ToolOutputTable components further modularizes the UI. Type safety has been enhanced by replacing some any types with unknown and more specific types, and the eslint-suppressions.json update reflects this improvement. However, there are a few areas where magic strings are used and a React Hooks rule is violated, which should be addressed.

[gemini-code-assist]

The string '__image' is a magic string. It would be better to define this as a constant to improve readability and prevent potential typos.

Suggested change

	const isImageParameter = item.name === '__image'
	const IMAGE_PARAMETER_NAME = '__image'
	const isImageParameter = item.name === IMAGE_PARAMETER_NAME

[gemini-code-assist]

The strings 'paragraph' and 'text-input' are magic strings. It would be better to define these as constants (e.g., InputVarType.paragraph, InputVarType.textInput) to improve readability and maintainability.

    const isTextType = item.type === InputVarType.paragraph || item.type === InputVarType.textInput

[gemini-code-assist]

The string 'paragraph' is a magic string. It would be better to define this as a constant (e.g., InputVarType.paragraph) to improve readability and maintainability.

      type: item.type === InputVarType.paragraph ? 'string' : item.type,

[gemini-code-assist]

The strings 'text', 'files', and 'json' used for name and the VarType values are magic strings. These should be defined as constants (e.g., RESERVED_OUTPUT_NAMES.TEXT, VarType.string) to improve readability, prevent typos, and make future changes easier.

  const reservedOutputParameters = useMemo<WorkflowToolProviderOutputParameter[]>(() => [
    {
      name: 'text',
      description: t('nodes.tool.outputVars.text', { ns: 'workflow' }),
      type: VarType.string,
      reserved: true,
    },
    {
      name: 'files',
      description: t('nodes.tool.outputVars.files.title', { ns: 'workflow' }),
      type: VarType.arrayFile,
      reserved: true,
    },
    {
      name: 'json',
      description: t('nodes.tool.outputVars.json', { ns: 'workflow' }),
      type: VarType.arrayObject,
      reserved: true,
    },
  ], [t])

[gemini-code-assist]

The concatenation of two translation keys for an error message can be clunky and might lead to awkward phrasing in different languages. Consider creating a single translation key that encompasses the full error message, allowing for more natural and flexible translations (e.g., createTool.nameForToolCallInvalidTip).

[Copilot]

Pull request overview

This pull request refactors the workflow-tool component to improve code organization and type safety. It extracts complex logic into custom hooks, splits large components into smaller, reusable pieces, and replaces explicit 'any' types with 'unknown' for better type safety.

Changes:

• Extracted modal state management into a useModalState hook
• Created useWorkflowToolForm hook to encapsulate form state and validation logic
• Introduced useConfigureButton hook to manage configure button state and API interactions
• Split workflow tool configuration UI into smaller components (FormField, FooterActions, ToolInputTable, ToolOutputTable)
• Replaced 'any' types with 'unknown' or more specific types (TypeWithI18N)

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
web/eslint-suppressions.json	Removed ts/no-explicit-any suppressions (4 → 2) after fixing explicit any types
web/app/components/tools/types.ts	Changed team_credentials to use unknown instead of any, changed Tool.description to TypeWithI18N, added label field to WorkflowToolProviderRequest
web/app/components/tools/workflow-tool/index.tsx	Refactored main modal component to use custom hooks, extracted FormField and FooterActions components, changed payload type to WorkflowToolFormPayload
web/app/components/tools/workflow-tool/configure-button.tsx	Refactored to use useConfigureButton hook, extracted UnpublishedCard, NonManagerCard, and PublishedActions components
web/app/components/tools/workflow-tool/hooks/use-modal-state.ts	New hook for managing modal open/close state
web/app/components/tools/workflow-tool/hooks/use-workflow-tool.ts	New hooks for React Query-based API calls (fetch, create, update workflow tools)
web/app/components/tools/workflow-tool/hooks/use-workflow-tool-form.ts	New hook encapsulating form state, validation, and submission logic
web/app/components/tools/workflow-tool/hooks/use-configure-button.ts	New hook managing configure button state, data fetching, and update logic
web/app/components/tools/workflow-tool/components/tool-input-table.tsx	Extracted input parameters table into reusable component
web/app/components/tools/workflow-tool/components/tool-output-table.tsx	Extracted output parameters table into reusable component
web/app/components/tools/provider/detail.tsx	Updated type casting for WorkflowToolModal payload to match new type structure

Comments suppressed due to low confidence (1)

web/app/components/tools/workflow-tool/index.tsx:36

• The test file imports WorkflowToolModalPayload which still exists but is no longer used internally (replaced by WorkflowToolFormPayload). The tests should be updated to use WorkflowToolFormPayload instead, and the old WorkflowToolModalPayload type should be removed or deprecated to avoid confusion. Note that WorkflowToolModalPayload.outputParameters is required while WorkflowToolFormPayload.outputParameters is optional, which may require test updates.

export type WorkflowToolModalPayload = {
  icon: Emoji
  label: string
  name: string
  description: string
  parameters: WorkflowToolProviderParameter[]
  outputParameters: WorkflowToolProviderOutputParameter[]
  labels: string[]
  privacy_policy: string
  tool?: {
    output_schema?: WorkflowToolProviderOutputSchema
  }
  workflow_tool_id?: string
  workflow_app_id?: string
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.