Provide add-in config to allow for additional host origins (#59)

Co-authored-by: BLACKBAUD\Michael.Tims <[email protected]>

.gitignore

@@ -1,3 +1,6 @@
+# Ignore cache directory used by @angular-eslint/builder
+/.nx/cache
+
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 9.2.0 (2024-06-20)
+- Added `AddinClientConfigService` abstract service to allow additional host origins to be supplied for the `AddinClientService`.
+
 # 9.1.1 (2024-04-26)
 - Pulling in SKY UX and sky-addin-client package updates.
 

angular.json

@@ -32,7 +32,8 @@
             "karmaConfig": "projects/addin-client/karma.conf.js",
             "codeCoverage": true,
             "codeCoverageExclude": [
-              "**/fixtures/**"
+              "**/fixtures/**",
+              "**/addin-client-config.service.ts"
             ],
             "styles": [
               "node_modules/@skyux/theme/css/sky.css",

package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser": "17.3.6",
     "@angular/platform-browser-dynamic": "17.3.6",
     "@angular/router": "17.3.6",
-    "@blackbaud/sky-addin-client": "1.2.2",
+    "@blackbaud/sky-addin-client": "1.3.0",
     "@skyux/assets": "10.7.0",
     "@skyux/config": "10.7.0",
     "@skyux/core": "10.7.0",

projects/addin-client/README.md

@@ -252,4 +252,34 @@ this.addinClientService.showWait();
 this.addinClientService.hideWait();
 ```
 
+## Additional configuration
+
+The SKY UX Add-in Client allows for additional configuration to be specified by extending `AddinClientConfigService`.
+
+You can allow additional origins where your add-in client may run within a Blackbaud host page. Additional origins are supplied as regular expression patterns. The `AddinClientService` already allows several Blackbaud host origins by default. If you find a need to extend the defaults, you may do so by overriding the `AddinClientConfigService`'s `getAddinClientConfig()` method.
+
+```js
+class AddinConfigService extends AddinClientConfigService {
+  public override getAddinClientConfig(): AddinClientConfig {
+    return {
+      allowedOrigins: [
+        /^https\:\/\/[\w\-\.]+\.additionalblackbauddomain\.com$/
+      ]
+    };
+  }
+}
+
+@NgModule({
+  // specify providers
+  providers: [
+    AddinClientService,
+    {
+      provide: AddinClientConfigService,
+      useClass: AddinConfigService
+    }
+  ]
+})
+export class MyModule { }
+```
+
 For more information on creating SKY Add-ins, view the documentation on the [SKY Developer Portal](https://developer.blackbaud.com/skyapi/docs/addins)

projects/addin-client/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@blackbaud/skyux-lib-addin-client",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "peerDependencies": {
     "@angular/common": "^17.3.6",
     "@angular/core": "^17.3.6",
     "@skyux/config": "^10.7.0",
     "@skyux/theme": "^10.7.0"
   },
   "dependencies": {
-    "@blackbaud/sky-addin-client": "^1.2.2",
+    "@blackbaud/sky-addin-client": "^1.3.0",
     "tslib": "^2.6.2"
   }
 }

projects/addin-client/src/public-api.ts

@@ -1,3 +1,4 @@
 export * from './src/addin-client.service';
+export * from './src/addin-client-config.service';
 export * from './src/events/addin-event';
 export * from './src/events/addin-event-handler-instance';

projects/addin-client/src/src/addin-client-config.service.ts

@@ -0,0 +1,14 @@
+import { AddinClientConfig } from "@blackbaud/sky-addin-client";
+
+/**
+ * Implement this class with your own data to initialize the add-in client service. 
+ */ 
+export abstract class AddinClientConfigService {
+  /**
+   * Gets the AddinClientConfig object that will be injected the
+   * AddinClient instance when instantiated.
+   */
+  public getAddinClientConfig(): AddinClientConfig {
+    return {};
+  }
+}

projects/addin-client/src/src/addin-client.service.spec.ts

@@ -3,6 +3,7 @@ import {
 } from '@angular/core/testing';
 import {
   AddinClientCloseModalArgs,
+  AddinClientConfig,
   AddinClientInitArgs,
   AddinClientNavigateArgs,
   AddinClientOpenHelpArgs,
@@ -23,6 +24,7 @@ import {
 } from '@skyux-sdk/testing';
 import { SkyAppConfig } from '@skyux/config';
 import { SkyTheme, SkyThemeMode, SkyThemeService, SkyThemeSettings } from '@skyux/theme';
+import { AddinClientConfigService } from './addin-client-config.service';
 import {
   AddinClientService
 } from './addin-client.service';
@@ -755,4 +757,63 @@ describe('Addin Client Service', () => {
       done();
     });
   });
+
+  describe('With Addin Client Config Service', () => {
+    class AddinConfigService extends AddinClientConfigService {
+      public override getAddinClientConfig(): AddinClientConfig {
+        return {
+          allowedOrigins: [
+            /^https\:\/\/[\w\-\.]+\.additionaldomain1\.com$/,
+            /^https\:\/\/[\w\-\.]+\.additionaldomain2\.com$/,
+            /^https\:\/\/[\w\-\.]+\.additionaldomain3\.com$/
+          ]
+        };
+      }
+    }
+
+    let addinClientService: AddinClientService;
+    let addinConfigService: AddinClientConfigService;
+
+    class MockSkyAppConfig {
+      public get skyux(): any {
+        return {};
+      }
+    };
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+        {
+          providers: [
+            AddinClientService,
+            SkyThemeService,
+            {
+              provide: SkyAppConfig, useClass: MockSkyAppConfig
+            },
+            {
+              provide: AddinClientConfigService, useClass: AddinConfigService
+            }
+          ]
+        }
+      );
+
+      addinConfigService = TestBed.inject(AddinClientConfigService);
+      spyOn(addinConfigService, 'getAddinClientConfig').and.callThrough();
+
+      addinClientService = TestBed.inject(AddinClientService);
+    });
+
+    it('should override getAddinClientConfig function', () => {
+      expect(addinConfigService.getAddinClientConfig).toHaveBeenCalledTimes(1);
+    });
+
+    it('destroys the addin client', (done) => {
+      spyOn(addinClientService.addinClient, 'destroy').and.stub();
+
+      addinClientService.destroy();
+
+      expect(addinClientService.addinClient.destroy).toHaveBeenCalled();
+
+      done();
+    });
+  });
 });

projects/addin-client/src/src/addin-client.service.ts

@@ -35,6 +35,7 @@ import {
   Observable,
   from
 } from 'rxjs';
+import { AddinClientConfigService } from './addin-client-config.service';
 import {
   AddinEvent,
   AddinEventHandlerInstance
@@ -84,6 +85,7 @@ export class AddinClientService {
   #config = inject(SkyAppConfig, { optional: true });
   #rendererFactory = inject(RendererFactory2);
   #themeService = inject(SkyThemeService);
+  #addinClientConfigService = inject(AddinClientConfigService, { optional: true });
 
   constructor() {
     this.addinClient = new AddinClient({
@@ -115,7 +117,8 @@ export class AddinClientService {
         themeChange: (settings: AddinClientThemeSettings) => {
           this.setTheme(settings);
         }
-      }
+      },
+      config: this.#addinClientConfigService?.getAddinClientConfig()
     });
   }