From 7ed1a580f85aa511c0749e8e207d9063c74e895b Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Thu, 4 Apr 2024 11:21:07 +0000
Subject: [PATCH 1/4] 331379891: (feat) disable connection settings when
 testrun is in progress

---
 modules/ui/src/app/app.component.html         |  3 +++
 modules/ui/src/app/app.component.spec.ts      |  4 +--
 .../settings/general-settings.component.html  |  7 +++--
 .../settings/general-settings.component.scss  | 11 ++++++++
 .../general-settings.component.spec.ts        | 26 +++++++++++++++++++
 .../settings/general-settings.component.ts    | 18 +++++++++++++
 modules/ui/src/styles.scss                    |  5 ++++
 7 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html
index 9ea5c9e3f..b5ac707d8 100644
--- a/modules/ui/src/app/app.component.html
+++ b/modules/ui/src/app/app.component.html
@@ -179,6 +179,9 @@ <h1 class="main-heading">Testrun</h1>
     class="settings-drawer">
     <app-general-settings
       #settings
+      [settingsDisable]="
+        (systemStatus$ | async)?.status === StatusOfTestrun.InProgress
+      "
       (closeSettingEvent)="closeSetting(vm.hasDevices)">
     </app-general-settings>
   </mat-drawer>
diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts
index 6b5477a48..c06358ccd 100644
--- a/modules/ui/src/app/app.component.spec.ts
+++ b/modules/ui/src/app/app.component.spec.ts
@@ -654,10 +654,8 @@ describe('AppComponent', () => {
   template: '<div></div>',
 })
 class FakeGeneralSettingsComponent {
-  @Input() interfaces = [];
-  @Input() hasConnectionSettings = false;
+  @Input() settingsDisable = false;
   @Output() closeSettingEvent = new EventEmitter<void>();
-  @Output() reloadInterfacesEvent = new EventEmitter<void>();
   getSystemInterfaces = () => {};
 }
 
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.html b/modules/ui/src/app/pages/settings/general-settings.component.html
index 2e77950a6..7bdeb8dc8 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/settings/general-settings.component.html
@@ -25,6 +25,7 @@ <h2 class="settings-drawer-header-title">System settings</h2>
   </button>
 </div>
 <div class="setting-drawer-content" *ngIf="viewModel$ | async as vm">
+  <div *ngIf="settingsDisable" class="settings-disabled-overlay"></div>
   <form
     [formGroup]="settingForm"
     [class.setting-drawer-content-form-empty]="
@@ -64,7 +65,7 @@ <h2 class="settings-drawer-header-title">System settings</h2>
           (keydown.enter)="reloadSetting()"
           (keydown.space)="reloadSetting()"
           role="button"
-          tabindex="0"
+          [tabindex]="settingsDisable ? -1 : 0"
           class="message-link">
           Refresh
         </a>
@@ -105,7 +106,9 @@ <h2 class="settings-drawer-header-title">System settings</h2>
         class="save-button"
         color="primary"
         (click)="saveSetting()"
-        [disabled]="!isFormValues || vm.isLessThanOneInterface">
+        [disabled]="
+          !isFormValues || vm.isLessThanOneInterface || settingsDisable
+        ">
         Save
       </button>
     </div>
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.scss b/modules/ui/src/app/pages/settings/general-settings.component.scss
index c1f2e259c..e97c97d1e 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.scss
+++ b/modules/ui/src/app/pages/settings/general-settings.component.scss
@@ -119,3 +119,14 @@
     }
   }
 }
+
+.settings-disabled-overlay {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 75px;
+  bottom: 45px;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 2;
+}
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
index 097cc2f0e..0187f2501 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
+++ b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
@@ -152,6 +152,32 @@ describe('GeneralSettingsComponent', () => {
 
       expect(mockSettingsStore.setDefaultFormValues).toHaveBeenCalled();
     });
+
+    it('should disable setting form when get settingDisable as true ', () => {
+      spyOn(component.settingForm, 'disable');
+
+      component.settingsDisable = true;
+
+      expect(component.settingForm.disable).toHaveBeenCalled();
+    });
+
+    it('should enable setting form when get settingDisable as false ', () => {
+      spyOn(component.settingForm, 'enable');
+
+      component.settingsDisable = false;
+
+      expect(component.settingForm.enable).toHaveBeenCalled();
+    });
+
+    it('should disable "Save" button when get settingDisable as true', () => {
+      component.settingsDisable = true;
+
+      const saveBtn = compiled.querySelector(
+        '.save-button'
+      ) as HTMLButtonElement;
+
+      expect(saveBtn.disabled).toBeTrue();
+    });
   });
 
   describe('#saveSetting', () => {
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.ts b/modules/ui/src/app/pages/settings/general-settings.component.ts
index f9fe7eeeb..5ef2b4fc2 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.ts
+++ b/modules/ui/src/app/pages/settings/general-settings.component.ts
@@ -16,6 +16,7 @@
 import {
   Component,
   EventEmitter,
+  Input,
   OnDestroy,
   OnInit,
   Output,
@@ -39,6 +40,15 @@ import { LoaderService } from '../../services/loader.service';
 })
 export class GeneralSettingsComponent implements OnInit, OnDestroy {
   @Output() closeSettingEvent = new EventEmitter<void>();
+
+  private isSettingsDisable = false;
+  get settingsDisable(): boolean {
+    return this.isSettingsDisable;
+  }
+  @Input() set settingsDisable(value: boolean) {
+    this.isSettingsDisable = value;
+    value ? this.disableSettings() : this.enableSettings();
+  }
   public readonly CalloutType = CalloutType;
   public readonly EventType = EventType;
   public readonly FormKey = FormKey;
@@ -111,6 +121,14 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     }
   }
 
+  private disableSettings(): void {
+    this.settingForm.disable();
+  }
+
+  private enableSettings(): void {
+    this.settingForm.enable();
+  }
+
   private createSettingForm() {
     this.settingForm = this.fb.group(
       {
diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss
index 2d3a36009..f6b9557ca 100644
--- a/modules/ui/src/styles.scss
+++ b/modules/ui/src/styles.scss
@@ -191,6 +191,11 @@ h2.title {
   --mdc-outlined-text-field-focus-label-text-color: #1a73e8;
 }
 
+.setting-field {
+  --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.38);
+  --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.58);
+}
+
 body:has(.initiate-test-run-dialog)
   app-root
   app-spinner.connection-settings-spinner,

From 6b2289e4ce020cfc3563aeb4efef50db3397ae80 Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Fri, 5 Apr 2024 08:51:53 +0000
Subject: [PATCH 2/4] 331379891: (fix) include more testrun results as progress

---
 modules/ui/src/app/app.component.html         |  4 +-
 modules/ui/src/app/app.component.spec.ts      |  1 +
 modules/ui/src/app/app.component.ts           |  6 +++
 .../app/pages/testrun/progress.component.html |  8 ++--
 .../pages/testrun/progress.component.spec.ts  |  5 +++
 .../app/pages/testrun/progress.component.ts   | 10 ++---
 .../src/app/services/test-run.service.spec.ts | 37 ++++++++++++++++++-
 .../ui/src/app/services/test-run.service.ts   |  9 +++++
 8 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html
index b5ac707d8..969824523 100644
--- a/modules/ui/src/app/app.component.html
+++ b/modules/ui/src/app/app.component.html
@@ -179,9 +179,7 @@ <h1 class="main-heading">Testrun</h1>
     class="settings-drawer">
     <app-general-settings
       #settings
-      [settingsDisable]="
-        (systemStatus$ | async)?.status === StatusOfTestrun.InProgress
-      "
+      [settingsDisable]="isTestrunInProgress(vm.systemStatus?.status)"
       (closeSettingEvent)="closeSetting(vm.hasDevices)">
     </app-general-settings>
   </mat-drawer>
diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts
index c06358ccd..e108a96f9 100644
--- a/modules/ui/src/app/app.component.spec.ts
+++ b/modules/ui/src/app/app.component.spec.ts
@@ -93,6 +93,7 @@ describe('AppComponent', () => {
       'setIsOpenStartTestrun',
       'fetchDevices',
       'getTestModules',
+      'testrunInProgress',
     ]);
 
     mockFocusManagerService = jasmine.createSpyObj('mockFocusManagerService', [
diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts
index 6b0fe8f79..8b1e87cd0 100644
--- a/modules/ui/src/app/app.component.ts
+++ b/modules/ui/src/app/app.component.ts
@@ -32,6 +32,7 @@ import {
 import { appFeatureKey } from './store/reducers';
 import { GeneralSettingsComponent } from './pages/settings/general-settings.component';
 import { AppStore } from './app.store';
+import { TestRunService } from './services/test-run.service';
 
 const DEVICES_LOGO_URL = '/assets/icons/devices.svg';
 const DEVICES_RUN_URL = '/assets/icons/device_run.svg';
@@ -65,6 +66,7 @@ export class AppComponent {
     private store: Store<AppState>,
     private state: State<AppState>,
     private readonly focusManagerService: FocusManagerService,
+    private testRunService: TestRunService,
     public appStore: AppStore
   ) {
     this.appStore.getDevices();
@@ -147,4 +149,8 @@ export class AppComponent {
   consentShown() {
     this.appStore.setContent();
   }
+
+  isTestrunInProgress(status?: string) {
+    return this.testRunService.testrunInProgress(status);
+  }
 }
diff --git a/modules/ui/src/app/pages/testrun/progress.component.html b/modules/ui/src/app/pages/testrun/progress.component.html
index a2e17567c..26143cb58 100644
--- a/modules/ui/src/app/pages/testrun/progress.component.html
+++ b/modules/ui/src/app/pages/testrun/progress.component.html
@@ -17,7 +17,7 @@
   <ng-container *ngIf="vm.systemStatus as data; else empty">
     <ng-container
       *ngIf="
-        testrunInProgress(data.status) ||
+        isTestrunInProgress(data.status) ||
         data.status === StatusOfTestrun.Cancelled ||
         data.status === StatusOfTestrun.Cancelling ||
         data.finished
@@ -41,7 +41,7 @@ <h2 class="title progress-title">
               }}
             </h2>
             <button
-              *ngIf="testrunInProgress(data.status)"
+              *ngIf="isTestrunInProgress(data.status)"
               (click)="openStopTestrunDialog(vm.systemStatus)"
               class="stop-button"
               aria-label="Stop testrun"
@@ -66,7 +66,7 @@ <h2 class="title progress-title">
       <section
         class="progress-table"
         [class.progress-table-progress-empty]="
-          testrunInProgress(data.status) && resultIsEmpty(data.tests)
+          isTestrunInProgress(data.status) && resultIsEmpty(data.tests)
         ">
         <app-progress-table
           [dataSource]="vm.dataSource"
@@ -100,7 +100,7 @@ <h2 class="title progress-title">
       aria-label="Start new testrun"
       color="primary"
       [disabled]="
-        hasDevices === false || testrunInProgress(systemStatus?.status)
+        hasDevices === false || isTestrunInProgress(systemStatus?.status)
       "
       (click)="openTestRunModal()"
       mat-flat-button>
diff --git a/modules/ui/src/app/pages/testrun/progress.component.spec.ts b/modules/ui/src/app/pages/testrun/progress.component.spec.ts
index 7278a1f77..914856cc9 100644
--- a/modules/ui/src/app/pages/testrun/progress.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/progress.component.spec.ts
@@ -72,6 +72,7 @@ describe('ProgressComponent', () => {
       'isTestrunStarted$',
       'fetchSystemStatus',
       'getTestModules',
+      'testrunInProgress',
     ]);
 
   const loaderServiceMock: jasmine.SpyObj<LoaderService> = jasmine.createSpyObj(
@@ -209,6 +210,7 @@ describe('ProgressComponent', () => {
   describe('DOM tests', () => {
     beforeEach(async () => {
       testRunServiceMock.stopTestrun.and.returnValue(of(true));
+      testRunServiceMock.testrunInProgress.and.returnValue(false);
 
       await TestBed.configureTestingModule({
         declarations: [
@@ -334,6 +336,7 @@ describe('ProgressComponent', () => {
           selectSystemStatus,
           MOCK_PROGRESS_DATA_IN_PROGRESS
         );
+        testRunServiceMock.testrunInProgress.and.returnValue(true);
         store.overrideSelector(selectHasDevices, true);
         fixture.detectChanges();
       });
@@ -459,6 +462,7 @@ describe('ProgressComponent', () => {
           selectSystemStatus,
           MOCK_PROGRESS_DATA_WAITING_FOR_DEVICE
         );
+        testRunServiceMock.testrunInProgress.and.returnValue(true);
         store.overrideSelector(selectHasDevices, true);
         fixture.detectChanges();
       });
@@ -484,6 +488,7 @@ describe('ProgressComponent', () => {
           selectSystemStatus,
           MOCK_PROGRESS_DATA_MONITORING
         );
+        testRunServiceMock.testrunInProgress.and.returnValue(true);
         store.overrideSelector(selectHasDevices, true);
         fixture.detectChanges();
       });
diff --git a/modules/ui/src/app/pages/testrun/progress.component.ts b/modules/ui/src/app/pages/testrun/progress.component.ts
index 8f599b9d4..6501e4460 100644
--- a/modules/ui/src/app/pages/testrun/progress.component.ts
+++ b/modules/ui/src/app/pages/testrun/progress.component.ts
@@ -33,6 +33,7 @@ import { LOADER_TIMEOUT_CONFIG_TOKEN } from '../../services/loaderConfig';
 import { FocusManagerService } from '../../services/focus-manager.service';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
 import { TestrunStore } from './testrun.store';
+import { TestRunService } from '../../services/test-run.service';
 
 @Component({
   selector: 'app-progress',
@@ -51,6 +52,7 @@ export class ProgressComponent implements OnInit, OnDestroy {
   viewModel$ = this.testrunStore.viewModel$;
 
   constructor(
+    private readonly testRunService: TestRunService,
     public dialog: MatDialog,
     private readonly focusManagerService: FocusManagerService,
     public testrunStore: TestrunStore
@@ -70,12 +72,8 @@ export class ProgressComponent implements OnInit, OnDestroy {
       });
   }
 
-  testrunInProgress(status?: string): boolean {
-    return (
-      status === StatusOfTestrun.InProgress ||
-      status === StatusOfTestrun.WaitingForDevice ||
-      status === StatusOfTestrun.Monitoring
-    );
+  isTestrunInProgress(status?: string) {
+    return this.testRunService.testrunInProgress(status);
   }
 
   public openStopTestrunDialog(systemStatus: TestrunStatus) {
diff --git a/modules/ui/src/app/services/test-run.service.spec.ts b/modules/ui/src/app/services/test-run.service.spec.ts
index d7dffdfb3..9e06a2aa7 100644
--- a/modules/ui/src/app/services/test-run.service.spec.ts
+++ b/modules/ui/src/app/services/test-run.service.spec.ts
@@ -23,7 +23,11 @@ import { Device, TestModule } from '../model/device';
 import { TestRunService, UNAVAILABLE_VERSION } from './test-run.service';
 import { SystemConfig, SystemInterfaces } from '../model/setting';
 import { MOCK_PROGRESS_DATA_IN_PROGRESS } from '../mocks/progress.mock';
-import { StatusOfTestResult, TestrunStatus } from '../model/testrun-status';
+import {
+  StatusOfTestResult,
+  StatusOfTestrun,
+  TestrunStatus,
+} from '../model/testrun-status';
 import { device } from '../mocks/device.mock';
 import { NEW_VERSION, VERSION } from '../mocks/version.mock';
 
@@ -297,6 +301,37 @@ describe('TestRunService', () => {
     });
   });
 
+  describe('#testrunInProgress', () => {
+    const resultsInProgress = [
+      StatusOfTestrun.InProgress,
+      StatusOfTestrun.WaitingForDevice,
+      StatusOfTestrun.Monitoring,
+    ];
+
+    const resultsNotInProgress = [
+      StatusOfTestrun.Idle,
+      StatusOfTestrun.Cancelled,
+      StatusOfTestrun.Compliant,
+      StatusOfTestrun.NonCompliant,
+    ];
+
+    resultsInProgress.forEach(testCase => {
+      it(`should return true if restrun result is "${testCase}"`, () => {
+        const result = service.testrunInProgress(testCase);
+
+        expect(result).toBeTrue();
+      });
+    });
+
+    resultsNotInProgress.forEach(testCase => {
+      it(`should return false if restrun result is "${testCase}"`, () => {
+        const result = service.testrunInProgress(testCase);
+
+        expect(result).toBeFalse();
+      });
+    });
+  });
+
   it('deleteDevice should have necessary request data', () => {
     const apiUrl = 'http://localhost:8000/device';
 
diff --git a/modules/ui/src/app/services/test-run.service.ts b/modules/ui/src/app/services/test-run.service.ts
index ff07200fc..33574e17e 100644
--- a/modules/ui/src/app/services/test-run.service.ts
+++ b/modules/ui/src/app/services/test-run.service.ts
@@ -22,6 +22,7 @@ import { catchError, map, of, retry } from 'rxjs';
 import { SystemConfig, SystemInterfaces } from '../model/setting';
 import {
   StatusOfTestResult,
+  StatusOfTestrun,
   StatusResultClassName,
   TestrunStatus,
 } from '../model/testrun-status';
@@ -161,6 +162,14 @@ export class TestRunService {
     };
   }
 
+  testrunInProgress(status?: string): boolean {
+    return (
+      status === StatusOfTestrun.InProgress ||
+      status === StatusOfTestrun.WaitingForDevice ||
+      status === StatusOfTestrun.Monitoring
+    );
+  }
+
   startTestrun(device: Device): Observable<boolean> {
     return this.http
       .post<TestrunStatus>(

From 46ac968e44a4d6c824d7b02a493d8545925e2f16 Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Fri, 5 Apr 2024 11:37:29 +0000
Subject: [PATCH 3/4] 331379891: (fix) fix spelling

---
 modules/ui/src/app/services/test-run.service.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/ui/src/app/services/test-run.service.spec.ts b/modules/ui/src/app/services/test-run.service.spec.ts
index 9e06a2aa7..ac716101d 100644
--- a/modules/ui/src/app/services/test-run.service.spec.ts
+++ b/modules/ui/src/app/services/test-run.service.spec.ts
@@ -316,7 +316,7 @@ describe('TestRunService', () => {
     ];
 
     resultsInProgress.forEach(testCase => {
-      it(`should return true if restrun result is "${testCase}"`, () => {
+      it(`should return true if testrun result is "${testCase}"`, () => {
         const result = service.testrunInProgress(testCase);
 
         expect(result).toBeTrue();
@@ -324,7 +324,7 @@ describe('TestRunService', () => {
     });
 
     resultsNotInProgress.forEach(testCase => {
-      it(`should return false if restrun result is "${testCase}"`, () => {
+      it(`should return false if testrun result is "${testCase}"`, () => {
         const result = service.testrunInProgress(testCase);
 
         expect(result).toBeFalse();

From c0f5a605e8fa56b5fb8b9c79c585a8fa871f9a13 Mon Sep 17 00:00:00 2001
From: Olga Mardvilko <omardvilko@mail.ru>
Date: Tue, 16 Apr 2024 14:32:53 +0200
Subject: [PATCH 4/4] 333349715: (fix) GAR 1.3 The disabled system settings
 panel contains a focusable element (#388)

Co-authored-by: Volha Mardvilka <mardvilka@google.com>
---
 .../settings/general-settings.component.html  |  3 +-
 .../settings/general-settings.component.scss  | 11 +++
 .../general-settings.component.spec.ts        | 67 ++++++++++++-------
 .../settings/general-settings.component.ts    | 12 +++-
 4 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/modules/ui/src/app/pages/settings/general-settings.component.html b/modules/ui/src/app/pages/settings/general-settings.component.html
index 7bdeb8dc8..36849b42e 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/settings/general-settings.component.html
@@ -58,9 +58,10 @@ <h2 class="settings-drawer-header-title">System settings</h2>
           [options]="vm.internetOptions">
         </app-settings-dropdown>
       </ng-container>
-      <p class="message">
+      <p class="message" [ngClass]="{ disabled: settingsDisable }">
         If a port is missing from this list, you can
         <a
+          #reloadSettingLink
           (click)="reloadSetting()"
           (keydown.enter)="reloadSetting()"
           (keydown.space)="reloadSetting()"
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.scss b/modules/ui/src/app/pages/settings/general-settings.component.scss
index e97c97d1e..6bec40683 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.scss
+++ b/modules/ui/src/app/pages/settings/general-settings.component.scss
@@ -130,3 +130,14 @@
   background-color: rgba(255, 255, 255, 0.7);
   z-index: 2;
 }
+
+.disabled {
+  .message-link {
+    cursor: default;
+    pointer-events: none;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
index 0187f2501..8095468fd 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
+++ b/modules/ui/src/app/pages/settings/general-settings.component.spec.ts
@@ -116,6 +116,47 @@ describe('GeneralSettingsComponent', () => {
     expect(mockLoaderService.setLoading).toHaveBeenCalledWith(true);
   });
 
+  describe('#settingsDisable', () => {
+    it('should disable setting form when get settingDisable as true ', () => {
+      spyOn(component.settingForm, 'disable');
+
+      component.settingsDisable = true;
+
+      expect(component.settingForm.disable).toHaveBeenCalled();
+    });
+
+    it('should enable setting form when get settingDisable as false ', () => {
+      spyOn(component.settingForm, 'enable');
+
+      component.settingsDisable = false;
+
+      expect(component.settingForm.enable).toHaveBeenCalled();
+    });
+
+    it('should disable "Save" button when get settingDisable as true', () => {
+      component.settingsDisable = true;
+
+      const saveBtn = compiled.querySelector(
+        '.save-button'
+      ) as HTMLButtonElement;
+
+      expect(saveBtn.disabled).toBeTrue();
+    });
+
+    it('should disable "Refresh" link when settingDisable', () => {
+      component.settingsDisable = true;
+
+      const refreshLink = compiled.querySelector(
+        '.message-link'
+      ) as HTMLAnchorElement;
+
+      refreshLink.click();
+
+      expect(refreshLink.hasAttribute('aria-disabled')).toBeTrue();
+      expect(mockLoaderService.setLoading).not.toHaveBeenCalled();
+    });
+  });
+
   describe('#closeSetting', () => {
     beforeEach(() => {
       component.ngOnInit();
@@ -152,32 +193,6 @@ describe('GeneralSettingsComponent', () => {
 
       expect(mockSettingsStore.setDefaultFormValues).toHaveBeenCalled();
     });
-
-    it('should disable setting form when get settingDisable as true ', () => {
-      spyOn(component.settingForm, 'disable');
-
-      component.settingsDisable = true;
-
-      expect(component.settingForm.disable).toHaveBeenCalled();
-    });
-
-    it('should enable setting form when get settingDisable as false ', () => {
-      spyOn(component.settingForm, 'enable');
-
-      component.settingsDisable = false;
-
-      expect(component.settingForm.enable).toHaveBeenCalled();
-    });
-
-    it('should disable "Save" button when get settingDisable as true', () => {
-      component.settingsDisable = true;
-
-      const saveBtn = compiled.querySelector(
-        '.save-button'
-      ) as HTMLButtonElement;
-
-      expect(saveBtn.disabled).toBeTrue();
-    });
   });
 
   describe('#saveSetting', () => {
diff --git a/modules/ui/src/app/pages/settings/general-settings.component.ts b/modules/ui/src/app/pages/settings/general-settings.component.ts
index 5ef2b4fc2..c0e957ded 100644
--- a/modules/ui/src/app/pages/settings/general-settings.component.ts
+++ b/modules/ui/src/app/pages/settings/general-settings.component.ts
@@ -15,11 +15,13 @@
  */
 import {
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnDestroy,
   OnInit,
   Output,
+  ViewChild,
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Subject, takeUntil, tap } from 'rxjs';
@@ -39,6 +41,7 @@ import { LoaderService } from '../../services/loader.service';
   providers: [SettingsStore],
 })
 export class GeneralSettingsComponent implements OnInit, OnDestroy {
+  @ViewChild('reloadSettingLink') public reloadSettingLink!: ElementRef;
   @Output() closeSettingEvent = new EventEmitter<void>();
 
   private isSettingsDisable = false;
@@ -98,6 +101,9 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
   }
 
   reloadSetting(): void {
+    if (this.settingsDisable) {
+      return;
+    }
     this.showLoading();
     this.getSystemInterfaces();
     this.settingsStore.getSystemConfig();
@@ -122,11 +128,13 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
   }
 
   private disableSettings(): void {
-    this.settingForm.disable();
+    this.settingForm?.disable();
+    this.reloadSettingLink?.nativeElement.setAttribute('aria-disabled', 'true');
   }
 
   private enableSettings(): void {
-    this.settingForm.enable();
+    this.settingForm?.enable();
+    this.reloadSettingLink?.nativeElement.removeAttribute('aria-disabled');
   }
 
   private createSettingForm() {