fix(ENG-12403): show specific error toasts when disconnecting an orcid identity

Author: Vlad0n20

src/app/features/settings/account-settings/components/connected-identities/connected-identities.component.spec.ts

@@ -2,8 +2,11 @@ import { Store } from '@ngxs/store';
 
 import { MockComponent, MockProvider } from 'ng-mocks';
 
+import { throwError } from 'rxjs';
+
 import { Mock } from 'vitest';
 
+import { HttpErrorResponse } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReadonlyInputComponent } from '@osf/shared/components/readonly-input/readonly-input.component';
@@ -95,6 +98,22 @@ describe('ConnectedIdentitiesComponent', () => {
     expect(loaderService.hide).toHaveBeenCalled();
   });
 
+  it.each([
+    [503, 'settings.accountSettings.connectedIdentities.errors.retryLater'],
+    [409, 'settings.accountSettings.connectedIdentities.errors.signInViaOrcid'],
+    [500, 'settings.accountSettings.connectedIdentities.errors.contactSupport'],
+  ])('should show the matching error toast for status %i', (status, messageKey) => {
+    (store.dispatch as Mock).mockReturnValue(throwError(() => new HttpErrorResponse({ status })));
+    component.deleteExternalIdentity(mockIdentity);
+
+    const { onConfirm } = confirmationService.confirmDelete.mock.calls[0][0];
+    onConfirm();
+
+    expect(toastService.showError).toHaveBeenCalledWith(messageKey);
+    expect(toastService.showSuccess).not.toHaveBeenCalled();
+    expect(loaderService.hide).toHaveBeenCalled();
+  });
+
   it('should not dispatch delete when confirmation is not accepted', () => {
     (store.dispatch as Mock).mockClear();
     component.deleteExternalIdentity(mockIdentity);

src/app/features/settings/account-settings/components/connected-identities/connected-identities.component.ts

@@ -6,6 +6,7 @@ import { Card } from 'primeng/card';
 
 import { finalize } from 'rxjs';
 
+import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { ReadonlyInputComponent } from '@osf/shared/components/readonly-input/readonly-input.component';
@@ -41,8 +42,24 @@ export class ConnectedIdentitiesComponent {
         this.actions
           .deleteExternalIdentity(identity.id)
           .pipe(finalize(() => this.loaderService.hide()))
-          .subscribe(() => this.toastService.showSuccess('settings.accountSettings.connectedIdentities.successDelete'));
+          .subscribe({
+            next: () => this.toastService.showSuccess('settings.accountSettings.connectedIdentities.successDelete'),
+            error: (error: HttpErrorResponse) => this.toastService.showError(this.getDeleteErrorKey(error)),
+          });
       },
     });
   }
+
+  private getDeleteErrorKey(error: HttpErrorResponse): string {
+    const prefix = 'settings.accountSettings.connectedIdentities.errors';
+
+    switch (error.status) {
+      case 503:
+        return `${prefix}.retryLater`;
+      case 409:
+        return `${prefix}.signInViaOrcid`;
+      default:
+        return `${prefix}.contactSupport`;
+    }
+  }
 }

src/app/features/settings/account-settings/services/account-settings.service.spec.ts

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BYPASS_ERROR_INTERCEPTOR } from '@core/interceptors/error-interceptor.tokens';
+import { JsonApiService } from '@osf/shared/services/json-api.service';
+
+import { MOCK_API_URL, provideMockEnvironment } from '@testing/providers/environment.provider.mock';
+import { JsonApiServiceMock, JsonApiServiceMockType } from '@testing/providers/json-api.service.mock';
+
+import { AccountSettingsService } from './account-settings.service';
+
+describe('AccountSettingsService', () => {
+  let service: AccountSettingsService;
+  let jsonApiService: JsonApiServiceMockType;
+
+  beforeEach(() => {
+    jsonApiService = JsonApiServiceMock.simple();
+
+    TestBed.configureTestingModule({
+      providers: [
+        AccountSettingsService,
+        provideMockEnvironment(),
+        { provide: JsonApiService, useValue: jsonApiService },
+      ],
+    });
+
+    service = TestBed.inject(AccountSettingsService);
+  });
+
+  it('should delete an external identity with the error interceptor bypassed', () => {
+    service.deleteExternalIdentity('orcid').subscribe();
+
+    expect(jsonApiService.delete).toHaveBeenCalledTimes(1);
+    const [url, , , context] = jsonApiService.delete.mock.calls[0];
+    expect(url).toBe(`${MOCK_API_URL}/users/me/settings/identities/orcid/`);
+    expect(context?.get(BYPASS_ERROR_INTERCEPTOR)).toBe(true);
+  });
+});

src/app/features/settings/account-settings/services/account-settings.service.ts

@@ -1,7 +1,9 @@
 import { map, Observable } from 'rxjs';
 
+import { HttpContext } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
+import { BYPASS_ERROR_INTERCEPTOR } from '@core/interceptors/error-interceptor.tokens';
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { UserMapper } from '@osf/shared/mappers/user';
 import { UserModel } from '@osf/shared/models/user/user.model';
@@ -113,6 +115,13 @@ export class AccountSettingsService {
   }
 
   deleteExternalIdentity(id: string): Observable<void> {
-    return this.jsonApiService.delete(`${this.apiUrl}/users/me/settings/identities/${id}/`);
+    const context = new HttpContext().set(BYPASS_ERROR_INTERCEPTOR, true);
+
+    return this.jsonApiService.delete(
+      `${this.apiUrl}/users/me/settings/identities/${id}/`,
+      undefined,
+      undefined,
+      context
+    );
   }
 }

src/app/shared/services/json-api.service.ts

@@ -80,7 +80,7 @@ export class JsonApiService {
     });
   }
 
-  delete(url: string, body?: unknown, headers?: Record<string, string>): Observable<void> {
-    return this.http.delete<void>(url, { body, headers });
+  delete(url: string, body?: unknown, headers?: Record<string, string>, context?: HttpContext): Observable<void> {
+    return this.http.delete<void>(url, { body, headers, context });
   }
 }

src/assets/i18n/en.json

@@ -2552,6 +2552,11 @@
           "message": "Are you sure you want to delete <b>{{name}}</b> identity?"
         },
         "description": "Connected identities allow you to log in to the OSF via a third-party service. You can revoke these identifies.",
+        "errors": {
+          "contactSupport": "Unable to disconnect this identity. Please contact support if the problem persists.",
+          "retryLater": "Unable to revoke ORCiD access at this time. Please try again later.",
+          "signInViaOrcid": "We couldn't find a stored ORCiD authorization for this identity. Please sign in via ORCiD and try again."
+        },
         "noIdentities": "You have not authorized any external services to log in to the OSF.",
         "successDelete": "Successfully deleted connected identities.",
         "title": "Connected identities"

src/testing/providers/json-api.service.mock.ts

@@ -27,7 +27,12 @@ type PatchFn = (
 ) => Observable<unknown>;
 type PutFn = (url: string, body: unknown, params?: Record<string, unknown>) => Observable<unknown>;
 type PutFileFn = (url: string, file: File, params?: Record<string, string>) => Observable<HttpEvent<unknown>>;
-type DeleteFn = (url: string, body?: unknown, headers?: Record<string, string>) => Observable<void>;
+type DeleteFn = (
+  url: string,
+  body?: unknown,
+  headers?: Record<string, string>,
+  context?: HttpContext
+) => Observable<void>;
 
 export type JsonApiServiceMockType = Pick<JsonApiService, 'get' | 'post' | 'patch' | 'put' | 'putFile' | 'delete'> & {
   get: Mock<GetFn>;