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 #24551] feat: implement workflow onboarding modal system #30684

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

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

State: closed
Merged: Yes

Summary

Implement workflow onboarding modal system that appears when creating new workflows, allowing users to choose between User Input and Trigger start nodes.

Features Implemented

  • Onboarding Modal: Appears automatically for new workflow creation
  • Dual Path Selection: User Input (original start) vs Trigger options
  • Strict Modal Control: Modal closes only with ESC key or X button, no outside clicks
  • Popup Trigger Selection: Uses NodeSelector component positioned near trigger card
  • Auto-expand Block Selector: All start node types automatically show plus button for adding next nodes
  • Backend Sync Fix: Critical fix ensuring trigger nodes persist correctly

Components Added

  • WorkflowOnboardingModal: Main modal with ESC handling and strict close control
  • StartNodeSelectionPanel: Initial two-option selection with integrated NodeSelector
  • StartNodeOption: Reusable card component for selection options

Technical Changes

  • State Management: Added showOnboarding and hasSelectedStartNode to workflow store
  • Initialization: Modified workflow init to trigger onboarding for new workflows
  • Node Creation: Enhanced node selection handler with proper canvas integration
  • Auto-expand: Extended auto-expand logic to all trigger node types (Schedule, Webhook, Plugin)
  • Sync Fix: Fixed critical validation in use-nodes-sync-draft.ts preventing trigger nodes from reverting
  • Modal Enhancement: Added clickOutsideNotClose prop for strict close control
  • NodeSelector Enhancement: Added defaultActiveTab and forceShowStartContent props for better control

Architecture Improvements

  • Reuses existing NodeSelector component instead of custom trigger panels
  • Maintains backward compatibility for all enhanced components
  • Popup positioning system with proper z-index layering
  • Tab hiding capability while preserving content visibility
  • Clean separation between modal content and popup trigger selection

Testing

  • Jest tests provided following existing patterns
  • Backward compatibility maintained for existing workflows
  • All node types properly sync to backend

Related Issues

Related to #23981 (Dify Trigger Foundation)
Part of #24198 (Frontend Workflow Onboarding & App Sidebar Management)

Demo Flow

The onboarding flow provides a guided experience:

  1. Create new workflow → Modal appears
  2. Choose User Input → Start node created immediately
  3. Choose Trigger → Popup selector appears near trigger card
  4. Select trigger type → Appropriate trigger node created
  5. ESC/X → Modal closes, empty canvas shown
  6. All start nodes auto-expand block selector for adding next nodes
**Original Pull Request:** https://github.com/langgenius/dify/pull/24551 **State:** closed **Merged:** Yes --- ## Summary Implement workflow onboarding modal system that appears when creating new workflows, allowing users to choose between User Input and Trigger start nodes. ## Features Implemented - Onboarding Modal: Appears automatically for new workflow creation - Dual Path Selection: User Input (original start) vs Trigger options - Strict Modal Control: Modal closes only with ESC key or X button, no outside clicks - Popup Trigger Selection: Uses NodeSelector component positioned near trigger card - Auto-expand Block Selector: All start node types automatically show plus button for adding next nodes - Backend Sync Fix: Critical fix ensuring trigger nodes persist correctly ## Components Added - WorkflowOnboardingModal: Main modal with ESC handling and strict close control - StartNodeSelectionPanel: Initial two-option selection with integrated NodeSelector - StartNodeOption: Reusable card component for selection options ## Technical Changes - State Management: Added showOnboarding and hasSelectedStartNode to workflow store - Initialization: Modified workflow init to trigger onboarding for new workflows - Node Creation: Enhanced node selection handler with proper canvas integration - Auto-expand: Extended auto-expand logic to all trigger node types (Schedule, Webhook, Plugin) - Sync Fix: Fixed critical validation in use-nodes-sync-draft.ts preventing trigger nodes from reverting - Modal Enhancement: Added clickOutsideNotClose prop for strict close control - NodeSelector Enhancement: Added defaultActiveTab and forceShowStartContent props for better control ## Architecture Improvements - Reuses existing NodeSelector component instead of custom trigger panels - Maintains backward compatibility for all enhanced components - Popup positioning system with proper z-index layering - Tab hiding capability while preserving content visibility - Clean separation between modal content and popup trigger selection ## Testing - Jest tests provided following existing patterns - Backward compatibility maintained for existing workflows - All node types properly sync to backend ## Related Issues Related to #23981 (Dify Trigger Foundation) Part of #24198 (Frontend Workflow Onboarding & App Sidebar Management) ## Demo Flow The onboarding flow provides a guided experience: 1. Create new workflow → Modal appears 2. Choose User Input → Start node created immediately 3. Choose Trigger → Popup selector appears near trigger card 4. Select trigger type → Appropriate trigger node created 5. ESC/X → Modal closes, empty canvas shown 6. All start nodes auto-expand block selector for adding next nodes
yindo added the pull-request label 2026-02-21 20:48:01 -05:00
yindo closed this issue 2026-02-21 20:48:01 -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#30684
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?