Render errors when getting a list of dags

airflow/ui/openapi-gen/requests/core/OpenAPI.ts

@@ -1,5 +1,3 @@
-import type { AxiosRequestConfig, AxiosResponse } from "axios";
-
 import type { ApiRequestOptions } from "./ApiRequestOptions";
 
 type Headers = Record<string, string>;
@@ -36,8 +34,8 @@ export type OpenAPIConfig = {
   VERSION: string;
   WITH_CREDENTIALS: boolean;
   interceptors: {
-    request: Interceptors<AxiosRequestConfig>;
-    response: Interceptors<AxiosResponse>;
+    request: Interceptors<RequestInit>;
+    response: Interceptors<Response>;
   };
 };
 

airflow/ui/openapi-gen/requests/core/request.ts

@@ -1,11 +1,3 @@
-import axios from "axios";
-import type {
-  AxiosError,
-  AxiosRequestConfig,
-  AxiosResponse,
-  AxiosInstance,
-} from "axios";
-
 import { ApiError } from "./ApiError";
 import type { ApiRequestOptions } from "./ApiRequestOptions";
 import type { ApiResult } from "./ApiResult";
@@ -29,10 +21,6 @@ export const isFormData = (value: unknown): value is FormData => {
   return value instanceof FormData;
 };
 
-export const isSuccess = (status: number): boolean => {
-  return status >= 200 && status < 300;
-};
-
 export const base64 = (str: string): string => {
   try {
     return btoa(str);
@@ -130,7 +118,7 @@ export const resolve = async <T>(
 export const getHeaders = async <T>(
   config: OpenAPIConfig,
   options: ApiRequestOptions<T>,
-): Promise<Record<string, string>> => {
+): Promise<Headers> => {
   const [token, username, password, additionalHeaders] = await Promise.all([
     // @ts-ignore
     resolve(options, config.TOKEN),
@@ -175,76 +163,104 @@ export const getHeaders = async <T>(
     } else if (!isFormData(options.body)) {
       headers["Content-Type"] = "application/json";
     }
-  } else if (options.formData !== undefined) {
-    if (options.mediaType) {
-      headers["Content-Type"] = options.mediaType;
-    }
   }
 
-  return headers;
+  return new Headers(headers);
 };
 
 export const getRequestBody = (options: ApiRequestOptions): unknown => {
-  if (options.body) {
-    return options.body;
+  if (options.body !== undefined) {
+    if (
+      options.mediaType?.includes("application/json") ||
+      options.mediaType?.includes("+json")
+    ) {
+      return JSON.stringify(options.body);
+    } else if (
+      isString(options.body) ||
+      isBlob(options.body) ||
+      isFormData(options.body)
+    ) {
+      return options.body;
+    } else {
+      return JSON.stringify(options.body);
+    }
   }
   return undefined;
 };
 
-export const sendRequest = async <T>(
+export const sendRequest = async (
   config: OpenAPIConfig,
-  options: ApiRequestOptions<T>,
+  options: ApiRequestOptions,
   url: string,
-  body: unknown,
+  body: any,
   formData: FormData | undefined,
-  headers: Record<string, string>,
+  headers: Headers,
   onCancel: OnCancel,
-  axiosClient: AxiosInstance,
-): Promise<AxiosResponse<T>> => {
+): Promise<Response> => {
   const controller = new AbortController();
 
-  let requestConfig: AxiosRequestConfig = {
-    data: body ?? formData,
+  let request: RequestInit = {
     headers,
+    body: body ?? formData,
     method: options.method,
     signal: controller.signal,
-    url,
-    withCredentials: config.WITH_CREDENTIALS,
   };
 
-  onCancel(() => controller.abort());
+  if (config.WITH_CREDENTIALS) {
+    request.credentials = config.CREDENTIALS;
+  }
 
   for (const fn of config.interceptors.request._fns) {
-    requestConfig = await fn(requestConfig);
+    request = await fn(request);
   }
 
-  try {
-    return await axiosClient.request(requestConfig);
-  } catch (error) {
-    const axiosError = error as AxiosError<T>;
-    if (axiosError.response) {
-      return axiosError.response;
-    }
-    throw error;
-  }
+  onCancel(() => controller.abort());
+
+  return await fetch(url, request);
 };
 
 export const getResponseHeader = (
-  response: AxiosResponse<unknown>,
+  response: Response,
   responseHeader?: string,
 ): string | undefined => {
   if (responseHeader) {
-    const content = response.headers[responseHeader];
+    const content = response.headers.get(responseHeader);
     if (isString(content)) {
       return content;
     }
   }
   return undefined;
 };
 
-export const getResponseBody = (response: AxiosResponse<unknown>): unknown => {
+export const getResponseBody = async (response: Response): Promise<unknown> => {
   if (response.status !== 204) {
-    return response.data;
+    try {
+      const contentType = response.headers.get("Content-Type");
+      if (contentType) {
+        const binaryTypes = [
+          "application/octet-stream",
+          "application/pdf",
+          "application/zip",
+          "audio/",
+          "image/",
+          "video/",
+        ];
+        if (
+          contentType.includes("application/json") ||
+          contentType.includes("+json")
+        ) {
+          return await response.json();
+        } else if (binaryTypes.some((type) => contentType.includes(type))) {
+          return await response.blob();
+        } else if (contentType.includes("multipart/form-data")) {
+          return await response.formData();
+        } else if (contentType.includes("text/")) {
+          return await response.text();
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    }
   }
   return undefined;
 };
@@ -325,14 +341,12 @@ export const catchErrorCodes = (
  * Request method
  * @param config The OpenAPI configuration object
  * @param options The request options from the service
- * @param axiosClient The axios client instance to use
  * @returns CancelablePromise<T>
  * @throws ApiError
  */
 export const request = <T>(
   config: OpenAPIConfig,
   options: ApiRequestOptions<T>,
-  axiosClient: AxiosInstance = axios,
 ): CancelablePromise<T> => {
   return new CancelablePromise(async (resolve, reject, onCancel) => {
     try {
@@ -342,35 +356,34 @@ export const request = <T>(
       const headers = await getHeaders(config, options);
 
       if (!onCancel.isCancelled) {
-        let response = await sendRequest<T>(
+        let response = await sendRequest(
           config,
           options,
           url,
           body,
           formData,
           headers,
           onCancel,
-          axiosClient,
         );
 
         for (const fn of config.interceptors.response._fns) {
           response = await fn(response);
         }
 
-        const responseBody = getResponseBody(response);
+        const responseBody = await getResponseBody(response);
         const responseHeader = getResponseHeader(
           response,
           options.responseHeader,
         );
 
         let transformedBody = responseBody;
-        if (options.responseTransformer && isSuccess(response.status)) {
+        if (options.responseTransformer && response.ok) {
           transformedBody = await options.responseTransformer(responseBody);
         }
 
         const result: ApiResult = {
           url,
-          ok: isSuccess(response.status),
+          ok: response.ok,
           status: response.status,
           statusText: response.statusText,
           body: responseHeader ?? transformedBody,

airflow/ui/package.json

@@ -11,7 +11,7 @@
     "lint:fix": "eslint --fix && tsc --p tsconfig.app.json",
     "format": "pnpm prettier --write .",
     "preview": "vite preview",
-    "codegen": "openapi-rq -i \"../api_fastapi/openapi/v1-generated.yaml\" -c axios --format prettier -o openapi-gen --operationId",
+    "codegen": "openapi-rq -i \"../api_fastapi/openapi/v1-generated.yaml\" --format prettier -o openapi-gen --operationId",
     "test": "vitest run",
     "coverage": "vitest run --coverage"
   },
@@ -22,7 +22,6 @@
     "@emotion/styled": "^11.13.0",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
-    "axios": "^1.7.7",
     "chakra-react-select": "^4.9.2",
     "framer-motion": "^11.3.29",
     "react": "^18.3.1",