[HOLD] [ENG-8975] Redirect addons support

src/app/features/project/project-addons/components/connect-configured-addon/connect-configured-addon.component.html

@@ -11,7 +11,7 @@ <h2>
             </h2>
 
             <div class="mt-4">
-              <osf-addon-terms [addon]="addon()" />
+              <osf-addon-terms [addon]="addon()" [redirectUrl]="redirectUrl()" />
             </div>
 
             <div class="flex flex-column gap-2 mt-4">
@@ -33,17 +33,29 @@ <h2>
                 [routerLink]="[baseUrl() + '/addons']"
                 data-test-addon-cancel-button
               ></p-button>
-              <p-button
-                [label]="
-                  !isAuthorizedAddonsLoading()
-                    ? ('settings.addons.form.buttons.next' | translate)
-                    : ('settings.addons.form.buttons.acceptingTerms' | translate)
-                "
-                class="w-10rem btn-full-width"
-                [loading]="isAuthorizedAddonsLoading()"
-                (onClick)="handleAuthorizedAccountsPresenceCheck()"
-                data-test-addon-terms-confirm-button
-              ></p-button>
+              @if (addonTypeString() === AddonType.REDIRECT) {
+                <p-button
+                  [label]="
+                    'settings.addons.connectAddon.redirectAddons.goToService'
+                      | translate: { serviceName: addon()?.displayName }
+                  "
+                  class="w-10rem btn-full-width"
+                  (onClick)="goToService()"
+                  data-test-addon-redirect-button
+                />
+              } @else {
+                <p-button
+                  [label]="
+                    !isAuthorizedAddonsLoading()
+                      ? ('settings.addons.form.buttons.next' | translate)
+                      : ('settings.addons.form.buttons.acceptingTerms' | translate)
+                  "
+                  class="w-10rem btn-full-width"
+                  [loading]="isAuthorizedAddonsLoading()"
+                  (onClick)="handleAuthorizedAccountsPresenceCheck()"
+                  data-test-addon-terms-confirm-button
+                ></p-button>
+              }
             </div>
           </section>
         </ng-template>

src/app/features/project/project-addons/components/connect-configured-addon/connect-configured-addon.component.ts

@@ -146,6 +146,17 @@ export class ConnectConfiguredAddonComponent {
 
   addonTypeString = computed(() => getAddonTypeString(this.addon()) as AddonType);
 
+  redirectUrl = computed(() => {
+    const addon = this.addon();
+    if (!addon || !addon.redirectUrl) {
+      return null;
+    }
+    const openURL = new URL(addon.redirectUrl);
+    openURL.searchParams.set('nodeIri', this.resourceUri());
+    openURL.searchParams.set('userIri', this.addonsUserReference()[0]?.attributes.user_uri);
+    return openURL.toString();
+  });
+
   readonly baseUrl = computed(() => {
     const currentUrl = this.router.url;
     return currentUrl.split('/addons')[0];
@@ -255,6 +266,22 @@ export class ConnectConfiguredAddonComponent {
     });
   }
 
+  goToService() {
+    if (!this.redirectUrl()) return;
+
+    const newWindow = window.open(
+      this.redirectUrl()!.toString(),
+      '_blank',
+      'popup,width=600,height=600,scrollbars=yes,resizable=yes'
+    );
+    if (newWindow) {
+      this.router.navigate([`${this.baseUrl()}/addons`]);
+      newWindow.focus();
+    } else {
+      this.toastService.showError('addons.redirect.popUpError');
+    }
+  }
+
   private getDataForAccountCheck() {
     const addonType = this.addonTypeString();
     const referenceId = this.userReferenceId();

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

@@ -47,6 +47,7 @@ import {
   GetConfiguredLinkAddons,
   GetConfiguredStorageAddons,
   GetLinkAddons,
+  GetRedirectAddons,
   GetStorageAddons,
 } from '@shared/stores/addons';
 import { CurrentResourceSelectors } from '@shared/stores/current-resource';
@@ -91,6 +92,7 @@ export class ProjectAddonsComponent implements OnInit {
   storageAddons = select(AddonsSelectors.getStorageAddons);
   citationAddons = select(AddonsSelectors.getCitationAddons);
   linkAddons = select(AddonsSelectors.getLinkAddons);
+  redirectAddons = select(AddonsSelectors.getRedirectAddons);
   configuredStorageAddons = select(AddonsSelectors.getConfiguredStorageAddons);
   configuredCitationAddons = select(AddonsSelectors.getConfiguredCitationAddons);
   configuredLinkAddons = select(AddonsSelectors.getConfiguredLinkAddons);
@@ -100,6 +102,8 @@ export class ProjectAddonsComponent implements OnInit {
   isResourceReferenceLoading = select(AddonsSelectors.getAddonsResourceReferenceLoading);
   isStorageAddonsLoading = select(AddonsSelectors.getStorageAddonsLoading);
   isCitationAddonsLoading = select(AddonsSelectors.getCitationAddonsLoading);
+  isLinkAddonsLoading = select(AddonsSelectors.getLinkAddonsLoading);
+  isRedirectAddonsLoading = select(AddonsSelectors.getRedirectAddonsLoading);
   isConfiguredStorageAddonsLoading = select(AddonsSelectors.getConfiguredStorageAddonsLoading);
   isConfiguredCitationAddonsLoading = select(AddonsSelectors.getConfiguredCitationAddonsLoading);
   isConfiguredLinkAddonsLoading = select(AddonsSelectors.getConfiguredLinkAddonsLoading);
@@ -108,6 +112,7 @@ export class ProjectAddonsComponent implements OnInit {
       this.isStorageAddonsLoading() ||
       this.isCitationAddonsLoading() ||
       this.isLinkAddonsLoading() ||
+      this.isRedirectAddonsLoading() ||
       this.isUserReferenceLoading() ||
       this.isCurrentUserLoading()
     );
@@ -135,8 +140,6 @@ export class ProjectAddonsComponent implements OnInit {
     return categoryLoading || this.isResourceReferenceLoading() || this.isCurrentUserLoading();
   });
 
-  isLinkAddonsLoading = select(AddonsSelectors.getLinkAddonsLoading);
-
   currentAddonsLoading = computed(() => {
     switch (this.selectedCategory()) {
       case AddonCategory.EXTERNAL_STORAGE_SERVICES:
@@ -145,6 +148,8 @@ export class ProjectAddonsComponent implements OnInit {
         return this.isCitationAddonsLoading();
       case AddonCategory.EXTERNAL_LINK_SERVICES:
         return this.isLinkAddonsLoading();
+      case AddonCategory.EXTERNAL_REDIRECT_SERVICES:
+        return this.isRedirectAddonsLoading();
       default:
         return this.isStorageAddonsLoading();
     }
@@ -158,6 +163,7 @@ export class ProjectAddonsComponent implements OnInit {
     getStorageAddons: GetStorageAddons,
     getCitationAddons: GetCitationAddons,
     getLinkAddons: GetLinkAddons,
+    getRedirectAddons: GetRedirectAddons,
     getConfiguredStorageAddons: GetConfiguredStorageAddons,
     getConfiguredCitationAddons: GetConfiguredCitationAddons,
     getConfiguredLinkAddons: GetConfiguredLinkAddons,
@@ -221,6 +227,8 @@ export class ProjectAddonsComponent implements OnInit {
         return this.actions.getCitationAddons;
       case AddonCategory.EXTERNAL_LINK_SERVICES:
         return this.actions.getLinkAddons;
+      case AddonCategory.EXTERNAL_REDIRECT_SERVICES:
+        return this.actions.getRedirectAddons;
       default:
         return this.actions.getStorageAddons;
     }
@@ -234,6 +242,8 @@ export class ProjectAddonsComponent implements OnInit {
         return this.citationAddons();
       case AddonCategory.EXTERNAL_LINK_SERVICES:
         return this.linkAddons();
+      case AddonCategory.EXTERNAL_REDIRECT_SERVICES:
+        return this.redirectAddons();
       default:
         return this.storageAddons();
     }

src/app/shared/components/addons/addon-terms/addon-terms.component.html

@@ -1,24 +1,37 @@
-<p-table [value]="terms()" class="addon-table">
-  <ng-template pTemplate="header">
-    <tr>
-      <th>
-        {{ 'settings.addons.connectAddon.table.function' | translate }}
-      </th>
-      <th>
-        {{ 'settings.addons.connectAddon.table.status' | translate }}
-      </th>
-    </tr>
-  </ng-template>
-  <ng-template pTemplate="body" let-term>
-    <tr
-      [ngClass]="{
-        'background-warning': term.type === 'warning',
-        'background-success': term.type === 'info',
-        'background-danger': term.type === 'danger',
-      }"
-    >
-      <td>{{ term.function }}</td>
-      <td>{{ term.status }}</td>
-    </tr>
-  </ng-template>
-</p-table>
+@if (isRedirectService()) {
+  <p class="mb-4">
+    {{ 'settings.addons.connectAddon.redirectAddons.terms' | translate }}
+  </p>
+  <em
+    class="ml-2"
+    [innerHTML]="
+      'settings.addons.connectAddon.redirectAddons.tip'
+        | translate: { serviceName: addon()?.displayName, serviceUrl: redirectUrl() }
+    "
+  ></em>
+} @else {
+  <p-table [value]="terms()" class="addon-table">
+    <ng-template pTemplate="header">
+      <tr>
+        <th>
+          {{ 'settings.addons.connectAddon.table.function' | translate }}
+        </th>
+        <th>
+          {{ 'settings.addons.connectAddon.table.status' | translate }}
+        </th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-term>
+      <tr
+        [ngClass]="{
+          'background-warning': term.type === 'warning',
+          'background-success': term.type === 'info',
+          'background-danger': term.type === 'danger',
+        }"
+      >
+        <td>{{ term.function }}</td>
+        <td>{{ term.status }}</td>
+      </tr>
+    </ng-template>
+  </p-table>
+}

src/app/shared/components/addons/addon-terms/addon-terms.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ADDON_TERMS } from '@osf/shared/constants/addon-terms.const';
-import { isCitationAddon } from '@osf/shared/helpers/addon-type.helper';
+import { isCitationAddon, isRedirectAddon } from '@osf/shared/helpers/addon-type.helper';
 import { AddonModel } from '@osf/shared/models/addons/addon.model';
 import { AddonTerm } from '@osf/shared/models/addons/addon-utils.models';
 
@@ -12,12 +12,14 @@ import { OSFTestingModule } from '@testing/osf.testing.module';
 
 jest.mock('@shared/helpers/addon-type.helper.ts', () => ({
   isCitationAddon: jest.fn(),
+  isRedirectAddon: jest.fn(),
 }));
 
 describe('AddonTermsComponent', () => {
   let component: AddonTermsComponent;
   let fixture: ComponentFixture<AddonTermsComponent>;
   const mockIsCitationAddon = isCitationAddon as jest.MockedFunction<typeof isCitationAddon>;
+  const mockIsRedirectAddon = isRedirectAddon as jest.MockedFunction<typeof isRedirectAddon>;
   const mockAddon: AddonModel = MOCK_ADDON;
 
   beforeEach(async () => {
@@ -29,6 +31,7 @@ describe('AddonTermsComponent', () => {
     component = fixture.componentInstance;
 
     mockIsCitationAddon.mockReturnValue(false);
+    mockIsRedirectAddon.mockReturnValue(false);
   });
 
   it('should create', () => {
@@ -212,4 +215,24 @@ describe('AddonTermsComponent', () => {
 
     expect(hasInfoTerm || hasWarningTerm || hasDangerTerm).toBe(true);
   });
+
+  it('should handle redirect terms correctly', () => {
+    const redirectAddon: AddonModel = {
+      ...mockAddon,
+      type: 'redirect',
+    };
+
+    mockIsRedirectAddon.mockReturnValue(true);
+    fixture.componentRef.setInput('addon', redirectAddon);
+    fixture.detectChanges();
+
+    const terms = component.terms();
+    expect(terms).toEqual([]);
+
+    const termsElement: HTMLElement = fixture.nativeElement;
+    expect(termsElement.querySelectorAll('tr').length).toBe(0);
+    expect(termsElement.querySelectorAll('p').length).toBe(1);
+    expect(termsElement.querySelectorAll('em').length).toBe(1);
+    expect(termsElement.textContent).toContain('settings.addons.connectAddon.redirectAddons.terms');
+  });
 });

src/app/shared/components/addons/addon-terms/addon-terms.component.ts

@@ -6,7 +6,7 @@ import { NgClass } from '@angular/common';
 import { Component, computed, input } from '@angular/core';
 
 import { ADDON_TERMS } from '@osf/shared/constants/addon-terms.const';
-import { isCitationAddon } from '@osf/shared/helpers/addon-type.helper';
+import { isCitationAddon, isRedirectAddon } from '@osf/shared/helpers/addon-type.helper';
 import { AddonModel } from '@shared/models/addons/addon.model';
 import { AddonTerm } from '@shared/models/addons/addon-utils.models';
 import { AuthorizedAccountModel } from '@shared/models/addons/authorized-account.model';
@@ -19,6 +19,9 @@ import { AuthorizedAccountModel } from '@shared/models/addons/authorized-account
 })
 export class AddonTermsComponent {
   addon = input<AddonModel | AuthorizedAccountModel | null>(null);
+  redirectUrl = input<string | null>(null);
+
+  isRedirectService = computed(() => isRedirectAddon(this.addon()));
   terms = computed(() => {
     const addon = this.addon();
     if (!addon) {
@@ -31,6 +34,9 @@ export class AddonTermsComponent {
     const supportedFeatures = addon.supportedFeatures || [];
     const provider = addon.providerName;
     const isCitationService = isCitationAddon(addon);
+    if (isRedirectAddon(addon)) {
+      return [];
+    }
 
     const relevantTerms = isCitationService ? ADDON_TERMS.filter((term) => term.citation) : ADDON_TERMS;
 

src/app/shared/constants/addons-category-options.const.ts

@@ -14,4 +14,8 @@ export const ADDON_CATEGORY_OPTIONS: SelectOption[] = [
     label: 'settings.addons.categories.linkedServices',
     value: AddonCategory.EXTERNAL_LINK_SERVICES,
   },
+  {
+    label: 'settings.addons.categories.otherServices',
+    value: AddonCategory.EXTERNAL_REDIRECT_SERVICES,
+  },
 ];

src/app/shared/enums/addon-type.enum.ts

@@ -2,6 +2,7 @@ export enum AddonType {
   STORAGE = 'storage',
   CITATION = 'citation',
   LINK = 'link',
+  REDIRECT = 'redirect', // Redirect addons will not have authorized accounts or configured addons
 }
 
 export enum AuthorizedAccountType {

src/app/shared/enums/addons-category.enum.ts

@@ -2,4 +2,5 @@ export enum AddonCategory {
   EXTERNAL_STORAGE_SERVICES = 'external-storage-services',
   EXTERNAL_CITATION_SERVICES = 'external-citation-services',
   EXTERNAL_LINK_SERVICES = 'external-link-services',
+  EXTERNAL_REDIRECT_SERVICES = 'external-redirect-services',
 }

src/app/shared/helpers/addon-type.helper.ts

@@ -35,6 +35,12 @@ export function isLinkAddon(addon: AddonModel | AuthorizedAccountModel | Configu
   );
 }
 
+export function isRedirectAddon(addon: AddonModel | AuthorizedAccountModel | ConfiguredAddonModel | null): boolean {
+  if (!addon) return false;
+
+  return addon.type === AddonCategory.EXTERNAL_REDIRECT_SERVICES;
+}
+
 export function getAddonTypeString(addon: AddonModel | AuthorizedAccountModel | ConfiguredAddonModel | null): string {
   if (!addon) return '';
 

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

@@ -29,6 +29,7 @@ export class AddonMapper {
       credentialsFormat: response.attributes.credentials_format,
       providerName: response.attributes.display_name,
       iconUrl: response.attributes.icon_url,
+      redirectUrl: response.attributes.redirect_url,
       configurableApiRoot: response.attributes.configurable_api_root,
     };
   }

src/app/shared/models/addons/addon-json-api.models.ts

@@ -10,6 +10,7 @@ export interface AddonGetResponseJsonApi {
     credentials_format: string;
     wb_key: string;
     icon_url: string;
+    redirect_url?: string;
     configurable_api_root: boolean;
     [key: string]: unknown;
   };

src/app/shared/models/addons/addon.model.ts

@@ -14,4 +14,5 @@ export interface AddonModel {
   credentialsAvailable?: boolean;
   supportedResourceTypes?: string[];
   wbKey?: string;
+  redirectUrl?: string;
 }

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

@@ -16,6 +16,10 @@ export class GetLinkAddons {
   static readonly type = '[Addons] Get Link Addons';
 }
 
+export class GetRedirectAddons {
+  static readonly type = '[Addons] Get Other Addons';
+}
+
 export class GetAuthorizedStorageAddons {
   static readonly type = '[Addons] Get Authorized Storage Addons';