add a Observable that triggers a refresh when called (#1041)

* jar is now debuggable

* rename folder

* add a Observable that triggers a refresh when called

* add destroy observable to stop subscription of reloadKeySubject

* add tests to observables

---------

Co-authored-by: Yanick Minder <[email protected]>

.run/OkrApplication-local-prod-debug.run.xml

@@ -0,0 +1,17 @@
+
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="OkrApplication Local-prod debug" type="Remote">
+    <module name="exam-feedback-tool" />
+    <option name="USE_SOCKET_TRANSPORT" value="true" />
+    <option name="SERVER_MODE" value="false" />
+    <option name="SHMEM_ADDRESS" />
+    <option name="HOST" value="localhost" />
+    <option name="PORT" value="5005" />
+    <option name="AUTO_RESTART" value="false" />
+    <RunnerSettings RunnerId="Debug">
+      <option name="DEBUG_PORT" value="5005" />
+      <option name="LOCAL" value="false" />
+    </RunnerSettings>
+    <method v="2" />
+  </configuration>
+</component>

backend/pom.xml

@@ -83,6 +83,15 @@
             <version>3.26.3</version>
             <scope>test</scope>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework</groupId>
+            <artifactId>springloaded</artifactId>
+            <version>1.2.8.RELEASE</version>
+        </dependency>
     </dependencies>
     <build>
         <plugins>

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve ",
+    "start": "ng serve",
     "build": "ng build",
     "build:staging": "ng build --configuration staging",
     "watch": "ng build --watch --configuration development",

frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.ts

@@ -48,6 +48,7 @@ export class CheckInHistoryDialogComponent implements OnInit {
     });
     dialogRef.afterClosed().subscribe(() => {
       this.loadCheckInHistory();
+      this.refreshDataService.reloadKeyResultSubject.next();
       this.refreshDataService.markDataRefresh();
     });
   }

frontend/src/app/components/keyresult-detail/keyresult-detail.component.spec.ts

@@ -12,6 +12,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute } from '@angular/router';
 import { ScoringComponent } from '../../shared/custom/scoring/scoring.component';
 import { ConfidenceComponent } from '../confidence/confidence.component';
+import { RefreshDataService } from '../../services/refresh-data.service';
 
 const keyResultServiceMock = {
   getFullKeyResult: jest.fn(),
@@ -87,4 +88,21 @@ describe('KeyresultDetailComponent', () => {
     const button = fixture.debugElement.query(By.css('[data-testId="add-check-in"]'));
     expect(button).toBeFalsy();
   });
+
+  it('should trigger observable when subject gets next value', () => {
+    const spy = jest.spyOn(component, 'loadKeyResult');
+    const refreshDataService = TestBed.inject(RefreshDataService);
+    refreshDataService.reloadKeyResultSubject.next();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should close subscription on destroy', () => {
+    const spyNext = jest.spyOn(component.ngDestroy$, 'next');
+    const spyComplete = jest.spyOn(component.ngDestroy$, 'complete');
+
+    component.ngOnDestroy();
+
+    expect(spyNext).toHaveBeenCalled();
+    expect(spyComplete).toHaveBeenCalled();
+  });
 });

frontend/src/app/components/keyresult-detail/keyresult-detail.component.ts

@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { KeyResult } from '../../shared/types/model/KeyResult';
 import { KeyresultService } from '../../services/keyresult.service';
 import { KeyResultMetric } from '../../shared/types/model/KeyResultMetric';
 import { KeyResultOrdinal } from '../../shared/types/model/KeyResultOrdinal';
 import { CheckInHistoryDialogComponent } from '../check-in-history-dialog/check-in-history-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { BehaviorSubject, catchError, EMPTY } from 'rxjs';
+import { BehaviorSubject, catchError, EMPTY, Subject, takeUntil } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RefreshDataService } from '../../services/refresh-data.service';
 import { CloseState } from '../../shared/types/enums/CloseState';
@@ -22,10 +22,11 @@ import { ConfirmDialogComponent } from '../../shared/dialog/confirm-dialog/confi
   styleUrls: ['./keyresult-detail.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class KeyresultDetailComponent implements OnInit {
+export class KeyresultDetailComponent implements OnInit, OnDestroy {
   @Input() keyResultId!: number;
 
   keyResult$: BehaviorSubject<KeyResult> = new BehaviorSubject<KeyResult>({} as KeyResult);
+  ngDestroy$: Subject<void> = new Subject();
   isComplete: boolean = false;
   protected readonly DATE_FORMAT = DATE_FORMAT;
   protected readonly isLastCheckInNegative = isLastCheckInNegative;
@@ -41,6 +42,14 @@ export class KeyresultDetailComponent implements OnInit {
   ngOnInit(): void {
     this.keyResultId = this.getIdFromParams();
     this.loadKeyResult(this.keyResultId);
+    this.refreshDataService.reloadKeyResultSubject.pipe(takeUntil(this.ngDestroy$)).subscribe(() => {
+      this.loadKeyResult(this.keyResultId);
+    });
+  }
+
+  ngOnDestroy() {
+    this.ngDestroy$.next();
+    this.ngDestroy$.complete();
   }
 
   private getIdFromParams(): number {
@@ -181,7 +190,7 @@ export class KeyresultDetailComponent implements OnInit {
       },
     });
     dialogRef.afterClosed().subscribe(() => {
-      this.loadKeyResult(this.keyResult$.getValue().id);
+      this.refreshDataService.reloadKeyResultSubject.next();
       this.refreshDataService.markDataRefresh();
     });
   }

frontend/src/app/services/refresh-data.service.ts

@@ -7,6 +7,7 @@ import { DEFAULT_HEADER_HEIGHT_PX } from '../shared/constantLibary';
 })
 export class RefreshDataService {
   public reloadOverviewSubject: Subject<void> = new Subject();
+  public reloadKeyResultSubject: Subject<void> = new Subject();
 
   public quarterFilterReady: Subject<void> = new Subject<void>();
   public teamFilterReady: Subject<void> = new Subject<void>();