refactor styles of dialogs (#1072)

* add jar debug dev tools only on profile * change log levels * try to fix autorestart of spring * rename intelij config and change log level of spring to debug in staging config * rename folder * use external profile to disable formatter * remove backend/pom.xml from branch * refactor styles of dialogs * remove useless tabindex * refactor styling of dialog-content and dialog-actions * refactor dialog header * clean up * fix invite members test * change default width of dialog * set cypress viewport * remove it.only from cy tests * use diffrent classes for default and small dialogs * remove useless config * clean up styling * remove scroll-shaddow * change height sizing strategie * refactor styling of keyresult edit component * introduce dialog-template-core-component * create base template for dialogs * align close button * comment in dialog component * fix scrolling of dialog * refactor kr-type-form * finish styling of kr-type select * fix scrolling by setting height of action buttons * clean up dialog content size * clean up styles.scss * refactor styles * refactor styles of generic component * move core component to shared module * fix design because of scrollbar * change keyresult type tabs to butotns * delete cancel dialog and refactor related files * refactor confirm dialog component to use template dialog core * refactor styling * refactor style of okr-label * refactor example dialog * refactor objective form component to use template dialog core * refactor objective form dialog * refactor dialog width * refactor keyresult component * fix responsive dialog * refactor objective complete dialog * clean up * refactor objective form component * minder out * fix objective form component * use priority to fetch logos * refactor dialog history compoennt * add spinner to dialog core * refactor dialog history component * refactor check-in componentn * refactor metric check in component * clean up keyresult dialog * clean up * fix kr type component * finish dialog refactoring * remove header component * refactor css classes * refactor styling * insert okr-form-label-input-container * fix dialog service tests * fix jest of objective form compoennt * fix tests of keyresult form * fix pom * fix tests of add-edit team dialog * fix tests keyresult-dialog tests * fix tests of complete dialog * fix jest tests * readd cancel button for check-in create * fix check-in e2e tests * fix e2e tests * remove only from cypress tests * fix teammanagement e2e test * fix duplicate scorring * clean up check-in tests * fix objective duplicate tests * clean up * clean up styles * create a dialog-data-show class * fix check in metric * fix keyresult type * clean up * implement todo --------- Co-authored-by: peggimann <[email protected]>
puzzle · Nov 6, 2024 · 56caefd · 56caefd
1 parent edd0dee
commit 56caefd
Show file tree

Hide file tree

Showing 81 changed files with 1,015 additions and 1,189 deletions.
diff --git a/backend/src/main/resources/application-staging.properties b/backend/src/main/resources/application-staging.properties
@@ -1,5 +1,7 @@
 # logging level for staging
-logging.level.org.springframework=debug
+logging.level.ch.puzzle.okr=DEBUG
+#logging.level.org.flywaydb.core=DEBUG
+
 
 connect.src=http://localhost:8544 http://localhost:8545
 

diff --git a/frontend/cypress/e2e/checkIn.cy.ts b/frontend/cypress/e2e/checkIn.cy.ts
@@ -163,12 +163,12 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains(getCurrentDate());
       cy.contains('Wert: 30%');
       cy.contains('Wert: 50%');
-      cy.contains('Confidence: 5 / 10');
-      cy.contains('Confidence: 6 / 10');
-      cy.contains('Veränderungen: We bought a new house');
-      cy.contains('Veränderungen: This was a good idea');
-      cy.contains('Massnahmen: We have to buy more PCs');
-      cy.contains('Massnahmen: Will be difficult');
+      checkForAttribute('Confidence:', '5 / 10');
+      checkForAttribute('Confidence:', '6 / 10');
+      checkForAttribute('Veränderungen:', 'We bought a new house');
+      checkForAttribute('Veränderungen:', 'This was a good idea');
+      checkForAttribute('Massnahmen:', 'We have to buy more PCs');
+      checkForAttribute('Massnahmen:', 'Will be difficult');
       cy.contains('Schliessen');
     });
 
@@ -312,7 +312,7 @@ describe('OKR Check-in e2e tests', () => {
       cy.wait('@getKeyResultsAfterSave');
 
       cy.getByTestId('add-check-in').first().click();
-      cy.get('#old-value label + div').contains('10 %');
+      cy.contains('Letzter Wert').siblings('div').contains('10 %');
     });
   });
 });
@@ -359,3 +359,7 @@ function getCurrentDate() {
 
   return dd_str + '.' + mm_str + '.' + yyyy;
 }
+
+function checkForAttribute(title: string, value: string) {
+  cy.get('mat-dialog-container').contains(value).parent().should('contain', title);
+}
diff --git a/frontend/cypress/e2e/duplicated-scoring.cy.ts b/frontend/cypress/e2e/duplicated-scoring.cy.ts
@@ -9,7 +9,10 @@ describe('e2e test for scoring adjustment on objective duplicate', () => {
   });
 
   it('Create ordinal checkin and validate value of scoring component', () => {
+    cy.intercept('POST', '**/keyresults').as('createKeyresult');
     cy.createOrdinalKeyresult('stretch keyresult for testing', null);
+    cy.wait('@createKeyresult');
+    cy.contains('stretch keyresult for testing');
     cy.getByTestId('keyresult').get(':contains("stretch keyresult for testing")').last().click();
     cy.getByTestId('add-check-in').click();
     cy.getByTestId(`stretch-radio`).click();
@@ -26,7 +29,7 @@ describe('e2e test for scoring adjustment on objective duplicate', () => {
     cy.visit('/?quarter=3');
 
     let scoringBlock1 = cy
-      .getByTestId('objective')
+      .get('.objective:contains("A duplicated Objective for this tool")')
       .first()
       .getByTestId('key-result')
       .first()

diff --git a/frontend/cypress/e2e/keyresult.cy.ts b/frontend/cypress/e2e/keyresult.cy.ts
@@ -294,7 +294,7 @@ describe('OKR Overview', () => {
     cy.getByTestId('edit-keyResult').click();
 
     cy.getByTestId('delete-keyResult').click();
-    cy.getByTestId('confirmYes').click();
+    cy.getByTestId('confirm-yes').click();
 
     cy.contains('Puzzle ITC');
     cy.get('A keyresult to delete').should('not.exist');

diff --git a/frontend/cypress/e2e/objective.cy.ts b/frontend/cypress/e2e/objective.cy.ts
@@ -30,7 +30,7 @@ describe('OKR Objective e2e tests', () => {
           .click();
         cy.contains('Objective veröffentlichen');
         cy.contains('Soll dieses Objective veröffentlicht werden?');
-        cy.getByTestId('confirmYes').click();
+        cy.getByTestId('confirm-yes').click();
         cy.getByTestId('objective')
           .filter(':contains(A objective in state draft)')
           .last()

diff --git a/frontend/cypress/e2e/tab.cy.ts b/frontend/cypress/e2e/tab.cy.ts
@@ -416,7 +416,7 @@ describe('Tab workflow tests', () => {
         cy.tabForwardUntil('[data-testId="add-action-plan-line"]');
         cy.tabBackward();
         cy.realPress('Enter');
-        cy.tabForwardUntil('[data-testId="confirmYes"]');
+        cy.tabForwardUntil('[data-testId="confirm-yes"]');
         cy.realPress('Enter');
         cy.tabForward();
         cy.tabForwardUntil('[data-testId="submit"]');

diff --git a/frontend/cypress/e2e/teammanagement.cy.ts b/frontend/cypress/e2e/teammanagement.cy.ts
@@ -44,8 +44,8 @@ describe('Team management tests', () => {
       cy.getByTestId('remove-from-member-list').click();
 
       // dialog
-      cy.contains(`Jaya Norris wirklich aus Team ${teamName} entfernen?`);
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.contains(`Möchtest du Jaya Norris wirklich aus dem Team '${teamName}' entfernen?`);
+      cy.getByTestId('confirm-yes').click();
 
       cy.wait('@removeUser');
 
@@ -60,8 +60,8 @@ describe('Team management tests', () => {
       cy.getByTestId('remove-from-member-list').click();
 
       // cancel dialog
-      cy.contains(`Jaya Norris wirklich aus Team ${teamName} entfernen?`);
-      cy.getByTestId('cancelDialog-cancel').click();
+      cy.contains(`Möchtest du Jaya Norris wirklich aus dem Team '${teamName}' entfernen?`);
+      cy.getByTestId('confirm-no').click();
 
       cy.get('@removeUser.all').then((interceptions) => {
         expect(interceptions).to.have.length(0);
@@ -96,14 +96,18 @@ describe('Team management tests', () => {
       cy.getByTestId('teamDeleteButton').click();
 
       // cancel dialog => cancel
-      cy.contains(`${teamName} wirklich löschen?`);
-      cy.getByTestId('cancelDialog-cancel').click();
+      cy.contains(
+        `Möchtest du das Team '${teamName}' wirklich löschen? Zugehörige Objectives werden dadurch in allen Quartalen ebenfalls gelöscht!`,
+      );
+      cy.getByTestId('confirm-no').click();
 
       // try again and confirm dialog
       cy.getByTestId('teamMoreButton').click();
       cy.getByTestId('teamDeleteButton').click();
-      cy.contains(`${teamName} wirklich löschen?`);
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.contains(
+        `Möchtest du das Team '${teamName}' wirklich löschen? Zugehörige Objectives werden dadurch in allen Quartalen ebenfalls gelöscht!`,
+      );
+      cy.getByTestId('confirm-yes').click();
 
       cy.wait(['@saveTeam', '@getUsers']);
 
@@ -149,6 +153,10 @@ describe('Team management tests', () => {
         const firstNameStefan = uniqueSuffix('Stefan');
 
         cy.getByTestId('invite-member').click();
+        cy.wait(1000); // wait for dialog to open
+        cy.tabForward();
+        cy.contains('Members registrieren');
+
         fillOutNewUser(firstNameClaudia, 'Meier', mailUserClaudia);
         cy.tabForward();
         cy.tabForward();
@@ -305,7 +313,7 @@ describe('Team management tests', () => {
 
       // add findus peterson
       cy.getByTestId('search-member-to-add').click().type('Find', { delay: 1 });
-      cy.get(matOption).contains('Findus Peterson').click();
+      cy.contains(matOption, 'Findus Peterson').click();
 
       // add robin papierer
       cy.getByTestId('search-member-to-add').click();
@@ -336,6 +344,7 @@ describe('Team management tests', () => {
             return;
           }
           $row.find(`[data-testId='edit-role']`).click();
+          cy.wait(500); // wait for dialog to open
         })
         .then(() => {
           cy.getByTestId('select-team-role').click();
@@ -356,7 +365,7 @@ describe('Team management tests', () => {
     it('should remove BBT membership of findus', () => {
       navigateToUser('Findus Peterson');
       cy.getByTestId('delete-team-member').click();
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.getByTestId('confirm-yes').click();
       cy.get('app-member-detail').contains('/BBT').should('not.exist');
     });
 
@@ -365,12 +374,12 @@ describe('Team management tests', () => {
 
       navigateToUser(nameEsha);
       cy.getByTestId('delete-team-member').eq(0).click();
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.getByTestId('confirm-yes').click();
 
       cy.wait('@removeUser');
 
       cy.getByTestId('delete-team-member').eq(0).click();
-      cy.getByTestId('cancelDialog-confirm').click();
+      cy.getByTestId('confirm-yes').click();
       cy.get('app-member-detail').should('not.contain', '/BBT').and('not.contain', 'LoremIpsum');
     });
 

diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts
@@ -1,6 +1,7 @@
 import { validateScoring } from './scoringSupport';
 
 Cypress.Commands.add('loginAsUser', (user: any) => {
+  cy.viewport(1920, 1080);
   loginWithCredentials(user.username, user.password);
   overviewIsLoaded();
 });

diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -1,12 +1,3 @@
-.okr-label {
-  margin-left: 35px;
-}
-
-.overview-item {
-  margin-right: 20px;
-  margin-left: 50px;
-}
-
 app-application-top-bar {
   z-index: 1001;
   position: relative;

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -166,9 +166,9 @@ export const MY_FORMATS = {
     MatChipsModule,
     CdkDropList,
     CdkDrag,
-    SharedModule,
     A11yModule,
     CdkDragHandle,
+    SharedModule,
   ],
   providers: [
     {

diff --git a/frontend/src/app/callback/callback.component.html b/frontend/src/app/callback/callback.component.html
diff --git a/frontend/src/app/callback/callback.component.ts b/frontend/src/app/callback/callback.component.ts
diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -1,11 +1,11 @@
-<div class="d-flex flex-column gap-2 col-12">
-  <label for="actionlist" class="text-black">Action Plan (optional)</label>
+<div class="okr-form-row okr-form-label-input-container">
+  <label for="actionlist" class="okr-form-label">Action Plan (optional)</label>
   <div
     cdkDropList
     *ngIf="control?.getValue()"
     [cdkDropListData]="control | async"
     (keydown.enter)="preventAddingNewItems($event)"
-    class="d-flex flex-column gap-2"
+    class="okr-form-col d-flex flex-column gap-2"
     (cdkDropListDropped)="drop($event)"
     id="actionlist"
   >
@@ -42,11 +42,11 @@
     </div>
   </div>
 
-  <section class="add-action-button">
+  <section class="okr-form-row mx-0">
     <button
       mat-button
       color="primary"
-      class="fw-bold"
+      class="fw-bold col-auto"
       [attr.data-testId]="'add-action-plan-line'"
       (click)="addNewAction()"
     >

diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.html b/frontend/src/app/components/application-top-bar/application-top-bar.component.html
@@ -1,7 +1,7 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
     <span class="d-flex h-100 align-items-center ps-4">
-      <img alt="okr-logo" height="32" ngSrc="{{ this.logoSrc$ | async }}" width="140" />
+      <img alt="okr-logo" height="32" ngSrc="{{ this.logoSrc$ | async }}" width="140" priority />
     </span>
     <div class="d-flex align-items-center me-md-5 me-1">
       <button

diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
@@ -1,57 +1,55 @@
-<div class="ps-4 pt-3 pe-4">
-  <app-dialog-header [dialogTitle]="'Check-in History'"></app-dialog-header>
-  <div
-    class="d-flex justify-content-start flex-column gap-4 text-black dialog-content overflow-y-scroll text-break mt-3"
-    tabindex="-1"
-  >
-    <ng-container
-      *ngIf="(checkInHistory$ | async)?.length! > 0 && (checkInHistory$ | async) as checkInHistory; else spinner"
-    >
-      <div
-        *ngFor="let checkIn of checkInHistory; index as i"
-        class="d-flex flex-column dialog-form-fields p-2 check-in-box"
-      >
-        <div class="d-flex flex-row">
-          <span class="w-50 d-flex align-items-center me-1 fw-bold mt-2 mb-2">{{
-            checkIn.createdOn | date: DATE_FORMAT
-          }}</span>
-          <div class="w-50 d-flex justify-content-end align-items-center">
+<app-dialog-template-core [observable]="checkInHistory$" [title]="'Check-in History'">
+  <ng-container content>
+    <ng-container *ngIf="(checkInHistory$ | async)?.length! > 0 && (checkInHistory$ | async) as checkInHistory">
+      <div *ngFor="let checkIn of checkInHistory; index as i" class="bg-display-element p-1 okr-form-row">
+        <div class="col okr-form-label">
+          <div class="okr-form-row justify-content-between">
+            <span class="fw-bold col-auto">
+              {{ checkIn.createdOn | date: DATE_FORMAT }}
+            </span>
+
             <button
-              class="d-flex align-items-center justify-content-center edit-check-in-button"
+              class="col-auto"
               mat-icon-button
               (click)="openCheckInDialogForm(checkIn)"
               *ngIf="!isComplete && checkIn.writeable"
               [attr.data-testId]="'edit-check-in'"
             >
-              <img class="edit-check-in cursor-pointer m-1" src="../../assets/icons/edit.svg" alt="edit check-in" />
+              <img ngSrc="assets/icons/edit.svg" alt="edit check-in" width="24" height="24" />
             </button>
           </div>
-        </div>
-        <div class="d-flex flex-row mb-1">
-          <div class="w-50 d-flex justify-content-start">
-            <span *ngIf="keyResult.keyResultType === 'metric'"
-              ><i>Wert: </i>{{ getMetricKeyResult().unit | unitLabelTransformation }}
-              {{ +checkIn.value! | unitValueTransformation: getMetricKeyResult().unit }}</span
-            >
-            <span *ngIf="keyResult.keyResultType === 'ordinal'"><i>Wert: </i>{{ checkIn.value }}</span>
+          <div class="okr-form-row row-cols-4">
+            <h4 class="col-auto">Wert:</h4>
+            <div class="col">
+              <ng-container *ngIf="keyResult.keyResultType === 'metric'">
+                {{ getMetricKeyResult().unit | unitLabelTransformation }}
+                {{ +checkIn.value! | unitValueTransformation: getMetricKeyResult().unit }}
+              </ng-container>
+              <ng-container *ngIf="keyResult.keyResultType === 'ordinal'">
+                {{ checkIn.value }}
+              </ng-container>
+            </div>
+            <h4 class="col-auto">Confidence:</h4>
+            <div class="col">{{ checkIn.confidence }} / 10</div>
           </div>
-          <div class="w-50 d-flex justify-content-start">
-            <span><i>Confidence: </i>{{ checkIn.confidence }} / 10</span>
+
+          <div class="okr-form-row justify-content-between" *ngIf="checkIn.changeInfo !== ''">
+            <h4 class="col-3">Veränderungen:</h4>
+            <span class="col linebreak">{{ checkIn.changeInfo }}</span>
+          </div>
+
+          <div class="okr-form-row justify-content-between row-cols-2" *ngIf="checkIn.initiatives !== ''">
+            <h4 class="col-3">Massnahmen:</h4>
+            <span class="col flex-fill linebreak">{{ checkIn.initiatives }}</span>
           </div>
-        </div>
-        <div class="d-flex flex-row w-100 text-wrap mb-1" *ngIf="checkIn.changeInfo !== ''">
-          <span class="label-width"><i>Veränderungen: </i></span>
-          <span class="value-width linebreak">{{ checkIn.changeInfo }}</span>
-        </div>
-        <div class="d-flex flex-row w-100 text-wrap" *ngIf="checkIn.initiatives !== ''">
-          <span class="label-width"><i>Massnahmen: </i></span>
-          <span class="value-width linebreak">{{ checkIn.initiatives }}</span>
         </div>
       </div>
     </ng-container>
-  </div>
-  <button class="close-button" mat-flat-button color="primary" mat-dialog-close>Schliessen</button>
-  <ng-template #spinner>
-    <app-spinner text="Check-in history wird geladen..."></app-spinner>
-  </ng-template>
-</div>
+  </ng-container>
+
+  <ng-container actions>
+    <div class="col-auto">
+      <button mat-flat-button color="primary" mat-dialog-close>Schliessen</button>
+    </div>
+  </ng-container>
+</app-dialog-template-core>