feat(permissions): add conditions to project overview page

src/app/features/project/overview/components/linked-resources/linked-resources.component.html

@@ -1,7 +1,7 @@
 <div class="linked-project flex flex-column p-2 pb-4 gap-4">
   <div class="flex align-items-center pt-3 pl-3 pr-3 justify-content-between">
     <h2>{{ 'project.overview.linkedProjects.title' | translate }}</h2>
-    @if (!isCollectionsRoute()) {
+    @if (!isCollectionsRoute() && canWrite()) {
       <p-button
         severity="secondary"
         [label]="'project.overview.components.linkProjectsButton' | translate"

src/app/features/project/overview/components/linked-resources/linked-resources.component.ts

@@ -27,6 +27,7 @@ export class LinkedResourcesComponent {
   private dialogService = inject(DialogService);
   private translateService = inject(TranslateService);
   isCollectionsRoute = input<boolean>(false);
+  canWrite = input.required<boolean>();
   protected linkedResources = select(NodeLinksSelectors.getLinkedResources);
   protected isLinkedResourcesLoading = select(NodeLinksSelectors.getLinkedResourcesLoading);
   protected isMobile = toSignal(inject(IS_XSMALL));

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

@@ -2,7 +2,7 @@
   <div class="flex align-items-center pt-3 pl-3 pr-3 justify-content-between">
     <h2>{{ 'project.overview.components.title' | translate }}</h2>
 
-    @if (!isCollectionsRoute()) {
+    @if (!isCollectionsRoute() && canWrite()) {
       <p-button
         (onClick)="handleAddComponent()"
         severity="secondary"
@@ -24,14 +24,16 @@ <h2 class="flex gap-2">
                 <a class="component-title" [href]="'my-projects/' + component.id">{{ component.title }}</a>
               </h2>
               <div>
-                <p-button
-                  severity="contrast"
-                  icon="fas fa-ellipsis-vertical"
-                  raised
-                  variant="outlined"
-                  (click)="componentActionMenu.toggle($event)"
-                >
-                </p-button>
+                @if (component.currentUserPermissions.includes(UserPermissions.Write)) {
+                  <p-button
+                    severity="contrast"
+                    icon="fas fa-ellipsis-vertical"
+                    raised
+                    variant="outlined"
+                    (click)="componentActionMenu.toggle($event)"
+                  >
+                  </p-button>
+                }
 
                 <p-menu appendTo="body" #componentActionMenu [model]="componentActionItems(component.id)" popup>
                   <ng-template #item let-item>

src/app/features/project/overview/components/overview-components/overview-components.component.ts

@@ -13,6 +13,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 
 import { TruncatedTextComponent } from '@osf/shared/components';
+import { UserPermissions } from '@osf/shared/enums';
 import { IS_XSMALL } from '@osf/shared/utils';
 
 import { ProjectOverviewSelectors } from '../../store';
@@ -32,6 +33,7 @@ export class OverviewComponentsComponent {
   private translateService = inject(TranslateService);
   protected isMobile = toSignal(inject(IS_XSMALL));
   isCollectionsRoute = input<boolean>(false);
+  canWrite = input.required<boolean>();
   protected components = select(ProjectOverviewSelectors.getComponents);
   protected isComponentsLoading = select(ProjectOverviewSelectors.getComponentsLoading);
   protected readonly componentActionItems = (componentId: string) => [
@@ -48,6 +50,7 @@ export class OverviewComponentsComponent {
       command: () => this.handleDeleteComponent(componentId),
     },
   ];
+  readonly UserPermissions = UserPermissions;
 
   handleAddComponent(): void {
     const dialogWidth = this.isMobile() ? '95vw' : '850px';

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

@@ -2,7 +2,7 @@
 
 @if (resource) {
   <div class="flex flex-column gap-5 lg:flex-row lg:align-items-center lg:justify-content-between">
-    @if (visibilityToggle() && !isCollectionsRoute()) {
+    @if (visibilityToggle() && !isCollectionsRoute() && isAdmin()) {
       <div class="flex gap-3 align-items-center">
         <div class="flex gap-1" [class.inactive]="isPublic()">
           <i class="fas fa-lock"></i>
@@ -41,7 +41,7 @@
         }
 
         <div class="flex gap-2 justify-content-start">
-          @if (showViewOnlyLinks()) {
+          @if (showViewOnlyLinks() && isAdmin()) {
             <p-button
               class="flex"
               [pTooltip]="'project.overview.tooltips.viewOnlyLinks' | translate"

src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts

@@ -56,7 +56,7 @@ export class OverviewToolbarComponent {
   isCollectionsRoute = input<boolean>(false);
   protected isPublic = signal(false);
   protected isBookmarked = signal(false);
-
+  isAdmin = input.required<boolean>();
   currentResource = input.required<ToolbarResource | null>();
   visibilityToggle = input<boolean>(true);
   showViewOnlyLinks = input<boolean>(true);

src/app/features/project/overview/models/project-overview.models.ts

@@ -1,4 +1,5 @@
 import { JsonApiResponse } from '@osf/core/models';
+import { UserPermissions } from '@osf/shared/enums';
 import { License } from '@shared/models';
 
 export interface ProjectOverviewContributor {
@@ -42,7 +43,7 @@ export interface ProjectOverview {
   supplements?: ProjectSupplements[];
   analyticsKey: string;
   currentUserCanComment: boolean;
-  currentUserPermissions: string[];
+  currentUserPermissions: UserPermissions[];
   currentUserIsContributor: boolean;
   currentUserIsContributorOrGroupMember: boolean;
   wikiEnabled: boolean;

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

@@ -13,7 +13,11 @@
   </div>
 
   <div class="px-3 pb-5 flex flex-column sm:px-5">
-    <osf-overview-toolbar [isCollectionsRoute]="isCollectionsRoute()" [currentResource]="currentResource()" />
+    <osf-overview-toolbar
+      [isCollectionsRoute]="isCollectionsRoute()"
+      [currentResource]="currentResource()"
+      [isAdmin]="isAdmin"
+    />
   </div>
 
   <div class="flex flex-wrap gap-4 bg-white h-full p-3 flex-column-reverse sm:p-4 lg:flex-row">
@@ -54,9 +58,12 @@
     }
 
     <div class="flex flex-column gap-4 left-section">
-      <osf-project-wiki />
-      <osf-project-components [isCollectionsRoute]="isCollectionsRoute()" />
-      <osf-linked-resources [isCollectionsRoute]="isCollectionsRoute()" />
+      @if (isAdmin || canWrite) {
+        <osf-project-wiki />
+      }
+
+      <osf-project-components [isCollectionsRoute]="isCollectionsRoute()" [canWrite]="canWrite" />
+      <osf-linked-resources [isCollectionsRoute]="isCollectionsRoute()" [canWrite]="canWrite" />
       <osf-recent-activity-list />
     </div>
 
@@ -65,6 +72,7 @@
         [currentResource]="resourceOverview()"
         (customCitationUpdated)="onCustomCitationUpdated($event)"
         [isCollectionsRoute]="isCollectionsRoute()"
+        [canWrite]="canWrite"
       />
     </div>
   </div>

src/app/features/project/overview/project-overview.component.ts

@@ -29,7 +29,7 @@ import {
   ResourceMetadataComponent,
   SubHeaderComponent,
 } from '@shared/components';
-import { Mode, ResourceType } from '@shared/enums';
+import { Mode, ResourceType, UserPermissions } from '@shared/enums';
 import { MapProjectOverview } from '@shared/mappers/resource-overview.mappers';
 import { ToastService } from '@shared/services';
 import {
@@ -141,6 +141,18 @@ export class ProjectOverviewComponent implements OnInit {
   });
 
   protected currentProject = select(ProjectOverviewSelectors.getProject);
+  protected userPermissions = computed(() => {
+    return this.currentProject()?.currentUserPermissions || [];
+  });
+
+  get isAdmin(): boolean {
+    return this.userPermissions().includes(UserPermissions.Admin);
+  }
+
+  get canWrite(): boolean {
+    return this.userPermissions().includes(UserPermissions.Write);
+  }
+
   protected resourceOverview = computed(() => {
     const project = this.currentProject();
     if (project) {

src/app/features/registry/pages/registry-overview/registry-overview.component.html

@@ -9,6 +9,7 @@
           [currentResource]="toolbarResource()"
           [visibilityToggle]="false"
           [showViewOnlyLinks]="false"
+          [isAdmin]="true"
         />
       </div>
     }
@@ -71,6 +72,7 @@ <h3 class="pb-4 text-no-transform">{{ block.value }}</h3>
           <osf-resource-metadata
             [currentResource]="resourceOverview()"
             (customCitationUpdated)="onCustomCitationUpdated($event)"
+            [canWrite]="true"
           />
         </div>
       </div>

src/app/shared/components/resource-metadata/resource-metadata.component.html

@@ -5,7 +5,7 @@
     <div class="metadata-header flex align-items-center justify-content-between">
       <h2>{{ 'project.overview.metadata.title' | translate }}</h2>
 
-      @if (!isCollectionsRoute()) {
+      @if (!isCollectionsRoute() && canWrite()) {
         <p-button
           [routerLink]="'../metadata'"
           severity="secondary"

src/app/shared/components/resource-metadata/resource-metadata.component.ts

@@ -33,6 +33,7 @@ export class ResourceMetadataComponent {
   currentResource = input.required<ResourceOverview | null>();
   customCitationUpdated = output<string>();
   isCollectionsRoute = input<boolean>(false);
+  canWrite = input.required<boolean>();
 
   protected readonly resourceTypes = OsfResourceTypes;
 

src/app/shared/enums/index.ts

@@ -28,3 +28,4 @@ export * from './share-indexing.enum';
 export * from './sort-order.enum';
 export * from './sort-type.enum';
 export * from './subscriptions';
+export * from './user-permissions.enum';

src/app/shared/enums/user-permissions.enum.ts

@@ -0,0 +1,5 @@
+export enum UserPermissions {
+  Admin = 'admin',
+  Write = 'write',
+  Read = 'read',
+}

src/app/shared/mappers/components/components.mapper.ts

@@ -16,6 +16,7 @@ export class ComponentsMapper {
         middleName: contributor.embeds.users.data.attributes.middle_name,
         type: contributor.embeds.users.data.type,
       })),
+      currentUserPermissions: response.attributes.current_user_permissions || [],
     };
   }
 }

src/app/shared/models/components/components.models.ts

@@ -1,3 +1,5 @@
+import { UserPermissions } from '@osf/shared/enums';
+
 export interface ComponentOverview {
   id: string;
   type: string;
@@ -12,6 +14,7 @@ export interface ComponentOverview {
     id: string;
     type: string;
   }[];
+  currentUserPermissions: UserPermissions[];
 }
 
 export interface ComponentGetResponseJsonApi {
@@ -21,6 +24,7 @@ export interface ComponentGetResponseJsonApi {
     title: string;
     description: string;
     public: boolean;
+    current_user_permissions?: UserPermissions[];
   };
   embeds: {
     bibliographic_contributors: {