[PR #31517] refactor(web): extract MCP components and add comprehensive tests #33279

Closed
opened 2026-02-21 20:53:00 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/31517

State: closed
Merged: Yes


Summary

Extract logic and UI components from mcp-service-card and modal into reusable hooks and sub-components. Add comprehensive test coverage for all MCP components including new section components for authentication, configurations, and headers.

Changes

  • Extract useMCPServiceCardState and useMCPModalForm hooks for shared state management
  • Create section components: AuthenticationSection, ConfigurationsSection, HeadersSection
  • Refactor mcp-service-card and modal for better maintainability and code reuse
  • Add 7000+ lines of test coverage with >95% component coverage

Test Coverage

  • 24 new test files with comprehensive coverage of all MCP components
  • Tests include rendering, user interactions, edge cases, and state management
  • All tests follow AAA (Arrange-Act-Assert) pattern and use proper mocking

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
**Original Pull Request:** https://github.com/langgenius/dify/pull/31517 **State:** closed **Merged:** Yes --- ## Summary Extract logic and UI components from mcp-service-card and modal into reusable hooks and sub-components. Add comprehensive test coverage for all MCP components including new section components for authentication, configurations, and headers. ## Changes - Extract `useMCPServiceCardState` and `useMCPModalForm` hooks for shared state management - Create section components: `AuthenticationSection`, `ConfigurationsSection`, `HeadersSection` - Refactor `mcp-service-card` and `modal` for better maintainability and code reuse - Add 7000+ lines of test coverage with >95% component coverage ## Test Coverage - 24 new test files with comprehensive coverage of all MCP components - Tests include rendering, user interactions, edge cases, and state management - All tests follow AAA (Arrange-Act-Assert) pattern and use proper mocking ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `make lint` and `make type-check` (backend) and `cd web && npx lint-staged` (frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:53:00 -05:00
yindo closed this issue 2026-02-21 20:53:00 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#33279