OZG-1389 OZG-1700 Anzeige von 404/503 Fehler in Componente

goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html

 <div data-test-class="user-profile-icon-tooltip"
-		[ngClass]="{'initials': !!userProfileStateResource.resource}"
 		[matTooltipDisabled]="disableTooltip"
-		class="user-profile" matTooltip="{{ toolTip }}" >
+		[class.initials]="userProfileStateResource.error"
+		class="user-profile" matTooltip="{{ tooltip }}" >
 
 		<ng-container *ngIf="userProfileStateResource.resource; else noUser">
 			<span data-test-id="user-profile-assigned">{{ initials }}</span>
 		</ng-container>
 		<ng-template #noUser>
-			<mat-icon data-test-id="user-profile-unassigned">account_circle_outline</mat-icon>
+			<mat-icon *ngIf="!userProfileStateResource.error" data-test-id="user-profile-unassigned">account_circle_outline</mat-icon>
+			<span *ngIf="errorMessageCode === userProfileMessageCode.USER_NOT_FOUND" data-test-id="user-profile-user-not-found">!</span>
+			<span *ngIf="errorMessageCode === userProfileMessageCode.SERVICE_UNAVAILABLE" data-test-id="user-profile-service-unavailable">?</span>
 		</ng-template>
 	<div class="picture"></div>
 </div>
\ No newline at end of file

goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { createEmptyStateResource, createStateResource } from '@goofy-client/tech-shared';
+import { createEmptyStateResource, createErrorStateResource, createStateResource, StateResource } from '@goofy-client/tech-shared';
 import { getElementFromFixture } from '@goofy-client/test-utils';
 import { createUserProfileResource } from 'libs/user-profile-shared/test/user-profile';
+import { createApiError } from '../../../../tech-shared/test/error';
 import { UserIconComponent } from './user-icon.component';
+import { UserProfileMessage, UserProfileMessageCode, UserProfileResource } from '@goofy-client/user-profile-shared';
 
 describe('UserIconComponent', () => {
 	let component: UserIconComponent;
@@ -12,9 +14,11 @@ describe('UserIconComponent', () => {
 
 	const profileAssignedIcon: string = '[data-test-id="user-profile-assigned"]';
 	const profileUnassigned: string = '[data-test-id="user-profile-unassigned"]';
+	const profileUserNotFound: string = '[data-test-id="user-profile-user-not-found"]';
+	const profileServiceUnavailable: string = '[data-test-id="user-profile-service-unavailable"]';
 
 	beforeEach(async () => {
-		await TestBed.configureTestingModule({
+		TestBed.configureTestingModule({
 			imports: [MatTooltipModule],
 			declarations: [
 				UserIconComponent,
@@ -53,5 +57,74 @@ describe('UserIconComponent', () => {
 
 			expect(element).toBeInstanceOf(HTMLElement);
 		})
+
+		it('should show user not found icon', () => {
+			component.userProfileStateResource = createErrorStateResource(createApiError());
+			component.userProfileStateResource.error.issues[0].messageCode = UserProfileMessageCode.USER_NOT_FOUND;
+
+			fixture.detectChanges();
+			const element = getElementFromFixture(fixture, profileUserNotFound);
+
+			expect(element).toBeInstanceOf(HTMLElement);
+		})
+
+		it('should show service unavailable icon', () => {
+			component.userProfileStateResource = createErrorStateResource(createApiError());
+			component.userProfileStateResource.error.issues[0].messageCode = UserProfileMessageCode.SERVICE_UNAVAILABLE;
+
+			fixture.detectChanges();
+			const element = getElementFromFixture(fixture, profileServiceUnavailable);
+
+			expect(element).toBeInstanceOf(HTMLElement);
+		})
+
+
+		describe('tooltip', () => {
+			it('should return user name', () => {
+				const userProfileStateResource = createStateResource(createUserProfileResource());
+				const expectedToolTip = userProfileStateResource.resource.firstName + ' ' + userProfileStateResource.resource.lastName;
+
+				const tooltip = component.getTooltip(userProfileStateResource);
+
+				expect(tooltip).toEqual(expectedToolTip);
+			})
+
+			it('should return no user assigned', () => {
+				const userProfileStateResource: StateResource<UserProfileResource> = createEmptyStateResource();
+
+				const tooltip = component.getTooltip(userProfileStateResource);
+
+				expect(tooltip).toEqual(UserProfileMessage.UNASSIGNED);
+			})
+
+			it('should return apiError as stateResource', () => {
+				const userProfileStateResource: StateResource<UserProfileResource> = createErrorStateResource(createApiError());
+				component.getTooltip = jest.fn();
+
+				component.getTooltip(userProfileStateResource);
+
+				expect(component.getTooltip).toHaveBeenCalledWith(userProfileStateResource);
+			})
+		});
+
+		describe('error tooltip', () => {
+			it('should return user not found', () => {
+				const userProfileStateResource: StateResource<UserProfileResource> = createErrorStateResource(createApiError());
+				userProfileStateResource.error.issues[0].messageCode = UserProfileMessageCode.USER_NOT_FOUND;
+
+				const tooltip = component.getErrorTooltip(userProfileStateResource);
+
+				expect(tooltip).toEqual(UserProfileMessage.USER_NOT_FOUND);
+			})
+
+			it('should return backend service unavailable', () => {
+				const userProfileStateResource: StateResource<UserProfileResource> = createErrorStateResource(createApiError());
+				userProfileStateResource.error.issues[0].messageCode = UserProfileMessageCode.SERVICE_UNAVAILABLE;
+
+				const tooltip = component.getErrorTooltip(userProfileStateResource);
+
+				expect(tooltip).toEqual(UserProfileMessage.SERVICE_UNAVAILABLE);
+			})
+		});
 	})
 });

goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts

 import { Component, Input, SimpleChanges } from '@angular/core';
 import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
-import { UserProfileResource } from '@goofy-client/user-profile-shared';
+import { UserProfileMessage, UserProfileMessageCode, UserProfileResource } from '@goofy-client/user-profile-shared';
+
 import { isNil } from 'lodash';
 
 @Component({
@@ -13,13 +14,12 @@ export class UserIconComponent {
 	@Input() userProfileStateResource: StateResource<UserProfileResource> = createEmptyStateResource();
 	@Input() disableTooltip: boolean = false;
 
-	readonly toolTipNoUser: string = 'kein Bearbeiter zugewiesen'
-
-	toolTip: string;
+	readonly userProfileMessageCode = UserProfileMessageCode;
+	tooltip: string = '';
 
 	ngOnChanges(changes: SimpleChanges): void {
 		if (changes.userProfileStateResource) {
-			this.toolTip = this.userProfileStateResource.resource ? this.userProfileStateResource.resource.firstName + ' ' + this.userProfileStateResource.resource.lastName : this.toolTipNoUser;
+			this.tooltip = this.getTooltip(this.userProfileStateResource);
 		}
 	}
 
@@ -27,7 +27,36 @@ export class UserIconComponent {
 		return this.getFirstLetter(this.userProfileStateResource.resource.firstName) + this.getFirstLetter(this.userProfileStateResource.resource.lastName);
 	}
 
+	public get errorMessageCode(): string {
+		return this.userProfileStateResource.error?.issues[0].messageCode ?? '';
+	}
+
 	private getFirstLetter(value: string): string {
 		return isNil(value) ? undefined : value.substr(0, 1).toUpperCase();
 	}
+
+	getTooltip(userProfileStateResource: StateResource<UserProfileResource>): string {
+		if (userProfileStateResource.resource) {
+			return userProfileStateResource.resource.firstName + ' ' + userProfileStateResource.resource.lastName;
+		}
+
+		if (userProfileStateResource.error) {
+			return this.getErrorTooltip(userProfileStateResource);
+		}
+
+		return UserProfileMessage.UNASSIGNED;
+	}
+
+	getErrorTooltip(userProfileStateResource: StateResource<UserProfileResource>): string {
+		switch (userProfileStateResource.error?.issues[0].messageCode) {
+			case UserProfileMessageCode.USER_NOT_FOUND:
+				return UserProfileMessage.USER_NOT_FOUND;
+
+			case UserProfileMessageCode.SERVICE_UNAVAILABLE:
+				return UserProfileMessage.SERVICE_UNAVAILABLE;
+
+			default:
+				return '';
+		}
+	}
 }