Feature Enhancement: Unified Component Creation Wizard

[aaronlippold]

Problem Statement

The current component creation UX has usability issues that cause user confusion:

Entry Point Issues

• 3 similar buttons: "Create New Component", "Import From Spreadsheet", "Copy Component"
• Users can't quickly distinguish between options
• All buttons appear equally important with no clear hierarchy
• Cognitive overhead deciding which to use

Internal Workflow Issues

• Conditional field chaos: Fields appear/disappear based on mode (v-if conditions)
• Information overload: 8+ fields visible simultaneously
• No step progression: Everything presented at once
• Hidden dependencies: Some fields disabled until others are selected
• Late validation: Errors only appear when submitting
• Poor visual differentiation: All 3 modals look nearly identical

Proposed Solution: Unified Component Creation Wizard

Phase 1: Single Entry Point

Replace 3 confusing buttons with one clear action: [+ Add Component]

Phase 2: Visual Method Selection

Modal opens with distinct cards:

• 📄 CREATE (Green) - "Start from SRG template"
• 📁 IMPORT (Blue) - "Upload a spreadsheet"
• 📋 COPY (Orange) - "Duplicate existing component"

Phase 3: Step-by-Step Workflows

Create New (3 steps):

1. SRG Selection - Focus on searching/browsing available SRGs
2. Component Details - Name, Description, Version, Release
3. Settings - Prefix, PoC, Visibility options

Import from Spreadsheet (3 steps):

1. File Upload - Prominent drop zone with validation
2. Preview & Validate - Show parsed rules, format verification
3. Finalize - Name, Prefix, PoC assignment

Copy Existing (3 steps):

1. Source Selection - Project search → Component search
2. Customization - Modify name, version, select what to copy
3. Review - Source vs destination comparison

Technical Implementation

Bootstrap-Vue Components:

• b-card-group for method selection cards
• b-progress for step indicators
• Existing form components (simple-autocomplete, b-form-file, etc.)
• v-show for smooth step transitions

Benefits:

• Single entry point eliminates confusion
• Progressive disclosure reduces cognitive load
• Visual differentiation makes purpose immediately clear
• Incremental validation provides better feedback
• Mobile-friendly responsive design
• Professional UX aligned with modern best practices

Implementation Priority

Timeline: After API v1 completion and Vue 3/Bootstrap 5 migration

• Rationale: This UI work would benefit from modern components
• Dependencies: Vue 3 Composition API would make wizard logic cleaner
• Risk Management: Don't want to complicate current API development work

Estimated Effort

• Basic wizard structure: 2-3 hours
• Visual polish: 1-2 hours
• Testing/fixes: 30 minutes
• Total: ~4 hours

Success Metrics

• Reduced user confusion in component creation
• Faster task completion for all creation types
• Lower support requests about "which button to use"
• Better mobile experience
• Improved user satisfaction scores

---

Related Work: Part of ongoing Vulcan modernization effort including API v1 development and Vue 3/Bootstrap 5 migration.