[ENG-10584][ENG-10585] Allow users to disconnect existing orcid in social tab (#912)

* feat(settings): Allow users to disconnect orcid in social tab

* feat(settings): Add dummy connect button when no orcid is associated with user

* chore(settings): move authenticated identity to own component

* refactor(settings): Implement CR suggestions; Update tests

* refactor(settings): Update authenticated identity test

* refactor(settings): Update authenticated identity test to use OSFTestingModule

Author: futa-ikeda

src/app/features/profile/components/profile-information/profile-information.component.ts

@@ -9,6 +9,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { EducationHistoryComponent } from '@osf/shared/components/education-history/education-history.component';
 import { EmploymentHistoryComponent } from '@osf/shared/components/employment-history/employment-history.component';
 import { SOCIAL_LINKS } from '@osf/shared/constants/social-links.const';
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
 import { IS_MEDIUM } from '@osf/shared/helpers/breakpoints.tokens';
 import { UserModel } from '@osf/shared/models/user/user.models';
 import { SortByDatePipe } from '@osf/shared/pipes/sort-by-date.pipe';
@@ -45,7 +46,7 @@ export class ProfileInformationComponent {
 
   orcidId = computed(() => {
     const orcid = this.currentUser()?.external_identity?.ORCID;
-    return orcid?.status?.toUpperCase() === 'VERIFIED' ? orcid.id : undefined;
+    return orcid?.status?.toUpperCase() === ExternalIdentityStatus.VERIFIED ? orcid.id : undefined;
   });
 
   toProfileSettings() {

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.html

@@ -0,0 +1,39 @@
+<div class="flex flex-column row-gap-4 border-1 border-round-lg grey-border-color p-3 md:p-4 xl:p-5">
+  <div class="flex flex-row justify-content-between">
+    <h2>
+      {{ 'settings.profileSettings.social.labels.authenticatedIdentity' | translate }}
+    </h2>
+  </div>
+  <div class="flex flex-column row-gap-4 w-full md:flex-row md:align-items-end md:column-gap-3">
+    <div class="w-full md:w-12">
+      @if (existingOrcid()) {
+        <div class="flex flex-row align-items-center gap-2">
+          <img ngSrc="assets/icons/colored/orcid.svg" width="16" height="16" alt="orcid" />
+          <a class="font-bold" [href]="orcidUrl()"> {{ orcidUrl() }} </a>
+          <p-button
+            icon="fas fa-times"
+            class="w-6 md:w-auto"
+            severity="danger"
+            variant="text"
+            [pTooltip]="'settings.profileSettings.social.disconnectOrcid' | translate"
+            [ariaLabel]="'settings.profileSettings.social.disconnectOrcid' | translate"
+            (onClick)="disconnectOrcid()"
+          >
+          </p-button>
+        </div>
+      } @else {
+        <p-button
+          class="w-6 md:w-auto"
+          [label]="'settings.profileSettings.social.connectOrcid' | translate"
+          severity="secondary"
+          (onClick)="connectOrcid()"
+        >
+        </p-button>
+        <p
+          class="mt-2 text-sm text-gray-600"
+          [innerHTML]="'settings.profileSettings.social.orcidDescription' | translate"
+        ></p>
+      }
+    </div>
+  </div>
+</div>

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.scss

@@ -0,0 +1,71 @@
+import { MockProvider } from 'ng-mocks';
+
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountSettingsSelectors } from '@osf/features/settings/account-settings/store/account-settings.selectors';
+import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
+
+import { AuthenticatedIdentityComponent } from './authenticated-identity.component';
+
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import {
+  CustomConfirmationServiceMock,
+  CustomConfirmationServiceMockType,
+} from '@testing/providers/custom-confirmation-provider.mock';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('AuthenticatedIdentityComponent', () => {
+  let component: AuthenticatedIdentityComponent;
+  let fixture: ComponentFixture<AuthenticatedIdentityComponent>;
+  let customConfirmationServiceMock: CustomConfirmationServiceMockType;
+
+  const mockExternalIdentities = signal([
+    {
+      id: 'ORCID',
+      externalId: '0001-0002-0003-0004',
+      status: 'VERIFIED',
+    },
+  ]);
+
+  beforeEach(async () => {
+    customConfirmationServiceMock = CustomConfirmationServiceMock.simple();
+    await TestBed.configureTestingModule({
+      imports: [AuthenticatedIdentityComponent, OSFTestingModule],
+      providers: [
+        MockProvider(CustomConfirmationService, customConfirmationServiceMock),
+        provideMockStore({
+          signals: [
+            {
+              selector: AccountSettingsSelectors.getExternalIdentities,
+              value: mockExternalIdentities,
+            },
+          ],
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthenticatedIdentityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show existing user ORCID when present in external identities', () => {
+    expect(component.existingOrcid()).toEqual('0001-0002-0003-0004');
+    expect(component.orcidUrl()).toEqual('https://orcid.org/0001-0002-0003-0004');
+    component.disconnectOrcid();
+    expect(customConfirmationServiceMock.confirmDelete).toHaveBeenCalled();
+  });
+
+  it('should show connect button when no existing ORCID is present in external identities', () => {
+    mockExternalIdentities.set([]);
+    fixture.detectChanges();
+
+    expect(component.existingOrcid()).toBeUndefined();
+    expect(component.orcidUrl()).toBeNull();
+  });
+});

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts

@@ -0,0 +1,77 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Tooltip } from 'primeng/tooltip';
+
+import { finalize } from 'rxjs';
+
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@angular/core';
+
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
+import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
+import { LoaderService } from '@osf/shared/services/loader.service';
+import { ToastService } from '@osf/shared/services/toast.service';
+
+import {
+  AccountSettingsSelectors,
+  DeleteExternalIdentity,
+  GetExternalIdentities,
+} from '../../../account-settings/store';
+
+@Component({
+  selector: 'osf-authenticated-identity',
+  imports: [NgOptimizedImage, Button, Tooltip, TranslatePipe],
+  templateUrl: './authenticated-identity.component.html',
+  styleUrl: './authenticated-identity.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AuthenticatedIdentityComponent implements OnInit {
+  private readonly customConfirmationService = inject(CustomConfirmationService);
+  private readonly toastService = inject(ToastService);
+  private readonly loaderService = inject(LoaderService);
+
+  private readonly ORCID_PROVIDER = 'ORCID';
+
+  ngOnInit() {
+    this.actions.getExternalIdentities();
+  }
+
+  readonly actions = createDispatchMap({
+    deleteExternalIdentity: DeleteExternalIdentity,
+    getExternalIdentities: GetExternalIdentities,
+  });
+
+  readonly externalIdentities = select(AccountSettingsSelectors.getExternalIdentities);
+
+  readonly orcidUrl = computed(() => {
+    return this.existingOrcid() ? `https://orcid.org/${this.existingOrcid()}` : null;
+  });
+
+  readonly existingOrcid = computed(
+    (): string | undefined =>
+      this.externalIdentities()?.find((i) => i.id === 'ORCID' && i.status === ExternalIdentityStatus.VERIFIED)
+        ?.externalId
+  );
+
+  disconnectOrcid(): void {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'settings.accountSettings.connectedIdentities.deleteDialog.header',
+      messageParams: { name: this.ORCID_PROVIDER },
+      messageKey: 'settings.accountSettings.connectedIdentities.deleteDialog.message',
+      onConfirm: () => {
+        this.loaderService.show();
+        this.actions
+          .deleteExternalIdentity(this.ORCID_PROVIDER)
+          .pipe(finalize(() => this.loaderService.hide()))
+          .subscribe(() => this.toastService.showSuccess('settings.accountSettings.connectedIdentities.successDelete'));
+      },
+    });
+  }
+
+  connectOrcid(): void {
+    /* no-op for now*/
+  }
+}

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts

@@ -1,3 +1,5 @@
+<osf-authenticated-identity />
+
 <form [formGroup]="socialLinksForm">
   <div formArrayName="links" class="flex flex-column row-gap-4 social">
     @for (link of links.controls; track index; let index = $index) {

src/app/features/settings/profile-settings/components/social/social.component.html

@@ -8,6 +8,7 @@ import { CustomConfirmationService } from '@osf/shared/services/custom-confirmat
 import { LoaderService } from '@osf/shared/services/loader.service';
 import { ToastService } from '@osf/shared/services/toast.service';
 
+import { AuthenticatedIdentityComponent } from '../authenticated-identity/authenticated-identity.component';
 import { SocialFormComponent } from '../social-form/social-form.component';
 
 import { SocialComponent } from './social.component';
@@ -24,7 +25,12 @@ describe('SocialComponent', () => {
     jest.clearAllMocks();
 
     await TestBed.configureTestingModule({
-      imports: [SocialComponent, MockComponent(SocialFormComponent), MockPipe(TranslatePipe)],
+      imports: [
+        SocialComponent,
+        MockComponent(SocialFormComponent),
+        MockComponent(AuthenticatedIdentityComponent),
+        MockPipe(TranslatePipe),
+      ],
       providers: [
         provideMockStore({
           signals: [{ selector: UserSelectors.getSocialLinks, value: MOCK_USER.social }],

src/app/features/settings/profile-settings/components/social/social.component.spec.ts

@@ -25,11 +25,12 @@ import { SocialModel } from '@shared/models/user/social.model';
 import { SocialLinksForm } from '@shared/models/user/social-links.model';
 
 import { hasSocialLinkChanges, mapSocialLinkToPayload } from '../../helpers';
+import { AuthenticatedIdentityComponent } from '../authenticated-identity/authenticated-identity.component';
 import { SocialFormComponent } from '../social-form/social-form.component';
 
 @Component({
   selector: 'osf-social',
-  imports: [Button, ReactiveFormsModule, SocialFormComponent, TranslatePipe],
+  imports: [Button, ReactiveFormsModule, SocialFormComponent, AuthenticatedIdentityComponent, TranslatePipe],
   templateUrl: './social.component.html',
   styleUrl: './social.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -52,7 +53,9 @@ export class SocialComponent {
   readonly socialLinksForm = this.fb.group({ links: this.fb.array<SocialLinksForm>([]) });
 
   constructor() {
-    effect(() => this.setInitialData());
+    effect(() => {
+      this.setInitialData();
+    });
   }
 
   get links(): FormArray<FormGroup> {

src/app/features/settings/profile-settings/components/social/social.component.ts

@@ -0,0 +1,5 @@
+export enum ExternalIdentityStatus {
+  VERIFIED = 'VERIFIED',
+  LINK = 'LINK',
+  CREATE = 'CREATE',
+}

src/app/shared/enums/external-identity-status.enum.ts

@@ -1,6 +1,8 @@
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
+
 export interface OrcidInfo {
   id: string;
-  status: string;
+  status: ExternalIdentityStatus;
 }
 
 export interface ExternalIdentityModel {