feat(related-projects): added link projects button

Author: opaduchak

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

@@ -1,8 +1,8 @@
 <osf-sub-header
   [title]="title()"
   [showButton]="isAuthenticated()"
-  [buttonLabel]="'project.overview.actions.forkProjectLabel' | translate"
-  (buttonClick)="handleForkResource()"
+  [buttonLabel]="mainActionMessage()"
+  (buttonClick)="handleMainAction()"
 />
 
 <div class="flex flex-column flex-1 bg-white gap-5 p-3 sm:p-4">
@@ -71,13 +71,11 @@ <h2 class="flex align-items-center gap-2">
               />
             }
           </div>
-          @if (isShowingDuplicates()) {
-            <p-button
-              [label]="'common.buttons.view' | translate"
-              severity="secondary"
-              [routerLink]="['/', relatedItem.id]"
-            />
-          }
+          <p-button
+            [label]="'common.buttons.view' | translate"
+            severity="secondary"
+            [routerLink]="['/', relatedItem.id]"
+          />
         </div>
       }
 

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

@@ -25,7 +25,11 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { UserSelectors } from '@core/store/user';
 import { RelatedItemsType } from '@osf/features/analytics/enums/related-items-type';
-import { DeleteComponentDialogComponent, ForkDialogComponent } from '@osf/features/project/overview/components';
+import {
+  DeleteComponentDialogComponent,
+  ForkDialogComponent,
+  LinkResourceDialogComponent,
+} from '@osf/features/project/overview/components';
 import { ClearProjectOverview, GetProjectById, ProjectOverviewSelectors } from '@osf/features/project/overview/store';
 import {
   ClearRegistryOverview,
@@ -41,6 +45,7 @@ import {
   TruncatedTextComponent,
 } from '@osf/shared/components';
 import { ResourceType, UserPermissions } from '@osf/shared/enums';
+import { IS_MEDIUM } from '@osf/shared/helpers';
 import { ToolbarResource } from '@osf/shared/models';
 import { Duplicate } from '@osf/shared/models/duplicates';
 import { CustomDialogService } from '@osf/shared/services';
@@ -81,6 +86,7 @@ export class ViewRelatedProjectsComponent implements OnInit {
   isLoading = select(RelatedSelectors.getRelatedLoading);
   totalDuplicates = select(RelatedSelectors.getRelatedTotalCount);
   isAuthenticated = select(UserSelectors.isAuthenticated);
+  isMedium = toSignal(inject(IS_MEDIUM));
 
   title = computed(() => {
     switch (this.itemType()) {
@@ -109,6 +115,15 @@ export class ViewRelatedProjectsComponent implements OnInit {
     }
   });
 
+  mainActionMessage = computed(() => {
+    switch (this.itemType()) {
+      case RelatedItemsType.Duplicates:
+        return this.translateService.instant('project.overview.actions.forkProjectLabel');
+      case RelatedItemsType.Linked:
+        return this.translateService.instant('project.overview.components.linkProjectsButton');
+    }
+  });
+
   readonly pageSize = 10;
   readonly UserPermissions = UserPermissions;
 
@@ -239,6 +254,26 @@ export class ViewRelatedProjectsComponent implements OnInit {
         break;
     }
   }
+  handleMainAction() {
+    switch (this.itemType()) {
+      case RelatedItemsType.Duplicates:
+        this.handleForkResource();
+        return;
+
+      case RelatedItemsType.Linked:
+        this.openLinkProjectModal();
+        return;
+    }
+  }
+
+  openLinkProjectModal() {
+    const dialogWidth = this.isMedium() ? '850px' : '95vw';
+
+    this.customDialogService.open(LinkResourceDialogComponent, {
+      header: 'project.overview.dialog.linkProject.header',
+      width: dialogWidth,
+    });
+  }
 
   handleForkResource(): void {
     const toolbarResource = this.toolbarResource();