Merge pull request #590 from puzzle/feature/569-check-in

Resolve ux bugs of checkIn

frontend/cypress/e2e/checkIn.cy.ts

@@ -173,7 +173,6 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains('5/10');
       cy.getByTestId('check-in-metric-value').clear().type('200');
       cy.getByTestId('confidence-slider').realMouseDown();
-      cy.getByTestId('check-in-next').click();
       cy.contains('Here we are');
       cy.contains('A cat would be great');
       cy.getByTestId('changeInfo').clear().type('We bought a new sheep');
@@ -217,7 +216,6 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains('6/10');
       cy.getByTestId('stretch-radio').click();
       cy.getByTestId('confidence-slider').realMouseDown();
-      cy.getByTestId('check-in-next').click();
       cy.contains('There is a new car');
       cy.contains('Buy now a new pool');
       cy.getByTestId('changeInfo').clear().type('We bought a new dog');
@@ -233,17 +231,16 @@ describe('OKR Check-in e2e tests', () => {
 
 function checkForDialogTextMetric() {
   cy.contains('Very important keyresult');
-  cy.contains('Check-in erfassen (1/2)');
+  cy.contains('Check-in erfassen');
   cy.contains('Key Result');
   cy.contains('Aktueller Wert');
   cy.contains('Confidence um Target (42.7%) zu erreichen');
-  cy.contains('Weiter');
   cy.contains('Abbrechen');
 }
 
 function checkForDialogTextOrdinal() {
   cy.contains('A new ordinal keyresult for our company');
-  cy.contains('Check-in erfassen (1/2)');
+  cy.contains('Check-in erfassen');
   cy.contains('Key Result');
   cy.contains('Zone (Commit / Target / Stretch) noch nicht erreicht ');
   cy.contains('Commit:');
@@ -253,7 +250,6 @@ function checkForDialogTextOrdinal() {
   cy.contains('New house');
   cy.contains('New pool');
   cy.contains('Confidence um Target zu erreichen');
-  cy.contains('Weiter');
   cy.contains('Abbrechen');
 }
 

frontend/cypress/e2e/scoring.cy.ts

@@ -22,10 +22,9 @@ describe('Scoring component e2e tests', () => {
       cy.getByTestId('key-result-metric-value').clear().type(String(value));
       cy.getByTestId('confidence-slider').click();
       cy.realPress('{rightarrow}').realPress('{rightarrow}').realPress('{rightarrow}');
-      cy.getByTestId('check-in-next').click();
       cy.getByTestId('changeInfo').click().type('Testveränderungen');
       cy.getByTestId('initiatives').click().type('Testmassnahmen');
-      cy.getByTestId('create-checkin').click();
+      cy.getByTestId('submit-check-in').click();
       const percentage = getPercentageMetric(baseline, stretchgoal, value);
       cy.validateScoring(false, percentage);
       cy.getByTestId('close-drawer').click();
@@ -41,10 +40,9 @@ describe('Scoring component e2e tests', () => {
       cy.getByTestId(`${zoneName}-radio`).click();
       cy.getByTestId('confidence-slider').click();
       cy.realPress('{rightarrow}').realPress('{rightarrow}').realPress('{rightarrow}');
-      cy.getByTestId('check-in-next').click();
       cy.getByTestId('changeInfo').click().type('Testveränderungen');
       cy.getByTestId('initiatives').click().type('Testmassnahmen');
-      cy.getByTestId('create-checkin').click();
+      cy.getByTestId('submit-check-in').click();
       const percentage = getPercentageOrdinal(zoneName);
       cy.validateScoring(false, percentage);
       cy.getByTestId('close-drawer').click();

frontend/cypress/support/commands.ts

@@ -49,7 +49,6 @@ Cypress.Commands.add(
   (currentValue: number, shouldChangeConfidence: boolean, changeInfo: string | null, initiatives: string | null) => {
     cy.getByTestId('check-in-metric-value').clear().type(currentValue.toString());
     changeConfidence(shouldChangeConfidence);
-    cy.getByTestId('check-in-next').click();
     if (changeInfo) {
       cy.getByTestId('changeInfo').clear().type(changeInfo!);
     }
@@ -83,7 +82,6 @@ Cypress.Commands.add(
         break;
     }
     changeConfidence(shouldChangeConfidence);
-    cy.getByTestId('check-in-next').click();
     if (changeInfo) {
       cy.getByTestId('changeInfo').clear().type(changeInfo!);
     }

frontend/src/app/app.module.ts

@@ -50,7 +50,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { CheckInFormMetricComponent } from './shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component';
 import { UnitValueTransformationPipe } from './shared/pipes/unit-value-transformation/unit-value-transformation.pipe';
 import { CheckInFormOrdinalComponent } from './shared/dialog/checkin/check-in-form-ordinal/check-in-form-ordinal.component';
-import { CheckInBaseInformationsComponent } from './shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component';
 import { CustomInputComponent } from './shared/custom/custom-input/custom-input.component';
 import { ConfirmDialogComponent } from './shared/dialog/confirm-dialog/confirm-dialog.component';
 import { CheckInFormComponent } from './shared/dialog/checkin/check-in-form/check-in-form.component';
@@ -121,7 +120,6 @@ export const MY_FORMATS = {
     CheckInFormMetricComponent,
     UnitValueTransformationPipe,
     CheckInFormOrdinalComponent,
-    CheckInBaseInformationsComponent,
     CustomInputComponent,
     CheckInFormComponent,
     UnitLabelTransformationPipe,

frontend/src/app/confidence/confidence.component.html

@@ -1,4 +1,8 @@
-<div class="d-flex align-items-center justify-content-center bg-inherit" id="confidence" *ngIf="checkIn.confidence">
+<div
+  class="d-flex align-items-center justify-content-start bg-inherit w-100"
+  id="confidence"
+  *ngIf="checkIn.confidence"
+>
   <div class="bg-inherit" [ngClass]="edit ? 'keyResult-attribute-edit' : 'keyResult-attribute-show'">
     <p [ngClass]="edit ? 'fw-normal' : 'fw-bold'" class="text-black" data-testid="confidence">
       {{ checkIn.confidence }}/{{ max }}

frontend/src/app/confidence/confidence.component.scss

@@ -14,7 +14,8 @@ p {
 }
 
 mat-slider {
-  min-width: 350px;
+  width: 100%;
+  max-width: 350px;
 }
 
 .bg-light-gray {

frontend/src/app/keyresult-detail/keyresult-detail.component.html

@@ -24,11 +24,7 @@
 
         <span class="text-small d-flex align-items-center flex-column">
           Confidence
-          <app-confidence
-            [checkIn]="keyResult.lastCheckIn!"
-            [edit]="false"
-            class="bg-keyResult-detail-attribute"
-          ></app-confidence>
+          <app-confidence [checkIn]="keyResult.lastCheckIn!" [edit]="false" class="bg-display-element"></app-confidence>
         </span>
       </div>
 

frontend/src/app/keyresult-detail/keyresult-detail.component.scss

@@ -1,7 +1,7 @@
 @import "_variables";
 
 .keyResult-detail-attribute-show {
-  background-color: $keyResult-detail-attribute-bg;
+  background-color: $show-element;
   height: 100%;
   font-size: 0.85rem;
 }

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

@@ -34,7 +34,9 @@ export class KeyresultDetailComponent implements OnInit {
     private refreshDataService: RefreshDataService,
     private dialog: MatDialog,
     private router: Router,
-  ) {}
+  ) {
+    this.refreshDataService.reloadOverviewSubject.subscribe(() => this.loadKeyResult());
+  }
 
   ngOnInit(): void {
     this.loadKeyResult();
@@ -69,7 +71,6 @@ export class KeyresultDetailComponent implements OnInit {
       width: '721px',
     });
     dialogRef.afterClosed().subscribe(() => {
-      this.loadKeyResult();
       this.refreshDataService.markDataRefresh();
     });
   }

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

@@ -7,6 +7,7 @@ import { KeyResult } from '../../types/model/KeyResult';
 import { CheckInFormComponent } from '../checkin/check-in-form/check-in-form.component';
 import { Observable, of } from 'rxjs';
 import { KeyResultMetric } from '../../types/model/KeyResultMetric';
+import { RefreshDataService } from '../../services/refresh-data.service';
 
 @Component({
   selector: 'app-check-in-history-dialog',
@@ -24,6 +25,7 @@ export class CheckInHistoryDialogComponent implements OnInit {
     private checkInService: CheckInService,
     private dialog: MatDialog,
     public dialogRef: MatDialogRef<CheckInHistoryDialogComponent>,
+    private refreshDataService: RefreshDataService,
   ) {}
 
   ngOnInit(): void {
@@ -42,6 +44,7 @@ export class CheckInHistoryDialogComponent implements OnInit {
     });
     dialogRef.afterClosed().subscribe(() => {
       this.loadCheckInHistory();
+      this.refreshDataService.markDataRefresh();
     });
   }