[ENG-9898] Recent activity improvements (#800)

- Ticket: [ENG-9898]
- Feature flag: n/a

## Purpose

Make it reusable and maintainable.

## Summary of Changes
1. Improved recent activity.

Author: nsemets

src/app/features/files/pages/files/files.component.ts

@@ -261,7 +261,7 @@ export class FilesComponent {
   );
 
   constructor() {
-    this.activeRoute.parent?.parent?.parent?.params.subscribe((params) => {
+    this.activeRoute.parent?.parent?.parent?.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
       if (params['id']) {
         this.resourceId.set(params['id']);
       }

src/app/features/project/overview/components/files-widget/files-widget.component.html

@@ -18,7 +18,7 @@ <h2>{{ 'project.overview.files.filesPreview' | translate }}</h2>
     <p-tabs [value]="currentRootFolder()?.folder?.id || ''" (valueChange)="onStorageChange($event)" scrollable>
       <p-tablist>
         @for (option of storageAddons(); track option.folder.id) {
-          <p-tab class="p-1" [value]="option.folder.id">
+          <p-tab class="p-2" [value]="option.folder.id">
             <p-button
               severity="contrast"
               variant="text"

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

@@ -0,0 +1,14 @@
+<div class="flex flex-column gap-3 border-1 surface-border border-round-xl p-2">
+  <h2 class="mb-2 px-3 pt-3" data-test="recent-activity-title">
+    {{ 'project.overview.recentActivity.title' | translate }}
+  </h2>
+
+  <osf-recent-activity-list
+    [activityLogs]="activityLogs()"
+    [isLoading]="isLoading()"
+    [totalCount]="totalCount()"
+    [pageSize]="pageSize()"
+    [firstIndex]="firstIndex()"
+    (pageChange)="onPageChange($event)"
+  />
+</div>

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

@@ -0,0 +1,199 @@
+import { Store } from '@ngxs/store';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CurrentResourceType } from '@osf/shared/enums/resource-type.enum';
+import { ActivityLogsSelectors, ClearActivityLogs } from '@osf/shared/stores/activity-logs';
+
+import { ProjectRecentActivityComponent } from './project-recent-activity.component';
+
+import { MOCK_ACTIVITY_LOGS_WITH_DISPLAY } from '@testing/mocks/activity-log-with-display.mock';
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('ProjectRecentActivityComponent', () => {
+  let component: ProjectRecentActivityComponent;
+  let fixture: ComponentFixture<ProjectRecentActivityComponent>;
+  let store: Store;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectRecentActivityComponent, OSFTestingModule],
+      providers: [
+        provideMockStore({
+          signals: [
+            { selector: ActivityLogsSelectors.getActivityLogs, value: [] },
+            { selector: ActivityLogsSelectors.getActivityLogsTotalCount, value: 0 },
+            { selector: ActivityLogsSelectors.getActivityLogsLoading, value: false },
+          ],
+        }),
+      ],
+    }).compileComponents();
+
+    store = TestBed.inject(Store);
+    jest.spyOn(store, 'dispatch');
+
+    fixture = TestBed.createComponent(ProjectRecentActivityComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should initialize with default values', () => {
+    expect(component.pageSize()).toBe(5);
+    expect(component.currentPage()).toBe(1);
+    expect(component.firstIndex()).toBe(0);
+  });
+
+  it('should dispatch GetActivityLogs when projectId is provided', () => {
+    fixture.componentRef.setInput('projectId', 'project123');
+    fixture.detectChanges();
+
+    expect(store.dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        resourceId: 'project123',
+        resourceType: CurrentResourceType.Projects,
+        page: 1,
+        pageSize: 5,
+      })
+    );
+  });
+
+  it('should not dispatch when projectId is not provided', () => {
+    fixture.detectChanges();
+
+    expect(store.dispatch).not.toHaveBeenCalled();
+  });
+
+  it('should dispatch GetActivityLogs when currentPage changes', () => {
+    fixture.componentRef.setInput('projectId', 'project123');
+    fixture.detectChanges();
+
+    (store.dispatch as jest.Mock).mockClear();
+
+    component.currentPage.set(2);
+    fixture.detectChanges();
+
+    expect(store.dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        resourceId: 'project123',
+        resourceType: CurrentResourceType.Projects,
+        page: 2,
+        pageSize: 5,
+      })
+    );
+  });
+
+  it('should update currentPage and dispatch on page change', () => {
+    fixture.componentRef.setInput('projectId', 'project123');
+    fixture.detectChanges();
+
+    (store.dispatch as jest.Mock).mockClear();
+
+    component.onPageChange({ page: 1 } as any);
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(2);
+    expect(store.dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        page: 2,
+      })
+    );
+  });
+
+  it('should not update currentPage when page is undefined', () => {
+    fixture.componentRef.setInput('projectId', 'project123');
+    fixture.detectChanges();
+
+    const initialPage = component.currentPage();
+    component.onPageChange({} as any);
+
+    expect(component.currentPage()).toBe(initialPage);
+  });
+
+  it('should compute firstIndex correctly', () => {
+    component.currentPage.set(1);
+    expect(component.firstIndex()).toBe(0);
+
+    component.currentPage.set(2);
+    expect(component.firstIndex()).toBe(5);
+
+    component.currentPage.set(3);
+    expect(component.firstIndex()).toBe(10);
+  });
+
+  it('should clear store on destroy', () => {
+    fixture.componentRef.setInput('projectId', 'project123');
+    fixture.detectChanges();
+
+    (store.dispatch as jest.Mock).mockClear();
+
+    fixture.destroy();
+
+    expect(store.dispatch).toHaveBeenCalledWith(expect.any(ClearActivityLogs));
+  });
+
+  it('should return activity logs from selector', () => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      imports: [ProjectRecentActivityComponent, OSFTestingModule],
+      providers: [
+        provideMockStore({
+          signals: [
+            { selector: ActivityLogsSelectors.getActivityLogs, value: MOCK_ACTIVITY_LOGS_WITH_DISPLAY },
+            { selector: ActivityLogsSelectors.getActivityLogsTotalCount, value: 2 },
+            { selector: ActivityLogsSelectors.getActivityLogsLoading, value: false },
+          ],
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectRecentActivityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    expect(component.activityLogs()).toEqual(MOCK_ACTIVITY_LOGS_WITH_DISPLAY);
+  });
+
+  it('should return totalCount from selector', () => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      imports: [ProjectRecentActivityComponent, OSFTestingModule],
+      providers: [
+        provideMockStore({
+          signals: [
+            { selector: ActivityLogsSelectors.getActivityLogs, value: [] },
+            { selector: ActivityLogsSelectors.getActivityLogsTotalCount, value: 10 },
+            { selector: ActivityLogsSelectors.getActivityLogsLoading, value: false },
+          ],
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectRecentActivityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    expect(component.totalCount()).toBe(10);
+  });
+
+  it('should return isLoading from selector', () => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      imports: [ProjectRecentActivityComponent, OSFTestingModule],
+      providers: [
+        provideMockStore({
+          signals: [
+            { selector: ActivityLogsSelectors.getActivityLogs, value: [] },
+            { selector: ActivityLogsSelectors.getActivityLogsTotalCount, value: 0 },
+            { selector: ActivityLogsSelectors.getActivityLogsLoading, value: true },
+          ],
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectRecentActivityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    expect(component.isLoading()).toBe(true);
+  });
+});

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

@@ -0,0 +1,54 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { PaginatorState } from 'primeng/paginator';
+
+import { ChangeDetectionStrategy, Component, computed, effect, input, OnDestroy, signal } from '@angular/core';
+
+import { RecentActivityListComponent } from '@osf/shared/components/recent-activity/recent-activity-list.component';
+import { CurrentResourceType } from '@osf/shared/enums/resource-type.enum';
+import { ActivityLogsSelectors, ClearActivityLogs, GetActivityLogs } from '@osf/shared/stores/activity-logs';
+
+@Component({
+  selector: 'osf-project-recent-activity',
+  imports: [RecentActivityListComponent, TranslatePipe],
+  templateUrl: './project-recent-activity.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProjectRecentActivityComponent implements OnDestroy {
+  projectId = input<string>();
+
+  pageSize = signal(5);
+  currentPage = signal<number>(1);
+
+  activityLogs = select(ActivityLogsSelectors.getActivityLogs);
+  totalCount = select(ActivityLogsSelectors.getActivityLogsTotalCount);
+  isLoading = select(ActivityLogsSelectors.getActivityLogsLoading);
+
+  actions = createDispatchMap({ getActivityLogs: GetActivityLogs, clearActivityLogsStore: ClearActivityLogs });
+
+  firstIndex = computed(() => (this.currentPage() - 1) * this.pageSize());
+
+  constructor() {
+    effect(() => {
+      const projectId = this.projectId();
+      const page = this.currentPage();
+
+      if (projectId) {
+        this.actions.getActivityLogs(projectId, CurrentResourceType.Projects, page, this.pageSize());
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.actions.clearActivityLogsStore();
+  }
+
+  onPageChange(event: PaginatorState) {
+    if (event.page !== undefined) {
+      const pageNumber = event.page + 1;
+      this.currentPage.set(pageNumber);
+    }
+  }
+}