Merge remote-tracking branch 'upstream/feature/pbs-25-24' into fix/ENG-9164

Author: nsemets

angular.json

@@ -29,6 +29,8 @@
               "cedar-embeddable-editor",
               "cedar-artifact-viewer",
               "markdown-it-video",
+              "markdown-it-anchor",
+              "markdown-it-toc-done-right",
               "ace-builds/src-noconflict/ext-language_tools",
               "@traptitech/markdown-it-katex",
               "@centerforopenscience/markdown-it-atrules",

package-lock.json

@@ -60,6 +60,8 @@
     "chart.js": "^4.4.9",
     "diff": "^8.0.2",
     "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-toc-done-right": "^4.2.0",
     "markdown-it-video": "^0.6.3",
     "ngx-captcha": "^13.0.0",
     "ngx-cookie-service": "^19.1.2",

package.json

@@ -0,0 +1,27 @@
+declare module 'markdown-it-toc-done-right' {
+  import { PluginWithOptions } from 'markdown-it';
+
+  export interface TocOptions {
+    placeholder: string;
+    slugify: (s: string) => string;
+    uniqueSlugStartIndex: number;
+    containerClass: string;
+    containerId: string;
+    listClass: string;
+    itemClass: string;
+    linkClass: string;
+    level: number | number[];
+    listType: 'ol' | 'ul';
+    format: (s: string) => string;
+    callback: (tocCode: string, ast: TocAst) => void;
+  }
+
+  export interface TocAst {
+    l: number;
+    n: string;
+    c: TocAst[];
+  }
+
+  const markdownItTocDoneRight: PluginWithOptions<Partial<TocOptions>>;
+  export default markdownItTocDoneRight;
+}

src/@types/markdown-it-toc-done-right.d.ts

@@ -35,7 +35,7 @@ <h2 class="flex align-items-center gap-2">
     }
   </div>
 
-  <div class="flex flex-wrap gap-1">
+  <div class="flex gap-1">
     <p class="font-bold">{{ 'common.labels.contributors' | translate }}:</p>
 
     <osf-contributors-list

src/app/features/project/overview/components/component-card/component-card.component.html

@@ -1,22 +1,104 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Store } from '@ngxs/store';
+
+import { MockProvider } from 'ng-mocks';
+
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { of } from 'rxjs';
+
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { ToastService } from '@osf/shared/services/toast.service';
+import { DeleteNodeLink, NodeLinksSelectors } from '@osf/shared/stores/node-links';
+
+import { ProjectOverviewSelectors } from '../../store';
 
 import { DeleteNodeLinkDialogComponent } from './delete-node-link-dialog.component';
 
-describe.skip('DeleteNodeLinkDialogComponent', () => {
+import { DynamicDialogRefMock } from '@testing/mocks/dynamic-dialog-ref.mock';
+import { MOCK_NODE_WITH_ADMIN } from '@testing/mocks/node.mock';
+import { ToastServiceMock } from '@testing/mocks/toast.service.mock';
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('DeleteNodeLinkDialogComponent', () => {
   let component: DeleteNodeLinkDialogComponent;
   let fixture: ComponentFixture<DeleteNodeLinkDialogComponent>;
+  let store: jest.Mocked<Store>;
+  let dialogRef: jest.Mocked<DynamicDialogRef>;
+  let dialogConfig: jest.Mocked<DynamicDialogConfig>;
+  let toastService: jest.Mocked<ToastService>;
+
+  const mockProject = { ...MOCK_NODE_WITH_ADMIN, id: 'test-project-id' };
+  const mockCurrentLink = { ...MOCK_NODE_WITH_ADMIN, id: 'linked-resource-id', title: 'Linked Resource' };
 
   beforeEach(async () => {
+    dialogConfig = {
+      data: { currentLink: mockCurrentLink },
+    } as jest.Mocked<DynamicDialogConfig>;
+
     await TestBed.configureTestingModule({
-      imports: [DeleteNodeLinkDialogComponent],
+      imports: [DeleteNodeLinkDialogComponent, OSFTestingModule],
+      providers: [
+        DynamicDialogRefMock,
+        ToastServiceMock,
+        MockProvider(DynamicDialogConfig, dialogConfig),
+        provideMockStore({
+          signals: [
+            { selector: ProjectOverviewSelectors.getProject, value: mockProject },
+            { selector: NodeLinksSelectors.getNodeLinksSubmitting, value: false },
+          ],
+        }),
+      ],
     }).compileComponents();
 
+    store = TestBed.inject(Store) as jest.Mocked<Store>;
+    store.dispatch = jest.fn().mockReturnValue(of(true));
     fixture = TestBed.createComponent(DeleteNodeLinkDialogComponent);
     component = fixture.componentInstance;
+    dialogRef = TestBed.inject(DynamicDialogRef) as jest.Mocked<DynamicDialogRef>;
+    toastService = TestBed.inject(ToastService) as jest.Mocked<ToastService>;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize currentProject selector', () => {
+    expect(component.currentProject()).toEqual(mockProject);
   });
+
+  it('should initialize isSubmitting selector', () => {
+    expect(component.isSubmitting()).toBe(false);
+  });
+
+  it('should initialize actions with deleteNodeLink mapping', () => {
+    expect(component.actions.deleteNodeLink).toBeDefined();
+  });
+
+  it('should dispatch DeleteNodeLink action with correct parameters on successful deletion', () => {
+    component.handleDeleteNodeLink();
+
+    expect(store.dispatch).toHaveBeenCalledWith(expect.any(DeleteNodeLink));
+    const call = (store.dispatch as jest.Mock).mock.calls.find((call) => call[0] instanceof DeleteNodeLink);
+    expect(call).toBeDefined();
+    const action = call[0] as DeleteNodeLink;
+    expect(action.projectId).toBe('test-project-id');
+    expect(action.linkedResource).toEqual(mockCurrentLink);
+  });
+
+  it('should show success toast on successful deletion', fakeAsync(() => {
+    component.handleDeleteNodeLink();
+    tick();
+
+    expect(toastService.showSuccess).toHaveBeenCalledWith('project.overview.dialog.toast.deleteNodeLink.success');
+  }));
+
+  it('should close dialog with hasChanges true on successful deletion', fakeAsync(() => {
+    component.handleDeleteNodeLink();
+    tick();
+
+    expect(dialogRef.close).toHaveBeenCalledWith({ hasChanges: true });
+  }));
 });

src/app/features/project/overview/components/delete-node-link-dialog/delete-node-link-dialog.component.spec.ts

@@ -8,7 +8,7 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
 
 import { ToastService } from '@osf/shared/services/toast.service';
-import { DeleteNodeLink, GetLinkedResources, NodeLinksSelectors } from '@osf/shared/stores/node-links';
+import { DeleteNodeLink, NodeLinksSelectors } from '@osf/shared/stores/node-links';
 
 import { ProjectOverviewSelectors } from '../../store';
 
@@ -28,7 +28,7 @@ export class DeleteNodeLinkDialogComponent {
   currentProject = select(ProjectOverviewSelectors.getProject);
   isSubmitting = select(NodeLinksSelectors.getNodeLinksSubmitting);
 
-  actions = createDispatchMap({ deleteNodeLink: DeleteNodeLink, getLinkedResources: GetLinkedResources });
+  actions = createDispatchMap({ deleteNodeLink: DeleteNodeLink });
 
   handleDeleteNodeLink(): void {
     const project = this.currentProject();
@@ -38,9 +38,8 @@ export class DeleteNodeLinkDialogComponent {
 
     this.actions.deleteNodeLink(project.id, currentLink).subscribe({
       next: () => {
-        this.dialogRef.close();
-        this.actions.getLinkedResources(project.id);
         this.toastService.showSuccess('project.overview.dialog.toast.deleteNodeLink.success');
+        this.dialogRef.close({ hasChanges: true });
       },
     });
   }

src/app/features/project/overview/components/delete-node-link-dialog/delete-node-link-dialog.component.ts

@@ -39,15 +39,14 @@
   <p-table
     class="link-project-table"
     [value]="isCurrentTableLoading() ? skeletonData : currentTableItems()"
-    [rows]="tableRows"
-    [first]="(currentPage() - 1) * 10"
-    [paginator]="currentTotalCount() > tableRows"
-    [totalRecords]="currentTotalCount()"
+    [rows]="tableParams().rows"
+    [first]="tableParams().firstRowIndex"
+    [paginator]="tableParams().paginator"
+    [totalRecords]="tableParams().totalRecords"
     paginatorDropdownAppendTo="body"
     [resizableColumns]="true"
     [autoLayout]="true"
-    [scrollable]="true"
-    [sortMode]="'single'"
+    [scrollable]="tableParams().scrollable"
     [lazy]="true"
     [lazyLoadOnInit]="true"
     (onPage)="onPageChange($event)"
@@ -74,7 +73,7 @@
               <p-checkbox
                 [disabled]="isNodeLinksSubmitting()"
                 [inputId]="item.id"
-                [ngModel]="isItemLinked()(item.id)"
+                [ngModel]="isItemLinked(item.id)"
                 [binary]="true"
                 (onChange)="handleToggleNodeLink(item)"
               />
@@ -84,15 +83,19 @@
           <td>{{ item.dateCreated | date: 'MMM d, y' }}</td>
           <td>{{ item.dateModified | date: 'MMM d, y' }}</td>
           <td>
-            @for (contributor of item.contributors; track contributor.id) {
+            @for (contributor of item.contributors.slice(0, 3); track contributor.id) {
               {{ contributor.fullName }}{{ $last ? '' : ', ' }}
             }
+            @if (item.contributors.length > 3) {
+              , {{ 'common.labels.and' | translate }} {{ item.contributors.length - 3 }}
+              {{ 'common.labels.more' | translate }}
+            }
           </td>
         </tr>
       } @else {
         <tr class="loading-row">
           <td colspan="4">
-            <p-skeleton width="100%" height="3.3rem" borderRadius="0" />
+            <p-skeleton width="100%" height="2.75rem" borderRadius="0" />
           </td>
         </tr>
       }