feat(synapse): create Synapse API Client for Angular from official Op…

…enAPI description (ARCH-287) (#2849)

apps/agora/app/src/app/app.config.ts

@@ -7,6 +7,7 @@ import {
 import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { BASE_PATH as API_CLIENT_BASE_PATH } from '@sagebionetworks/agora/api-client-angular';
+import { BASE_PATH as SYNAPSE_API_CLIENT_BASE_PATH } from '@sagebionetworks/synapse/api-client-angular';
 import { configFactory, ConfigService } from '@sagebionetworks/agora/config';
 
 import { routes } from './app.routes';
@@ -24,6 +25,11 @@ export const appConfig: ApplicationConfig = {
       useFactory: () => '.',
       deps: [],
     },
+    {
+      provide: SYNAPSE_API_CLIENT_BASE_PATH,
+      useFactory: () => 'https://repo-prod.prod.sagebase.org',
+      deps: [],
+    },
     {
       provide: APP_INITIALIZER,
       useFactory: configFactory,

libs/agora/not-found/src/lib/not-found.component.html

@@ -2,7 +2,8 @@
   <div class="err-message">
     <em class="err-code">404b</em>
     <h1>Page Not Found</h1>
-    <p>Oops! The page you are looking for does not exist. It might have been moved or deleted.</p>
+    <p>Oops! The page you are looking for does not exist. It might have been
+      moved or deleted.</p>
   </div>
   <div *ngIf="dataversion$ | async as dataVersion">
     <h3>Data Release Info</h3>
@@ -12,15 +13,20 @@ <h3>Data Release Info</h3>
       <li>Team Images Id: {{ dataVersion.team_images_id }}</li>
     </ul>
   </div>
+  <div *ngIf="wiki$ | async as wiki">
+    <h4>Wiki page fetched with local HTTP request</h4>
+    {{ wiki | json }}
+  </div>
+  <div *ngIf="wikiAlternative$ | async as wikiAlternative">
+    <h4>Wiki page fetched with Synapse API Client for Angular</h4>
+    {{ wikiAlternative | json }}
+  </div>
   <div class="btn-group">
     <a mat-raised-button class="home-btn" href="/home">Home</a>
-    <a
-      mat-raised-button
-      color="basic"
-      href="https://github.com/Sage-Bionetworks/sage-monorepo/issues/new/choose"
-      >Contact Us</a
-    >
+    <a mat-raised-button color="basic"
+      href="https://github.com/Sage-Bionetworks/sage-monorepo/issues/new/choose">Contact
+      Us</a>
   </div>
 </main>
 
-<agora-footer [appVersion]="appVersion" [apiDocsUrl]="apiDocsUrl" />
+<agora-footer [appVersion]="appVersion" [apiDocsUrl]="apiDocsUrl" />

libs/agora/not-found/src/lib/not-found.component.ts

@@ -9,6 +9,9 @@ import { SeoService } from '@sagebionetworks/shared/util';
 import { DataversionService, Dataversion } from '@sagebionetworks/agora/api-client-angular';
 import { getSeoData } from './seo-data';
 import { Observable } from 'rxjs';
+import { SynapseApiService } from '@sagebionetworks/agora/services';
+import { SynapseWiki } from '@sagebionetworks/agora/models';
+import { OrgSagebionetworksRepoModelWikiWikiPage } from '@sagebionetworks/synapse/api-client-angular';
 
 @Component({
   selector: 'agora-not-found',
@@ -22,12 +25,15 @@ export class NotFoundComponent implements OnInit {
   public apiDocsUrl: string;
 
   dataversion$!: Observable<Dataversion>;
+  wiki$!: Observable<SynapseWiki>;
+  wikiAlternative$!: Observable<OrgSagebionetworksRepoModelWikiWikiPage>;
 
   constructor(
     private readonly configService: ConfigService,
     private dataversionService: DataversionService,
     private seoService: SeoService,
     private renderer2: Renderer2,
+    private synapseApiService: SynapseApiService,
   ) {
     this.appVersion = this.configService.config.appVersion;
     this.apiDocsUrl = this.configService.config.apiDocsUrl;
@@ -37,5 +43,10 @@ export class NotFoundComponent implements OnInit {
 
   ngOnInit(): void {
     this.dataversion$ = this.dataversionService.getDataversion();
+
+    const ownerId = 'syn25913473';
+    const wikiId = '612058';
+    this.wiki$ = this.synapseApiService.getWiki(ownerId, wikiId);
+    this.wikiAlternative$ = this.synapseApiService.getWikiAlternative(ownerId, wikiId);
   }
 }

libs/agora/not-found/tsconfig.json

@@ -17,7 +17,8 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "target": "es2020"
+    "target": "es2020",
+    "esModuleInterop": true
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,

libs/agora/services/src/lib/synapse-api.service.ts

@@ -6,6 +6,10 @@ import { HttpClient } from '@angular/common/http';
 import { tap } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
 import sanitizeHtml from 'sanitize-html';
+import {
+  OrgSagebionetworksRepoModelWikiWikiPage,
+  WikiPageServicesService,
+} from '@sagebionetworks/synapse/api-client-angular';
 
 // -------------------------------------------------------------------------- //
 // Internal
@@ -15,11 +19,26 @@ import { SynapseWiki } from '../models';
 // -------------------------------------------------------------------------- //
 // Service
 // -------------------------------------------------------------------------- //
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class SynapseApiService {
   wikis: { [key: string]: any } = {};
 
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private wikiPageService: WikiPageServicesService,
+  ) {}
+
+  // I created this method or to facilitate the comparison with `getWiki()`. In practice, there is
+  // no need for a wrapper method like done here: the Agora components and services should directly
+  // make call to the Synapse API using the Angular client.
+  getWikiAlternative(
+    ownerId: string,
+    wikiId: string,
+  ): Observable<OrgSagebionetworksRepoModelWikiWikiPage> {
+    return this.wikiPageService.getRepoV1EntityOwnerIdWikiWikiId(ownerId, wikiId);
+  }
 
   getWiki(ownerId: string, wikiId: string): Observable<SynapseWiki> {
     const key = ownerId + wikiId;

libs/synapse/api-client-angular/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["src/**/*.ts"]
+}

libs/synapse/api-client-angular/README.md

@@ -0,0 +1,7 @@
+# api-client-angular
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test api-client-angular` to execute the unit tests.

libs/synapse/api-client-angular/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'synapse-api-client-angular',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../../coverage/libs/synapse/api-client-angular',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/synapse/api-client-angular/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/libs/synapse/api-client-angular",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/synapse/api-client-angular/openapitools.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../../node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "6.1.0",
+    "generators": {
+      "api-client-angular": {
+        "config": "templates/config.yaml",
+        "generatorName": "typescript-angular",
+        "inputSpec": "#{cwd}/../api-description/build/openapi.json",
+        "output": "#{cwd}/src/lib/",
+        "templateDir": "templates",
+        "additionalProperties": {
+          "ngVersion": "14.2.11"
+        }
+      }
+    }
+  }
+}

libs/synapse/api-client-angular/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@sagebionetworks/synapse-api-client-angular",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^13.2.0",
+    "@angular/core": "^13.2.0"
+  },
+  "dependencies": {
+    "tslib": "2.4.1"
+  }
+}

libs/synapse/api-client-angular/project.json

@@ -0,0 +1,49 @@
+{
+  "name": "synapse-api-client-angular",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/synapse/api-client-angular/src",
+  "projectType": "library",
+  "prefix": "synapse",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:ng-packagr-lite",
+      "outputs": ["{workspaceRoot}/dist/libs/openchallenges/api-client-angular"],
+      "options": {
+        "project": "libs/openchallenges/api-client-angular/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/openchallenges/api-client-angular/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/openchallenges/api-client-angular/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/openchallenges/api-client-angular"],
+      "options": {
+        "jestConfig": "libs/openchallenges/api-client-angular/jest.config.ts"
+      }
+    },
+    "lint-fix": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "fix": true
+      }
+    },
+    "generate": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["rm -fr src/lib/*", "openapi-generator-cli generate"],
+        "cwd": "{projectRoot}",
+        "parallel": false
+      },
+      "dependsOn": ["^get"]
+    }
+  },
+  "tags": ["language:typescript"],
+  "implicitDependencies": ["synapse-api-description"]
+}

libs/synapse/api-client-angular/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

libs/synapse/api-client-angular/src/lib/.gitignore

@@ -0,0 +1,4 @@
+wwwroot/*.js
+node_modules
+typings
+dist

libs/synapse/api-client-angular/src/lib/.openapi-generator-ignore

@@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md