- Update to use consoleFetch instead of native fetch

- Restructure files and names of vars

Author: zhuje

.gitignore

@@ -10,5 +10,4 @@ web/node_modules/
 plugin-backend
 # adding these while the PR is in review. This should be removed after
 node_modules/
-dist/
-vendor
+dist/

web/src/components/dashboards/perses/dashboard-api.ts

@@ -0,0 +1,51 @@
+import { DashboardResource } from '@perses-dev/core';
+import buildURL from './perses/url-builder';
+import { consoleFetch } from '@openshift-console/dynamic-plugin-sdk';
+import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
+
+const resource = 'dashboards';
+
+const updateDashboard = async (entity: DashboardResource): Promise<DashboardResource> => {
+  const HTTPMethodPUT = 'PUT';
+  const HTTPHeader: Record<string, string> = {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  };
+  const url = buildURL({
+    resource: resource,
+    project: entity.metadata.project,
+    name: entity.metadata.name,
+  });
+
+  const response = await consoleFetch(url, {
+    method: HTTPMethodPUT,
+    headers: {
+      ...HTTPHeader,
+    },
+    body: JSON.stringify(entity),
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+  }
+
+  return response.json();
+};
+
+export const useUpdateDashboardMutation = (): UseMutationResult<
+  DashboardResource,
+  Error,
+  DashboardResource
+> => {
+  const queryClient = useQueryClient();
+
+  return useMutation<DashboardResource, Error, DashboardResource>({
+    mutationKey: [resource],
+    mutationFn: (dashboard) => {
+      return updateDashboard(dashboard);
+    },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({ queryKey: [resource] });
+    },
+  });
+};

web/src/components/dashboards/perses/dashboard-list.tsx

@@ -32,13 +32,13 @@ const perPageOptions = [
   { title: '20', value: 20 },
 ];
 
-interface DashboardName {
+interface DashboardRowNameLink {
   link: ReactNode;
   label: string;
 }
 
 interface DashboardRow {
-  name: DashboardName;
+  name: DashboardRowNameLink;
   project: string;
   created: ReactNode;
   modified: ReactNode;
@@ -153,7 +153,7 @@ const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
     return persesDashboards.map((board) => {
       const metadata = board?.metadata;
       const dashboardsParams = `?dashboard=${metadata?.name}&project=${metadata?.project}`;
-      const dashboardName: DashboardName = {
+      const dashboardName: DashboardRowNameLink = {
         link: (
           <Link
             to={`${dashboardBaseURL}${dashboardsParams}`}

web/src/components/dashboards/perses/dashboard-page.tsx

@@ -1,13 +1,7 @@
 import { useCallback, type FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom-v5-compat';
-import {
-  QueryClient,
-  QueryClientProvider,
-  useMutation,
-  UseMutationResult,
-  useQueryClient,
-} from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
 import { DashboardLayout } from './dashboard-layout';
@@ -20,9 +14,8 @@ import {
   EphemeralDashboardResource,
   getResourceExtendedDisplayName,
 } from '@perses-dev/core';
-import buildURL from './perses/url-builder';
-import { getCSRFToken } from '@openshift-console/dynamic-plugin-sdk/lib/utils/fetch/console-fetch-utils';
 import { useSnackbar } from '@perses-dev/components';
+import { useUpdateDashboardMutation } from './dashboard-api';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -46,53 +39,6 @@ const DashboardPage_: FC = () => {
     combinedInitialLoad,
   } = useDashboardsData();
 
-  const resource = 'dashboards';
-  const HTTPMethodPUT = 'PUT';
-  const HTTPHeader: Record<string, string> = {
-    'Content-Type': 'application/json',
-    Accept: 'application/json',
-  };
-  async function updateDashboard(entity: DashboardResource): Promise<DashboardResource> {
-    const url = buildURL({
-      resource: resource,
-      project: entity.metadata.project,
-      name: entity.metadata.name,
-    });
-
-    const response = await fetch(url, {
-      method: HTTPMethodPUT,
-      headers: {
-        ...HTTPHeader,
-        'X-CSRFToken': getCSRFToken(),
-      },
-      body: JSON.stringify(entity),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-
-    return response.json();
-  }
-
-  function useUpdateDashboardMutation(): UseMutationResult<
-    DashboardResource,
-    Error,
-    DashboardResource
-  > {
-    const queryClient = useQueryClient();
-
-    return useMutation<DashboardResource, Error, DashboardResource>({
-      mutationKey: [resource],
-      mutationFn: (dashboard) => {
-        return updateDashboard(dashboard);
-      },
-      onSuccess: () => {
-        return queryClient.invalidateQueries({ queryKey: [resource] });
-      },
-    });
-  }
-
   const updateDashboardMutation = useUpdateDashboardMutation();
   const { successSnackbar, exceptionSnackbar } = useSnackbar();