Revert "Implement the counter on the FE (#1635)"

docs/dev/mockoon.json

@@ -437,7 +437,7 @@
           "rulesOperator": "OR",
           "disableTemplating": false,
           "fallbackTo404": false,
-          "default": true,
+          "default": false,
           "crudKey": "id",
           "callbacks": []
         },
@@ -532,7 +532,7 @@
           "rulesOperator": "OR",
           "disableTemplating": false,
           "fallbackTo404": false,
-          "default": false,
+          "default": true,
           "crudKey": "id",
           "callbacks": []
         },

modules/ui/src/app/app.store.spec.ts

@@ -73,9 +73,6 @@ const mock = (() => {
     setObject: (key: string, value: object) => {
       store[key] = JSON.stringify(value);
     },
-    removeItem: (key: string) => {
-      delete store[key];
-    },
     clear: () => {
       store = {};
     },

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html

@@ -118,9 +118,13 @@
 </ng-template>
 
 <ng-template #Monitoring>
-  @if (monitorPeriod) {
-    <app-timer [duration]="monitorPeriod"> </app-timer>
-  }
+  <ng-container
+    *ngTemplateOutlet="
+      Spinner;
+      context: {
+        text: 'Please wait, this could take a few minutes',
+      }
+    "></ng-container>
 </ng-template>
 
 <ng-template #Spinner let-text="text">

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss

@@ -177,25 +177,6 @@
   }
 }
 
-.progress-card-result-loading-monitoring {
-  display: flex;
-  align-items: center;
-
-  .monitoring-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex: 1;
-    margin-left: 32px;
-    gap: 32px;
-    flex-wrap: wrap;
-
-    .progress-card-result-title {
-      margin-left: 0;
-    }
-  }
-}
-
 @for $i from 1 through 100 {
   .progress-value-#{$i} ::ng-deep .mdc-linear-progress__primary-bar {
     transform: scaleX(1) !important;

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts

@@ -418,7 +418,6 @@ describe('ProgressStatusCardComponent', () => {
     describe('with available systemStatus$ data, as Monitoring', () => {
       beforeEach(() => {
         component.systemStatus = MOCK_PROGRESS_DATA_MONITORING;
-        component.monitorPeriod = 300;
         fixture.detectChanges();
       });
 
@@ -434,12 +433,15 @@ describe('ProgressStatusCardComponent', () => {
         expect(progressCardEl?.classList).toContain('progress');
       });
 
-      it('should not have progress card result title during Monitoring', () => {
+      it('should have progress card result title', () => {
         const progressCardResultEl = compiled.querySelector(
           '.progress-card-result-title'
         );
 
-        expect(progressCardResultEl).toBeNull();
+        expect(progressCardResultEl).not.toBeNull();
+        expect(progressCardResultEl?.textContent?.trim()).toEqual(
+          'Please wait, this could take a few minutes'
+        );
       });
 
       it('should have progress card status text as "Monitoring"', () => {
@@ -450,20 +452,6 @@ describe('ProgressStatusCardComponent', () => {
         expect(progressCardStatusText).not.toBeNull();
         expect(progressCardStatusText?.textContent).toEqual('Monitoring');
       });
-
-      it('should render the countdown timer component during Monitoring', () => {
-        const timerEl = compiled.querySelector('app-timer');
-
-        expect(timerEl).not.toBeNull();
-      });
-
-      it('should not render timer component when monitorPeriod is not defined', () => {
-        fixture.componentRef.setInput('monitorPeriod', undefined);
-        fixture.detectChanges();
-
-        const timerEl = compiled.querySelector('app-timer');
-        expect(timerEl).toBeNull();
-      });
     });
 
     describe('with available systemStatus$ data, as "Proceed"', () => {

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts

@@ -13,15 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-  inject,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import {
   ResultOfTestrun,
   StatusOfTestResult,
@@ -40,12 +32,6 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { TimerComponent } from '../timer/timer.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '../../../../store/state';
-import { selectSystemConfig } from '../../../../store/selectors';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-testrun-status-card',
@@ -63,39 +49,14 @@ import { takeUntil } from 'rxjs/operators';
     MatExpansionModule,
     ReactiveFormsModule,
     MatTooltipModule,
-    TimerComponent,
   ],
 })
-export class TestrunStatusCardComponent implements OnInit, OnDestroy {
+export class TestrunStatusCardComponent {
   @Input() systemStatus!: TestrunStatus;
-  @Input() monitorPeriod?: number;
-
-  private readonly store = inject(Store<AppState>, { optional: true });
-  private readonly cdr = inject(ChangeDetectorRef);
-  private destroy$ = new Subject<void>();
 
   public readonly StatusOfTestrun = StatusOfTestrun;
   public readonly TestingType = TestingType;
 
-  ngOnInit(): void {
-    if (this.store && this.monitorPeriod === undefined) {
-      this.store
-        .select(selectSystemConfig)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(config => {
-          if (config?.monitor_period) {
-            this.monitorPeriod = Number(config.monitor_period);
-            this.cdr.markForCheck();
-          }
-        });
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   public getClass(
     status: StatusOfTestrun,
     result?: ResultOfTestrun