Dokploy
feat: Form-based Swarm Settings UI (#1188)
🎯 Overview
This PR implements a form-based UI for Docker Swarm settings, replacing the existing JSON code editors with intuitive form fields. This enhancement significantly improves the user experience by making swarm configuration more accessible and user-friendly.
✨ Features
🎨 UI Improvements
- Form-based Interface: Replaced JSON code editors with intuitive form fields
- Enable/Disable Toggles: Each setting section can be individually enabled/disabled
- Dynamic Arrays: Add/remove functionality for constraints, preferences, networks, and labels
- Conditional Fields: Form sections that show/hide based on user selections
- Responsive Design: Improved layout and spacing for better usability
🔧 Form Components
- Health Check Form: Test commands, intervals, timeouts, and retry settings
- Restart Policy Form: Condition dropdowns with delay and attempt configurations
- Placement Form: Dynamic constraints, preferences, and platform specifications
- Update/Rollback Config: Comprehensive update settings with failure actions
- Service Mode Form: Radio buttons for service types with conditional fields
- Network Form: Dynamic network configurations with aliases and driver options
- Labels Form: Key-value pair management for service labels
��️ Technical Enhancements
- Type Safety: Full TypeScript support with proper type definitions
- Form Validation: Real-time validation using Zod schemas
- Data Conversion: Seamless conversion between form data and API format
- Error Handling: Comprehensive error handling with user-friendly messages
- State Management: Efficient form state management with React Hook Form
🔄 Backward Compatibility
- ✅ API Compatibility: No changes to existing API endpoints
- ✅ Data Format: Maintains existing JSON structure for backend
- ✅ Validation: Uses existing server-side validation
- ✅ Error Handling: Preserves existing error message format
🧪 Testing
- [x] Form validation works correctly
- [x] Data conversion between form and API format
- [x] Enable/disable toggles function properly
- [x] Dynamic arrays add/remove items correctly
- [x] Conditional fields show/hide based on selections
- [x] Existing data loads correctly into new form
- [x] Form submission maintains API compatibility
📱 User Experience
Before
- Users had to manually write JSON configurations
- No validation until submission
- Difficult to understand Docker Swarm syntax
- Error-prone manual editing
After
- Intuitive form fields with proper labels
- Real-time validation with clear error messages
- Guided input with placeholders and descriptions
- Dynamic arrays for complex configurations
- Enable/disable toggles for optional settings
🎯 Benefits
- Improved Usability: Users can configure swarm settings without JSON knowledge
- Better Validation: Real-time validation prevents configuration errors
- Enhanced Accessibility: Proper form controls with labels and descriptions
- Maintainability: Modular components that are easier to maintain
- User-Friendly: Clear visual hierarchy and intuitive interactions
📸 Screenshots
- Closes #1188
Hi @Harikrishnan1367709, I really like this change. Although I think that the UX currently is not good. What would you think about using the <Tabs/> component just like in the dashboard for the application?
Hi @cheetahbyte!
Thank you for the great feedback! 🎉 You're absolutely right about the UX - the tabbed interface is much more organized and user-friendly.
I've implemented the <Tabs/> component as suggested, organizing the swarm settings into logical tabs:
- Health Check - Health check configurations
- Restart Policy - Restart policy settings
- Placement - Placement constraints and preferences
- Update Config - Update configuration settings
- Rollback Config - Rollback configuration settings
- Service Mode - Service mode and scaling settings
- Network - Network configurations
- Labels - Service labels
This makes the form much more navigable and follows the same UI patterns used throughout the application. Each tab focuses on one specific aspect of swarm configuration, making it easier for users to find and configure the settings they need.
The tabs are responsive (4 columns on mobile, 8 on large screens) and maintain all the existing functionality while providing a much better user experience.
Thanks again for the suggestion - it's a significant improvement! ✨
It works relatively well, but it has certain errors.
Wehn saving changes on random tab gives this error:
In this case if we have a value selected we don't have a way to clean this value or go back to the empty value
Some validations like this: gives the impresion is not working or is broken
https://github.com/user-attachments/assets/5ab3d8c7-ae51-45f7-936f-6088614ffbce
We also have zod validations, so why don't show the error instead? I think we also should add a error message in the zod schema en show that specific error in the UI is more clear than just said no values set
