Add hooks/todo linting

Author: bbovenzi

airflow-core/src/airflow/ui/rules/react.js

@@ -344,6 +344,9 @@ export const reactRules = /** @type {const} @satisfies {FlatConfig.Config} */ ({
      */
     [`${reactHooksNamespace}/rules-of-hooks`]: ERROR,
 
+    // https://github.com/facebook/react/blob/3640f38/compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts#L807-L1111
+    [`${reactHooksNamespace}/todo`]: ERROR,
+
     /**
      * Prevent usage of button elements without an explicit type attribute.
      *

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldAdvancedArray.tsx

@@ -43,18 +43,24 @@ export const FieldAdvancedArray = ({ name, namespace = "default", onUpdate }: Fl
         const parsedValue = JSON.parse(value) as unknown;
 
         if (!Array.isArray(parsedValue)) {
-          throw new TypeError(translate("flexibleForm.validationErrorArrayNotArray"));
+          onUpdate(undefined, translate("flexibleForm.validationErrorArrayNotArray"));
+
+          return;
         }
 
         if (expectedType === "number" && !parsedValue.every((item) => typeof item === "number")) {
           // Ensure all elements in the array are numbers
-          throw new TypeError(translate("flexibleForm.validationErrorArrayNotNumbers"));
+          onUpdate(undefined, translate("flexibleForm.validationErrorArrayNotNumbers"));
+
+          return;
         } else if (
           expectedType === "object" &&
           !parsedValue.every((item) => typeof item === "object" && item !== null)
         ) {
           // Ensure all elements in the array are objects
-          throw new TypeError(translate("flexibleForm.validationErrorArrayNotObject"));
+          onUpdate(undefined, translate("flexibleForm.validationErrorArrayNotObject"));
+
+          return;
         }
 
         if (paramsDict[name]) {

airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.tsx

@@ -111,18 +111,13 @@ const ConnectionForm = ({
 
   const validateAndPrettifyJson = (value: string) => {
     try {
-      if (value.trim() === "") {
-        setErrors((prev) => ({ ...prev, conf: undefined }));
+      setErrors((prev) => ({ ...prev, conf: undefined }));
 
+      if (value.trim() === "") {
         return value;
       }
-      const parsedJson = JSON.parse(value) as Record<string, unknown>;
-
-      if (typeof parsedJson !== "object" || Array.isArray(parsedJson)) {
-        throw new TypeError('extra fields must be a valid JSON object (e.g., {"key": "value"})');
-      }
 
-      setErrors((prev) => ({ ...prev, conf: undefined }));
+      const parsedJson = JSON.parse(value) as Record<string, unknown>;
       const formattedJson = JSON.stringify(parsedJson, undefined, 2);
 
       if (formattedJson !== extra) {

airflow-core/src/airflow/ui/src/pages/HITLTaskInstances/HITLResponseForm.tsx

@@ -88,9 +88,9 @@ export const HITLResponseForm = ({ hitlDetail }: HITLResponseFormProps) => {
       updateHITLResponse(formData);
     } catch {
       setErrors(true);
-    } finally {
-      setIsSubmitting(false);
     }
+
+    setIsSubmitting(false);
   };
 
   return (

airflow-core/src/airflow/ui/src/pages/ReactPlugin.tsx

@@ -24,46 +24,50 @@ import type { ReactAppResponse } from "openapi/requests/types.gen";
 
 import { ErrorPage } from "./Error";
 
-type PluginComponentType = FC<{
+export type PluginProps = {
   dagId?: string;
   mapIndex?: string;
   runId?: string;
   taskId?: string;
-}>;
+};
 
-export const ReactPlugin = ({ reactApp }: { readonly reactApp: ReactAppResponse }) => {
-  const { dagId, mapIndex, runId, taskId } = useParams();
+type PluginComponentType = FC<PluginProps>;
 
-  const Plugin = lazy(() =>
-    // We are assuming the plugin manager is trusted and the bundle_url is safe
-    import(/* @vite-ignore */ reactApp.bundle_url)
-      .then(() => {
-        // Store components in globalThis[reactApp.name] to avoid conflicts with the shared globalThis.AirflowPlugin
-        // global variable.
-        let pluginComponent = (globalThis as Record<string, unknown>)[reactApp.name] as
-          | PluginComponentType
-          | undefined;
+const loadPlugin = (reactApp: ReactAppResponse): Promise<{ default: PluginComponentType }> =>
+  // We are assuming the plugin manager is trusted and the bundle_url is safe
+  import(/* @vite-ignore */ reactApp.bundle_url)
+    .then(() => {
+      // Store components in globalThis[reactApp.name] to avoid conflicts with the shared globalThis.AirflowPlugin
+      // global variable.
+      let pluginComponent = (globalThis as Record<string, unknown>)[reactApp.name] as
+        | PluginComponentType
+        | undefined;
 
-        if (pluginComponent === undefined) {
-          pluginComponent = (globalThis as Record<string, unknown>).AirflowPlugin as PluginComponentType;
+      if (pluginComponent === undefined) {
+        pluginComponent = (globalThis as Record<string, unknown>).AirflowPlugin as PluginComponentType;
 
-          (globalThis as Record<string, unknown>)[reactApp.name] = pluginComponent;
-        }
+        (globalThis as Record<string, unknown>)[reactApp.name] = pluginComponent;
+      }
 
-        if (typeof pluginComponent !== "function") {
-          throw new TypeError(`Expected function, got ${typeof pluginComponent} for plugin ${reactApp.name}`);
-        }
+      if (typeof pluginComponent !== "function") {
+        throw new TypeError(`Expected function, got ${typeof pluginComponent} for plugin ${reactApp.name}`);
+      }
 
-        return { default: pluginComponent };
-      })
-      .catch((error: unknown) => {
-        console.error("Component Failed Loading:", error);
+      return { default: pluginComponent };
+    })
+    .catch((error: unknown) => {
+      // eslint-disable-next-line no-console
+      console.error("Component failed to load:", error);
 
-        return {
-          default: ErrorPage,
-        };
-      }),
-  );
+      return {
+        default: ErrorPage,
+      };
+    });
+
+export const ReactPlugin = ({ reactApp }: { readonly reactApp: ReactAppResponse }) => {
+  const { dagId, mapIndex, runId, taskId } = useParams();
+
+  const Plugin = lazy(() => loadPlugin(reactApp));
 
   return (
     <Suspense fallback={<Spinner />}>

airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesForm.tsx

@@ -65,8 +65,9 @@ const ImportVariablesForm = ({ onClose }: ImportVariablesFormProps) => {
     const reader = new FileReader();
 
     reader.addEventListener("load", (event) => {
+      const text = event.target?.result as string;
+
       try {
-        const text = event.target?.result as string;
         const parsedContent = JSON.parse(text) as Record<string, unknown>;
 
         setFileContent(parsedContent);
@@ -77,9 +78,9 @@ const ImportVariablesForm = ({ onClose }: ImportVariablesFormProps) => {
           },
         });
         setFileContent(undefined);
-      } finally {
-        setIsParsing(false);
       }
+
+      setIsParsing(false);
     });
 
     reader.readAsText(file);

airflow-core/src/airflow/ui/src/queries/useUpdateHITLDetail.ts

@@ -78,15 +78,19 @@ export const useUpdateHITLDetail = ({
   });
 
   const updateHITLResponse = (updateHITLResponseRequestBody: HITLResponseParams) => {
+    const mapIndexValue = mapIndex ?? -1;
+
+    const requestBody = {
+      chosen_options: updateHITLResponseRequestBody.chosen_options ?? [],
+      params_input: updateHITLResponseRequestBody.params_input ?? {},
+    };
+
     try {
       mutate({
         dagId,
         dagRunId,
-        mapIndex: mapIndex ?? -1,
-        requestBody: {
-          chosen_options: updateHITLResponseRequestBody.chosen_options ?? [],
-          params_input: updateHITLResponseRequestBody.params_input ?? {},
-        },
+        mapIndex: mapIndexValue,
+        requestBody,
         taskId,
       });
     } catch (parseError) {