Added FetchApi and related fetchApiRef which implement fetch

Signed-off-by: skgandikota <Sai.Gandikota@marks-and-spencer.com>

.changeset/pink-mayflies-rhyme.md

@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-newrelic-dashboard': minor
+'@backstage/plugin-newrelic-dashboard': patch
 ---
 
-Included the Authorization Token to New Relic Dashboard Plugin, so that frontend can send an authenticated call to backend
+Add `FetchApi` and related `fetchApiRef` which implement fetch. in order to included the Authorization Token to New Relic Dashboard Plugin, so that frontend can send an authenticated proxy call to backend

plugins/newrelic-dashboard/src/api/NewRelicDashboardClient.ts

@@ -18,7 +18,7 @@ import {
   DashboardSnapshotSummary,
   NewRelicDashboardApi,
 } from './NewRelicDashboardApi';
-import { DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 import { DashboardEntity } from '../types/DashboardEntity';
 import { DashboardSnapshot } from '../types/DashboardSnapshot';
 import { getDashboardParentGuidQuery } from '../queries/getDashboardParentGuidQuery';
@@ -27,27 +27,19 @@ import { ResponseError } from '@backstage/errors';
 
 export class NewRelicDashboardClient implements NewRelicDashboardApi {
   private readonly discoveryApi: DiscoveryApi;
-  private readonly identityApi: IdentityApi;
-  constructor({
-    discoveryApi,
-    identityApi,
-  }: {
-    discoveryApi: DiscoveryApi;
-    identityApi: IdentityApi;
-    baseUrl?: string;
-  }) {
-    this.discoveryApi = discoveryApi;
-    this.identityApi =  identityApi;
+  private readonly fetchApi: FetchApi;
+
+  constructor(options: { discoveryApi: DiscoveryApi; fetchApi: FetchApi }) {
+    this.discoveryApi = options.discoveryApi;
+    this.fetchApi = options.fetchApi;
   }
 
   private async callApi<T>(
     query: string,
     variables: { [key in string]: string | number },
   ): Promise<T | undefined> {
-    const { token } = await this.identityApi.getCredentials();
     const myHeaders = new Headers();
     myHeaders.append('Content-Type', 'application/json');
-    myHeaders.append('Authorization', `Bearer ${token}`); 
     const graphql = JSON.stringify({
       query: query,
       variables: variables,
@@ -62,7 +54,7 @@ export class NewRelicDashboardClient implements NewRelicDashboardApi {
     const apiUrl = `${await this.discoveryApi.getBaseUrl(
       'proxy',
     )}/newrelic/api/graphql`;
-    const response = await fetch(apiUrl, requestOptions);
+    const response = await this.fetchApi.fetch(apiUrl, requestOptions);
     if (response.status === 200) {
       return (await response.json()) as T;
     }

plugins/newrelic-dashboard/src/plugin.ts

@@ -19,7 +19,7 @@ import {
   createApiFactory,
   discoveryApiRef,
   createComponentExtension,
-  identityApiRef,
+  fetchApiRef,
 } from '@backstage/core-plugin-api';
 import { newRelicDashboardApiRef, NewRelicDashboardClient } from './api';
 import { rootRouteRef } from './routes';
@@ -32,11 +32,15 @@ export const newRelicDashboardPlugin = createPlugin({
   apis: [
     createApiFactory({
       api: newRelicDashboardApiRef,
-      deps: { configApi: configApiRef, discoveryApi: discoveryApiRef, identityApi: identityApiRef },
-      factory: ({ configApi, discoveryApi, identityApi }) =>
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef,
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) =>
         new NewRelicDashboardClient({
           discoveryApi,
-          identityApi,
+          fetchApi,
           baseUrl: configApi.getOptionalString('newrelicdashboard.baseUrl'),
         }),
     }),