[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.html

@@ -22,7 +22,7 @@
           {{ 'settings.addons.description' | translate }}
         </p>
         <osf-addons-toolbar
-          [categoryOptions]="categoryOptions"
+          [categoryOptions]="categoryOptions()"
           [searchControl]="searchControl"
           [(selectedCategory)]="selectedCategory"
         />
@@ -43,7 +43,7 @@
           {{ 'settings.addons.connectedDescription' | translate }}
         </p>
         <osf-addons-toolbar
-          [categoryOptions]="categoryOptions"
+          [categoryOptions]="categoryOptions()"
           [searchControl]="searchControl"
           [(selectedCategory)]="selectedCategory"
         />

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';
@@ -76,7 +77,6 @@ export class ProjectAddonsComponent implements OnInit {
   private destroyRef = inject(DestroyRef);
   private queryParamsService = inject(AddonsQueryParamsService);
   readonly tabOptions = ADDON_TAB_OPTIONS;
-  readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
   readonly AddonTabValue = AddonTabValue;
   readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
   searchControl = new FormControl<string>('');
@@ -91,6 +91,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,14 +101,32 @@ 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);
+  activeFlags = select(UserSelectors.getActiveFlags);
+
+  readonly categoryOptions = computed(() => {
+    if (this.activeFlags().includes('gravy_redirect')) {
+      return [
+        ...ADDON_CATEGORY_OPTIONS,
+        {
+          label: 'settings.addons.categories.otherServices',
+          value: AddonCategory.EXTERNAL_REDIRECT_SERVICES,
+        },
+      ];
+    }
+    return ADDON_CATEGORY_OPTIONS;
+  });
+
   isAddonsLoading = computed(() => {
     return (
       this.isStorageAddonsLoading() ||
       this.isCitationAddonsLoading() ||
       this.isLinkAddonsLoading() ||
+      this.isRedirectAddonsLoading() ||
       this.isUserReferenceLoading() ||
       this.isCurrentUserLoading()
     );
@@ -135,8 +154,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 +162,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 +177,7 @@ export class ProjectAddonsComponent implements OnInit {
     getStorageAddons: GetStorageAddons,
     getCitationAddons: GetCitationAddons,
     getLinkAddons: GetLinkAddons,
+    getRedirectAddons: GetRedirectAddons,
     getConfiguredStorageAddons: GetConfiguredStorageAddons,
     getConfiguredCitationAddons: GetConfiguredCitationAddons,
     getConfiguredLinkAddons: GetConfiguredLinkAddons,
@@ -221,6 +241,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 +256,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/features/settings/settings-addons/components/connect-addon/connect-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">

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

@@ -72,6 +72,16 @@ export class ConnectAddonComponent {
     updateAuthorizedAddon: UpdateAuthorizedAddon,
   });
 
+  redirectUrl = computed(() => {
+    const addon = this.addon();
+    if (!addon || !addon.redirectUrl) {
+      return null;
+    }
+    const openURL = new URL(addon.redirectUrl);
+    openURL.searchParams.set('userIri', this.addonsUserReference()[0]?.attributes.user_uri);
+    return openURL.toString();
+  });
+
   constructor() {
     const addon = this.router.getCurrentNavigation()?.extras.state?.['addon'] as AddonModel | AuthorizedAccountModel;
     if (!addon) {

src/app/features/settings/settings-addons/settings-addons.component.html

@@ -24,7 +24,7 @@
         </p>
 
         <osf-addons-toolbar
-          [categoryOptions]="categoryOptions"
+          [categoryOptions]="categoryOptions()"
           [searchControl]="searchControl"
           [(selectedCategory)]="selectedCategory"
         />
@@ -43,7 +43,7 @@
           {{ 'settings.addons.connectedDescription' | translate }}
         </p>
         <osf-addons-toolbar
-          [categoryOptions]="categoryOptions"
+          [categoryOptions]="categoryOptions()"
           [searchControl]="searchControl"
           [(selectedCategory)]="selectedCategory"
         />

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

@@ -45,6 +45,7 @@ import {
   GetAuthorizedStorageAddons,
   GetCitationAddons,
   GetLinkAddons,
+  GetRedirectAddons,
   GetStorageAddons,
   UpdateAuthorizedAddon,
 } from '@shared/stores/addons';
@@ -74,7 +75,6 @@ export class SettingsAddonsComponent implements OnInit {
   private readonly route = inject(ActivatedRoute);
   private readonly queryParamsService = inject(AddonsQueryParamsService);
   readonly tabOptions = ADDON_TAB_OPTIONS;
-  readonly categoryOptions = ADDON_CATEGORY_OPTIONS;
   readonly AddonTabValue = AddonTabValue;
   readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
   searchControl = new FormControl<string>('');
@@ -87,6 +87,7 @@ export class SettingsAddonsComponent implements OnInit {
   storageAddons = select(AddonsSelectors.getStorageAddons);
   citationAddons = select(AddonsSelectors.getCitationAddons);
   linkAddons = select(AddonsSelectors.getLinkAddons);
+  redirectAddons = select(AddonsSelectors.getRedirectAddons);
   authorizedStorageAddons = select(AddonsSelectors.getAuthorizedStorageAddons);
   authorizedCitationAddons = select(AddonsSelectors.getAuthorizedCitationAddons);
   authorizedLinkAddons = select(AddonsSelectors.getAuthorizedLinkAddons);
@@ -96,9 +97,24 @@ export class SettingsAddonsComponent implements OnInit {
   isStorageAddonsLoading = select(AddonsSelectors.getStorageAddonsLoading);
   isCitationAddonsLoading = select(AddonsSelectors.getCitationAddonsLoading);
   isLinkAddonsLoading = select(AddonsSelectors.getLinkAddonsLoading);
+  isRedirectAddonsLoading = select(AddonsSelectors.getRedirectAddonsLoading);
   isAuthorizedStorageAddonsLoading = select(AddonsSelectors.getAuthorizedStorageAddonsLoading);
   isAuthorizedCitationAddonsLoading = select(AddonsSelectors.getAuthorizedCitationAddonsLoading);
   isAuthorizedLinkAddonsLoading = select(AddonsSelectors.getAuthorizedLinkAddonsLoading);
+  activeFlags = select(UserSelectors.getActiveFlags);
+
+  readonly categoryOptions = computed(() => {
+    if (this.activeFlags().includes('gravy_redirect')) {
+      return [
+        ...ADDON_CATEGORY_OPTIONS,
+        {
+          label: 'settings.addons.categories.otherServices',
+          value: AddonCategory.EXTERNAL_REDIRECT_SERVICES,
+        },
+      ];
+    }
+    return ADDON_CATEGORY_OPTIONS;
+  });
 
   currentAddonsLoading = computed(() => {
     switch (this.selectedCategory()) {
@@ -108,6 +124,8 @@ export class SettingsAddonsComponent 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();
     }
@@ -144,6 +162,7 @@ export class SettingsAddonsComponent implements OnInit {
     getStorageAddons: GetStorageAddons,
     getCitationAddons: GetCitationAddons,
     getLinkAddons: GetLinkAddons,
+    getRedirectAddons: GetRedirectAddons,
     getAuthorizedStorageAddons: GetAuthorizedStorageAddons,
     getAuthorizedCitationAddons: GetAuthorizedCitationAddons,
     getAuthorizedLinkAddons: GetAuthorizedLinkAddons,
@@ -193,6 +212,8 @@ export class SettingsAddonsComponent 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;
     }
@@ -206,6 +227,8 @@ export class SettingsAddonsComponent 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>
+}