[ENG-10342] 10. Post Angular Unable to Duplicate a Registration from Overview Page

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

@@ -33,9 +33,9 @@ import { Primitive } from '@osf/shared/helpers/types.helper';
 import { DatasetInput } from '@osf/shared/models/charts/dataset-input.model';
 import { ViewOnlyLinkHelperService } from '@osf/shared/services/view-only-link-helper.service';
 
+import { DateRange } from './enums/date-range.enum';
 import { AnalyticsKpiComponent } from './components';
 import { DATE_RANGE_OPTIONS } from './constants';
-import { DateRange } from './enums';
 import { AnalyticsSelectors, ClearAnalytics, GetMetrics, GetRelatedCounts } from './store';
 
 @Component({

src/app/features/analytics/components/duplicate-card/duplicate-card.component.html

@@ -0,0 +1,59 @@
+<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>
+
+    @if (canManageDuplicate()) {
+      <div>
+        <p-button
+          severity="contrast"
+          icon="fas fa-ellipsis-vertical"
+          raised
+          variant="outlined"
+          [ariaLabel]="'common.buttons.more' | translate"
+          (onClick)="menu.toggle($event)"
+        >
+        </p-button>
+
+        <p-menu appendTo="body" [model]="menuItems" popup #menu>
+          <ng-template #item let-item>
+            <a
+              class="p-menu-item-link"
+              (mousedown)="handleMenuAction(item.action)"
+              (keydown.enter)="handleMenuAction(item.action)"
+              tabindex="0"
+            >
+              {{ item.label | translate }}
+            </a>
+          </ng-template>
+        </p-menu>
+      </div>
+    }
+  </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>
+      <span>{{ duplicate().dateCreated | date: dateFormat }}</span>
+    </div>
+
+    <div class="flex flex-wrap align-items-center gap-1">
+      <span class="font-bold">{{ 'common.labels.lastUpdated' | translate }}:</span>
+      <span>{{ duplicate().dateModified | date: dateFormat }}</span>
+    </div>
+
+    <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>
+    </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>

src/app/features/analytics/components/duplicate-card/duplicate-card.component.scss

@@ -0,0 +1,5 @@
+.duplicate-wrapper {
+  border: 1px solid var(--grey-2);
+  border-radius: 0.75rem;
+  color: var(--dark-blue-1);
+}

src/app/features/analytics/components/duplicate-card/duplicate-card.component.spec.ts

@@ -0,0 +1,95 @@
+import { MockComponents } from 'ng-mocks';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+
+import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
+import { TruncatedTextComponent } from '@osf/shared/components/truncated-text/truncated-text.component';
+import { UserPermissions } from '@osf/shared/enums/user-permissions.enum';
+import { NodeModel } from '@osf/shared/models/nodes/base-node.model';
+
+import { MOCK_NODE_WITH_ADMIN, MOCK_NODE_WITHOUT_ADMIN } from '@testing/mocks/node.mock';
+import { provideOSFCore } from '@testing/osf.testing.provider';
+
+import { DuplicateMenuAction } from '../../enums/duplicate-menu-action.enum';
+
+import { DuplicateCardComponent } from './duplicate-card.component';
+
+describe('DuplicateCardComponent', () => {
+  let component: DuplicateCardComponent;
+  let fixture: ComponentFixture<DuplicateCardComponent>;
+
+  function setup(duplicate: NodeModel = MOCK_NODE_WITH_ADMIN) {
+    TestBed.configureTestingModule({
+      imports: [
+        DuplicateCardComponent,
+        ...MockComponents(IconComponent, TruncatedTextComponent, ContributorsListComponent),
+      ],
+      providers: [provideOSFCore(), provideRouter([])],
+    });
+
+    fixture = TestBed.createComponent(DuplicateCardComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('duplicate', duplicate);
+    fixture.detectChanges();
+  }
+
+  it('should create', () => {
+    setup();
+    expect(component).toBeTruthy();
+  });
+
+  it('should expose dateFormat', () => {
+    setup();
+    expect(component.dateFormat).toBe('MMM d, y, h:mm a');
+  });
+
+  it('should expose menu items', () => {
+    setup();
+    expect(component.menuItems).toEqual([
+      {
+        label: 'project.overview.actions.manageContributors',
+        action: DuplicateMenuAction.ManageContributors,
+      },
+      {
+        label: 'project.overview.actions.settings',
+        action: DuplicateMenuAction.Settings,
+      },
+      {
+        label: 'common.labels.delete',
+        action: DuplicateMenuAction.Delete,
+      },
+    ]);
+  });
+
+  it('should allow manage when user has admin permission', () => {
+    setup(MOCK_NODE_WITH_ADMIN);
+    expect(component.canManageDuplicate()).toBe(true);
+  });
+
+  it('should allow manage when user has write permission', () => {
+    setup(MOCK_NODE_WITHOUT_ADMIN);
+    expect(component.canManageDuplicate()).toBe(true);
+  });
+
+  it('should not allow manage when user has only read permission', () => {
+    const readOnly: NodeModel = {
+      ...MOCK_NODE_WITHOUT_ADMIN,
+      currentUserPermissions: [UserPermissions.Read],
+    };
+    setup(readOnly);
+    expect(component.canManageDuplicate()).toBe(false);
+  });
+
+  it('should emit menuAction when handleMenuAction is called', () => {
+    setup();
+    const emitted: DuplicateMenuAction[] = [];
+    component.menuAction.subscribe((action) => emitted.push(action));
+
+    component.handleMenuAction(DuplicateMenuAction.Settings);
+    component.handleMenuAction(DuplicateMenuAction.Delete);
+
+    expect(emitted).toEqual([DuplicateMenuAction.Settings, DuplicateMenuAction.Delete]);
+  });
+});

src/app/features/analytics/components/duplicate-card/duplicate-card.component.ts

@@ -0,0 +1,64 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Menu } from 'primeng/menu';
+
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
+import { IconComponent } from '@osf/shared/components/icon/icon.component';
+import { TruncatedTextComponent } from '@osf/shared/components/truncated-text/truncated-text.component';
+import { UserPermissions } from '@osf/shared/enums/user-permissions.enum';
+import { NodeModel } from '@osf/shared/models/nodes/base-node.model';
+
+import { DuplicateMenuAction } from '../../enums/duplicate-menu-action.enum';
+
+@Component({
+  selector: 'osf-duplicate-card',
+  imports: [
+    Button,
+    Menu,
+    RouterLink,
+    IconComponent,
+    TruncatedTextComponent,
+    ContributorsListComponent,
+    DatePipe,
+    TranslatePipe,
+  ],
+  templateUrl: './duplicate-card.component.html',
+  styleUrl: './duplicate-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DuplicateCardComponent {
+  readonly duplicate = input.required<NodeModel>();
+
+  readonly menuAction = output<DuplicateMenuAction>();
+
+  readonly dateFormat = 'MMM d, y, h:mm a';
+
+  readonly canManageDuplicate = computed(() => {
+    const permissions = this.duplicate().currentUserPermissions;
+    return permissions.includes(UserPermissions.Admin) || permissions.includes(UserPermissions.Write);
+  });
+
+  readonly menuItems = [
+    {
+      label: 'project.overview.actions.manageContributors',
+      action: DuplicateMenuAction.ManageContributors,
+    },
+    {
+      label: 'project.overview.actions.settings',
+      action: DuplicateMenuAction.Settings,
+    },
+    {
+      label: 'common.labels.delete',
+      action: DuplicateMenuAction.Delete,
+    },
+  ];
+
+  handleMenuAction(action: DuplicateMenuAction): void {
+    this.menuAction.emit(action);
+  }
+}

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

@@ -1,84 +1,21 @@
 <osf-sub-header
   [title]="'project.analytics.kpi.forks' | translate"
   [showButton]="isAuthenticated()"
-  [buttonLabel]="'project.overview.actions.forkProjectLabel' | translate"
+  [buttonLabel]="duplicateButtonLabel() | translate"
   [isButtonDisabled]="preventDuplicateCreation()"
   [buttonTooltip]="duplicateButtonTooltip() | translate"
-  (buttonClick)="handleForkResource()"
+  (buttonClick)="handleFork()"
 />
 
 <div class="flex flex-column flex-1 bg-white gap-5 p-3 sm:p-4">
-  @if (!isDuplicatesLoading() && currentResource()) {
+  @if (!isDuplicatesLoading()) {
     @if (!duplicates().length) {
       <p class="mt-5 text-center">{{ 'project.overview.dialog.fork.noForksMessage' | translate }}</p>
     } @else {
       <p>{{ 'project.overview.dialog.fork.forksMessage' | translate }}</p>
 
       @for (duplicate of duplicates(); 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>
-
-            @if (showMoreOptions(duplicate)) {
-              <div>
-                <p-button
-                  severity="contrast"
-                  icon="fas fa-ellipsis-vertical"
-                  raised
-                  variant="outlined"
-                  [ariaLabel]="'common.buttons.more' | translate"
-                  (onClick)="menu.toggle($event)"
-                >
-                </p-button>
-
-                <p-menu appendTo="body" [model]="forkActionItems(duplicate.id)" popup #menu>
-                  <ng-template #item let-item>
-                    <a
-                      class="p-menu-item-link"
-                      (mousedown)="handleMenuAction(item.action, item.resourceId)"
-                      (keydown.enter)="handleMenuAction(item.action, item.resourceId)"
-                      tabindex="0"
-                    >
-                      {{ item.label | translate }}
-                    </a>
-                  </ng-template>
-                </p-menu>
-              </div>
-            }
-          </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 align-items-start 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>
+        <osf-duplicate-card [duplicate]="duplicate" (menuAction)="handleMenuAction($event, duplicate.id)" />
       }
 
       @if (totalDuplicates() > pageSize) {

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

@@ -2,10 +2,5 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-}
-
-.duplicate-wrapper {
-  border: 1px solid var(--grey-2);
-  border-radius: 0.75rem;
-  color: var(--dark-blue-1);
+  height: 100%;
 }