refactor: extract sub-components and custom hooks from UpdateDSLModal and Metadata components

[CodingOnStar]

Summary

• UpdateDSLModal refactoring: Extracted 7 useState calls and all business logic into a useUpdateDSLModal custom hook, split the version mismatch dialog into a standalone VersionMismatchModal component. The main component was reduced from 284 lines / complexity 53 to 112 lines / complexity 0.
• Metadata refactoring: Split FieldInfo, DocTypeSelector, and MetadataFieldList into a components/ subdirectory, extracted state management logic into hooks/use-metadata-state.ts. The main component was streamlined from 425 lines to 127 lines.
• Test coverage: Added unit tests for all newly extracted hooks and components (+838 lines of test code). use-metadata-state.ts achieved Stmts 98% / Lines 97.95% / Funcs 100% coverage.

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 effort across two key frontend components: UpdateDSLModal and Metadata. The primary goal was to improve code maintainability, readability, and testability by breaking down monolithic components into smaller, more focused sub-components and custom hooks. This separation of concerns encapsulates stateful logic and UI elements, leading to a cleaner architecture and reduced complexity in the main components. The changes also include the addition of extensive unit tests for the newly created modules, ensuring the reliability and correctness of the refactored code.

Highlights

• UpdateDSLModal Refactoring: The UpdateDSLModal component has been significantly refactored. Its state management and business logic, including 7 useState calls, were extracted into a new useUpdateDSLModal custom hook. The version mismatch dialog was also separated into a standalone VersionMismatchModal component. This reduced the main component's size from 284 lines with a complexity of 53 to a mere 112 lines with a complexity of 0.
• Metadata Component Refactoring: The Metadata component underwent a similar refactoring. Key sub-components like FieldInfo, DocTypeSelector, and MetadataFieldList were extracted into their own files within a components/ subdirectory. The component's state management logic was moved into a new use-metadata-state.ts custom hook. This effort streamlined the main Metadata component from 425 lines to 127 lines.
• Enhanced Test Coverage: Comprehensive unit tests were added for all newly extracted custom hooks and components, resulting in an addition of 838 lines of test code. Notably, the use-metadata-state.ts hook achieved excellent test coverage with 98% statements, 97.95% lines, and 100% functions coverage.
• ESLint Suppressions Removed: The refactoring efforts allowed for the removal of previously necessary ESLint suppressions for metadata/index.tsx and update-dsl-modal.tsx, indicating improved code quality and adherence to linting rules.

🧠 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.

Changelog

• web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
  • Added new component for handling document type selection and display within the Metadata section.
• web/app/components/datasets/documents/detail/metadata/components/field-info.tsx
  • Added new component responsible for rendering and managing individual metadata fields, supporting various input types.
• web/app/components/datasets/documents/detail/metadata/components/metadata-field-list.tsx
  • Added new component to encapsulate the rendering of a list of metadata fields, utilizing the FieldInfo component.
• web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts
  • Added new custom hook to manage all state and business logic related to the Metadata component, including edit status, document type selection, and metadata updates.
• web/app/components/datasets/documents/detail/metadata/index.spec.tsx
  • Updated existing tests to align with the refactored Metadata component, including new test cases for the useMetadataState hook and integration of sub-components.
• web/app/components/datasets/documents/detail/metadata/index.tsx
  • Refactored the main Metadata component to delegate responsibilities to the newly extracted DocTypeSelector, FieldInfo, MetadataFieldList components, and the useMetadataState hook.
• web/app/components/rag-pipeline/components/update-dsl-modal.spec.tsx
  • Performed minor cleanup in test files, including the removal of redundant afterEach(cleanup) calls.
• web/app/components/rag-pipeline/components/update-dsl-modal.tsx
  • Refactored the UpdateDSLModal component to utilize the new useUpdateDSLModal hook for logic and state, and the VersionMismatchModal for displaying version-related information.
• web/app/components/rag-pipeline/components/version-mismatch-modal.spec.tsx
  • Added new unit tests specifically for the VersionMismatchModal component to ensure its correct rendering and behavior.
• web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
  • Added new component to display a modal dialog when there is a DSL version mismatch during import.
• web/app/components/rag-pipeline/hooks/use-update-dsl-modal.spec.ts
  • Added comprehensive unit tests for the new useUpdateDSLModal custom hook, covering various import scenarios and state transitions.
• web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts
  • Added new custom hook to encapsulate all state management and business logic for the UpdateDSLModal, including file handling, import process, and version mismatch handling.
• web/eslint-suppressions.json
  • Removed specific ESLint suppressions for metadata/index.tsx and update-dsl-modal.tsx, reflecting improved code structure and adherence to linting standards.

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 is an excellent refactoring effort. You've successfully extracted complex logic from the UpdateDSLModal and Metadata components into custom hooks and smaller, more manageable sub-components. This greatly reduces complexity, improves readability, and enhances testability, as demonstrated by the comprehensive new test files. The code is much cleaner and more maintainable. I have a few suggestions to further improve the code.

[Copilot]

Pull request overview

This pull request refactors two large components (UpdateDSLModal and Metadata) by extracting custom hooks and sub-components to improve maintainability and reduce complexity.

Changes:

• UpdateDSLModal refactoring: Extracted business logic into useUpdateDSLModal custom hook and split the version mismatch dialog into a standalone VersionMismatchModal component, reducing main component from 284 lines (complexity 53) to 112 lines (complexity 0)
• Metadata refactoring: Split UI components (FieldInfo, DocTypeSelector, MetadataFieldList) into a components subdirectory and extracted state management into use-metadata-state.ts hook, streamlining main component from 425 lines to 127 lines
• Test coverage: Added comprehensive unit tests for all newly extracted hooks and components (+838 lines of test code), achieving high coverage (98% statements / 97.95% lines / 100% functions for use-metadata-state)

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
web/eslint-suppressions.json	Removed ESLint suppressions for the refactored files, indicating code quality improvements
web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts	New custom hook extracting UpdateDSLModal business logic
web/app/components/rag-pipeline/hooks/use-update-dsl-modal.spec.ts	Comprehensive test suite for the hook (551 lines)
web/app/components/rag-pipeline/components/version-mismatch-modal.tsx	Extracted version mismatch modal component
web/app/components/rag-pipeline/components/version-mismatch-modal.spec.tsx	Test suite for the modal component
web/app/components/rag-pipeline/components/update-dsl-modal.tsx	Refactored main component using extracted hook and component
web/app/components/rag-pipeline/components/update-dsl-modal.spec.tsx	Updated tests with cleanup simplification
web/app/components/datasets/documents/detail/metadata/index.tsx	Refactored main Metadata component
web/app/components/datasets/documents/detail/metadata/index.spec.tsx	Enhanced tests with additional hook coverage tests
web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts	New custom hook for metadata state management
web/app/components/datasets/documents/detail/metadata/components/field-info.tsx	Extracted FieldInfo component
web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx	Extracted DocTypeSelector and DocumentTypeDisplay components
web/app/components/datasets/documents/detail/metadata/components/metadata-field-list.tsx	Extracted MetadataFieldList component

---

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