Internal change

PiperOrigin-RevId: 923319177

Author: OmniLab Team

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/flags_dialog/flags_dialog.spec.ts

@@ -1,11 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
-import {
-  MatTestDialogOpener,
-  MatTestDialogOpenerModule,
-} from '@angular/material/dialog/testing';
+import {MatDialog} from '@angular/material/dialog';
+import {MatTestDialogOpener} from '@angular/material/dialog/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {of} from 'rxjs';
+import {of, Subject} from 'rxjs';
 
 import {
   PopularFlag,
@@ -22,8 +19,10 @@ import {FlagsDialog, FlagsDialogData} from './flags_dialog';
 describe('FlagsDialog', () => {
   let component: FlagsDialog;
   let fixture: ComponentFixture<MatTestDialogOpener<FlagsDialog>>;
+  let opener: MatTestDialogOpener<FlagsDialog>;
   let hostService: jasmine.SpyObj<HostService>;
   let snackBarService: jasmine.SpyObj<SnackBarService>;
+  let dialog: jasmine.SpyObj<MatDialog>;
 
   const dialogData: FlagsDialogData = {
     hostName: 'test-host',
@@ -39,6 +38,7 @@ describe('FlagsDialog', () => {
       'showSuccess',
       'showError',
     ]);
+    dialog = jasmine.createSpyObj('MatDialog', ['open']);
     const configService = jasmine.createSpyObj('CONFIG_SERVICE', [
       'checkDeviceWritePermission',
       'checkHostWritePermission',
@@ -53,20 +53,26 @@ describe('FlagsDialog', () => {
     hostService.getPopularFlags.and.returnValue(of({flags: []}));
 
     await TestBed.configureTestingModule({
-      imports: [FlagsDialog, NoopAnimationsModule, MatTestDialogOpenerModule],
+      imports: [NoopAnimationsModule],
       providers: [
-        {provide: MAT_DIALOG_DATA, useValue: dialogData},
         {provide: HOST_SERVICE, useValue: hostService},
         {provide: SnackBarService, useValue: snackBarService},
         {provide: CONFIG_SERVICE, useValue: configService},
       ],
-    }).compileComponents();
+    })
+      .overrideComponent(FlagsDialog, {
+        set: {
+          providers: [{provide: MatDialog, useValue: dialog}],
+        },
+      })
+      .compileComponents();
 
     fixture = TestBed.createComponent(
       MatTestDialogOpener.withComponent(FlagsDialog, {data: dialogData}),
     );
+    opener = fixture.componentInstance;
+    component = opener.dialogRef.componentInstance;
     fixture.detectChanges();
-    component = fixture.componentInstance.dialogRef.componentInstance;
   });
 
   it('should create', () => {
@@ -127,12 +133,81 @@ describe('FlagsDialog', () => {
     };
     hostService.updatePassThroughFlags.and.returnValue(of(response));
 
+    const mockConfirmDialogRef = jasmine.createSpyObj('MatDialogRef', [
+      'afterClosed',
+    ]);
+    mockConfirmDialogRef.afterClosed.and.returnValue(of('primary'));
+    dialog.open.and.returnValue(mockConfirmDialogRef);
+
     component.save();
 
+    expect(dialog.open).toHaveBeenCalled();
+    expect(hostService.updatePassThroughFlags).toHaveBeenCalledWith(
+      'test-host',
+      '--flag1 --flag2',
+    );
     expect(component.isSaving()).toBeFalse();
     expect(snackBarService.showError).toHaveBeenCalledWith('Error message');
   });
 
+  it('should handle save success response', () => {
+    const response: UpdatePassThroughFlagsResponse = {
+      success: true,
+    };
+    hostService.updatePassThroughFlags.and.returnValue(of(response));
+
+    const mockConfirmDialogRef = jasmine.createSpyObj('MatDialogRef', [
+      'afterClosed',
+    ]);
+    mockConfirmDialogRef.afterClosed.and.returnValue(of('primary'));
+    dialog.open.and.returnValue(mockConfirmDialogRef);
+
+    spyOn(opener.dialogRef, 'close');
+
+    component.save();
+
+    expect(dialog.open).toHaveBeenCalled();
+    expect(hostService.updatePassThroughFlags).toHaveBeenCalledWith(
+      'test-host',
+      '--flag1 --flag2',
+    );
+    expect(opener.dialogRef.close).toHaveBeenCalledWith('--flag1 --flag2');
+  });
+
+  it('should not save flags if confirmation is cancelled', () => {
+    const mockConfirmDialogRef = jasmine.createSpyObj('MatDialogRef', [
+      'afterClosed',
+    ]);
+    mockConfirmDialogRef.afterClosed.and.returnValue(of('cancel'));
+    dialog.open.and.returnValue(mockConfirmDialogRef);
+
+    component.save();
+
+    expect(dialog.open).toHaveBeenCalled();
+    expect(hostService.updatePassThroughFlags).not.toHaveBeenCalled();
+    expect(component.isSaving()).toBeFalse();
+  });
+
+  it('should set isSaving to true while saving', () => {
+    const subject = new Subject<UpdatePassThroughFlagsResponse>();
+    hostService.updatePassThroughFlags.and.returnValue(subject);
+
+    const mockConfirmDialogRef = jasmine.createSpyObj('MatDialogRef', [
+      'afterClosed',
+    ]);
+    mockConfirmDialogRef.afterClosed.and.returnValue(of('primary'));
+    dialog.open.and.returnValue(mockConfirmDialogRef);
+
+    component.save();
+
+    expect(component.isSaving()).toBeTrue();
+
+    subject.next({success: true});
+    subject.complete();
+
+    expect(component.isSaving()).toBeFalse();
+  });
+
   it('should update hasPermission when permission changes', () => {
     component.handlePermissionChange({hasPermission: false});
     expect(component.hasPermission()).toBeFalse();

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/flags_dialog/flags_dialog.ts

@@ -12,14 +12,15 @@ import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
+  MatDialog,
   MatDialogModule,
   MatDialogRef,
 } from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {take} from 'rxjs/operators';
+import {finalize, take} from 'rxjs/operators';
 
 import {SnackBarService} from '@deviceinfra/app/shared/services/snackbar_service';
 import {WritePermissionResult} from '../../../../../core/models/action_common';
@@ -29,6 +30,8 @@ import {
 } from '../../../../../core/models/host_action';
 import {HOST_SERVICE} from '../../../../../core/services/host/host_service';
 import {Dialog} from '../../../../../shared/components/config_common/dialog/dialog';
+import {ConfirmDialog} from '../../../../../shared/components/confirm_dialog/confirm_dialog';
+import {SaveFlagsConfirmContent} from './save_flags_confirm_content/save_flags_confirm_content';
 
 /**
  * Structure for passing data including host identity and current flags to FlagsDialog.
@@ -62,6 +65,7 @@ export interface FlagsDialogData {
 export class FlagsDialog implements OnInit {
   readonly data = inject<FlagsDialogData>(MAT_DIALOG_DATA);
   private readonly dialogRef = inject(MatDialogRef<FlagsDialog>);
+  private readonly dialog = inject(MatDialog);
   private readonly hostService = inject(HOST_SERVICE);
   private readonly snackBarService = inject(SnackBarService);
 
@@ -249,30 +253,51 @@ export class FlagsDialog implements OnInit {
       this.currentFlagsArray.set(flags);
     }
 
-    this.isSaving.set(true);
-
-    this.hostService
-      .updatePassThroughFlags(this.data.hostName, finalString)
-      .pipe(take(1))
-      .subscribe({
-        next: (response: UpdatePassThroughFlagsResponse) => {
-          if (response.success) {
-            this.isSaving.set(false);
-            this.dialogRef.close(finalString);
-          } else {
-            this.isSaving.set(false);
-            const msg =
-              response.error?.message ||
-              response.error?.code ||
-              'Failed to save flags';
-            this.snackBarService.showError(msg);
-          }
-        },
-        error: () => {
-          this.isSaving.set(false);
-          this.snackBarService.showError('Failed to save flags');
+    const confirmDialogRef = this.dialog.open(ConfirmDialog, {
+      data: {
+        title: 'Save Pass-through Flags?',
+        contentComponent: SaveFlagsConfirmContent,
+        contentComponentInputs: {
+          flags: finalString,
         },
-      });
+        type: 'warning',
+        customIcon: 'warning',
+        primaryButtonLabel: 'Save Anyway',
+        secondaryButtonLabel: 'Cancel',
+      },
+      panelClass: 'confirm-dialog-panel',
+      autoFocus: false,
+    });
+
+    confirmDialogRef.afterClosed().subscribe((result) => {
+      if (result === 'primary') {
+        this.isSaving.set(true);
+        this.hostService
+          .updatePassThroughFlags(this.data.hostName, finalString)
+          .pipe(
+            take(1),
+            finalize(() => {
+              this.isSaving.set(false);
+            }),
+          )
+          .subscribe({
+            next: (response: UpdatePassThroughFlagsResponse) => {
+              if (response.success) {
+                this.dialogRef.close(finalString);
+              } else {
+                const msg =
+                  response.error?.message ||
+                  response.error?.code ||
+                  'Failed to save flags';
+                this.snackBarService.showError(msg);
+              }
+            },
+            error: () => {
+              this.snackBarService.showError('Failed to save flags');
+            },
+          });
+      }
+    });
   }
 
   handlePermissionChange(result: WritePermissionResult) {

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/flags_dialog/save_flags_confirm_content/save_flags_confirm_content.ng.html

@@ -0,0 +1,22 @@
+<div class="save-flags-confirm-box">
+  <div class="warning-callout">
+    <p class="warning-title">
+      <mat-icon class="info-icon-small">info</mat-icon>
+      Release Impact Warning
+    </p>
+    <p class="warning-text">
+      These flags will take effect during the <b>next release or restart</b>. Invalid flags will prevent the Lab Server from starting successfully.
+    </p>
+  </div>
+
+  <div class="flags-to-save-container">
+    <span class="section-title">Flags to be saved</span>
+    <div class="flags-scroll-box custom-scrollbar">
+      @if (flags) {
+        <code class="flags-code">{{ flags }}</code>
+      } @else {
+        <span class="italic text-gray-400">No flags (default configuration)</span>
+      }
+    </div>
+  </div>
+</div>

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/flags_dialog/save_flags_confirm_content/save_flags_confirm_content.scss

@@ -0,0 +1,76 @@
+.save-flags-confirm-box {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: left;
+
+  .warning-callout {
+    background-color: #fffbeb; // amber-50
+    border: 1px solid #fef3c7; // amber-100
+    border-radius: 0.75rem; // rounded-xl
+    padding: 1rem;
+    font-size: 0.75rem; // text-xs
+    line-height: 1.25rem;
+    color: #78350f; // amber-900 (approx text-amber-850)
+  }
+
+  .warning-title {
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin: 0 0 0.25rem 0;
+    color: #78350f; // text-amber-900
+
+    .info-icon-small {
+      font-size: 0.875rem; // 14px
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+
+  .warning-text {
+    margin: 0;
+  }
+
+  .flags-to-save-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .section-title {
+    font-size: 10px;
+    font-weight: bold;
+    color: #9ca3af; // text-gray-400
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .flags-scroll-box {
+    font-family: monospace;
+    font-size: 11px;
+    color: #4b5563; // text-gray-600
+    background-color: #f9fafb; // bg-gray-50
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid #e5e7eb; // border-gray-200
+    margin-top: 0.25rem;
+    word-break: break-all;
+    line-height: 1.375;
+    max-height: 6rem; // max-h-24
+    overflow-y: auto;
+  }
+
+  .flags-code {
+    white-space: pre-wrap;
+  }
+
+  .italic {
+    font-style: italic;
+  }
+
+  .text-gray-400 {
+    color: #9ca3af;
+  }
+}

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/flags_dialog/save_flags_confirm_content/save_flags_confirm_content.spec.ts

@@ -0,0 +1,21 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {SaveFlagsConfirmContent} from './save_flags_confirm_content';
+
+describe('SaveFlagsConfirmContent', () => {
+  let component: SaveFlagsConfirmContent;
+  let fixture: ComponentFixture<SaveFlagsConfirmContent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SaveFlagsConfirmContent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SaveFlagsConfirmContent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/flags_dialog/save_flags_confirm_content/save_flags_confirm_content.ts

@@ -0,0 +1,18 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+
+/**
+ * Component to display confirmation content when saving pass-through flags.
+ */
+@Component({
+  selector: 'app-save-flags-confirm-content',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './save_flags_confirm_content.ng.html',
+  styleUrls: ['./save_flags_confirm_content.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SaveFlagsConfirmContent {
+  @Input() flags = '';
+}