[ENG-10047] Display Affiliated Institution(s) on User Profile Page (#859)

- Ticket: https://openscience.atlassian.net/browse/ENG-10047
- Feature flag: n/a

## Purpose

User profile pages do not currently display a user’s affiliated institution(s), even when the user has active institutional affiliations set in OSF. This makes it difficult for others to understand a user’s institutional context and reduces the visibility of institutional participation on the platform.


## Summary of Changes

Implement affiliated Institution(s) on User Profile Page showing

Author: mkovalua

src/app/features/profile/components/profile-information/profile-information.component.html

@@ -35,6 +35,25 @@ <h1>{{ currentUser()?.fullName }}</h1>
         }
       </div>
 
+      <div class="flex flex-wrap align-items-center gap-3">
+        @for (institution of currentUserInstitutions(); track $index) {
+          <a
+            class="cursor-pointer custom-light-hover"
+            [routerLink]="['/institutions', institution.id]"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              [ngSrc]="institution.assets.logo"
+              class="fit-contain"
+              width="80"
+              height="80"
+              [alt]="institution.name"
+            />
+          </a>
+        }
+      </div>
+
       @if (!isMedium() && showEdit()) {
         <div class="btn-full-width">
           <p-button

src/app/features/profile/components/profile-information/profile-information.component.spec.ts

@@ -7,12 +7,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { EducationHistoryComponent } from '@osf/shared/components/education-history/education-history.component';
 import { EmploymentHistoryComponent } from '@osf/shared/components/employment-history/employment-history.component';
 import { IS_MEDIUM } from '@osf/shared/helpers/breakpoints.tokens';
+import { Institution } from '@shared/models/institutions/institutions.models';
 import { SocialModel } from '@shared/models/user/social.model';
 import { UserModel } from '@shared/models/user/user.models';
 
 import { ProfileInformationComponent } from './profile-information.component';
 
 import { MOCK_USER } from '@testing/mocks/data.mock';
+import { MOCK_INSTITUTION } from '@testing/mocks/institution.mock';
 import { MOCK_EDUCATION, MOCK_EMPLOYMENT } from '@testing/mocks/user-employment-education.mock';
 import { OSFTestingModule } from '@testing/osf.testing.module';
 
@@ -44,6 +46,7 @@ describe('ProfileInformationComponent', () => {
   it('should initialize with default inputs', () => {
     expect(component.currentUser()).toBeUndefined();
     expect(component.showEdit()).toBe(false);
+    expect(component.currentUserInstitutions()).toBeUndefined();
   });
 
   it('should accept user input', () => {
@@ -172,4 +175,28 @@ describe('ProfileInformationComponent', () => {
     component.toProfileSettings();
     expect(component.editProfile.emit).toHaveBeenCalled();
   });
+
+  it('should accept currentUserInstitutions input', () => {
+    const mockInstitutions: Institution[] = [MOCK_INSTITUTION];
+    fixture.componentRef.setInput('currentUserInstitutions', mockInstitutions);
+    fixture.detectChanges();
+    expect(component.currentUserInstitutions()).toEqual(mockInstitutions);
+  });
+
+  it('should not render institution logos when currentUserInstitutions is undefined', () => {
+    fixture.componentRef.setInput('currentUserInstitutions', undefined);
+    fixture.detectChanges();
+    const logos = fixture.nativeElement.querySelectorAll('img.fit-contain');
+    expect(logos.length).toBe(0);
+  });
+
+  it('should render institution logos when currentUserInstitutions is provided', () => {
+    const institutions: Institution[] = [MOCK_INSTITUTION];
+    fixture.componentRef.setInput('currentUserInstitutions', institutions);
+    fixture.detectChanges();
+
+    const logos = fixture.nativeElement.querySelectorAll('img.fit-contain');
+    expect(logos.length).toBe(institutions.length);
+    expect(logos[0].alt).toBe(institutions[0].name);
+  });
 });

src/app/features/profile/components/profile-information/profile-information.component.ts

@@ -5,13 +5,15 @@ import { Button } from 'primeng/button';
 import { DatePipe, NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { RouterLink } from '@angular/router';
 
 import { EducationHistoryComponent } from '@osf/shared/components/education-history/education-history.component';
 import { EmploymentHistoryComponent } from '@osf/shared/components/employment-history/employment-history.component';
 import { SOCIAL_LINKS } from '@osf/shared/constants/social-links.const';
 import { IS_MEDIUM } from '@osf/shared/helpers/breakpoints.tokens';
 import { UserModel } from '@osf/shared/models/user/user.models';
 import { SortByDatePipe } from '@osf/shared/pipes/sort-by-date.pipe';
+import { Institution } from '@shared/models/institutions/institutions.models';
 
 import { mapUserSocials } from '../../helpers';
 
@@ -25,13 +27,16 @@ import { mapUserSocials } from '../../helpers';
     DatePipe,
     NgOptimizedImage,
     SortByDatePipe,
+    RouterLink,
   ],
   templateUrl: './profile-information.component.html',
   styleUrl: './profile-information.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileInformationComponent {
   currentUser = input<UserModel | null>();
+
+  currentUserInstitutions = input<Institution[]>();
   showEdit = input(false);
   editProfile = output<void>();
 

src/app/features/profile/profile.component.html

@@ -13,7 +13,12 @@
           </ng-template>
         </p-message>
       }
-      <osf-profile-information [currentUser]="user()" [showEdit]="isMyProfile()" (editProfile)="toProfileSettings()" />
+      <osf-profile-information
+        [currentUserInstitutions]="institutions() || []"
+        [currentUser]="user()"
+        [showEdit]="isMyProfile()"
+        (editProfile)="toProfileSettings()"
+      />
     </div>
 
     @if (defaultSearchFiltersInitialized()) {

src/app/features/profile/profile.component.ts

@@ -25,6 +25,7 @@ import { SEARCH_TAB_OPTIONS } from '@osf/shared/constants/search-tab-options.con
 import { ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { UserModel } from '@osf/shared/models/user/user.models';
 import { SetDefaultFilterValue } from '@osf/shared/stores/global-search';
+import { FetchUserInstitutions, InstitutionsSelectors } from '@shared/stores/institutions';
 
 import { ProfileInformationComponent } from './components';
 import { FetchUserProfile, ProfileSelectors, SetUserProfile } from './store';
@@ -46,11 +47,13 @@ export class ProfileComponent implements OnInit, OnDestroy {
     fetchUserProfile: FetchUserProfile,
     setDefaultFilterValue: SetDefaultFilterValue,
     setUserProfile: SetUserProfile,
+    fetchUserInstitutions: FetchUserInstitutions,
   });
 
   loggedInUser = select(UserSelectors.getCurrentUser);
   userProfile = select(ProfileSelectors.getUserProfile);
   isUserLoading = select(ProfileSelectors.isUserProfileLoading);
+  institutions = select(InstitutionsSelectors.getUserInstitutions);
 
   resourceTabOptions = SEARCH_TAB_OPTIONS.filter((x) => x.value !== ResourceType.Agent);
 
@@ -67,6 +70,8 @@ export class ProfileComponent implements OnInit, OnDestroy {
     } else if (currentUser) {
       this.setupMyProfile(currentUser);
     }
+
+    this.actions.fetchUserInstitutions(userId || currentUser?.id);
   }
 
   ngOnDestroy(): void {

src/app/features/settings/account-settings/store/account-settings.actions.ts

@@ -24,6 +24,8 @@ export class DeleteExternalIdentity {
 
 export class GetUserInstitutions {
   static readonly type = '[AccountSettings] Get User Institutions';
+
+  constructor(public userId = 'me') {}
 }
 
 export class DeleteUserInstitution {

src/app/features/settings/account-settings/store/account-settings.state.ts

@@ -84,8 +84,8 @@ export class AccountSettingsState {
   }
 
   @Action(GetUserInstitutions)
-  getUserInstitutions(ctx: StateContext<AccountSettingsStateModel>) {
-    return this.institutionsService.getUserInstitutions().pipe(
+  getUserInstitutions(ctx: StateContext<AccountSettingsStateModel>, action: GetUserInstitutions) {
+    return this.institutionsService.getUserInstitutions(action.userId).pipe(
       tap((userInstitutions) => ctx.patchState({ userInstitutions })),
       catchError((error) => throwError(() => error))
     );

src/app/shared/components/add-project-form/add-project-form.component.spec.ts

@@ -9,11 +9,11 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { UserSelectors } from '@core/store/user';
 import { ProjectFormControls } from '@osf/shared/enums/create-project-form-controls.enum';
 import { CustomValidators } from '@osf/shared/helpers/custom-form-validators.helper';
-import { ProjectModel } from '@osf/shared/models/projects';
 import { InstitutionsSelectors } from '@osf/shared/stores/institutions';
 import { ProjectsSelectors } from '@osf/shared/stores/projects';
 import { RegionsSelectors } from '@osf/shared/stores/regions';
 import { ProjectForm } from '@shared/models/projects/create-project-form.model';
+import { ProjectModel } from '@shared/models/projects/projects.models';
 
 import { AffiliatedInstitutionSelectComponent } from '../affiliated-institution-select/affiliated-institution-select.component';
 import { ProjectSelectorComponent } from '../project-selector/project-selector.component';

src/app/shared/services/institutions.service.ts

@@ -47,8 +47,8 @@ export class InstitutionsService {
       .pipe(map((response) => InstitutionsMapper.fromResponseWithMeta(response)));
   }
 
-  getUserInstitutions(): Observable<Institution[]> {
-    const url = `${this.apiUrl}/users/me/institutions/`;
+  getUserInstitutions(userId: string): Observable<Institution[]> {
+    const url = `${this.apiUrl}/users/${userId}/institutions/`;
 
     return this.jsonApiService
       .get<InstitutionsJsonApiResponse>(url)

src/app/shared/stores/institutions/institutions.actions.ts

@@ -3,6 +3,7 @@ import { Institution } from '@shared/models/institutions/institutions.models';
 
 export class FetchUserInstitutions {
   static readonly type = '[Institutions] Fetch User Institutions';
+  constructor(public userId = 'me') {}
 }
 
 export class FetchInstitutions {