Feat(9556): [AUB] Contributors: missing ability to remove contributor from parent and all components

src/app/features/contributors/contributors.component.ts

@@ -28,6 +28,7 @@ import {
   AddContributorDialogComponent,
   AddUnregisteredContributorDialogComponent,
   ContributorsTableComponent,
+  RemoveContributorDialogComponent,
   RequestAccessTableComponent,
 } from '@osf/shared/components/contributors';
 import { SearchInputComponent } from '@osf/shared/components/search-input/search-input.component';
@@ -397,26 +398,37 @@ export class ContributorsComponent implements OnInit, OnDestroy {
   removeContributor(contributor: ContributorModel) {
     const isDeletingSelf = contributor.userId === this.currentUser()?.id;
 
-    this.customConfirmationService.confirmDelete({
-      headerKey: 'project.contributors.removeDialog.title',
-      messageKey: 'project.contributors.removeDialog.message',
-      messageParams: { name: contributor.fullName },
-      acceptLabelKey: 'common.buttons.remove',
-      onConfirm: () => {
-        this.actions
-          .deleteContributor(this.resourceId(), this.resourceType(), contributor.userId, isDeletingSelf)
-          .pipe(takeUntilDestroyed(this.destroyRef))
-          .subscribe(() => {
-            this.toastService.showSuccess('project.contributors.removeDialog.successMessage', {
-              name: contributor.fullName,
-            });
+    this.customDialogService
+      .open(RemoveContributorDialogComponent, {
+        header: 'project.contributors.removeDialog.title',
+        width: '448px',
+        data: {
+          messageKey: 'project.contributors.removeDialog.message',
+          messageParams: { name: contributor.fullName },
+        },
+      })
+      .onClose.pipe(
+        filter((res) => res !== undefined),
+        switchMap((removeFromChildren: boolean) =>
+          this.actions.deleteContributor(
+            this.resourceId(),
+            this.resourceType(),
+            contributor.userId,
+            isDeletingSelf,
+            removeFromChildren
+          )
+        ),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe(() => {
+        this.toastService.showSuccess('project.contributors.removeDialog.successMessage', {
+          name: contributor.fullName,
+        });
 
-            if (isDeletingSelf) {
-              this.router.navigate(['/']);
-            }
-          });
-      },
-    });
+        if (isDeletingSelf) {
+          this.router.navigate(['/']);
+        }
+      });
   }
 
   loadMoreContributors(): void {

src/app/shared/components/contributors/index.ts

@@ -1,4 +1,5 @@
 export * from './add-contributor-dialog/add-contributor-dialog.component';
 export * from './add-unregistered-contributor-dialog/add-unregistered-contributor-dialog.component';
 export * from './contributors-table/contributors-table.component';
+export * from './remove-contributor-dialog/remove-contributor-dialog.component';
 export * from './request-access-table/request-access-table.component';

src/app/shared/components/contributors/remove-contributor-dialog/remove-contributor-dialog.component.html

@@ -0,0 +1,32 @@
+<div class="flex flex-column">
+  <p [innerHTML]="messageKey ? (messageKey | translate: messageParams) : ''"></p>
+
+  <div class="p-field-radiobutton flex align-items-center mt-3 mb-2">
+    <p-radioButton name="removeMode" [value]="false" [(ngModel)]="selectedOption" inputId="projectOnly">
+    </p-radioButton>
+    <label for="projectOnly" class="ml-2">{{ 'project.contributors.removeDialog.thisProjectOnly' | translate }}</label>
+  </div>
+  <div class="p-field-radiobutton flex align-items-center mb-3">
+    <p-radioButton name="removeMode" [value]="true" [(ngModel)]="selectedOption" inputId="projectAll"> </p-radioButton>
+    <label for="projectAll" class="ml-2">{{
+      'project.contributors.removeDialog.thisProjectAndComponents' | translate
+    }}</label>
+  </div>
+
+  <div class="flex gap-2 mt-3">
+    <p-button
+      class="w-full"
+      styleClass="w-full"
+      (click)="cancel()"
+      severity="info"
+      [label]="'common.buttons.cancel' | translate"
+    ></p-button>
+    <p-button
+      class="w-full"
+      styleClass="w-full"
+      (click)="confirm()"
+      severity="danger"
+      [label]="'common.buttons.remove' | translate"
+    ></p-button>
+  </div>
+</div>

src/app/shared/components/contributors/remove-contributor-dialog/remove-contributor-dialog.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RemoveContributorDialogComponent } from './remove-contributor-dialog.component';
+
+describe('RemoveContributorDialogComponent', () => {
+  let component: RemoveContributorDialogComponent;
+  let fixture: ComponentFixture<RemoveContributorDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RemoveContributorDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RemoveContributorDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/contributors/remove-contributor-dialog/remove-contributor-dialog.component.ts

@@ -0,0 +1,38 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { RadioButton } from 'primeng/radiobutton';
+
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'osf-remove-contributor-dialog',
+  imports: [RadioButton, FormsModule, Button, TranslatePipe],
+  templateUrl: './remove-contributor-dialog.component.html',
+  styleUrl: './remove-contributor-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RemoveContributorDialogComponent {
+  readonly dialogRef = inject(DynamicDialogRef);
+  readonly config = inject(DynamicDialogConfig);
+  selectedOption = false;
+
+  get messageKey(): string | undefined {
+    return this.config?.data?.messageKey as string | undefined;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  get messageParams(): any {
+    return this.config?.data?.messageParams;
+  }
+
+  confirm(): void {
+    this.dialogRef.close(this.selectedOption);
+  }
+
+  cancel(): void {
+    this.dialogRef.close();
+  }
+}

src/app/shared/services/contributors.service.ts

@@ -170,8 +170,16 @@ export class ContributorsService {
     return this.jsonApiService.patch(baseUrl, contributorData);
   }
 
-  deleteContributor(resourceType: ResourceType, resourceId: string, userId: string): Observable<void> {
-    const baseUrl = `${this.getBaseUrl(resourceType, resourceId)}/${userId}/`;
+  deleteContributor(
+    resourceType: ResourceType,
+    resourceId: string,
+    userId: string,
+    removeFromChildren = false
+  ): Observable<void> {
+    let baseUrl = `${this.getBaseUrl(resourceType, resourceId)}/${userId}/`;
+    if (removeFromChildren) {
+      baseUrl = baseUrl.concat('?propagate_to_children=true');
+    }
 
     return this.jsonApiService.delete(baseUrl);
   }

src/app/shared/stores/contributors/contributors.actions.ts

@@ -80,7 +80,8 @@ export class DeleteContributor {
     public resourceId: string | undefined | null,
     public resourceType: ResourceType | undefined,
     public contributorId: string,
-    public skipRefresh = false
+    public skipRefresh = false,
+    public removeFromChildren = false
   ) {}
 }
 

src/app/shared/stores/contributors/contributors.state.ts

@@ -251,7 +251,7 @@ export class ContributorsState {
     });
 
     return this.contributorsService
-      .deleteContributor(action.resourceType, action.resourceId, action.contributorId)
+      .deleteContributor(action.resourceType, action.resourceId, action.contributorId, action.removeFromChildren)
       .pipe(
         tap(() => {
           if (!action.skipRefresh) {

src/assets/i18n/en.json

@@ -618,6 +618,8 @@
       },
       "removeDialog": {
         "title": "Remove contributor",
+        "thisProjectOnly": "This project only",
+        "thisProjectAndComponents": "This project and all it's components",
         "message": "Are you sure you want to remove <b>{{name}}</b> contributor?",
         "successMessage": "Contributor {{name}} successfully removed."
       },