langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 12:05:30 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #24849] Fix test run shortcut consistency and improve dropdown styling #30823

New Issue
Closed
opened 2026-02-21 20:48:17 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:48:17 -05:00
Owner
Copy Link
Copy Source

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

State: closed
Merged: Yes

Summary

This PR implements comprehensive improvements to the test run functionality through three focused commits addressing validation, UI consistency, and shortcut behavior:

1. Checklist Validation System

Commit: feat: add checklist validation for test run and refactor publish validation

Major functional enhancement:

  • New Hook: Created useWorkflowRunValidation hook with centralized validation logic
  • Test Run Validation: Added mandatory checklist validation before any workflow execution
  • Publish Validation Refactor: Simplified app-publisher-trigger.tsx by reusing validation logic
  • Consistent UX: Both test runs and publish operations now use identical validation flow

Technical Implementation:

  • Extracted validation logic from app-publisher-trigger into reusable hook
  • Added validateBeforeRun() method with error notification handling
  • Integrated validation into test run trigger selection flow
  • Removed duplicate code and unused imports (useChecklist, useNodes, useEdges from publisher)

Business Impact:

  • Prevents workflow execution with unresolved checklist items
  • Ensures data consistency and prevents invalid workflow states
  • Provides immediate user feedback when validation fails

2. UI Standardization: Dropdown Shortcut Styling

Commit: feat: improve dropdown shortcut tags with proper ShortcutsName styling

  • Replaced manual div tags with standardized ShortcutsName component in TestRunDropdown
  • Ensures visual consistency of keyboard shortcut indicators across the application
  • Maintains existing functionality while improving visual coherence with project design system

3. Shortcut Behavior Consistency

Commit: fix: align Alt+R shortcut behavior with test run button click

Architectural changes:

  • TestRunDropdown Refactor: Converted to forwardRef pattern with useImperativeHandle
  • Cross-component Communication: Implemented window object method for keyboard integration
  • Behavior Alignment: Alt+R now opens dropdown menu instead of direct execution

User Experience Change:

  • Before: Alt+R → Direct workflow execution
  • After: Alt+R → Open dropdown menu (same as button click)

Technical Implementation:

  • Added TestRunDropdownRef interface with toggle method
  • Global window._toggleTestRunDropdown method for shortcut integration
  • Cleaned up unused imports and fixed TypeScript diagnostic errors

Key Features Added

Validation System:

const { validateBeforeRun } = useWorkflowRunValidation()

const handleTriggerSelect = (option: TriggerOption) => {
  // Validate checklist before running any workflow
  if (!validateBeforeRun())
    return
  // ... proceed with execution
}

Consistent UI Components:

  • ShortcutsName component usage for all keyboard shortcut displays
  • Standardized visual styling across workflow interface

Unified Shortcut Behavior:

  • Alt+R and button click provide identical user experience
  • Dropdown-based trigger selection for all interaction methods

Files Modified

Core Logic:

  • web/app/components/workflow/hooks/use-checklist.ts - Added validation hook
  • web/app/components/workflow/header/run-and-history.tsx - Integrated validation and ref pattern

Refactoring:

  • web/app/components/workflow-app/components/workflow-header/app-publisher-trigger.tsx - Simplified validation logic
  • web/app/components/workflow/header/test-run-dropdown.tsx - forwardRef pattern and ShortcutsName styling
  • web/app/components/workflow/hooks/use-shortcuts.ts - Updated Alt+R behavior

Backward Compatibility

  • All existing TestRunDropdown usage patterns continue to work
  • New validation system enhances existing flows without breaking changes
  • Global window method ensures shortcut system compatibility

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 dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/24849 **State:** closed **Merged:** Yes --- ## Summary This PR implements comprehensive improvements to the test run functionality through three focused commits addressing validation, UI consistency, and shortcut behavior: ### 1. Checklist Validation System **Commit**: `feat: add checklist validation for test run and refactor publish validation` **Major functional enhancement:** - **New Hook**: Created `useWorkflowRunValidation` hook with centralized validation logic - **Test Run Validation**: Added mandatory checklist validation before any workflow execution - **Publish Validation Refactor**: Simplified app-publisher-trigger.tsx by reusing validation logic - **Consistent UX**: Both test runs and publish operations now use identical validation flow **Technical Implementation:** - Extracted validation logic from app-publisher-trigger into reusable hook - Added `validateBeforeRun()` method with error notification handling - Integrated validation into test run trigger selection flow - Removed duplicate code and unused imports (useChecklist, useNodes, useEdges from publisher) **Business Impact:** - Prevents workflow execution with unresolved checklist items - Ensures data consistency and prevents invalid workflow states - Provides immediate user feedback when validation fails ### 2. UI Standardization: Dropdown Shortcut Styling **Commit**: `feat: improve dropdown shortcut tags with proper ShortcutsName styling` - Replaced manual div tags with standardized ShortcutsName component in TestRunDropdown - Ensures visual consistency of keyboard shortcut indicators across the application - Maintains existing functionality while improving visual coherence with project design system ### 3. Shortcut Behavior Consistency **Commit**: `fix: align Alt+R shortcut behavior with test run button click` **Architectural changes:** - **TestRunDropdown Refactor**: Converted to forwardRef pattern with useImperativeHandle - **Cross-component Communication**: Implemented window object method for keyboard integration - **Behavior Alignment**: Alt+R now opens dropdown menu instead of direct execution **User Experience Change:** - **Before**: Alt+R → Direct workflow execution - **After**: Alt+R → Open dropdown menu (same as button click) **Technical Implementation:** - Added TestRunDropdownRef interface with toggle method - Global window._toggleTestRunDropdown method for shortcut integration - Cleaned up unused imports and fixed TypeScript diagnostic errors ### Key Features Added **Validation System:** ```typescript const { validateBeforeRun } = useWorkflowRunValidation() const handleTriggerSelect = (option: TriggerOption) => { // Validate checklist before running any workflow if (!validateBeforeRun()) return // ... proceed with execution } ``` **Consistent UI Components:** - ShortcutsName component usage for all keyboard shortcut displays - Standardized visual styling across workflow interface **Unified Shortcut Behavior:** - Alt+R and button click provide identical user experience - Dropdown-based trigger selection for all interaction methods ### Files Modified **Core Logic:** - `web/app/components/workflow/hooks/use-checklist.ts` - Added validation hook - `web/app/components/workflow/header/run-and-history.tsx` - Integrated validation and ref pattern **Refactoring:** - `web/app/components/workflow-app/components/workflow-header/app-publisher-trigger.tsx` - Simplified validation logic - `web/app/components/workflow/header/test-run-dropdown.tsx` - forwardRef pattern and ShortcutsName styling - `web/app/components/workflow/hooks/use-shortcuts.ts` - Updated Alt+R behavior ### Backward Compatibility - All existing TestRunDropdown usage patterns continue to work - New validation system enhances existing flows without breaking changes - Global window method ensures shortcut system compatibility ## 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 `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:48:17 -05:00
yindo closed this issue 2026-02-21 20:48:18 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30823
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?