remove getCSRFToken usages in favor of consoleFetch

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

Author: jgbernalp

web/src/components/dashboards/perses/perses-client.ts

@@ -1,30 +1,30 @@
+import { consoleFetchJSON } from '@openshift-console/dynamic-plugin-sdk';
+import { DashboardResource, ProjectResource } from '@perses-dev/core';
 import { useQuery } from '@tanstack/react-query';
-import { DashboardResource, ProjectResource, fetchJson } from '@perses-dev/core';
 import { NumberParam, useQueryParam } from 'use-query-params';
 import { QueryParams } from '../../query-params';
-import { getCSRFToken } from '@openshift-console/dynamic-plugin-sdk/lib/utils/fetch/console-fetch-utils';
 
 export const PERSES_PROXY_BASE_PATH = '/api/proxy/plugin/monitoring-console-plugin/perses';
 
 export const fetchPersesDashboardsMetadata = (): Promise<DashboardResource[]> => {
   const listDashboardsMetadata = '/api/v1/dashboards';
   const persesURL = `${PERSES_PROXY_BASE_PATH}${listDashboardsMetadata}`;
 
-  return ocpPersesFetchJson<DashboardResource[]>(persesURL);
+  return consoleFetchJSON(persesURL);
 };
 
 export const fetchPersesDashboardsByProject = (project: string): Promise<DashboardResource[]> => {
   const dashboardsEndpoint = `${PERSES_PROXY_BASE_PATH}/api/v1/dashboards`;
   const persesURL = `${dashboardsEndpoint}?project=${encodeURIComponent(project)}`;
 
-  return ocpPersesFetchJson<DashboardResource[]>(persesURL);
+  return consoleFetchJSON(persesURL);
 };
 
 export const fetchPersesProjects = (): Promise<ProjectResource[]> => {
   const listProjectURL = '/api/v1/projects';
   const persesURL = `${PERSES_PROXY_BASE_PATH}${listProjectURL}`;
 
-  return ocpPersesFetchJson<ProjectResource[]>(persesURL);
+  return consoleFetchJSON(persesURL);
 };
 
 export interface PersesPermission {
@@ -40,26 +40,17 @@ export const fetchPersesUserPermissions = (username: string): Promise<PersesUser
   const userPermissionsURL = `/api/v1/users/${encodeURIComponent(username)}/permissions`;
   const persesURL = `${PERSES_PROXY_BASE_PATH}${userPermissionsURL}`;
 
-  return ocpPersesFetchJson<PersesUserPermissions>(persesURL);
+  return consoleFetchJSON(persesURL);
 };
 
-export async function ocpPersesFetchJson<T>(url: string): Promise<T> {
-  // Use perses fetch as base fetch call as it handles refresh tokens
-  return fetchJson(url, {
-    headers: {
-      'X-CSRFToken': getCSRFToken(),
-    },
-  });
-}
-
 export const fetchPersesDashboard = async (
   project: string,
   dashboardName: string,
 ): Promise<DashboardResource> => {
   const getDashboardURL = `/api/v1/projects/${project}/dashboards/${dashboardName}`;
   const persesURL = `${PERSES_PROXY_BASE_PATH}${getDashboardURL}`;
 
-  return await ocpPersesFetchJson<DashboardResource>(persesURL);
+  return await consoleFetchJSON(persesURL);
 };
 
 export const useFetchPersesDashboard = (project: string, dashboardName: string) => {

web/src/components/dashboards/perses/perses/datasource-cache-api.ts

@@ -11,7 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { getCSRFToken } from '@openshift-console/dynamic-plugin-sdk/lib/utils/fetch/console-fetch-utils';
 import {
   DatasourceResource,
   DatasourceSelector,
@@ -127,7 +126,7 @@ export class CachedDatasourceAPI implements DatasourceApi {
   ): Promise<DatasourceResource | undefined> {
     const { resource, keyExist } = this.cache.getDatasource(project, selector);
     if (resource) {
-      return Promise.resolve(addCsrfToken(resource));
+      return Promise.resolve(resource);
     }
     if (keyExist) {
       // in case the keyExist, then it means we already did the query,
@@ -146,14 +145,14 @@ export class CachedDatasourceAPI implements DatasourceApi {
       } else {
         this.cache.setDatasource(result);
       }
-      return addCsrfToken(result);
+      return result;
     });
   }
 
   getGlobalDatasource(selector: DatasourceSelector): Promise<GlobalDatasourceResource | undefined> {
     const { resource, keyExist } = this.cache.getGlobalDatasource(selector);
     if (resource) {
-      return Promise.resolve(addCsrfToken(resource));
+      return Promise.resolve(resource);
     }
     if (keyExist) {
       return Promise.resolve(undefined);
@@ -164,7 +163,7 @@ export class CachedDatasourceAPI implements DatasourceApi {
       } else {
         this.cache.setGlobalDatasource(result);
       }
-      return addCsrfToken(result);
+      return result;
     });
   }
 
@@ -184,18 +183,3 @@ export class CachedDatasourceAPI implements DatasourceApi {
       });
   }
 }
-
-const addCsrfToken = (datasource) => {
-  datasource.spec.plugin.spec = {
-    ...datasource.spec.plugin.spec,
-    proxy: {
-      spec: {
-        headers: {
-          'X-CSRFToken': getCSRFToken(),
-          'Sec-Fetch-Site': 'same-origin',
-        },
-      },
-    },
-  };
-  return datasource;
-};

web/src/components/dashboards/perses/perses/datasource-client.ts

@@ -13,7 +13,7 @@
 
 import { DatasourceResource } from '@perses-dev/core';
 import buildURL from './url-builder';
-import { ocpPersesFetchJson } from '../perses-client';
+import { consoleFetchJSON } from '@openshift-console/dynamic-plugin-sdk';
 
 export const resource = 'datasources';
 
@@ -40,11 +40,11 @@ export function fetchDatasourceList(
   kind?: string,
   defaultDatasource?: boolean,
   name?: string,
-) {
+): Promise<DatasourceResource[]> {
   const url = buildURL({
     resource: resource,
     project: project,
     queryParams: buildDatasourceQueryParameters(kind, defaultDatasource, name),
   });
-  return ocpPersesFetchJson<DatasourceResource[]>(url);
+  return consoleFetchJSON(url);
 }

web/src/components/dashboards/perses/perses/global-datasource-client.ts

@@ -14,18 +14,18 @@
 import { GlobalDatasourceResource } from '@perses-dev/core';
 import buildURL from './url-builder';
 import { buildDatasourceQueryParameters } from './datasource-client';
-import { ocpPersesFetchJson } from '../perses-client';
+import { consoleFetchJSON } from '@openshift-console/dynamic-plugin-sdk';
 
 const globalDatasourceResource = 'globaldatasources';
 
 export function fetchGlobalDatasourceList(
   kind?: string,
   defaultDatasource?: boolean,
   name?: string,
-) {
+): Promise<GlobalDatasourceResource[]> {
   const url = buildURL({
     resource: globalDatasourceResource,
     queryParams: buildDatasourceQueryParameters(kind, defaultDatasource, name),
   });
-  return ocpPersesFetchJson<GlobalDatasourceResource[]>(url);
+  return consoleFetchJSON(url);
 }

web/src/components/hooks/useFeatures.ts

@@ -1,13 +1,13 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { proxiedFetch } from '../proxied-fetch';
+import { consoleFetchJSON } from '@openshift-console/dynamic-plugin-sdk';
 
 type features = {
   'acm-alerting': boolean;
   'perses-dashboards': boolean;
   incidents: boolean;
 };
 
-type featuresResponse = {
+type FeaturesResponse = {
   'acm-alerting'?: boolean;
   'perses-dashboards'?: boolean;
   incidents?: boolean;
@@ -32,7 +32,7 @@ export const useFeatures = () => {
         dashboardsAbort.current();
       }
 
-      const response = await proxiedFetch<featuresResponse>(featuresEndpoint);
+      const response: FeaturesResponse = await consoleFetchJSON(featuresEndpoint);
       setFeatures({ ...noFeatures, ...response });
     } catch {
       setFeatures(noFeatures);