chore(intranet-header-workspace): remove user image logic (#4667) (#4821)

Co-authored-by: Alizé Debray <[email protected]>

Author: myrta2302

.changeset/gentle-shoes-joke.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-intranet-header': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Removed the user profile image from the intranet header due to loading issues from SharePoint, which were causing missing image errors. The header now displays a default user avatar.

packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx

@@ -20,14 +20,26 @@ import PostComponentDemoLink from '@/shared/post-component-demo-link.mdx';
 
 <div className="alert alert-info alert-md">
   <h2 className="alert-heading">Angular only component</h2>
-  <p>The intranet header is an <a href="//Angular.io">Angular</a> component, as such it only works
-    within Angular projects.</p>
+  <p>
+    The intranet header is an <a href="//Angular.io">Angular</a> component, as such it only works
+    within Angular projects.
+  </p>
 </div>
 
 The Header Angular component for internal usage.
 
 For installation and usage see the <a href="/?path=/docs/7068be42-1a20-4a34-9e79-7fb7f9f2940f--docs">intranet-header package getting started page</a>
 
+<div className="alert alert-warning mb-4">
+  <h2 className="alert-heading">User profile image removed</h2>
+  <p>
+    With the new profile image URL now pointing to SharePoint, the image would not load unless the
+    user had already authenticated against SharePoint in the browser. To address this issue, the
+    logic for individual user profile images was temporarily removed, and the default avatar image
+    is displayed instead.
+  </p>
+</div>
+
 ## Examples
 
 <PostTabs>
@@ -36,15 +48,15 @@ For installation and usage see the <a href="/?path=/docs/7068be42-1a20-4a34-9e79
     <Source code={SampleNavigationBar} language="html" />
   </PostTabPanel>
 
-  <PostTabHeader panel="headerWithCustomUserMenu">Header with a custom user menu</PostTabHeader>
-  <PostTabPanel name="headerWithCustomUserMenu">
-    <Source code={SampleSideUserMenuDropdown} language="html" />
-  </PostTabPanel>
+<PostTabHeader panel="headerWithCustomUserMenu">Header with a custom user menu</PostTabHeader>
+<PostTabPanel name="headerWithCustomUserMenu">
+  <Source code={SampleSideUserMenuDropdown} language="html" />
+</PostTabPanel>
 
-  <PostTabHeader panel="headerSideNavigation">Header with a side navigation</PostTabHeader>
-  <PostTabPanel name="headerSideNavigation">
-    <Source code={SampleSideNavigation} language="html" />
-  </PostTabPanel>
+<PostTabHeader panel="headerSideNavigation">Header with a side navigation</PostTabHeader>
+<PostTabPanel name="headerSideNavigation">
+  <Source code={SampleSideNavigation} language="html" />
+</PostTabPanel>
 
   <PostTabHeader panel="headerPostweb">"Postweb" intranet header</PostTabHeader>
   <PostTabPanel name="headerPostweb">

packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts

@@ -33,8 +33,8 @@ const meta: MetaComponent = {
         "The email address of the currently logged on user, used to display the user's profile picture." +
         '<p class="alert alert-info alert-sm">By default, a fallback image is displayed.</p>' +
         '<div class="mt-3 alert alert-warning alert-sm">' +
-        '<div class="alert-heading">The required input value has recently changed</div>' +
-        '<p>Due to the technical conversion of the intranet backend from Sitecore to Sharepoint, the value required for the property to display a user image has changed. Previously the user ID was required, now this property expects the user-specific e-mail address.</p>' +
+        '<div class="alert-heading">Temporary removal of user specific profile image</div>' +
+        '<p>Due to the technical conversion of the intranet backend from Sitecore to Sharepoint, this property has been changed to use the user-specific email address instead of a user ID to display the user image. However, the image would only load if the user had already authenticated against SharePoint in the browser. To address this issue, the logic for individual user profile images has been temporarily removed and thus the `currentUserId` is not currently used.</p>' +
         '</div>',
       control: 'text',
       table: {

packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts

@@ -6,14 +6,12 @@ import {
   Input,
   LOCALE_ID,
   NgZone,
-  OnChanges,
   OnInit,
   SecurityContext,
-  SimpleChanges,
   TemplateRef,
   ViewChild,
 } from '@angular/core';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { NavigationStart, Router } from '@angular/router';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 import { fromEvent, Subject } from 'rxjs';
@@ -25,7 +23,7 @@ import { userImage } from './user';
   templateUrl: './swisspost-intranet-header.component.html',
   styleUrls: ['./swisspost-intranet-header.component.scss'],
 })
-export class SwissPostIntranetHeaderComponent implements OnInit, OnChanges, AfterViewInit {
+export class SwissPostIntranetHeaderComponent implements OnInit, AfterViewInit {
   @Input() siteTitle: string = '';
   @Input() languages = 'de,fr,it,en';
   @Input() currentUserId: string = '';
@@ -45,7 +43,7 @@ export class SwissPostIntranetHeaderComponent implements OnInit, OnChanges, Afte
   optionDropdownElement!: ElementRef<HTMLElement>;
 
   appLangs!: string[];
-  avatarUrl = this.createSafeAvatarUrl();
+  avatarUrl = userImage;
   openedMenu = false;
   openedLangChooser = false;
   openedMenuOverflow = false;
@@ -127,12 +125,6 @@ export class SwissPostIntranetHeaderComponent implements OnInit, OnChanges, Afte
     }
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['currentUserId']) {
-      this.avatarUrl = this.createSafeAvatarUrl();
-    }
-  }
-
   ngAfterViewInit(): void {
     // this check is needed, because it would add another element when a link from within "#overflow" is clicked
     if (this.dom.nativeElement.querySelector('#more') == null) {
@@ -333,14 +325,6 @@ export class SwissPostIntranetHeaderComponent implements OnInit, OnChanges, Afte
     return this.lang.toLowerCase() === lang.toLowerCase();
   }
 
-  private createSafeAvatarUrl(): SafeUrl {
-    return this.currentUserId === ''
-      ? userImage
-      : `https://postchag.sharepoint.com/_layouts/15/userphoto.aspx?size=S&username=${encodeURIComponent(
-          this.currentUserId,
-        )}`;
-  }
-
   private updateMoreElementText() {
     const languageField = this.dom.nativeElement.querySelector('#more > span');