fix: frontend request paths

use discovery api to find the backend and use fetch api to automatically add the authentication token to the request closes #57
awslabs · Apr 3, 2024 · 5d46eab · 5d46eab
1 parent 9def1b1
commit 5d46eab
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 62 deletions.
diff --git a/plugins/codebuild/frontend/src/api/AwsCodeBuildApiClient.ts b/plugins/codebuild/frontend/src/api/AwsCodeBuildApiClient.ts
@@ -11,24 +11,23 @@
  * limitations under the License.
  */
 
-import { IdentityApi } from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 
-import { ConfigApi } from '@backstage/core-plugin-api';
-import { AwsCodeBuildApi } from '.';
 import { ProjectsResponse } from '@aws/aws-codebuild-plugin-for-backstage-common';
 import { AwsApiClient } from '@aws/aws-core-plugin-for-backstage-react';
 import type { CompoundEntityRef } from '@backstage/catalog-model';
+import { AwsCodeBuildApi } from '.';
 
 export class AwsCodeBuildApiClient
   extends AwsApiClient
   implements AwsCodeBuildApi
 {
   public constructor(options: {
-    configApi: ConfigApi;
-    identityApi: IdentityApi;
+    discoveryApi: DiscoveryApi;
+    fetchApi: FetchApi;
   }) {
     super({
-      backendName: 'aws/codebuild',
+      backendName: 'aws-codebuild',
       ...options,
     });
   }

diff --git a/plugins/codebuild/frontend/src/plugin.ts b/plugins/codebuild/frontend/src/plugin.ts
@@ -12,20 +12,20 @@
  */
 
 import {
-  createPlugin,
-  configApiRef,
-  identityApiRef,
+  AWS_CODEBUILD_ARN_ANNOTATION,
+  AWS_CODEBUILD_TAGS_ANNOTATION,
+} from '@aws/aws-codebuild-plugin-for-backstage-common';
+import { getOneOfEntityAnnotations } from '@aws/aws-core-plugin-for-backstage-common';
+import { Entity } from '@backstage/catalog-model';
+import {
   createApiFactory,
   createComponentExtension,
+  createPlugin,
+  discoveryApiRef,
+  fetchApiRef,
 } from '@backstage/core-plugin-api';
-import { rootRouteRef } from './routes';
 import { AwsCodeBuildApiClient, awsCodeBuildApiRef } from './api';
-import { Entity } from '@backstage/catalog-model';
-import { getOneOfEntityAnnotations } from '@aws/aws-core-plugin-for-backstage-common';
-import {
-  AWS_CODEBUILD_ARN_ANNOTATION,
-  AWS_CODEBUILD_TAGS_ANNOTATION,
-} from '@aws/aws-codebuild-plugin-for-backstage-common';
+import { rootRouteRef } from './routes';
 
 export const isAwsCodeBuildAvailable = (entity: Entity) =>
   getOneOfEntityAnnotations(entity, [
@@ -41,9 +41,9 @@ export const awsCodeBuildPlugin = createPlugin({
   apis: [
     createApiFactory({
       api: awsCodeBuildApiRef,
-      deps: { configApi: configApiRef, identityApi: identityApiRef },
-      factory: ({ configApi, identityApi }) =>
-        new AwsCodeBuildApiClient({ configApi, identityApi }),
+      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
+      factory: ({ discoveryApi, fetchApi }) =>
+        new AwsCodeBuildApiClient({ discoveryApi, fetchApi }),
     }),
   ],
 });

diff --git a/plugins/codepipeline/frontend/src/api/AwsCodePipelineApiClient.ts b/plugins/codepipeline/frontend/src/api/AwsCodePipelineApiClient.ts
@@ -11,27 +11,26 @@
  * limitations under the License.
  */
 
-import { IdentityApi } from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 
-import { ConfigApi } from '@backstage/core-plugin-api';
-import { AwsCodePipelineApi } from '.';
 import {
   PipelineExecutionsResponse,
   PipelineStateResponse,
 } from '@aws/aws-codepipeline-plugin-for-backstage-common';
 import { AwsApiClient } from '@aws/aws-core-plugin-for-backstage-react';
 import type { CompoundEntityRef } from '@backstage/catalog-model';
+import { AwsCodePipelineApi } from '.';
 
 export class AwsCodePipelineApiClient
   extends AwsApiClient
   implements AwsCodePipelineApi
 {
   public constructor(options: {
-    configApi: ConfigApi;
-    identityApi: IdentityApi;
+    discoveryApi: DiscoveryApi;
+    fetchApi: FetchApi;
   }) {
     super({
-      backendName: 'aws/codepipeline',
+      backendName: 'aws-codepipeline',
       ...options,
     });
   }

diff --git a/plugins/codepipeline/frontend/src/plugin.ts b/plugins/codepipeline/frontend/src/plugin.ts
@@ -12,15 +12,15 @@
  */
 
 import {
-  createPlugin,
-  createRoutableExtension,
-  configApiRef,
-  identityApiRef,
   createApiFactory,
   createComponentExtension,
+  createPlugin,
+  createRoutableExtension,
+  discoveryApiRef,
+  fetchApiRef,
 } from '@backstage/core-plugin-api';
-import { rootRouteRef } from './routes';
 import { AwsCodePipelineApiClient, awsCodePipelineApiRef } from './api';
+import { rootRouteRef } from './routes';
 
 export const awsCodePipelinePlugin = createPlugin({
   id: 'aws-codepipeline',
@@ -30,9 +30,9 @@ export const awsCodePipelinePlugin = createPlugin({
   apis: [
     createApiFactory({
       api: awsCodePipelineApiRef,
-      deps: { configApi: configApiRef, identityApi: identityApiRef },
-      factory: ({ configApi, identityApi }) =>
-        new AwsCodePipelineApiClient({ configApi, identityApi }),
+      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
+      factory: ({ discoveryApi, fetchApi }) =>
+        new AwsCodePipelineApiClient({ discoveryApi, fetchApi }),
     }),
   ],
 });

diff --git a/plugins/core/react/src/api/AwsApiClient.ts b/plugins/core/react/src/api/AwsApiClient.ts
@@ -11,34 +11,33 @@
  * limitations under the License.
  */
 
-import { IdentityApi } from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 
-import { ConfigApi } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 
 export abstract class AwsApiClient {
-  private readonly baseUrl: string;
-  private readonly identityApi: IdentityApi;
+  private readonly backendName: string;
+  private readonly discoveryApi: DiscoveryApi;
+  private readonly fetchApi: FetchApi;
 
   public constructor(options: {
     backendName: string;
-    configApi: ConfigApi;
-    identityApi: IdentityApi;
+    discoveryApi: DiscoveryApi;
+    fetchApi: FetchApi;
   }) {
-    this.baseUrl = `${options.configApi.getString('backend.baseUrl')}/api/${
-      options.backendName
-    }/}`;
-    this.identityApi = options.identityApi;
+    this.backendName = options.backendName;
+    this.fetchApi = options.fetchApi;
+    this.discoveryApi = options.discoveryApi;
   }
 
-  protected async get<T>(path: string): Promise<T> {
-    const url = new URL(path, this.baseUrl);
+  private async getBaseUrl(): Promise<string> {
+    return this.discoveryApi.getBaseUrl(this.backendName);
+  }
 
-    const { token: idToken } = await this.identityApi.getCredentials();
+  protected async get<T>(path: string): Promise<T> {
+    const url = new URL(path, await this.getBaseUrl());
 
-    const response = await fetch(url.toString(), {
-      headers: idToken ? { Authorization: `Bearer ${idToken}` } : {},
-    });
+    const response = await this.fetchApi.fetch(url.toString());
 
     if (!response.ok) {
       throw await ResponseError.fromResponse(response);

diff --git a/plugins/ecs/frontend/src/api/AmazonEcsApiClient.ts b/plugins/ecs/frontend/src/api/AmazonEcsApiClient.ts
@@ -11,21 +11,20 @@
  * limitations under the License.
  */
 
-import { IdentityApi } from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 
-import { ConfigApi } from '@backstage/core-plugin-api';
-import { AmazonEcsApi } from '.';
 import { ServicesResponse } from '@aws/amazon-ecs-plugin-for-backstage-common';
 import { AwsApiClient } from '@aws/aws-core-plugin-for-backstage-react';
 import type { CompoundEntityRef } from '@backstage/catalog-model';
+import { AmazonEcsApi } from '.';
 
 export class AmazonEcsApiClient extends AwsApiClient implements AmazonEcsApi {
   public constructor(options: {
-    configApi: ConfigApi;
-    identityApi: IdentityApi;
+    discoveryApi: DiscoveryApi;
+    fetchApi: FetchApi;
   }) {
     super({
-      backendName: 'aws/ecs',
+      backendName: 'amazon-ecs',
       ...options,
     });
   }

diff --git a/plugins/ecs/frontend/src/plugin.ts b/plugins/ecs/frontend/src/plugin.ts
@@ -12,14 +12,14 @@
  */
 
 import {
+  createApiFactory,
   createPlugin,
   createRoutableExtension,
-  configApiRef,
-  identityApiRef,
-  createApiFactory,
+  discoveryApiRef,
+  fetchApiRef,
 } from '@backstage/core-plugin-api';
-import { rootRouteRef } from './routes';
 import { AmazonEcsApiClient, amazonEcsApiRef } from './api';
+import { rootRouteRef } from './routes';
 
 export const amazonEcsPlugin = createPlugin({
   id: 'amazon-ecs',
@@ -29,9 +29,9 @@ export const amazonEcsPlugin = createPlugin({
   apis: [
     createApiFactory({
       api: amazonEcsApiRef,
-      deps: { configApi: configApiRef, identityApi: identityApiRef },
-      factory: ({ configApi, identityApi }) =>
-        new AmazonEcsApiClient({ configApi, identityApi }),
+      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
+      factory: ({ discoveryApi, fetchApi }) =>
+        new AmazonEcsApiClient({ discoveryApi, fetchApi }),
     }),
   ],
 });