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

Author: sh-andriy

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

@@ -165,6 +165,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/registry/pages/recent-activity/registration-recent-activity.component.html

@@ -0,0 +1,38 @@
+<div class="activities p-3 flex flex-column gap-3">
+  <h2 class="mb-2">{{ 'project.overview.recentActivity.title' | translate }}</h2>
+
+  @if (!isLoading()) {
+    @if (formattedActivityLogs().length) {
+      @for (activityLog of formattedActivityLogs(); track activityLog.id) {
+        <div class="activities-activity flex justify-content-between gap-3 pb-2 align-items-center">
+          <div [innerHTML]="activityLog.formattedActivity"></div>
+          <p class="hidden activity-date sm:block text-right">
+            {{ activityLog.date | date: 'MMM d, y hh:mm a' }}
+          </p>
+        </div>
+      }
+    } @else {
+      <div class="text-center text-muted-color">
+        {{ 'project.overview.recentActivity.noActivity' | translate }}
+      </div>
+    }
+
+    @if (totalCount() > pageSize) {
+      <osf-custom-paginator
+        [showFirstLastIcon]="true"
+        [totalCount]="totalCount()"
+        [rows]="pageSize"
+        [first]="firstIndex()"
+        (pageChanged)="onPageChange($event)"
+      />
+    }
+  } @else {
+    <div class="flex flex-column gap-2">
+      <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>

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

@@ -0,0 +1,16 @@
+@use "/assets/styles/variables" as var;
+@use "/assets/styles/mixins" as mix;
+
+.activities {
+  border: 1px solid var.$grey-2;
+  border-radius: mix.rem(12px);
+  color: var.$dark-blue-1;
+
+  &-activity {
+    border-bottom: 1px solid var.$grey-2;
+
+    .activity-date {
+      width: 30%;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import { NgxsModule, Store } from '@ngxs/store';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+
+import { ClearActivityLogsStore, GetRegistrationActivityLogs } from '@shared/stores/activity-logs';
+import { ActivityLogsState } from '@shared/stores/activity-logs/activity-logs.state';
+
+import { RegistrationRecentActivityComponent } from './registration-recent-activity.component';
+
+describe('RegistrationRecentActivityComponent', () => {
+  let fixture: ComponentFixture<RegistrationRecentActivityComponent>;
+  let store: Store;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgxsModule.forRoot([ActivityLogsState]), RegistrationRecentActivityComponent],
+      providers: [{ provide: ActivatedRoute, useValue: { snapshot: { params: { id: 'reg123' } }, parent: null } }],
+    }).compileComponents();
+
+    store = TestBed.inject(Store);
+    spyOn(store, 'dispatch').and.callThrough();
+
+    fixture = TestBed.createComponent(RegistrationRecentActivityComponent);
+    fixture.detectChanges();
+  });
+
+  it('creates and dispatches initial registration logs fetch', () => {
+    expect(fixture.componentInstance).toBeTruthy();
+    expect(store.dispatch).toHaveBeenCalledWith(jasmine.any(GetRegistrationActivityLogs));
+    const action = (store.dispatch as jasmine.Spy).calls.mostRecent().args[0] as GetRegistrationActivityLogs;
+    expect(action.registrationId).toBe('reg123');
+    expect(action.page).toBe('1');
+  });
+
+  it('dispatches on page change', () => {
+    (store.dispatch as jasmine.Spy).calls.reset();
+    fixture.componentInstance.onPageChange({ page: 2 } as any);
+    expect(store.dispatch).toHaveBeenCalledWith(jasmine.any(GetRegistrationActivityLogs));
+    const action = (store.dispatch as jasmine.Spy).calls.mostRecent().args[0] as GetRegistrationActivityLogs;
+    expect(action.page).toBe('3');
+  });
+
+  it('clears store on destroy', () => {
+    (store.dispatch as jasmine.Spy).calls.reset();
+    fixture.destroy();
+    expect(store.dispatch).toHaveBeenCalledWith(jasmine.any(ClearActivityLogsStore));
+  });
+});

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

@@ -0,0 +1,73 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { PaginatorState } from 'primeng/paginator';
+import { Skeleton } from 'primeng/skeleton';
+
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, OnDestroy, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { CustomPaginatorComponent } from '@shared/components';
+import { ActivityLogDisplayService } from '@shared/services';
+import {
+  ActivityLogsSelectors,
+  ClearActivityLogsStore,
+  GetRegistrationActivityLogs,
+} from '@shared/stores/activity-logs';
+
+@Component({
+  selector: 'osf-registration-recent-activity',
+  imports: [TranslatePipe, Skeleton, DatePipe, CustomPaginatorComponent],
+  templateUrl: './registration-recent-activity.component.html',
+  styleUrl: './registration-recent-activity.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegistrationRecentActivityComponent implements OnDestroy {
+  private readonly activityLogDisplayService = inject(ActivityLogDisplayService);
+  private readonly route = inject(ActivatedRoute);
+
+  readonly pageSize = 10;
+
+  protected currentPage = signal<number>(1);
+  protected activityLogs = select(ActivityLogsSelectors.getActivityLogs);
+  protected totalCount = select(ActivityLogsSelectors.getActivityLogsTotalCount);
+  protected isLoading = select(ActivityLogsSelectors.getActivityLogsLoading);
+  protected firstIndex = computed(() => (this.currentPage() - 1) * this.pageSize);
+
+  protected actions = createDispatchMap({
+    getRegistrationActivityLogs: GetRegistrationActivityLogs,
+    clearActivityLogsStore: ClearActivityLogsStore,
+  });
+
+  protected formattedActivityLogs = computed(() => {
+    const logs = this.activityLogs();
+    return logs.map((log) => ({
+      ...log,
+      formattedActivity: this.activityLogDisplayService.getActivityDisplay(log),
+    }));
+  });
+
+  constructor() {
+    const registrationId = this.route.snapshot.params['id'] || this.route.parent?.snapshot.params['id'];
+    if (registrationId) {
+      this.actions.getRegistrationActivityLogs(registrationId, '1', String(this.pageSize));
+    }
+  }
+
+  onPageChange(event: PaginatorState) {
+    if (event.page !== undefined) {
+      const pageNumber = event.page + 1;
+      this.currentPage.set(pageNumber);
+      const registrationId = this.route.snapshot.params['id'] || this.route.parent?.snapshot.params['id'];
+      if (registrationId) {
+        this.actions.getRegistrationActivityLogs(registrationId, String(pageNumber), String(this.pageSize));
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.actions.clearActivityLogsStore();
+  }
+}

src/app/features/registry/registry.routes.ts

@@ -1,5 +1,4 @@
 import { provideStates } from '@ngxs/store';
-
 import { Routes } from '@angular/router';
 
 import { viewOnlyGuard } from '@osf/core/guards';
@@ -12,6 +11,7 @@ import {
   SubjectsState,
   ViewOnlyLinkState,
 } from '@osf/shared/stores';
+import { ActivityLogsState } from '@shared/stores/activity-logs';
 
 import { AnalyticsState } from '../analytics/store';
 import { RegistriesState } from '../registries/store';
@@ -28,7 +28,7 @@ export const registryRoutes: Routes = [
   {
     path: '',
     component: RegistryComponent,
-    providers: [provideStates([RegistryOverviewState])],
+    providers: [provideStates([RegistryOverviewState, ActivityLogsState])],
     children: [
       {
         path: '',
@@ -113,6 +113,13 @@ export const registryRoutes: Routes = [
         loadComponent: () =>
           import('./pages/registry-wiki/registry-wiki.component').then((c) => c.RegistryWikiComponent),
       },
+      {
+        path: 'recent-activity',
+        loadComponent: () =>
+          import('./pages/recent-activity/registration-recent-activity.component').then(
+            (c) => c.RegistrationRecentActivityComponent
+          ),
+      },
     ],
   },
 ];

src/app/shared/services/activity-logs/activity-logs.service.ts

@@ -33,4 +33,21 @@ export class ActivityLogsService {
       .get<JsonApiResponseWithMeta<ActivityLogJsonApi[], MetaAnonymousJsonApi, null>>(url, params)
       .pipe(map((res) => ActivityLogsMapper.fromGetActivityLogsResponse(res)));
   }
+
+  fetchRegistrationLogs(
+    registrationId: string,
+    page = '1',
+    pageSize: string
+  ): Observable<PaginatedData<ActivityLog[]>> {
+    const url = `${environment.apiUrl}/registrations/${registrationId}/logs/`;
+    const params: Record<string, unknown> = {
+      'embed[]': ['original_node', 'user', 'linked_node', 'linked_registration', 'template_node', 'group'],
+      page,
+      'page[size]': pageSize,
+    };
+
+    return this.jsonApiService
+      .get<ResponseJsonApi<ActivityLogJsonApi[]>>(url, params)
+      .pipe(map((res) => ActivityLogsMapper.fromGetActivityLogsResponse(res)));
+  }
 }

src/app/shared/stores/activity-logs/activity-logs.actions.ts

@@ -8,6 +8,15 @@ export class GetActivityLogs {
   ) {}
 }
 
+export class GetRegistrationActivityLogs {
+  static readonly type = '[ActivityLogs] Get Registration Activity Logs';
+  constructor(
+    public registrationId: string,
+    public page = '1',
+    public pageSize: string
+  ) {}
+}
+
 export class ClearActivityLogsStore {
   static readonly type = '[ActivityLogs] Clear Store';
 }

src/app/shared/stores/activity-logs/activity-logs.state.ts

@@ -6,7 +6,7 @@ import { inject, Injectable } from '@angular/core';
 
 import { ActivityLogsService } from '@shared/services';
 
-import { ClearActivityLogsStore, GetActivityLogs } from './activity-logs.actions';
+import { ClearActivityLogsStore, GetActivityLogs, GetRegistrationActivityLogs } from './activity-logs.actions';
 import { ACTIVITY_LOGS_STATE_DEFAULT, ActivityLogsStateModel } from './activity-logs.model';
 
 @State<ActivityLogsStateModel>({
@@ -42,6 +42,21 @@ export class ActivityLogsState {
     );
   }
 
+  @Action(GetRegistrationActivityLogs)
+  getRegistrationActivityLogs(ctx: StateContext<ActivityLogsStateModel>, action: GetRegistrationActivityLogs) {
+    ctx.patchState({
+      activityLogs: { data: [], isLoading: true, error: null, totalCount: 0 },
+    });
+
+    return this.activityLogsService.fetchRegistrationLogs(action.registrationId, action.page, action.pageSize).pipe(
+      tap((res) => {
+        ctx.patchState({
+          activityLogs: { data: res.data, isLoading: false, error: null, totalCount: res.totalCount },
+        });
+      })
+    );
+  }
+
   @Action(ClearActivityLogsStore)
   clearActivityLogsStore(ctx: StateContext<ActivityLogsStateModel>) {
     ctx.setState(ACTIVITY_LOGS_STATE_DEFAULT);