From e05b97ff2389908f6911595682eb4f6a07a94c8f Mon Sep 17 00:00:00 2001
From: Nabendu Maiti <nabendu.bikash.maiti@intel.com>
Date: Thu, 23 Jul 2026 03:30:19 +0000
Subject: [PATCH] fix: add proxy configuration selector

Proxy config name can be selected from dropdown

Signed-off-by: Nabendu Maiti <nabendu.bikash.maiti@intel.com>
---
 .../profile-detail.component.html             | 37 ++++++-------------
 .../profile-detail.component.spec.ts          | 18 +++++++++
 .../profile-detail.component.ts               | 17 ++++++---
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/app/profiles/profile-detail/profile-detail.component.html b/src/app/profiles/profile-detail/profile-detail.component.html
index bdb7adddd..0b243b31e 100644
--- a/src/app/profiles/profile-detail/profile-detail.component.html
+++ b/src/app/profiles/profile-detail/profile-detail.component.html
@@ -259,35 +259,22 @@
             </mat-list-item>
           }
         </mat-list>
-        @if (cloudMode === true) {
+        @if (showProxyConfigurations()) {
           <mat-label class="flex flex-1" style="margin-top: 15px">
             {{ 'proxy.label.value' | translate }}
           </mat-label>
 
-          @if (showProxyConfigurations()) {
-            <mat-form-field class="flex flex-1" style="margin-top: 20px">
-              <mat-label>{{ 'proxy.configs.label.value' | translate }}</mat-label>
-              <input
-                matInput
-                type="text"
-                data-cy="proxyAutocomplete"
-                [placeholder]="'proxy.configs.placeholder.value' | translate"
-                [formControl]="proxyAutocomplete"
-                [matAutocomplete]="proxyAuto" />
-              <mat-autocomplete
-                autoActiveFirstOption
-                #proxyAuto="matAutocomplete"
-                (optionSelected)="selectProxyProfile($event)">
-                @for (proxy of filteredProxyList | async; track proxy) {
-                  <mat-option [value]="proxy" [ngClass]="isProxySelectable(proxy)">
-                    {{ proxy }}
-                  </mat-option>
-                }
-              </mat-autocomplete>
-              <mat-hint>{{ 'proxy.configs.hint.value' | translate }}</mat-hint>
-            </mat-form-field>
-          }
-
+          <mat-form-field class="flex flex-1" style="margin-top: 20px">
+            <mat-label>{{ 'proxy.configs.label.value' | translate }}</mat-label>
+            <mat-select data-cy="proxyConfigSelect" (selectionChange)="selectProxyProfile($event.value)">
+              @for (proxy of ProxyConfigurations(); track proxy) {
+                <mat-option [value]="proxy" [disabled]="isProxyProfileSelected(proxy)">
+                  {{ proxy }}
+                </mat-option>
+              }
+            </mat-select>
+            <mat-hint>{{ 'proxy.configs.hint.value' | translate }}</mat-hint>
+          </mat-form-field>
           @if (selectedProxyConfigs().length > 0) {
             <div>
               <mat-label class="mat-body-1">{{ 'proxy.associatedProfiles.label.value' | translate }}</mat-label>
diff --git a/src/app/profiles/profile-detail/profile-detail.component.spec.ts b/src/app/profiles/profile-detail/profile-detail.component.spec.ts
index 50c75d225..e20ba9918 100644
--- a/src/app/profiles/profile-detail/profile-detail.component.spec.ts
+++ b/src/app/profiles/profile-detail/profile-detail.component.spec.ts
@@ -915,6 +915,17 @@ describe('ProfileDetailComponent', () => {
       expect(fixture.nativeElement.querySelector('[data-cy="radio-cira"]')).not.toBeNull()
     })
 
+    it('should show proxy configuration selection in enterprise when configs are available', () => {
+      proxyGetDataSpy.calls.reset()
+
+      environment.cloud = false
+      const enterpriseFixture = TestBed.createComponent(ProfileDetailComponent)
+      enterpriseFixture.detectChanges()
+
+      expect(proxyGetDataSpy).toHaveBeenCalled()
+      expect(enterpriseFixture.nativeElement.querySelector('[data-cy="proxyConfigSelect"]')).not.toBeNull()
+    })
+
     it('should fail open and fetch CIRA configs when the features call errors', () => {
       serverFeaturesGetFeaturesSpy.mockReturnValue(throwError(() => new Error('nope')))
       ciraGetDataSpy.mockClear()
@@ -1066,6 +1077,13 @@ describe('ProfileDetailComponent', () => {
       expect(component.selectedProxyConfigs().length).toBe(1)
     })
 
+    it('should mark an associated proxy configuration as selected', () => {
+      component.selectedProxyConfigs.set([{ priority: 1, name: 'proxy1' }])
+
+      expect(component.isProxyProfileSelected('proxy1')).toBeTrue()
+      expect(component.isProxyProfileSelected('proxy2')).toBeFalse()
+    })
+
     it('should not select NO_PROXY_CONFIGS option', () => {
       const event = {
         option: { value: 'profileDetail.noProxy.value' }
diff --git a/src/app/profiles/profile-detail/profile-detail.component.ts b/src/app/profiles/profile-detail/profile-detail.component.ts
index 53830ccde..8644a6dac 100644
--- a/src/app/profiles/profile-detail/profile-detail.component.ts
+++ b/src/app/profiles/profile-detail/profile-detail.component.ts
@@ -212,9 +212,9 @@ export class ProfileDetailComponent implements OnInit {
   private initializeData(): void {
     this.getIEEE8021xConfigs()
     this.getWirelessConfigs()
+    this.getProxyConfigs()
     if (this.cloudMode) {
-      // Cloud always has CIRA; proxy configs are cloud-only too.
-      this.getProxyConfigs()
+      // Cloud always has CIRA.
       this.getCiraConfigs()
     } else {
       // Enterprise: only fetch CIRA configs when the server reports CIRA enabled,
@@ -558,23 +558,28 @@ export class ProfileDetailComponent implements OnInit {
     this.wirelessAutocomplete.patchValue('')
   }
 
-  selectProxyProfile(event: MatAutocompleteSelectedEvent): void {
-    if (event.option.value === NO_PROXY_CONFIGS) return
+  selectProxyProfile(event: MatAutocompleteSelectedEvent | string): void {
+    const proxyName = typeof event === 'string' ? event : (event.option.value as string)
+    if (proxyName === NO_PROXY_CONFIGS) return
 
     const selectedProfiles = this.selectedProxyConfigs().map((proxy) => proxy.name)
-    if (selectedProfiles.includes(event.option.value as string)) return
+    if (selectedProfiles.includes(proxyName)) return
 
     this.selectedProxyConfigs.update((configs) => [
       ...configs,
       {
         priority: configs.length + 1,
-        name: event.option.value
+        name: proxyName
       }
     ])
 
     this.proxyAutocomplete.patchValue('')
   }
 
+  isProxyProfileSelected(proxyName: string): boolean {
+    return this.selectedProxyConfigs().some((config) => config.name === proxyName)
+  }
+
   localWifiSyncChange(isEnabled: boolean): void {
     if (isEnabled) {
       this.profileForm.controls.localWifiSyncEnabled.disable()