[ENG-9632] Optimize project initial load (#749)

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

## Summary of Changes
1. Optimized initial loading for project overview.
2. Updated meta tags for project.
3. Add unit tests.

Author: nsemets

jest.config.js

@@ -69,10 +69,8 @@ module.exports = {
   testPathIgnorePatterns: [
     '<rootDir>/src/environments',
     '<rootDir>/src/app/app.config.ts',
-    '<rootDir>/src/app/app.routes.ts',
     '<rootDir>/src/app/features/files/pages/file-detail',
     '<rootDir>/src/app/features/project/addons/',
-    '<rootDir>/src/app/features/project/overview/',
     '<rootDir>/src/app/features/project/registrations',
     '<rootDir>/src/app/features/project/wiki',
     '<rootDir>/src/app/features/registry/components',

src/app/core/constants/ngxs-states.constant.ts

@@ -4,7 +4,6 @@ import { UserEmailsState } from '@core/store/user-emails';
 import { InstitutionsAdminState } from '@osf/features/admin-institutions/store';
 import { FilesState } from '@osf/features/files/store';
 import { MetadataState } from '@osf/features/metadata/store';
-import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { AddonsState } from '@osf/shared/stores/addons';
 import { BannersState } from '@osf/shared/stores/banners';
 import { ContributorsState } from '@osf/shared/stores/contributors';
@@ -26,7 +25,6 @@ export const STATES = [
   InstitutionsState,
   InstitutionsAdminState,
   InstitutionsSearchState,
-  ProjectOverviewState,
   WikiState,
   LicensesState,
   RegionsState,

src/app/core/services/help-scout.service.spec.ts

@@ -14,7 +14,7 @@ describe('HelpScoutService', () => {
       if (selector === UserSelectors.isAuthenticated) {
         return authSignal;
       }
-      return signal(null); // fallback
+      return signal(null);
     }),
   };
   let service: HelpScoutService;

src/app/features/analytics/analytics.component.spec.ts

@@ -17,7 +17,6 @@ import { ViewOnlyLinkMessageComponent } from '@osf/shared/components/view-only-l
 import { IS_WEB } from '@osf/shared/helpers/breakpoints.tokens';
 
 import { MOCK_ANALYTICS_METRICS, MOCK_RELATED_COUNTS } from '@testing/mocks/analytics.mock';
-import { MOCK_RESOURCE_OVERVIEW } from '@testing/mocks/resource.mock';
 import { OSFTestingModule } from '@testing/osf.testing.module';
 import { ActivatedRouteMockBuilder } from '@testing/providers/route-provider.mock';
 import { RouterMockBuilder } from '@testing/providers/router-provider.mock';
@@ -29,7 +28,7 @@ describe('Component: Analytics', () => {
   let routerMock: ReturnType<RouterMockBuilder['build']>;
   let activatedRouteMock: ReturnType<ActivatedRouteMockBuilder['build']>;
 
-  const resourceId = MOCK_RESOURCE_OVERVIEW.id;
+  const resourceId = 'ex212';
   const metrics = { ...MOCK_ANALYTICS_METRICS, id: resourceId };
   const relatedCounts = { ...MOCK_RELATED_COUNTS, id: resourceId };
   const metricsSelector = AnalyticsSelectors.getMetrics(resourceId);
@@ -60,13 +59,6 @@ describe('Component: Analytics', () => {
       ],
       providers: [
         provideMockStore({
-          selectors: [
-            { selector: metricsSelector, value: metrics },
-            { selector: relatedCountsSelector, value: relatedCounts },
-            { selector: AnalyticsSelectors.isMetricsLoading, value: false },
-            { selector: AnalyticsSelectors.isRelatedCountsLoading, value: false },
-            { selector: AnalyticsSelectors.isMetricsError, value: false },
-          ],
           signals: [
             { selector: metricsSelector, value: metrics },
             { selector: relatedCountsSelector, value: relatedCounts },

src/app/features/analytics/components/view-duplicates/view-duplicates.component.html

@@ -59,7 +59,7 @@ <h2 class="flex align-items-center gap-2">
               <p>{{ duplicate.dateModified | date: 'MMM d, y, h:mm a' }}</p>
             </div>
 
-            <div class="flex flex-wrap align-items-center gap-1">
+            <div class="flex align-items-start gap-1">
               <span class="font-bold">{{ 'common.labels.contributors' | translate }}:</span>
 
               <osf-contributors-list [contributors]="duplicate.bibliographicContributors ?? []"></osf-contributors-list>

src/app/features/analytics/components/view-duplicates/view-duplicates.component.spec.ts

@@ -100,13 +100,13 @@ describe('Component: View Duplicates', () => {
   it('should update currentPage when page is defined', () => {
     const event: PaginatorState = { page: 1 } as PaginatorState;
     component.onPageChange(event);
-    expect(component.currentPage()).toBe('2');
+    expect(component.currentPage()).toBe(2);
   });
 
   it('should not update currentPage when page is undefined', () => {
-    component.currentPage.set('5');
+    component.currentPage.set(5);
     const event: PaginatorState = { page: undefined } as PaginatorState;
     component.onPageChange(event);
-    expect(component.currentPage()).toBe('5');
+    expect(component.currentPage()).toBe(5);
   });
 });

src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts

@@ -23,7 +23,8 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { UserSelectors } from '@core/store/user';
-import { DeleteComponentDialogComponent, ForkDialogComponent } from '@osf/features/project/overview/components';
+import { DeleteComponentDialogComponent } from '@osf/features/project/overview/components/delete-component-dialog/delete-component-dialog.component';
+import { ForkDialogComponent } from '@osf/features/project/overview/components/fork-dialog/fork-dialog.component';
 import { ClearProjectOverview, GetProjectById, ProjectOverviewSelectors } from '@osf/features/project/overview/store';
 import { ClearRegistry, GetRegistryById, RegistrySelectors } from '@osf/features/registry/store/registry';
 import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
@@ -39,23 +40,21 @@ import { LoaderService } from '@osf/shared/services/loader.service';
 import { GetResourceWithChildren } from '@osf/shared/stores/current-resource';
 import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates } from '@osf/shared/stores/duplicates';
 import { BaseNodeModel } from '@shared/models/nodes/base-node.model';
-import { ToolbarResource } from '@shared/models/toolbar-resource.model';
 
 @Component({
   selector: 'osf-view-duplicates',
   imports: [
-    SubHeaderComponent,
-    TranslatePipe,
     Button,
     Menu,
+    RouterLink,
+    IconComponent,
+    SubHeaderComponent,
     TruncatedTextComponent,
-    DatePipe,
     LoadingSpinnerComponent,
-    RouterLink,
     CustomPaginatorComponent,
-    IconComponent,
     ContributorsListComponent,
     DatePipe,
+    TranslatePipe,
   ],
   templateUrl: './view-duplicates.component.html',
   styleUrl: './view-duplicates.component.scss',
@@ -69,8 +68,6 @@ export class ViewDuplicatesComponent {
   private destroyRef = inject(DestroyRef);
   private project = select(ProjectOverviewSelectors.getProject);
   private registration = select(RegistrySelectors.getRegistry);
-  private isProjectAnonymous = select(ProjectOverviewSelectors.isProjectAnonymous);
-  private isRegistryAnonymous = select(RegistrySelectors.isRegistryAnonymous);
 
   duplicates = select(DuplicatesSelectors.getDuplicates);
   isDuplicatesLoading = select(DuplicatesSelectors.getDuplicatesLoading);
@@ -80,8 +77,8 @@ export class ViewDuplicatesComponent {
   readonly pageSize = 10;
   readonly UserPermissions = UserPermissions;
 
-  currentPage = signal<string>('1');
-  firstIndex = computed(() => (parseInt(this.currentPage()) - 1) * this.pageSize);
+  currentPage = signal<number>(1);
+  firstIndex = computed(() => (this.currentPage() - 1) * this.pageSize);
 
   readonly forkActionItems = (resourceId: string) => [
     {
@@ -142,33 +139,13 @@ export class ViewDuplicatesComponent {
       const resource = this.currentResource();
 
       if (resource) {
-        this.actions.getDuplicates(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);
+        this.actions.getDuplicates(resource.id, resource.type, this.currentPage(), this.pageSize);
       }
     });
 
     this.setupCleanup();
   }
 
-  toolbarResource = computed(() => {
-    const resource = this.currentResource();
-    const resourceType = this.resourceType();
-    if (resource && resourceType) {
-      const isAnonymous =
-        resourceType === ResourceType.Project ? this.isProjectAnonymous() : this.isRegistryAnonymous();
-
-      return {
-        id: resource.id,
-        isPublic: resource.isPublic,
-        storage: undefined,
-        viewOnlyLinksCount: 0,
-        forksCount: resource.forksCount,
-        resourceType: resourceType,
-        isAnonymous,
-      } as ToolbarResource;
-    }
-    return null;
-  });
-
   showMoreOptions(duplicate: BaseNodeModel) {
     return (
       duplicate.currentUserPermissions.includes(UserPermissions.Admin) ||
@@ -191,32 +168,29 @@ export class ViewDuplicatesComponent {
   }
 
   handleForkResource(): void {
-    const toolbarResource = this.toolbarResource();
+    const currentResource = this.currentResource();
 
-    if (toolbarResource) {
+    if (currentResource) {
       this.customDialogService
         .open(ForkDialogComponent, {
           header: 'project.overview.dialog.fork.headerProject',
           width: '450px',
           data: {
-            resource: toolbarResource,
+            resourceId: currentResource.id,
             resourceType: this.resourceType(),
           },
         })
         .onClose.subscribe((result) => {
           if (result?.success) {
-            const resource = this.currentResource();
-            if (resource) {
-              this.actions.getDuplicates(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);
-            }
+            this.actions.getDuplicates(currentResource.id, currentResource.type, this.currentPage(), this.pageSize);
           }
         });
     }
   }
 
   onPageChange(event: PaginatorState): void {
     if (event.page !== undefined) {
-      const pageNumber = (event.page + 1).toString();
+      const pageNumber = event.page + 1;
       this.currentPage.set(pageNumber);
     }
   }
@@ -246,15 +220,15 @@ export class ViewDuplicatesComponent {
               componentId: id,
               resourceType: resourceType,
               isForksContext: true,
-              currentPage: parseInt(this.currentPage()),
+              currentPage: this.currentPage(),
               pageSize: this.pageSize,
             },
           })
           .onClose.subscribe((result) => {
             if (result?.success) {
               const resource = this.currentResource();
               if (resource) {
-                this.actions.getDuplicates(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);
+                this.actions.getDuplicates(resource.id, resource.type, this.currentPage(), this.pageSize);
               }
             }
           });

src/app/features/analytics/components/view-linked-projects/view-linked-projects.component.html

@@ -27,7 +27,7 @@ <h2 class="flex align-items-center gap-2">
               <p>{{ duplicate.dateModified | date: 'MMM d, y, h:mm a' }}</p>
             </div>
 
-            <div class="flex flex-wrap align-items-center gap-1">
+            <div class="flex align-items-start gap-1">
               <span class="font-bold">{{ 'common.labels.contributors' | translate }}:</span>
 
               <osf-contributors-list [contributors]="duplicate.bibliographicContributors ?? []"></osf-contributors-list>

src/app/features/analytics/components/view-linked-projects/view-linked-projects.component.spec.ts

@@ -74,13 +74,13 @@ describe('Component: View Duplicates', () => {
   it('should update currentPage when page is defined', () => {
     const event: PaginatorState = { page: 1 } as PaginatorState;
     component.onPageChange(event);
-    expect(component.currentPage()).toBe('2');
+    expect(component.currentPage()).toBe(2);
   });
 
   it('should not update currentPage when page is undefined', () => {
-    component.currentPage.set('5');
+    component.currentPage.set(5);
     const event: PaginatorState = { page: undefined } as PaginatorState;
     component.onPageChange(event);
-    expect(component.currentPage()).toBe('5');
+    expect(component.currentPage()).toBe(5);
   });
 });

src/app/features/analytics/components/view-linked-projects/view-linked-projects.component.ts

@@ -63,8 +63,8 @@ export class ViewLinkedProjectsComponent {
 
   readonly pageSize = 10;
 
-  currentPage = signal<string>('1');
-  firstIndex = computed(() => (parseInt(this.currentPage()) - 1) * this.pageSize);
+  currentPage = signal<number>(1);
+  firstIndex = computed(() => this.currentPage() - 1 * this.pageSize);
 
   readonly resourceId = toSignal(this.route.parent?.params.pipe(map((params) => params['id'])) ?? of(undefined));
   readonly resourceType: Signal<ResourceType | undefined> = toSignal(
@@ -107,7 +107,7 @@ export class ViewLinkedProjectsComponent {
       const resource = this.currentResource();
 
       if (resource) {
-        this.actions.getLinkedProjects(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);
+        this.actions.getLinkedProjects(resource.id, resource.type, this.currentPage(), this.pageSize);
       }
     });
 
@@ -116,7 +116,7 @@ export class ViewLinkedProjectsComponent {
 
   onPageChange(event: PaginatorState): void {
     if (event.page !== undefined) {
-      const pageNumber = (event.page + 1).toString();
+      const pageNumber = event.page + 1;
       this.currentPage.set(pageNumber);
     }
   }