Smart Variant Creator - Critical Debug & Fixes

Emergency fixes for portal data injection and property loading issues

Smart Variant Creator - Emergency Fixes

🚨 Critical Issue Identified

User Report: "IT is EXTREMLY incomplete still!!! [SmartVariantCreator] No config available"

Root Cause: Portal data injection failing - portalData is null in component.

🔧 Emergency Fixes Applied

1. Fixed UX_PORTAL_DATA Import ✅

Problem: Local redeclaration of UX_PORTAL_DATA constant conflicting with imported token.

Before (WRONG):

import { UX_PORTAL_DATA } from '@libs-ux/ux-portal';

// UX Portal data token
const UX_PORTAL_DATA = 'UX_PORTAL_DATA'; // ❌ CONFLICT!

After (FIXED):

import { UX_PORTAL_DATA } from '@libs-ux/ux-portal';
// No local redeclaration - use imported InjectionToken

File: smart-variant-creator.component.ts

2. Removed `as any` Cast ✅

Problem: Casting token to any prevented proper type checking.

Before:

inject(UX_PORTAL_DATA as any, { optional: true })

After:

inject(UX_PORTAL_DATA, { optional: true })

3. Added Comprehensive Debug Logging ✅

Added to Constructor:

constructor() {
  const data = this.portalData;
  console.log('🎯 [SmartVariantCreator] Initialized');
  console.log('📦 Portal Data:', data);
  console.log('🔧 Base Widget:', data?.baseWidget);
  console.log('📋 Mode:', data?.mode);
  console.log('🌐 Scope:', data?.scope);
  
  if (!data) {
    console.error('❌ No config available - portal data is null!');
  } else if (!data.baseWidget) {
    console.error('❌ No baseWidget specified in config!');
  }
}

Added to ngOnInit:

ngOnInit(): void {
  console.log('🔥 ngOnInit called');
  console.log('📋 Portal Data at init:', this.portalData);
  
  if (!this.portalData) {
    console.error('❌ CRITICAL: No portal data available');
    this.error.set('Configuration error: No portal data available...');
    return;
  }
  
  if (!this.portalData.baseWidget) {
    console.error('❌ CRITICAL: No baseWidget specified');
    this.error.set('Configuration error: No widget type specified.');
    return;
  }
  
  // Proceed with loading...
}

4. Added Error State UI ✅

Problem: "Loading..." showed forever with no indication of what was wrong.

Fix: Added error state display in template.

HTML Added:

@if (error()) {
  <div class="error-state">
    <span class="material-symbols-outlined">error</span>
    <h3>Configuration Error</h3>
    <p>{{ error() }}</p>
    <button type="button" class="btn-secondary" (click)="close()">Close</button>
  </div>
} @else if (propertyGroups().length === 0) {
  <div class="empty-state">
    <span class="material-symbols-outlined">construction</span>
    <p>Loading widget properties...</p>
  </div>
} @else {
  <!-- Property groups UI -->
}

SCSS Added:

.error-state {
  padding: 3rem 2rem;
  text-align: center;
  
  .material-symbols-outlined {
    font-size: 4rem;
    color: var(--ux-error, #ef4444);
    margin-bottom: 1rem;
  }
  
  h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ux-text-primary);
  }
  
  p {
    color: var(--ux-text-secondary);
    max-width: 500px;
    margin: 0 auto 1.5rem;
  }
}

🔍 Debugging Checklist

Test in Browser Console:

Open variant creator for a button widget

Check console for these logs:

🎯 [SmartVariantCreator] Initialized
📦 Portal Data: { mode, baseWidget, scope, ... }
🔧 Base Widget: "button"
📋 Mode: "create"
🌐 Scope: "space"
🔥 ngOnInit called
📋 Portal Data at init: { ... }
✅ Loaded 3 property groups for button
✅ Created 18 form controls

If you see:
- ❌ "No config available" → Portal injection failing
- ❌ "No baseWidget specified" → componentId() is empty
- ❌ Property groups length = 0 → Provider not loading groups

🎯 Next Steps

If Portal Data is Still Null:

Possible Causes:

UX Portal Service not passing context correctly
- Check ux-portal.service.ts line ~1086 where it provides UX_PORTAL_DATA
- Verify context is being passed from openPortal()
CoreComponentDetailComponent not passing baseWidget
- Check componentId() value - might be empty
- Verify route parameter :componentId is set
Timing issue - component created before data injected
- Try using AfterViewInit instead of ngOnInit
- Or use effect() to react when portalData changes

🔧 Manual Testing Steps

Test Route:

http://localhost:5200/space/un-test-space/widgets/guide/button

Test Flow:

Navigate to button component page
Click "Create Variant" button
Open browser DevTools Console
Look for these logs:
- Constructor logs (🎯, 📦, 🔧, etc.)
- ngOnInit logs (🔥, 📋)
- Property loading logs (✅ Loaded X property groups)
- Form controls logs (✅ Created X form controls)
If you see errors:
- Screenshot the console
- Note which log is missing
- Check if error state UI shows
Expected result:
- Modal opens
- Icons render
- Step 2 "Customize" tab shows properties
- Search bar works
- Property groups are expandable

📊 Files Modified

smart-variant-creator.component.ts (Lines 13-172)
- Fixed import (removed local redeclaration)
- Removed as any cast
- Added debug logging (constructor + ngOnInit)
- Added error guards in ngOnInit
smart-variant-creator.component.html (Lines 193-205)
- Added @if (error()) state
- Shows error message and close button
- Prevents infinite "Loading..." state
smart-variant-creator.component.scss (Lines 621-652)
- Added .error-state styles
- Red error icon and messaging
- Centered layout with close button

🎯 Success Criteria

When Fixed:

✅ Console shows portal data is populated
✅ baseWidget is "button" (or other widget type)
✅ Property groups load (3-8 groups depending on widget)
✅ Form controls created (15-50 depending on widget)
✅ UI shows property groups (not "Loading..." or error)
✅ Search works
✅ Expandable groups work

If Still Broken:

❌ Portal data is null
❌ Error state shows in UI
❌ Console shows "No config available"

💡 Key Insights

Why This Happened:

Duplicate Token Declaration: Local const UX_PORTAL_DATA shadowed the imported InjectionToken
Type Casting: as any hid the type mismatch
Silent Failure: No error state UI, just infinite loading
Missing Logs: Hard to debug without detailed console output

Prevention:

Never redeclare imported constants
Avoid as any - it hides bugs
Always add error states in UI
Add comprehensive logging for dependency injection

🚀 What's Next

After Portal Data Works:

Verify Property Groups Load
- Check console for "✅ Loaded X property groups"
- Verify groups appear in UI
Test Property Customization
- Modify a property value
- Verify form updates
Test Save Flow
- Fill metadata (Step 1)
- Modify properties (Step 2)
- Save variant (Step 3)
- Verify modal closes
- Verify variant created
Implement Live Preview (Phase 2)
- Dynamic widget rendering
- Real-time updates

📝 Debug Commands

# Check if UX Portal exports token
grep -r "export.*UX_PORTAL_DATA" libs/libs-ui/ux-portal/src/

# Check if component imports correctly
grep "import.*UX_PORTAL_DATA" libs/libs-widgets/widget-showcase/src/lib/components/smart-variant-creator/

# Check property groups provider
grep "getPropertyGroupsByType" libs/libs-widgets/widgets/src/lib/providers/widget-property-groups.provider.ts

Last Updated: November 17, 2025
Status: Emergency fixes applied - awaiting test results