Feat(ENG-8625): add Recent Activity to registrations (#315)

* feat(registration-recent-activity): add Recent Activity to registrations

* feat(registration-recent-activity): code fixes regarding comments

* feat(registration-recent-activity): second round of code fixes regarding review comments

* feat(registration-recent-activity): run lint fix

Author: sh-andriy

src/app/core/constants/environment.token.ts

@@ -1,8 +1,10 @@
 import { InjectionToken } from '@angular/core';
 
+import { AppEnvironment } from '@shared/models/environment.model';
+
 import { environment } from 'src/environments/environment';
 
-export const ENVIRONMENT = new InjectionToken<typeof environment>('App Environment', {
+export const ENVIRONMENT = new InjectionToken<AppEnvironment>('App Environment', {
   providedIn: 'root',
-  factory: () => environment,
+  factory: () => environment as AppEnvironment,
 });

src/app/core/constants/nav-items.constant.ts

@@ -171,6 +171,13 @@ export const REGISTRATION_MENU_ITEMS: MenuItem[] = [
     visible: true,
     routerLinkActiveOptions: { exact: false },
   },
+  {
+    id: 'registration-recent-activity',
+    label: 'navigation.recentActivity',
+    routerLink: 'recent-activity',
+    visible: true,
+    routerLinkActiveOptions: { exact: true },
+  },
 ];
 
 export const MENU_ITEMS: MenuItem[] = [

src/app/features/project/overview/components/recent-activity/recent-activity.component.spec.ts

@@ -1,22 +1,100 @@
+import { provideStore, Store } from '@ngxs/store';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { of } from 'rxjs';
+
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+
+import { ActivityLogDisplayService } from '@shared/services';
+import { GetActivityLogs } from '@shared/stores/activity-logs';
+import { ActivityLogsState } from '@shared/stores/activity-logs/activity-logs.state';
 
 import { RecentActivityComponent } from './recent-activity.component';
 
 describe('RecentActivityComponent', () => {
-  let component: RecentActivityComponent;
   let fixture: ComponentFixture<RecentActivityComponent>;
+  let store: Store;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [RecentActivityComponent],
+      providers: [
+        provideStore([ActivityLogsState]),
+
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+
+        {
+          provide: TranslateService,
+          useValue: {
+            instant: (k: string) => k,
+            get: () => of(''),
+            stream: () => of(''),
+            onLangChange: of({}),
+            onDefaultLangChange: of({}),
+            onTranslationChange: of({}),
+          },
+        },
+
+        { provide: ActivatedRoute, useValue: { snapshot: { params: { id: 'proj123' } }, parent: null } },
+        { provide: ActivityLogDisplayService, useValue: { getActivityDisplay: jest.fn().mockReturnValue('FMT') } },
+      ],
     }).compileComponents();
 
+    store = TestBed.inject(Store);
+    store.reset({
+      activityLogs: {
+        activityLogs: { data: [], isLoading: false, error: null, totalCount: 0 },
+      },
+    } as any);
+
     fixture = TestBed.createComponent(RecentActivityComponent);
-    component = fixture.componentInstance;
+    fixture.componentRef.setInput('pageSize', 10);
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it('formats activity logs using ActivityLogDisplayService', () => {
+    store.reset({
+      activityLogs: {
+        activityLogs: {
+          data: [{ id: 'log1', date: '2024-01-01T00:00:00Z' }],
+          isLoading: false,
+          error: null,
+          totalCount: 1,
+        },
+      },
+    } as any);
+
+    fixture.detectChanges();
+
+    const formatted = fixture.componentInstance.formattedActivityLogs();
+    expect(formatted.length).toBe(1);
+    expect(formatted[0].formattedActivity).toBe('FMT');
+  });
+
+  it('dispatches GetActivityLogs with numeric page and pageSize on page change', () => {
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+    fixture.componentInstance.onPageChange({ page: 2 } as any);
+
+    expect(dispatchSpy).toHaveBeenCalled();
+    const action = dispatchSpy.mock.calls.at(-1)?.[0] as GetActivityLogs;
+
+    expect(action).toBeInstanceOf(GetActivityLogs);
+    expect(action.projectId).toBe('proj123');
+    expect(action.page).toBe(3);
+    expect(action.pageSize).toBe(10);
+  });
+
+  it('computes firstIndex correctly', () => {
+    fixture.componentInstance['currentPage'].set(3);
+    expect(fixture.componentInstance['firstIndex']()).toBe(20);
   });
 });

src/app/features/project/overview/components/recent-activity/recent-activity.component.ts

@@ -26,14 +26,14 @@ export class RecentActivityComponent {
 
   readonly pageSize = input.required<number>();
   currentPage = signal<number>(1);
+
   activityLogs = select(ActivityLogsSelectors.getActivityLogs);
   totalCount = select(ActivityLogsSelectors.getActivityLogsTotalCount);
   isLoading = select(ActivityLogsSelectors.getActivityLogsLoading);
+
   firstIndex = computed(() => (this.currentPage() - 1) * this.pageSize());
 
-  actions = createDispatchMap({
-    getActivityLogs: GetActivityLogs,
-  });
+  actions = createDispatchMap({ getActivityLogs: GetActivityLogs });
 
   formattedActivityLogs = computed(() => {
     const logs = this.activityLogs();
@@ -50,7 +50,7 @@ export class RecentActivityComponent {
 
       const projectId = this.route.snapshot.params['id'] || this.route.parent?.snapshot.params['id'];
       if (projectId) {
-        this.actions.getActivityLogs(projectId, pageNumber.toString(), this.pageSize().toString());
+        this.actions.getActivityLogs(projectId, pageNumber, this.pageSize());
       }
     }
   }

src/app/features/project/overview/project-overview.component.spec.ts

@@ -1,26 +1,71 @@
-import { MockComponent } from 'ng-mocks';
+import { provideStore, Store } from '@ngxs/store';
 
+import { TranslateService } from '@ngx-translate/core';
+
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { of } from 'rxjs';
+
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 
-import { SubHeaderComponent } from '@osf/shared/components';
+import { DataciteService, ToastService } from '@osf/shared/services';
+import { GetActivityLogs } from '@shared/stores/activity-logs';
 
 import { ProjectOverviewComponent } from './project-overview.component';
 
 describe('ProjectOverviewComponent', () => {
-  let component: ProjectOverviewComponent;
   let fixture: ComponentFixture<ProjectOverviewComponent>;
+  let component: ProjectOverviewComponent;
+  let store: Store;
 
   beforeEach(async () => {
+    TestBed.overrideComponent(ProjectOverviewComponent, { set: { template: '' } });
+
     await TestBed.configureTestingModule({
-      imports: [ProjectOverviewComponent, MockComponent(SubHeaderComponent)],
+      imports: [ProjectOverviewComponent, RouterTestingModule],
+      providers: [
+        provideStore([]),
+
+        { provide: ActivatedRoute, useValue: { snapshot: { params: { id: 'proj123' } }, parent: null } },
+
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+
+        { provide: DataciteService, useValue: {} },
+        { provide: DialogService, useValue: { open: () => ({ onClose: of(null) }) } },
+        { provide: TranslateService, useValue: { instant: (k: string) => k } },
+        { provide: ToastService, useValue: { showSuccess: jest.fn() } },
+      ],
     }).compileComponents();
 
+    store = TestBed.inject(Store);
     fixture = TestBed.createComponent(ProjectOverviewComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('dispatches GetActivityLogs with numeric page and pageSize on init', () => {
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    jest.spyOn(component as any, 'setupDataciteViewTrackerEffect').mockReturnValue(of(null));
+
+    component.ngOnInit();
+
+    const actions = dispatchSpy.mock.calls.map((c) => c[0]);
+    const activityAction = actions.find((a) => a instanceof GetActivityLogs) as GetActivityLogs;
+
+    expect(activityAction).toBeDefined();
+    expect(activityAction.projectId).toBe('proj123');
+    expect(activityAction.page).toBe(1);
+    expect(activityAction.pageSize).toBe(5);
+    expect(typeof activityAction.page).toBe('number');
+    expect(typeof activityAction.pageSize).toBe('number');
+  });
 });

src/app/features/project/overview/project-overview.component.ts

@@ -244,7 +244,7 @@ export class ProjectOverviewComponent extends DataciteTrackerComponent implement
       this.actions.getHomeWiki(ResourceType.Project, projectId);
       this.actions.getComponents(projectId);
       this.actions.getLinkedProjects(projectId);
-      this.actions.getActivityLogs(projectId, this.activityDefaultPage.toString(), this.activityPageSize.toString());
+      this.actions.getActivityLogs(projectId, this.activityDefaultPage, this.activityPageSize);
       this.setupDataciteViewTrackerEffect().subscribe();
     }
   }

src/app/features/registry/pages/recent-activity/registration-recent-activity.component.html

@@ -0,0 +1,50 @@
+<div
+  class="p-3 flex flex-column gap-3 border-1 surface-border border-round-xl text-color"
+  role="region"
+  aria-labelledby="recent-activity-title"
+>
+  <h2 id="recent-activity-title" class="mb-2" data-test="recent-activity-title">
+    {{ 'project.overview.recentActivity.title' | translate }}
+  </h2>
+
+  @if (!isLoading()) {
+    <div role="list" data-test="recent-activity-list">
+      @for (activityLog of formattedActivityLogs(); track activityLog.id) {
+        <div
+          class="flex justify-content-between gap-3 pb-2 align-items-center border-bottom-1 surface-border"
+          role="listitem"
+          data-test="recent-activity-item"
+        >
+          <div [innerHTML]="activityLog.formattedActivity" data-test="recent-activity-item-content"></div>
+
+          <p class="hidden sm:block text-right white-space-nowrap flex-shrink-0" data-test="recent-activity-item-date">
+            {{ activityLog.date | date: 'MMM d, y hh:mm a' }}
+          </p>
+        </div>
+      } @empty {
+        <div class="text-center text-muted-color" role="status" aria-live="polite" data-test="recent-activity-empty">
+          {{ 'project.overview.recentActivity.noActivity' | translate }}
+        </div>
+      }
+    </div>
+
+    @if (totalCount() > pageSize) {
+      <osf-custom-paginator
+        data-test="recent-activity-paginator"
+        [showFirstLastIcon]="true"
+        [totalCount]="totalCount()"
+        [rows]="pageSize"
+        [first]="firstIndex()"
+        (pageChanged)="onPageChange($event)"
+      />
+    }
+  } @else {
+    <div class="flex flex-column gap-2" data-test="recent-activity-skeleton">
+      <p-skeleton width="100%" height="2rem" />
+      <p-skeleton width="100%" height="2rem" />
+      <p-skeleton width="100%" height="2rem" />
+      <p-skeleton width="100%" height="2rem" />
+      <p-skeleton width="100%" height="2rem" />
+    </div>
+  }
+</div>