feat: hide CIRA in profile when disabled on the server

src/app/core/navbar/navbar.component.ts

@@ -6,12 +6,13 @@
 import { Component, OnInit, inject, signal } from '@angular/core'
 import { environment } from '../../../environments/environment'
 import { MatIcon } from '@angular/material/icon'
-import { RouterLink, RouterLinkActive } from '@angular/router'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
 import { MatDivider } from '@angular/material/divider'
 import { MatNavList, MatListItem, MatListItemIcon } from '@angular/material/list'
 import { MatTooltip } from '@angular/material/tooltip'
 import { TranslatePipe, TranslateService } from '@ngx-translate/core'
 import { ServerFeaturesService } from '../../server-features.service'
+import { filter } from 'rxjs/operators'
 
 @Component({
   selector: 'app-navbar',
@@ -37,19 +38,29 @@ export class NavbarComponent implements OnInit {
   // Start from cloudMode so enterprise hides the tab until the API responds,
   // avoiding a flash of the tab when the server reports CIRA disabled.
   ciraEnabled = signal(this.cloudMode)
+  private readonly router = inject(Router)
   private readonly translate = inject(TranslateService)
   private readonly serverFeaturesService = inject(ServerFeaturesService)
 
   ngOnInit(): void {
     if (this.cloudMode === false) {
-      this.serverFeaturesService.getFeatures().subscribe({
-        next: (features) => this.ciraEnabled.set(features.ciraEnabled),
-        // Fail open: if the features call fails, keep the CIRA tab visible.
-        error: () => this.ciraEnabled.set(true)
+      this.refreshCiraAvailability()
+      // Re-check server feature flags on navigation so runtime server setting
+      // changes (like enabling CIRA) are reflected without full page reload.
+      this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+        this.refreshCiraAvailability()
       })
     }
   }
 
+  private refreshCiraAvailability(): void {
+    this.serverFeaturesService.getFeatures().subscribe({
+      next: (features) => this.ciraEnabled.set(features.ciraEnabled),
+      // Fail open: if the features call fails, keep the CIRA tab visible.
+      error: () => this.ciraEnabled.set(true)
+    })
+  }
+
   get ciraTitle(): string {
     return this.ciraEnabled()
       ? this.translate.instant('configs.header.ciraTitle.value')

src/app/profiles/profile-detail/profile-detail.component.html

@@ -320,24 +320,22 @@
               <mat-error>{{ 'profileDetail.connectionModeRequired.value' | translate }}</mat-error>
             </p>
           }
-          <fieldset>
-            <legend>{{ 'profileDetail.internetModeLegend.value' | translate }}</legend>
-            <p>{{ 'profileDetail.internetModeDescription.value' | translate }}</p>
-            <p>
-              <mat-radio-button
-                data-cy="radio-cira"
-                [value]="connectionMode.cira"
-                [disabled]="!ciraEnabled() || ciraConfigurations().length === 0">
-                {{ 'profileDetail.ciraCloud.value' | translate }}
-                @if (!ciraEnabled()) {
-                  <span>{{ 'profileDetail.ciraDisabledOption.value' | translate }}</span>
-                } @else if (ciraConfigurations().length === 0) {
-                  <span>{{ 'profileDetail.noCiraConfigs.value' | translate }}</span>
-                }
-              </mat-radio-button>
-            </p>
-            @if (profileForm.get('connectionMode')?.value === 'CIRA') {
-              @if (ciraEnabled()) {
+          @if (ciraEnabled()) {
+            <fieldset>
+              <legend>{{ 'profileDetail.internetModeLegend.value' | translate }}</legend>
+              <p>{{ 'profileDetail.internetModeDescription.value' | translate }}</p>
+              <p>
+                <mat-radio-button
+                  data-cy="radio-cira"
+                  [value]="connectionMode.cira"
+                  [disabled]="ciraConfigurations().length === 0">
+                  {{ 'profileDetail.ciraCloud.value' | translate }}
+                  @if (ciraConfigurations().length === 0) {
+                    <span>{{ 'profileDetail.noCiraConfigs.value' | translate }}</span>
+                  }
+                </mat-radio-button>
+              </p>
+              @if (profileForm.get('connectionMode')?.value === 'CIRA') {
                 <mat-form-field class="flex flex-1">
                   <mat-label>{{ 'profileDetail.ciraConfiguration.value' | translate }}</mat-label>
                   <mat-select formControlName="ciraConfigName">
@@ -352,20 +350,9 @@
                     {{ 'profileDetail.ciraConfigHint.value' | translate }}
                   </mat-hint>
                 </mat-form-field>
-              } @else {
-                <!-- CIRA disabled on this server but the profile still references a CIRA config.
-                     Show it read-only with a warning and let the user switch to TLS/Direct. -->
-                <p class="error-messages-container">
-                  <mat-icon color="warn">warning</mat-icon>
-                  <span class="error-messages">{{ 'profileDetail.ciraDisabledWarning.value' | translate }}</span>
-                </p>
-                <mat-form-field class="flex flex-1">
-                  <mat-label>{{ 'profileDetail.ciraConfiguration.value' | translate }}</mat-label>
-                  <input matInput formControlName="ciraConfigName" readonly />
-                </mat-form-field>
               }
-            }
-          </fieldset>
+            </fieldset>
+          }
           <fieldset>
             <legend>{{ 'profileDetail.directConnectLegend.value' | translate }}</legend>
             <p>

src/app/profiles/profile-detail/profile-detail.component.spec.ts

@@ -27,6 +27,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { provideTranslateHttpLoader, TRANSLATE_HTTP_LOADER_CONFIG } from '@ngx-translate/http-loader'
 
 describe('ProfileDetailComponent', () => {
+  const defaultCloudMode = environment.cloud
   let component: ProfileDetailComponent
   let fixture: ComponentFixture<ProfileDetailComponent>
   let profileSpy: jasmine.Spy
@@ -148,6 +149,7 @@ describe('ProfileDetailComponent', () => {
   })
 
   afterEach(() => {
+    environment.cloud = defaultCloudMode
     TestBed.resetTestingModule()
   })
 
@@ -174,6 +176,7 @@ describe('ProfileDetailComponent', () => {
     expect(wirelessGetDataSpy).toHaveBeenCalled()
     expect(proxyGetDataSpy).toHaveBeenCalled()
   })
+
   it('should set connectionMode to TLS when tlsMode is a TLS mode (1-4)', () => {
     const profile: Profile = { tlsMode: 4, ciraConfigName: 'config1' } as any
     component.setConnectionMode(profile)
@@ -184,6 +187,26 @@ describe('ProfileDetailComponent', () => {
     component.setConnectionMode(profile)
     expect(component.profileForm.controls.connectionMode.value).toBe('CIRA')
   })
+  it('should not set connectionMode to CIRA when CIRA is disabled and availability is resolved', () => {
+    component.profileForm.controls.ciraConfigName.setValue('config1')
+    component.ciraEnabled.set(false)
+    ;(component as any).ciraAvailabilityResolved.set(true)
+
+    const profile: Profile = { ciraConfigName: 'config1' } as any
+    component.setConnectionMode(profile)
+
+    expect(component.profileForm.controls.connectionMode.value).toBe('TLS')
+    expect(component.profileForm.controls.ciraConfigName.value).toBeNull()
+  })
+  it('should keep CIRA connectionMode before enterprise feature availability resolves', () => {
+    component.ciraEnabled.set(false)
+    ;(component as any).ciraAvailabilityResolved.set(false)
+
+    const profile: Profile = { ciraConfigName: 'config1' } as any
+    component.setConnectionMode(profile)
+
+    expect(component.profileForm.controls.connectionMode.value).toBe('CIRA')
+  })
   it('should set connectionMode to DIRECT when tlsMode is 0 and no CIRA config', () => {
     const profile: Profile = { tlsMode: 0, ciraConfigName: null } as any
     component.setConnectionMode(profile)
@@ -835,9 +858,11 @@ describe('ProfileDetailComponent', () => {
     // server-features branch instead of the cloud branch.
     const createEnterpriseComponent = (): ProfileDetailComponent => {
       environment.cloud = false
-      const enterpriseFixture = TestBed.createComponent(ProfileDetailComponent)
-      enterpriseFixture.detectChanges()
-      return enterpriseFixture.componentInstance
+      fixture.destroy()
+      fixture = TestBed.createComponent(ProfileDetailComponent)
+      component = fixture.componentInstance
+      fixture.detectChanges()
+      return component
     }
 
     afterEach(() => {
@@ -848,10 +873,12 @@ describe('ProfileDetailComponent', () => {
       serverFeaturesGetFeaturesSpy.and.returnValue(of({ ciraEnabled: false }))
       ciraGetDataSpy.calls.reset()
 
-      createEnterpriseComponent()
+      const enterpriseComponent = createEnterpriseComponent()
 
       expect(serverFeaturesGetFeaturesSpy).toHaveBeenCalled()
       expect(ciraGetDataSpy).not.toHaveBeenCalled()
+      expect(enterpriseComponent.ciraEnabled()).toBeFalse()
+      expect(fixture.nativeElement.querySelector('[data-cy="radio-cira"]')).toBeNull()
     })
 
     it('should expose ciraEnabled() === false after the features call resolves with CIRA disabled', () => {
@@ -870,6 +897,7 @@ describe('ProfileDetailComponent', () => {
 
       expect(ciraGetDataSpy).toHaveBeenCalled()
       expect(enterpriseComponent.ciraEnabled()).toBeTrue()
+      expect(fixture.nativeElement.querySelector('[data-cy="radio-cira"]')).not.toBeNull()
     })
 
     it('should fail open and fetch CIRA configs when the features call errors', () => {
@@ -880,6 +908,7 @@ describe('ProfileDetailComponent', () => {
 
       expect(ciraGetDataSpy).toHaveBeenCalled()
       expect(enterpriseComponent.ciraEnabled()).toBeTrue()
+      expect(fixture.nativeElement.querySelector('[data-cy="radio-cira"]')).not.toBeNull()
     })
   })
 

src/app/profiles/profile-detail/profile-detail.component.ts

@@ -8,8 +8,8 @@ import { FormBuilder, FormControl, Validators, ReactiveFormsModule } from '@angu
 import { MatSnackBar } from '@angular/material/snack-bar'
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog'
 import { ActivatedRoute, Router } from '@angular/router'
-import { finalize, map, startWith } from 'rxjs/operators'
-import { forkJoin, Observable } from 'rxjs'
+import { concatMap, finalize, map, startWith, takeWhile, toArray } from 'rxjs/operators'
+import { from, Observable } from 'rxjs'
 import { COMMA, ENTER } from '@angular/cdk/keycodes'
 import { CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop'
 import { NgClass, AsyncPipe } from '@angular/common'
@@ -44,6 +44,7 @@ import { ServerFeaturesService } from '../../server-features.service'
 // Shared components
 import { RandomPassAlertComponent } from '../../shared/random-pass-alert/random-pass-alert.component'
 import { StaticCIRAWarningComponent } from '../../shared/static-cira-warning/static-cira-warning.component'
+import { NoCIRAWarningComponent } from '../../shared/no-cira-warning/no-cira-warning.component'
 
 // Models and constants
 import { CIRAConfig, IEEE8021xConfig } from '../../../models/models'
@@ -147,6 +148,9 @@ export class ProfileDetailComponent implements OnInit {
   // (fetched on init). Start from cloudMode so enterprise hides CIRA until the
   // API responds, avoiding a flash when the server reports CIRA disabled.
   public readonly ciraEnabled = signal(this.cloudMode)
+  // Enterprise starts with ciraEnabled=false before server features return; track
+  // when availability is actually known to avoid coercing a saved CIRA profile too early.
+  private readonly ciraAvailabilityResolved = signal(this.cloudMode)
   public readonly isLoading = signal(false)
   public readonly errorMessages = signal<string[]>([])
 
@@ -217,17 +221,31 @@ export class ProfileDetailComponent implements OnInit {
       this.serverFeaturesService.getFeatures().subscribe({
         next: (features) => {
           this.ciraEnabled.set(features.ciraEnabled)
+          this.ciraAvailabilityResolved.set(true)
+          if (!features.ciraEnabled) {
+            this.coerceConnectionModeIfCiraUnavailable()
+          }
           if (features.ciraEnabled) this.getCiraConfigs()
         },
         // Fail open: if the features call fails, assume CIRA is enabled.
         error: () => {
           this.ciraEnabled.set(true)
+          this.ciraAvailabilityResolved.set(true)
           this.getCiraConfigs()
         }
       })
     }
   }
 
+  private coerceConnectionModeIfCiraUnavailable(): void {
+    if (this.profileForm.controls.connectionMode.value !== this.connectionMode.cira) {
+      return
+    }
+
+    // CIRA is unavailable, so prefer secure direct TLS over unsecured DIRECT.
+    this.profileForm.controls.connectionMode.setValue(this.connectionMode.tls)
+  }
+
   private setupFormSubscriptions(): void {
     this.profileForm.controls.activation.valueChanges.subscribe((value) => {
       if (value) this.activationChange(value)
@@ -262,10 +280,15 @@ export class ProfileDetailComponent implements OnInit {
   }
 
   setConnectionMode(data: Profile): void {
+    const canUseCira = this.ciraEnabled() || !this.ciraAvailabilityResolved()
+
     if (data.tlsMode != null && data.tlsMode > 0) {
       this.profileForm.controls.connectionMode.setValue(this.connectionMode.tls)
-    } else if (data.ciraConfigName != null) {
+    } else if (data.ciraConfigName != null && canUseCira) {
       this.profileForm.controls.connectionMode.setValue(this.connectionMode.cira)
+    } else if (data.ciraConfigName != null && !canUseCira) {
+      // Existing CIRA profiles should default to TLS when CIRA is disabled.
+      this.profileForm.controls.connectionMode.setValue(this.connectionMode.tls)
     } else {
       this.profileForm.controls.connectionMode.setValue(this.connectionMode.direct)
     }
@@ -660,6 +683,11 @@ export class ProfileDetailComponent implements OnInit {
     return dialog.afterClosed()
   }
 
+  private noCIRAWarning(): Observable<any> {
+    const dialog = this.dialog.open(NoCIRAWarningComponent, { width: '750px' })
+    return dialog.afterClosed()
+  }
+
   private randPasswordWarning(): Observable<any> {
     const dialog = this.dialog.open(RandomPassAlertComponent, this.matDialogConfig)
     return dialog.afterClosed()
@@ -670,23 +698,32 @@ export class ProfileDetailComponent implements OnInit {
     // Warn user of risk if CIRA configuration and static network are selected simultaneously
     if (this.profileForm.valid) {
       const result: any = Object.assign({}, this.profileForm.getRawValue())
-      const dialogs = []
-      if (!this.isEdit() && (result.generateRandomPassword || result.generateRandomMEBxPassword)) {
-        dialogs.push(this.randPasswordWarning())
+      const dialogs: (() => Observable<any>)[] = []
+      if (result.connectionMode !== this.connectionMode.cira) {
+        dialogs.push(() => this.noCIRAWarning())
       }
       if (result.connectionMode === this.connectionMode.cira && result.dhcpEnabled === false) {
-        dialogs.push(this.CIRAStaticWarning())
+        dialogs.push(() => this.CIRAStaticWarning())
+      }
+      if (!this.isEdit() && (result.generateRandomPassword || result.generateRandomMEBxPassword)) {
+        dialogs.push(() => this.randPasswordWarning())
       }
 
       if (dialogs.length === 0) {
         this.onSubmit()
         return
       }
-      forkJoin(dialogs).subscribe((data) => {
-        if (data.every((x) => x === true)) {
-          this.onSubmit()
-        }
-      })
+      from(dialogs)
+        .pipe(
+          concatMap((factory) => factory()),
+          takeWhile((result) => result === true),
+          toArray()
+        )
+        .subscribe((results) => {
+          if (results.length === dialogs.length) {
+            this.onSubmit()
+          }
+        })
     } else {
       this.profileForm.markAllAsTouched()
     }

src/app/profiles/profiles.component.html

@@ -29,7 +29,15 @@ <h3 class="flex justify-center">{{ 'profiles.noData.value' | translate }}</h3>
             @if (!ciraEnabled() && element.ciraConfigName) {
               <mat-icon
                 color="warn"
-                [matTooltip]="'profileDetail.ciraDisabledWarning.value' | translate"
+                [matTooltip]="'profiles.ciraExportDisabled.value' | translate"
+                style="font-size: 18px; height: 18px; width: 18px; vertical-align: middle; margin-left: 4px"
+                >warning</mat-icon
+              >
+            }
+            @if (!ciraEnabled() && !element.ciraConfigName && !element.tlsMode) {
+              <mat-icon
+                color="warn"
+                [matTooltip]="'profiles.ciraDisabledNoConfig.value' | translate"
                 style="font-size: 18px; height: 18px; width: 18px; vertical-align: middle; margin-left: 4px"
                 >warning</mat-icon
               >

src/app/profiles/profiles.component.spec.ts

@@ -5,6 +5,7 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { MatDialog } from '@angular/material/dialog'
+import { By } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { of } from 'rxjs'
 
@@ -166,4 +167,21 @@ describe('ProfilesComponent', () => {
       ;(environment as { cloud: boolean }).cloud = originalCloud
     }
   })
+
+  it('should show warning icon on profiles that use CIRA when CIRA is disabled', () => {
+    component.ciraEnabled.set(false)
+    fixture.detectChanges()
+
+    const icons = fixture.debugElement.queryAll(By.css('mat-icon[color="warn"]'))
+    // The mock data has one profile with ciraConfigName set
+    expect(icons.length).toBe(1)
+  })
+
+  it('should not show warning icon when CIRA is enabled', () => {
+    // ciraEnabled is true by default in cloud mode
+    fixture.detectChanges()
+
+    const icons = fixture.debugElement.queryAll(By.css('mat-icon[color="warn"]'))
+    expect(icons.length).toBe(0)
+  })
 })