fix(ANG-475): P50 - NIR: COS: [UI] “View” button should open list of linked items (#661)

* fix(analytics): implemented linked projects

* chore(analytics): clean up models and components

* chore(analytics): consolidated node models

* fix(linked-projects): removed unused stuff

Author: opaduchak

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

@@ -12,6 +12,7 @@ import { GlobalSearchState } from '@shared/stores/global-search';
 import { InstitutionsState } from '@shared/stores/institutions';
 import { InstitutionsSearchState } from '@shared/stores/institutions-search';
 import { LicensesState } from '@shared/stores/licenses';
+import { LinkedProjectsState } from '@shared/stores/linked-projects';
 import { MyResourcesState } from '@shared/stores/my-resources';
 import { RegionsState } from '@shared/stores/regions';
 
@@ -34,4 +35,5 @@ export const STATES = [
   CurrentResourceState,
   GlobalSearchState,
   BannersState,
+  LinkedProjectsState,
 ];

src/app/features/analytics/analytics.component.html

@@ -91,7 +91,7 @@
       [isLoading]="isRelatedCountsLoading()"
       [title]="'project.analytics.kpi.forks'"
       [value]="relatedCounts()?.forksCount"
-      [showButton]="true"
+      [showButton]="(relatedCounts()?.forksCount ?? 0) > 0"
       [buttonLabel]="'project.analytics.kpi.viewForks'"
       (buttonClick)="navigateToDuplicates()"
     ></osf-analytics-kpi>
@@ -100,8 +100,9 @@
       [isLoading]="isRelatedCountsLoading()"
       [title]="'project.analytics.kpi.linksToThisProject'"
       [value]="relatedCounts()?.linksToCount"
-      [showButton]="false"
+      [showButton]="(relatedCounts()?.linksToCount ?? 0) > 0"
       [buttonLabel]="'project.analytics.kpi.viewLinks'"
+      (buttonClick)="navigateToLinkedProjects()"
     ></osf-analytics-kpi>
 
     <osf-analytics-kpi

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

@@ -137,6 +137,9 @@ export class AnalyticsComponent implements OnInit {
     this.router.navigate(['duplicates'], { relativeTo: this.route });
   }
 
+  navigateToLinkedProjects() {
+    this.router.navigate(['linked-projects'], { relativeTo: this.route });
+  }
   private setData() {
     const analytics = this.analytics();
 

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

@@ -16,7 +16,7 @@
         <div class="duplicate-wrapper flex flex-column gap-3 p-3 sm:p-4">
           <div class="flex justify-content-between align-items-center">
             <h2 class="flex align-items-center gap-2">
-              <osf-icon [iconClass]="duplicate.public ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
+              <osf-icon [iconClass]="duplicate.isPublic ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
               {{ duplicate.title }}
             </h2>
 
@@ -62,7 +62,7 @@ <h2 class="flex align-items-center gap-2">
             <div class="flex flex-wrap align-items-center gap-1">
               <span class="font-bold">{{ 'common.labels.contributors' | translate }}:</span>
 
-              <osf-contributors-list [contributors]="duplicate.contributors"></osf-contributors-list>
+              <osf-contributors-list [contributors]="duplicate.bibliographicContributors ?? []"></osf-contributors-list>
             </div>
 
             @if (duplicate.description) {

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

@@ -39,8 +39,7 @@ import {
   TruncatedTextComponent,
 } from '@osf/shared/components';
 import { ResourceType, UserPermissions } from '@osf/shared/enums';
-import { ToolbarResource } from '@osf/shared/models';
-import { Duplicate } from '@osf/shared/models/duplicates';
+import { BaseNodeModel, ToolbarResource } from '@osf/shared/models';
 import { CustomDialogService, LoaderService } from '@osf/shared/services';
 import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates, GetResourceWithChildren } from '@osf/shared/stores';
 
@@ -58,6 +57,7 @@ import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates, GetResourceWith
     CustomPaginatorComponent,
     IconComponent,
     ContributorsListComponent,
+    DatePipe,
   ],
   templateUrl: './view-duplicates.component.html',
   styleUrl: './view-duplicates.component.scss',
@@ -171,7 +171,7 @@ export class ViewDuplicatesComponent {
     return null;
   });
 
-  showMoreOptions(duplicate: Duplicate) {
+  showMoreOptions(duplicate: BaseNodeModel) {
     return (
       duplicate.currentUserPermissions.includes(UserPermissions.Admin) ||
       duplicate.currentUserPermissions.includes(UserPermissions.Write)

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

@@ -0,0 +1,62 @@
+<osf-sub-header [title]="'project.analytics.viewRelated.linkedProjectsTitle' | translate" [showButton]="false" />
+
+<div class="flex flex-column flex-1 bg-white gap-5 p-3 sm:p-4">
+  @if (!isLoading() && currentResource()) {
+    @if (!linkedProjects().length) {
+      <p class="mt-5 text-center">{{ 'project.analytics.viewRelated.noLinkedProjectsMessage' | translate }}</p>
+    } @else {
+      <p>{{ 'project.analytics.viewRelated.linkedProjectsMessage' | translate }}</p>
+
+      @for (duplicate of linkedProjects(); track duplicate.id) {
+        <div class="duplicate-wrapper flex flex-column gap-3 p-3 sm:p-4">
+          <div class="flex justify-content-between align-items-center">
+            <h2 class="flex align-items-center gap-2">
+              <osf-icon [iconClass]="duplicate.isPublic ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
+              {{ duplicate.title }}
+            </h2>
+          </div>
+
+          <div class="flex flex-column gap-2">
+            <div class="flex flex-wrap align-items-center gap-1">
+              <span class="font-bold">{{ 'common.labels.forked' | translate }}:</span>
+              <p>{{ duplicate.dateCreated | date: 'MMM d, y, h:mm a' }}</p>
+            </div>
+
+            <div class="flex flex-wrap align-items-center gap-1">
+              <span class="font-bold">{{ 'common.labels.lastUpdated' | translate }}:</span>
+              <p>{{ duplicate.dateModified | date: 'MMM d, y, h:mm a' }}</p>
+            </div>
+
+            <div class="flex flex-wrap align-items-center gap-1">
+              <span class="font-bold">{{ 'common.labels.contributors' | translate }}:</span>
+
+              <osf-contributors-list [contributors]="duplicate.bibliographicContributors ?? []"></osf-contributors-list>
+            </div>
+
+            @if (duplicate.description) {
+              <osf-truncated-text
+                [text]="('resourceCard.labels.descriptionBold' | translate) + duplicate.description"
+              />
+            }
+          </div>
+          <p-button
+            [label]="'common.buttons.view' | translate"
+            severity="secondary"
+            [routerLink]="['/', duplicate.id]"
+          />
+        </div>
+      }
+
+      @if (totalLinkedProjects() > pageSize) {
+        <osf-custom-paginator
+          [totalCount]="totalLinkedProjects()"
+          [rows]="pageSize"
+          [first]="firstIndex()"
+          (pageChanged)="onPageChange($event)"
+        />
+      }
+    }
+  } @else {
+    <osf-loading-spinner></osf-loading-spinner>
+  }
+</div>

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

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.duplicate-wrapper {
+  border: 1px solid var(--grey-2);
+  border-radius: 0.75rem;
+  color: var(--dark-blue-1);
+}

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

@@ -0,0 +1,99 @@
+import { MockComponents, MockProvider } from 'ng-mocks';
+
+import { PaginatorState } from 'primeng/paginator';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { ProjectOverviewSelectors } from '@osf/features/project/overview/store';
+import { RegistryOverviewSelectors } from '@osf/features/registry/store/registry-overview';
+import { ResourceType } from '@osf/shared/enums';
+import { DuplicatesSelectors } from '@osf/shared/stores';
+import {
+  ContributorsListComponent,
+  CustomPaginatorComponent,
+  IconComponent,
+  LoadingSpinnerComponent,
+  SubHeaderComponent,
+  TruncatedTextComponent,
+} from '@shared/components';
+import { MOCK_PROJECT_OVERVIEW } from '@shared/mocks';
+import { CustomDialogService } from '@shared/services';
+
+import { ViewLinkedProjectsComponent } from './view-linked-projects.component';
+
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { CustomDialogServiceMockBuilder } from '@testing/providers/custom-dialog-provider.mock';
+import { ActivatedRouteMockBuilder } from '@testing/providers/route-provider.mock';
+import { RouterMockBuilder } from '@testing/providers/router-provider.mock';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('Component: View Duplicates', () => {
+  let component: ViewLinkedProjectsComponent;
+  let fixture: ComponentFixture<ViewLinkedProjectsComponent>;
+  let routerMock: ReturnType<RouterMockBuilder['build']>;
+  let activatedRouteMock: ReturnType<ActivatedRouteMockBuilder['build']>;
+  let mockCustomDialogService: ReturnType<CustomDialogServiceMockBuilder['build']>;
+
+  beforeEach(async () => {
+    mockCustomDialogService = CustomDialogServiceMockBuilder.create().build();
+    routerMock = RouterMockBuilder.create().build();
+    activatedRouteMock = ActivatedRouteMockBuilder.create()
+      .withParams({ id: 'rid' })
+      .withData({ resourceType: ResourceType.Project })
+      .build();
+
+    await TestBed.configureTestingModule({
+      imports: [
+        ViewLinkedProjectsComponent,
+        OSFTestingModule,
+        ...MockComponents(
+          SubHeaderComponent,
+          TruncatedTextComponent,
+          LoadingSpinnerComponent,
+          CustomPaginatorComponent,
+          IconComponent,
+          ContributorsListComponent
+        ),
+      ],
+      providers: [
+        provideMockStore({
+          signals: [
+            { selector: DuplicatesSelectors.getDuplicates, value: [] },
+            { selector: DuplicatesSelectors.getDuplicatesLoading, value: false },
+            { selector: DuplicatesSelectors.getDuplicatesTotalCount, value: 0 },
+            { selector: ProjectOverviewSelectors.getProject, value: MOCK_PROJECT_OVERVIEW },
+            { selector: ProjectOverviewSelectors.isProjectAnonymous, value: false },
+            { selector: RegistryOverviewSelectors.getRegistry, value: undefined },
+            { selector: RegistryOverviewSelectors.isRegistryAnonymous, value: false },
+          ],
+        }),
+        MockProvider(CustomDialogService, mockCustomDialogService),
+        MockProvider(Router, routerMock),
+        MockProvider(ActivatedRoute, activatedRouteMock),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ViewLinkedProjectsComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should update currentPage when page is defined', () => {
+    const event: PaginatorState = { page: 1 } as PaginatorState;
+    component.onPageChange(event);
+    expect(component.currentPage()).toBe('2');
+  });
+
+  it('should not update currentPage when page is undefined', () => {
+    component.currentPage.set('5');
+    const event: PaginatorState = { page: undefined } as PaginatorState;
+    component.onPageChange(event);
+    expect(component.currentPage()).toBe('5');
+  });
+});