Wf setup

PR_DESCRIPTION.md

@@ -0,0 +1,170 @@
+# Enhance Brand Form UI/UX and Fix Workfront Data Persistence
+
+## Overview
+This PR significantly improves the Brand management form with enhanced UI/UX, fixes critical Workfront data persistence issues, and implements comprehensive validation for Workfront integration fields.
+
+## Problem Statement
+
+### Data Persistence Issues
+- Workfront configuration (URL, Company, Group) was being lost after saving
+- Data appeared correctly on the wire but didn't persist in the UI
+- List view Workfront column remained empty after updates
+- Reopening the edit form showed blank Workfront fields despite saved data
+
+### UI/UX Issues
+- Form layout felt cramped and poorly utilized screen space
+- White background didn't align with header bar (had gaps)
+- Brand metadata displayed as horizontal jumble instead of readable list
+- DropZone for logo upload overflowed its container
+- Workfront fields lacked clear visual hierarchy
+- No indication that Company and Group were required when URL was provided
+
+## Solution
+
+### 🔧 Data Persistence Fixes
+
+**Root Cause:** `DemoBrandManager.getBrandFromJson()` and `createBrand()` weren't mapping Workfront fields when creating Brand instances from API responses.
+
+**Fix:**
+```typescript
+// Added Workfront field mapping in DemoBrandManager
+return new Brand({
+    // ... existing fields ...
+    workfrontServerUrl: json.workfrontServerUrl,
+    workfrontCompanyId: json.workfrontCompanyId,
+    workfrontCompanyName: json.workfrontCompanyName,
+    workfrontGroupId: json.workfrontGroupId,
+    workfrontGroupName: json.workfrontGroupName,
+    workfrontEventSubscriptions: json.workfrontEventSubscriptions
+});
+```
+
+### 🎨 UI/UX Improvements
+
+#### Layout Enhancement
+- Changed container width from `size-5000` to `size-6000` for better space utilization
+- Added full-width `gray-50` background aligned with header bar (no gaps)
+- Removed horizontal centering for left-aligned content layout
+- Increased padding from `size-200` to `size-400` for better spacing
+
+#### Workfront Section Refactor
+- Implemented vertical stacking with `Flex direction="column"`
+- Added consistent `size-200` gap between fields
+- Set `width="100%"` on all fields for proper container spanning
+- Auto-load companies and groups when opening edit form with existing data
+- Added dynamic required indicators (Company/Group required when URL provided)
+
+#### Validation Enhancement
+```typescript
+// Workfront validation with dynamic requirements
+if (formData.workfrontServerUrl?.trim()) {
+    if (!formData.workfrontCompanyId) {
+        newErrors.workfrontCompanyId = 'Workfront Company is required when Server URL is provided';
+    }
+    if (!formData.workfrontGroupId) {
+        newErrors.workfrontGroupId = 'Workfront Group is required when Server URL is provided';
+    }
+}
+```
+
+- Inline validation error display on Picker components
+- Auto-clear errors when user makes selections
+- Clear all Workfront errors when URL is removed
+
+#### Visual Improvements
+- Fixed brand metadata display (vertical stack with bold labels)
+- Fixed DropZone overflow with proper styling and constraints
+- Better visual hierarchy throughout the form
+
+## Files Changed
+
+### Core Logic
+- `src/dx-excshell-1/web-src/src/utils/DemoBrandManager.ts` - Added Workfront field mapping
+- `src/dx-excshell-1/web-src/src/components/layout/BrandForm.tsx` - Complete UI/UX refactor
+- `src/dx-excshell-1/web-src/src/components/layout/BrandManagerView.tsx` - Updated state management
+
+### Backend
+- `src/actions/classes/BrandManager.ts` - Enhanced brand management
+- `src/actions/services/workfront/WorkfrontClient.ts` - Improved Workfront API client
+- `src/actions/services/workfront/list-workfront-companies/index.ts` - Updated company listing
+- `src/actions/services/workfront/list-workfront-groups/index.ts` - Updated group listing
+
+### Documentation
+- `docs/cursor/WORKFRONT_DATA_PERSISTENCE_FIX.md` - Comprehensive fix documentation
+- `docs/apis/workfront/groups/groups_response.json` - API response examples
+
+### Cleanup
+- Deleted `src/dx-excshell-1/web-src/src/components/modals/WorkfrontConfigModal.tsx` - Replaced with inline form
+
+## Testing Performed
+
+### ✅ Data Persistence
+- [x] Save Workfront configuration and verify data appears in list view
+- [x] Refresh page and confirm Workfront column still shows data
+- [x] Reopen edit form and verify all Workfront fields populate correctly
+- [x] Update Workfront data and confirm changes persist
+
+### ✅ Validation
+- [x] Enter Workfront URL without Company - validation error appears
+- [x] Select Company - error clears automatically
+- [x] Try to save without Group - validation error appears
+- [x] Clear Workfront URL - all errors clear
+
+### ✅ Layout
+- [x] Form has appropriate width (not too wide or narrow)
+- [x] Background aligns with header bar (no gaps)
+- [x] Content is left-aligned (not centered)
+- [x] All sections have consistent spacing
+
+### ✅ Workfront Integration
+- [x] Fields stack vertically (URL → Company → Group)
+- [x] Companies load when URL is entered
+- [x] Groups load when URL is entered
+- [x] When opening edit with existing data, dropdowns populate
+- [x] Required indicators show when URL is present
+
+## Screenshots
+
+### Before
+- Cramped layout with poor spacing
+- Workfront data not persisting
+- Horizontal metadata jumble
+- DropZone overflow
+
+### After
+- Spacious, professional layout
+- Workfront data persists correctly
+- Clean vertical metadata display
+- Contained DropZone with proper styling
+
+## Breaking Changes
+None - all changes are backward compatible.
+
+## Deployment Notes
+- No database migrations required
+- No environment variable changes
+- Frontend-only changes (rebuild and redeploy required)
+
+## Related Issues
+Fixes issues with:
+- Workfront data not persisting after save
+- List view not updating with Workfront information
+- Edit form showing blank Workfront fields
+- Poor form layout and user experience
+
+## Checklist
+- [x] Code follows project style guidelines
+- [x] Self-review completed
+- [x] No linter errors
+- [x] Tested in development environment
+- [x] Documentation updated
+- [x] Deployed and verified in staging
+
+## Reviewers
+Please verify:
+1. Workfront data persists correctly through save/refresh cycle
+2. Form layout is professional and usable
+3. Validation works as expected
+4. No console errors or warnings
+5. All sections render properly on different screen sizes
+

_dot.env

@@ -58,6 +58,9 @@ S2S_API_KEY=cm-1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef
 S2S_CLIENT_SECRET=p8e-1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef
 
 # Service Account Scopes (usually don't change)
+# ⚠️ CRITICAL: Must be valid JSON array with double-quoted strings!
+# ✅ CORRECT: ["AdobeID","openid"]
+# ❌ WRONG:   [AdobeID, openid] or ['AdobeID','openid']
 S2S_SCOPES=["AdobeID","openid","read_organizations","additional_info.projectedProductContext","additional_info.roles","adobeio_api","read_client_secret","manage_client_secrets"]
 
 # =============================================================================

app.config.yaml

@@ -71,6 +71,56 @@ application:
             annotations:
               require-adobe-auth: true
               final: true
+          list-workfront-companies:
+            function: src/actions/services/workfront/list-workfront-companies/index.ts
+            web: 'yes'
+            runtime: nodejs:22
+            inputs:
+              LOG_LEVEL: debug
+              S2S_CLIENT_ID: $SERVICE_API_KEY
+              S2S_CLIENT_SECRET: $S2S_CLIENT_SECRET
+              S2S_SCOPES: $S2S_SCOPES
+              ORG_ID: $ORG_ID
+            annotations:
+              require-adobe-auth: true
+              final: true
+          list-workfront-groups:
+            function: src/actions/services/workfront/list-workfront-groups/index.ts
+            web: 'yes'
+            runtime: nodejs:22
+            inputs:
+              LOG_LEVEL: debug
+              S2S_CLIENT_ID: $SERVICE_API_KEY
+              S2S_CLIENT_SECRET: $S2S_CLIENT_SECRET
+              S2S_SCOPES: $S2S_SCOPES
+              ORG_ID: $ORG_ID
+            annotations:
+              require-adobe-auth: true
+              final: true
+          configure-workfront:
+            function: src/actions/services/workfront/configure-workfront/index.ts
+            web: 'yes'
+            runtime: nodejs:22
+            inputs:
+              LOG_LEVEL: debug
+              APPLICATION_RUNTIME_INFO: '{"namespace":"${AIO_runtime_namespace}","app_name":"agency","action_package_name":"${AIO_ACTION_PACKAGE_NAME}"}'
+            annotations:
+              require-adobe-auth: true
+              final: true
+          manage-workfront-subscriptions:
+            function: src/actions/services/workfront/manage-workfront-subscriptions/index.ts
+            web: 'no'
+            runtime: nodejs:22
+            inputs:
+              LOG_LEVEL: debug
+              S2S_CLIENT_ID: $SERVICE_API_KEY
+              S2S_CLIENT_SECRET: $S2S_CLIENT_SECRET
+              S2S_SCOPES: $S2S_SCOPES
+              ORG_ID: $ORG_ID
+              APPLICATION_RUNTIME_INFO: '{"namespace":"${AIO_runtime_namespace}","app_name":"agency","action_package_name":"${AIO_ACTION_PACKAGE_NAME}"}'
+            annotations:
+              require-adobe-auth: false
+              final: true
           brand-event-handler:
             function: src/actions/event-handlers/brand-event-handler/index.ts
             web: 'yes'