(airflow) branch main updated: Update `SearchBar` in `DAGImportErrorsModal` and `PluginImportErrorsModal` (#50145)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new e9c49d6056e Update `SearchBar` in `DAGImportErrorsModal` and 
`PluginImportErrorsModal` (#50145)
e9c49d6056e is described below

commit e9c49d6056e60b41d682aa9a4f1b7eba08e6aefd
Author: Guan Ming(Wesley) Chiu <105915352+guan404m...@users.noreply.github.com>
AuthorDate: Mon May 5 22:24:19 2025 +0800

    Update `SearchBar` in `DAGImportErrorsModal` and `PluginImportErrorsModal` 
(#50145)
    
    * Add SearchBar in ImportErrorsModal
    
    * Update search bar for PluginError
    
    Co-authored-by: pierrejeambrun <pierrejb...@gmail.com>
    
    ---------
    
    Co-authored-by: pierrejeambrun <pierrejb...@gmail.com>
---
 .../src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx | 18 ++++++++++--------
 .../pages/Dashboard/Stats/PluginImportErrorsModal.tsx  | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
index 6dfc6cc52a0..ef1a63aa2b2 100644
--- 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
+++ 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
@@ -16,12 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, Text, HStack, Input } from "@chakra-ui/react";
+import { Heading, Text, HStack } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { LuFileWarning } from "react-icons/lu";
 import { PiFilePy } from "react-icons/pi";
 
 import type { ImportErrorResponse } from "openapi/requests/types.gen";
+import { SearchBar } from "src/components/SearchBar";
 import Time from "src/components/Time";
 import { Accordion, Dialog } from "src/components/ui";
 import { Pagination } from "src/components/ui/Pagination";
@@ -59,17 +60,18 @@ export const DAGImportErrorsModal: 
React.FC<ImportDAGErrorModalProps> = ({ impor
 
   return (
     <Dialog.Root onOpenChange={onOpenChange} open={open} 
scrollBehavior="inside" size="xl">
-      <Dialog.Content backdrop>
-        <Dialog.Header>
+      <Dialog.Content backdrop p={4}>
+        <Dialog.Header display="flex" justifyContent="space-between">
           <HStack fontSize="xl">
             <LuFileWarning />
             <Heading>Dag Import Errors</Heading>
           </HStack>
-          <Input
-            mt={4}
-            onChange={(event) => setSearchQuery(event.target.value)}
-            placeholder="Search by file"
-            value={searchQuery}
+          <SearchBar
+            buttonProps={{ disabled: true }}
+            defaultValue={searchQuery}
+            hideAdvanced
+            onChange={setSearchQuery}
+            placeHolder="Search by file"
           />
         </Dialog.Header>
 
diff --git 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
index 0fc8b534438..e4a76482f06 100644
--- 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
+++ 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
@@ -16,12 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, Text, HStack, Input } from "@chakra-ui/react";
+import { Heading, Text, HStack } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { LuFileWarning } from "react-icons/lu";
 import { PiFilePy } from "react-icons/pi";
 
 import type { PluginImportErrorResponse } from "openapi/requests/types.gen";
+import { SearchBar } from "src/components/SearchBar";
 import { Accordion, Dialog } from "src/components/ui";
 import { Pagination } from "src/components/ui/Pagination";
 
@@ -62,17 +63,18 @@ export const PluginImportErrorsModal: 
React.FC<PluginImportErrorsModalProps> = (
 
   return (
     <Dialog.Root onOpenChange={onOpenChange} open={open} 
scrollBehavior="inside" size="xl">
-      <Dialog.Content backdrop>
-        <Dialog.Header>
+      <Dialog.Content backdrop p={4}>
+        <Dialog.Header display="flex" justifyContent="space-between">
           <HStack fontSize="xl">
             <LuFileWarning />
             <Heading>Plugin Import Errors</Heading>
           </HStack>
-          <Input
-            mt={4}
-            onChange={(event) => setSearchQuery(event.target.value)}
-            placeholder="Search by file"
-            value={searchQuery}
+          <SearchBar
+            buttonProps={{ disabled: true }}
+            defaultValue={searchQuery}
+            hideAdvanced
+            onChange={setSearchQuery}
+            placeHolder="Search by file"
           />
         </Dialog.Header>