feat: hide CIRA in profile when disabled on the server

Author: nmgaston

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

@@ -320,24 +320,23 @@
               <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()) {
+          @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 }}
                   <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 (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 +351,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)
@@ -835,9 +838,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 +853,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 +877,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 +888,7 @@ describe('ProfileDetailComponent', () => {
 
       expect(ciraGetDataSpy).toHaveBeenCalled()
       expect(enterpriseComponent.ciraEnabled()).toBeTrue()
+      expect(fixture.nativeElement.querySelector('[data-cy="radio-cira"]')).not.toBeNull()
     })
   })