OpenConnect UI Enhancements

📋 Overview

The OpenConnect page has been redesigned to provide a cleaner, more intuitive experience for developers setting up API integrations with Experience Cloud. The new design focuses on clarity, simplicity, and a consistent user experience across all API management workflows.

          Key Improvement: Unified modal-based workflow ensures users always see their generated API
          key, fixing critical UX issue where keys were not displayed after creation.
        

🎨 Before & After Comparison

❌ Before

📸 Screenshot Placeholder
Old OpenConnect page layout
Single column with complex multi-step workflow

✅ After

📸 Screenshot Placeholder
New OpenConnect page layout
3-column grid with streamlined 2-step guide

Layout Changes

Aspect	Before	After
Grid Layout	Single column	3-column grid (2:1 ratio)
Steps	3 steps with complex sub-sections	2 focused steps
Integration Examples	4 platform cards	Removed (simplified)
Help Section	Full-width section at bottom	Compact card in sidebar
API Key Creation	Navigation to separate page	Modal workflow (consistent)

✨ New Features & Improvements

📐 Responsive Grid Layout

3-column grid with 2:1 ratio
Left: API documentation
Right: Getting Started guide
Better mobile responsiveness

🎯 Streamlined Workflow

Reduced from 3 to 2 steps
Clear numbered badges
Color-coded progression
Focused on essentials

🔐 Modal Integration

Consistent modal workflow
Auto-open with query param
Always shows generated key
No more lost API keys

📝 Parameter Cards

Required/Optional badges
Clear descriptions
Monospace font for names
Visual hierarchy

📖 Updated User Flow

Step 1: Generate API Key

📸 Screenshot Placeholder
Step 1 - Generate API Key section
Shows emerald green numbered badge and "Create New Key" button

New Feature Emerald green numbered badge with clear call-to-action

Click "Create New Key" button
Button navigates to API Keys page with query parameter ?openModal=true
API Key wizard modal opens automatically
Consistent experience across all entry points
Fill out the form
Enter name, description, domain allow-list, and select key type
View generated API key
Modal shows success screen with copy functionality

          Bug Fix (OMC-2738): Previously, when creating an API key from an empty table, users never saw
          the generated key. Now all creation flows use the same modal workflow that properly displays the key.
        

Step 2: Configure Request

📸 Screenshot Placeholder
Step 2 - Configure Request section
Shows blue numbered badge and parameter cards with Required/Optional badges

Enhanced Blue numbered badge with 4 parameter cards

Required Parameters

Parameter	Description	Badge
`agentid`	User login name	Required
`jwt`	Your API key	Required
`event`	PopFlow event name	Required

Optional Parameters

Parameter	Description	Badge
`Interaction Data`	Data passed into the workflow for execution	Optional

⚙️ Technical Implementation

1. Query Parameter Auto-Open

Added automatic modal opening when navigating from OpenConnect:

          // OpenConnect component HTML <a [routerLink]="['/security/api-key']" [queryParams]="{ openModal: 'true' }"
          class="inline-flex items-center gap-2..." > Create New Key </a> // API Key component TypeScript
          this._route.queryParams.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(params => { if
          (params['openModal'] === 'true') { setTimeout(() => { this.openCreateWizard(); // Clear query parameter void
          this._router.navigate([], { relativeTo: this._route, queryParams: {}, queryParamsHandling: 'merge', }); },
          100); } });
        

2. Unified Modal Workflow

Changed empty state button to use modal instead of navigation:

          // Before: Navigation-based (broken) <button routerLink="/security/api-key/new"> Create Your First API
          Key </button> // After: Modal-based (working) <button (click)="openCreateWizard()"> Create Your
          First API Key </button>
        

3. CSS Rendering Fix

Added inline styles to fix Tailwind class rendering issues:

          // Step 1 badge - inline emerald color <div style="background-color: #10b981">1</div> // Create
          New Key button - inline emerald color <a style="background-color: #10b981">Create New Key</a>
        

🗑️ Removed/Consolidated Sections

Integration Examples (4 Platform Cards)

📸 Screenshot Placeholder
Removed - Integration Examples section
4 platform cards that were removed to simplify the interface

Reason: Simplified to focus on core workflow. Platform-specific examples can be found in detailed documentation.

Step 3: Make Your Connection

Reason: Consolidated into Steps 1 and 2 to reduce complexity.

Full-Width Help Section

📸 Screenshot Placeholder
Replaced - Help section now compact card in sidebar
From full-width section to integrated compact card

New Design: Compact sky-blue themed card integrated within the Getting Started guide, saving vertical space while maintaining accessibility.

🎨 Visual Design Improvements

Color Coding & Badges

📸 Screenshot Placeholder
Color-coded elements
Shows emerald (step 1), blue (step 2), red (required), gray (optional)

Step Badges

1 Emerald green for Step 1

2 Blue for Step 2

Parameter Badges

Required Red background

Optional Gray background

Typography

Monospace for parameter names
Clear font hierarchy
Improved readability

Spacing & Layout

Consistent padding
Proper card shadows
Rounded corners

👥 User Experience Enhancements

Reduced Cognitive Load

2 steps instead of 3 - easier to follow
Clear visual hierarchy with numbered badges
Focused content without distractions
Less scrolling required

Consistent Workflow

Same modal experience from all entry points:
- "Generate New Key" button (API Keys page with existing keys)
- "Create Your First API Key" button (empty state)
- "Create New Key" button (OpenConnect page)
Always see generated API key in modal
Copy functionality always available
No more lost or hidden keys

Mobile Responsiveness

3-column grid adapts to smaller screens
Cards stack vertically on mobile
Touch-friendly button sizes
Readable text at all sizes

✅ Testing & Validation

Test Scenarios Covered

Empty State Flow
Navigate to API Keys page with 0 keys → Click "Create Your First API Key" → Modal opens → Form submitted → Success screen shows key → Copy key → Close modal → Key appears in list
Existing Keys Flow
Navigate to API Keys page with existing keys → Click "Generate New Key" → Modal opens → Same workflow as empty state
OpenConnect Flow
Navigate to OpenConnect page → Click "Create New Key" → Redirects to API Keys with query param → Modal auto-opens → Same workflow continues
CSS Rendering
Verified emerald green colors render correctly on badges and buttons (previously appeared white)

          All test scenarios passed successfully - Consistent modal workflow ensures users always see
          their generated API key, regardless of entry point.
        

🔗 Related Tickets

Ticket	Description	Status
ED-1210	Enhance the UI/UX of OpenConnect (Main ticket)	In Progress
OMC-2738	Empty API Key Table "Create..." Button Doesn't Present Users With API Key to Copy	Fixed
OMC-2682	Address all UX issues with API Screens (Enhance UI) - Parent Epic	In Progress

📁 Files Modified

Component Files

          apps/exdes/src/app/features/security/pages/ ├── open-connect/ │ ├── open-connect.component.html # Layout & UI
          changes │ └── open-connect.component.ts # Removed StepCardComponent import ├── api-key-v2/ │ ├──
          api-key-v2.component.html # Empty state button change │ └── api-key-v2.component.ts # Query parameter handling
          └── api-key/ └── components/ └── create-api-key-success-modal/ └── create-api-key-success-modal.component.ts #
          Navigation on close
        

State Management

          apps/exdes/src/app/core/state/security/ └── security.effects.ts # Removed auto-redirect effect
        

📊 Summary

Improvements

✅ Cleaner, more focused interface
✅ Consistent modal workflow
✅ Fixed critical API key visibility bug
✅ Better visual hierarchy
✅ Improved mobile responsiveness
✅ Reduced cognitive load

Metrics

Steps: 3 → 2 (33% reduction)
Click depth: Reduced by 1 level
Sections removed: 3 major sections
Modal consistency: 100% (all flows)
Bug fix: OMC-2738 resolved

          Result: A streamlined, user-friendly OpenConnect page that provides clear guidance for API
          integration setup while ensuring users never lose their generated API keys.
        

🚀 OpenConnect UI Enhancements