visualize environment

backend/src/main/java/ch/puzzle/okr/multitenancy/customization/TenantClientCustomizationProvider.java

@@ -16,14 +16,18 @@ public class TenantClientCustomizationProvider {
     private static final String CUSTOM_STYLES_PREFIX = "okr.tenants.{0}.clientcustomization.customstyles";
     private static final String TOPBAR_BACKGROUND_COLOR = ".okr-topbar-background-color";
     private static final String BANNER_BACKGROUND_COLOR = ".okr-banner-background-color";
+    private static final String OVERVIEW_BACKGROUND_COLOR = ".okr-overview-background-color";
+    private static final String TEAM_HEADER_COLOR = ".okr-team-header-color";
+    private static final String ADD_OBJECTIVE_TEXT_COLOR = ".okr-add-objective-text-color";
+    private static final String ADD_OBJECTIVE_ICON = ".okr-add-objective-icon";
+    private static final String ADD_OBJECTIVE_OUTLINE_COLOR = ".okr-add-objective-outline-color";
 
     private final Map<String, TenantClientCustomization> tenantCustomizations = new HashMap<>();
-    private final List<String> customCssStyles = List.of(TOPBAR_BACKGROUND_COLOR, BANNER_BACKGROUND_COLOR);
+    private final List<String> customCssStyles = List.of(TOPBAR_BACKGROUND_COLOR, BANNER_BACKGROUND_COLOR,
+            OVERVIEW_BACKGROUND_COLOR, TEAM_HEADER_COLOR, ADD_OBJECTIVE_TEXT_COLOR, ADD_OBJECTIVE_ICON,
+            ADD_OBJECTIVE_OUTLINE_COLOR);
     private final Environment env;
 
-    record CssConfigItem(String cssName, String cssValue) implements Serializable {
-    }
-
     public TenantClientCustomizationProvider(final @Value("${okr.tenant-ids}") String[] tenantIds, Environment env) {
         this.env = env;
         for (String tenantId : tenantIds) {
@@ -78,4 +82,7 @@ String extractCssNameFromPropertyName(String propertyName, String tenantId) {
     private String formatWithTenant(String stringWithTenantPlaceholder, String tenantId) {
         return MessageFormat.format(stringWithTenantPlaceholder, tenantId);
     }
+
+    record CssConfigItem(String cssName, String cssValue) implements Serializable {
+    }
 }

backend/src/main/resources/application-demo.properties

@@ -1,22 +1,22 @@
 # logging level for staging
 logging.level.org.springframework=debug
-
 spring.security.oauth2.resourceserver.opaquetoken.client-id=pitc_okr_demo
-
 # flyway fill database with demo data
 spring.flyway.locations=classpath:db/migration,classpath:db/data-migration-demo,classpath:db/callback
-
-# pit client customization
-okr.tenants.pitc.clientcustomization.logo=assets/images/okr-logo.svg
+# pitc client customization
+okr.tenants.pitc.clientcustomization.logo=assets/images/okr-demo-logo.svg
 okr.tenants.pitc.clientcustomization.triangles=assets/images/triangles-okr-header.svg
 okr.tenants.pitc.clientcustomization.background-logo=assets/images/puzzle-p.svg
 okr.tenants.pitc.clientcustomization.favicon=assets/favicon.png
 okr.tenants.pitc.clientcustomization.title=Puzzle OKR
+okr.tenants.pitc.clientcustomization.helpSiteUrl=https://wiki.puzzle.ch/Puzzle/OKRs
 okr.tenants.pitc.clientcustomization.customstyles.okr-topbar-background-color=#1e5a96
 okr.tenants.pitc.clientcustomization.customstyles.okr-banner-background-color=#dcedf9
-okr.tenants.pitc.clientcustomization.helpSiteUrl=https://wiki.puzzle.ch/Puzzle/OKRs
-
-
+okr.tenants.pitc.clientcustomization.customstyles.okr-overview-background-color=#1e5a96
+okr.tenants.pitc.clientcustomization.customstyles.okr-team-header-color=#ffffff
+okr.tenants.pitc.clientcustomization.customstyles.okr-add-objective-text-color=#e5e8eb
+okr.tenants.pitc.clientcustomization.customstyles.okr-add-objective-icon=/assets/icons/new-icon-demo.svg
+okr.tenants.pitc.clientcustomization.customstyles.okr-add-objective-outline-color=#e5e8eb
 # acme client customization
 okr.tenants.acme.clientcustomization.logo=assets/images/okr-logo-acme.svg
 okr.tenants.acme.clientcustomization.triangles=assets/images/triangles-okr-acme-header.svg

backend/src/main/resources/application-dev.properties

@@ -1,27 +1,22 @@
 # show actions from entity manager
 #spring.jpa.show-sql=true
 #spring.jpa.properties.hibernate.format_sql=true
-
 # debug options
 logging.level.ch.puzzle.okr=DEBUG
 logging.level.org.springframework.security=DEBUG
 # server.servlet.context-path=/resource-server
 # flyway fill database with data
 spring.flyway.locations=classpath:db/migration,classpath:db/data-migration,classpath:db/callback
-
 # TENANT Configuration
 okr.tenant-ids=pitc,acme
 okr.datasource.driver-class-name=org.postgresql.Driver
-
 # security
 connect.src=http://localhost:8544 http://localhost:8545
-
 # hibernate
 hibernate.connection.url=jdbc:postgresql://localhost:5432/okr
 hibernate.connection.username=user
 hibernate.connection.password=pwd
 hibernate.multiTenancy=SCHEMA
-
 # pitc
 okr.tenants.pitc.datasource.url=jdbc:postgresql://localhost:5432/okr
 okr.tenants.pitc.datasource.username=pitc
@@ -31,7 +26,6 @@ [email protected]
 okr.tenants.pitc.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:8544/realms/pitc/protocol/openid-connect/certs
 okr.tenants.pitc.security.oauth2.frontend.issuer-url=http://localhost:8544/realms/pitc
 okr.tenants.pitc.security.oauth2.frontend.client-id=pitc_okr_staging
-
 # acme
 okr.tenants.acme.datasource.url=jdbc:postgresql://localhost:5432/okr
 okr.tenants.acme.datasource.username=acme
@@ -41,8 +35,7 @@ [email protected]
 okr.tenants.acme.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:8545/realms/acme/protocol/openid-connect/certs
 okr.tenants.acme.security.oauth2.frontend.issuer-url=http://localhost:8545/realms/acme
 okr.tenants.acme.security.oauth2.frontend.client-id=acme_okr_staging
-
-# pit client customization
+# pitc client customization
 okr.tenants.pitc.clientcustomization.logo=assets/images/okr-logo.svg
 okr.tenants.pitc.clientcustomization.triangles=assets/images/triangles-okr-header.svg
 okr.tenants.pitc.clientcustomization.background-logo=assets/images/puzzle-p.svg
@@ -51,7 +44,6 @@ okr.tenants.pitc.clientcustomization.title=Puzzle OKR
 okr.tenants.pitc.clientcustomization.helpSiteUrl=https://wiki.puzzle.ch/Puzzle/OKRs
 okr.tenants.pitc.clientcustomization.customstyles.okr-topbar-background-color=#1e5a96
 okr.tenants.pitc.clientcustomization.customstyles.okr-banner-background-color=#dcedf9
-
 # acme client customization
 okr.tenants.acme.clientcustomization.logo=assets/images/okr-logo-acme.svg
 okr.tenants.acme.clientcustomization.triangles=assets/images/triangles-okr-acme-header.svg

backend/src/main/resources/application-staging.properties

@@ -44,7 +44,7 @@ okr.tenants.pitc.clientcustomization.triangles=assets/images/triangles-okr-heade
 okr.tenants.pitc.clientcustomization.background-logo=assets/images/puzzle-p.svg
 okr.tenants.pitc.clientcustomization.favicon=assets/favicon.png
 okr.tenants.pitc.clientcustomization.title=Puzzle OKR
-okr.tenants.pitc.clientcustomization.customstyles.okr-topbar-background-color=#1e5a96
+okr.tenants.pitc.clientcustomization.customstyles.okr-topbar-background-color=#641e96
 okr.tenants.pitc.clientcustomization.customstyles.okr-banner-background-color=#dcedf9
 okr.tenants.pitc.clientcustomization.helpSiteUrl=https://wiki.puzzle.ch/Puzzle/OKRs
 

frontend/src/app/components/application-top-bar/application-top-bar.component.html

@@ -1,14 +1,7 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
     <a routerLink="/" queryParamsHandling="preserve" class="d-flex h-100 align-items-center ps-4">
-      <img
-        [attr.data-testId]="'logo'"
-        alt="okr-logo"
-        height="32"
-        ngSrc="{{ this.logoSrc$ | async }}"
-        width="140"
-        priority
-      />
+      <img [attr.data-testId]="'logo'" alt="okr-logo" height="32" src="{{ this.logoSrc$ | async }}" priority />
     </a>
     <div class="d-flex align-items-center me-md-5 me-1">
       <button

frontend/src/app/components/overview/overview.component.html

@@ -6,7 +6,7 @@
   >
   </app-team>
   <div *ngIf="(overviewEntities$ | async)?.length == 0" class="d-flex align-items-center flex-column pt-5 gap-5">
-    <p>Kein Team ausgewählt</p>
+    <p id="no-team-text">Kein Team ausgewählt</p>
     <img src="{{ this.backgroundLogoSrc$ | async }}" alt="Greyed out company logo" width="242" class="puzzle-logo" />
   </div>
 </div>

frontend/src/app/components/overview/overview.component.scss

@@ -1,8 +1,6 @@
-@import "../style/variables";
-
 .overview-container {
   overflow-x: hidden;
-  background-color: $overview-bg;
+  background: var(--okr-overview-background-color);
   transition: 0.5s;
 }
 
@@ -13,3 +11,6 @@
 .puzzle-logo {
   filter: invert(38%) sepia(31%) saturate(216%) hue-rotate(167deg) brightness(96%) contrast(85%);
 }
+#no-team-text {
+  color: var(--okr-team-header-color);
+}

frontend/src/app/components/team/team.component.html

@@ -1,18 +1,24 @@
-<div *ngIf="overviewEntity as OVEntity" class="bg-grey justify-content-between pt-3">
+<div *ngIf="overviewEntity as OVEntity" class="justify-content-between pt-3">
   <section class="team-header">
     <div class="d-flex align-items-center gap-2 flex-row">
       <h1 class="team-title">{{ OVEntity.team.name }}</h1>
     </div>
     <button
       (click)="createObjective()"
       *ngIf="OVEntity.writeable"
+      id="add-objective"
       [attr.data-testId]="'add-objective'"
       class="px-0 mt-1 mb-3 pe-2 h-50 align-new-icon"
       color="primary"
       mat-button
     >
-      <span class="d-flex align-items-center add-text">
-        <img alt="Add key-result button" class="add-cross-button" src="../../../assets/icons/new-icon.svg" />
+      <span id="add-objective-span" class="d-flex align-items-center add-text">
+        <img
+          alt="Add objective button"
+          class="add-cross-button"
+          [attr.data-testId]="'add-objective-icon'"
+          src="{{ addIconSrc | async }}"
+        />
         Objective hinzufügen
       </span>
     </button>
@@ -30,7 +36,6 @@ <h1 class="team-title">{{ OVEntity.team.name }}</h1>
       class="col-xs-12 col-md-6 col-xl-4 pb-3 column-width"
       id="objective-column"
     ></app-objective-column>
-
     <div *ngFor="let placeholder of [].constructor(2)" class="col-xs-12 col-md-6 col-xl-4 column-width h-0"></div>
   </div>
 </div>

frontend/src/app/components/team/team.component.scss

@@ -10,3 +10,16 @@
   align-items: center;
   justify-content: center;
 }
+
+.team-title {
+  color: var(--okr-team-header-color);
+}
+
+#add-objective-span {
+  color: var(--okr-add-objective-text-color);
+}
+
+#add-objective:hover,
+#add-objective:focus {
+  outline: 1px solid var(--okr-add-objective-outline-color);
+}

frontend/src/app/components/team/team.component.spec.ts

@@ -7,7 +7,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { MatMenuModule } from '@angular/material/menu';
 import { KeyresultComponent } from '../keyresult/keyresult.component';
 import { MatDialogModule } from '@angular/material/dialog';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { By } from '@angular/platform-browser';
 import { RefreshDataService } from '../../services/refresh-data.service';
 import { TranslateTestingModule } from 'ngx-translate-testing';
@@ -18,11 +17,30 @@ import { ConfidenceComponent } from '../confidence/confidence.component';
 import { ScoringComponent } from '../../shared/custom/scoring/scoring.component';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { DialogService } from '../../services/dialog.service';
+import { ConfigService } from '../../services/config.service';
+import { of } from 'rxjs';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 const dialogService = {
   open: jest.fn(),
 };
 
+const configServiceDefined = {
+  config$: of({
+    customStyles: {
+      'okr-add-objective-icon': 'new-icon-from-config-service.svg',
+    },
+  }),
+};
+
+const configServiceUndefined = {
+  config$: of({
+    customStyles: {
+      'okr-add-objective-icon': undefined,
+    },
+  }),
+};
+
 const refreshDataServiceMock = {
   markDataRefresh: jest.fn(),
 };
@@ -37,7 +55,6 @@ describe('TeamComponent', () => {
         RouterTestingModule,
         MatMenuModule,
         MatDialogModule,
-        HttpClientTestingModule,
         MatTooltipModule,
         TranslateTestingModule.withTranslations({
           de: de,
@@ -50,10 +67,15 @@ describe('TeamComponent', () => {
           provide: DialogService,
           useValue: dialogService,
         },
+        {
+          provide: ConfigService,
+          useValue: configServiceDefined,
+        },
         {
           provide: RefreshDataService,
           useValue: refreshDataServiceMock,
         },
+        provideHttpClient(withInterceptorsFromDi()),
       ],
     })
       .overrideComponent(TeamComponent, {
@@ -85,4 +107,49 @@ describe('TeamComponent', () => {
     const button = fixture.debugElement.query(By.css('[data-testId="add-objective"]'));
     expect(button).toBeFalsy();
   });
+
+  it('should set value of addIconSrc if src from config service is defined', () => {
+    expect(component.addIconSrc.value).toBe('new-icon-from-config-service.svg');
+    const addObjectiveIcon = fixture.debugElement.query(By.css('[data-testId="add-objective-icon"]'));
+    expect(addObjectiveIcon.attributes['src']).toBe('new-icon-from-config-service.svg');
+  });
+});
+
+describe('TeamComponent undefined values in config service', () => {
+  let component: TeamComponent;
+  let fixture: ComponentFixture<TeamComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        MatMenuModule,
+        TranslateTestingModule.withTranslations({
+          de: de,
+        }),
+      ],
+      declarations: [TeamComponent],
+      providers: [
+        {
+          provide: ConfigService,
+          useValue: configServiceUndefined,
+        },
+        provideHttpClient(withInterceptorsFromDi()),
+      ],
+    })
+      .overrideComponent(TeamComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(TeamComponent);
+    component = fixture.componentInstance;
+    component.overviewEntity = overViewEntity1;
+    fixture.detectChanges();
+  });
+
+  it('should keep default value of addIconSrc if src from config service is undefined', () => {
+    expect(component.addIconSrc.value).toBe('assets/icons/new-icon.svg');
+    const addObjectiveIcon = fixture.debugElement.query(By.css('[data-testId="add-objective-icon"]'));
+    expect(addObjectiveIcon.attributes['src']).toBe('assets/icons/new-icon.svg');
+  });
 });

frontend/src/app/components/team/team.component.ts

@@ -6,26 +6,34 @@ import { Objective } from '../../shared/types/model/Objective';
 import { KeyresultDialogComponent } from '../keyresult-dialog/keyresult-dialog.component';
 import { ObjectiveMin } from '../../shared/types/model/ObjectiveMin';
 import { DialogService } from '../../services/dialog.service';
+import { ConfigService } from '../../services/config.service';
+import { ClientConfig } from '../../shared/types/model/ClientConfig';
+import { BehaviorSubject, first } from 'rxjs';
 
 @Component({
   selector: 'app-team',
   templateUrl: './team.component.html',
   styleUrls: ['./team.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TeamComponent implements OnInit {
+export class TeamComponent {
   @Input({ required: true })
   public overviewEntity!: OverviewEntity;
+  addIconSrc: BehaviorSubject<string> = new BehaviorSubject('assets/icons/new-icon.svg');
 
   constructor(
     private dialogService: DialogService,
     private refreshDataService: RefreshDataService,
-  ) {}
+    private configService: ConfigService,
+  ) {
+    this.configService.config$.pipe(first()).subscribe((config: ClientConfig) => {
+      const configuredIconSrc = config.customStyles['okr-add-objective-icon'];
+      if (configuredIconSrc) this.addIconSrc.next(configuredIconSrc);
+    });
+  }
 
   trackByObjectiveId: TrackByFunction<ObjectiveMin> = (index, objective) => objective.id;
 
-  ngOnInit(): void {}
-
   createObjective() {
     const matDialogRef = this.dialogService.open(ObjectiveFormComponent, {
       data: {