(airflow) 01/27: [v3-1-test] Fix plugin import error alignment issue (#57787) (#57790)

[ephraimanierobi]

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

ephraimanierobi pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git

commit 7cbc8bfb1995b8aeb9f48f518d08cfeac001adc1
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Tue Nov 4 10:10:51 2025 +0100

    [v3-1-test] Fix plugin import error alignment issue (#57787) (#57790)
    
    (cherry picked from commit ec5cfd7edceb52002503b131abe1bc63a261b174)
    
    Co-authored-by: Rahul Vats <43964496+vatsrahul1...@users.noreply.github.com>
---
 .../pages/Dashboard/Stats/PluginImportErrors.tsx   | 34 +++++++++-------------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx
index ed9643c35c1..d92f9ab533e 100644
--- 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx
+++ 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx
@@ -16,22 +16,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Text, Button, useDisclosure, Skeleton } from "@chakra-ui/react";
+import { Box, Button, useDisclosure, Skeleton } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
-import { FiChevronRight } from "react-icons/fi";
 import { LuPlug } from "react-icons/lu";
 
 import { usePluginServiceImportErrors } from "openapi/queries";
 import { ErrorAlert, type ExpandedApiError } from "src/components/ErrorAlert";
 import { StateBadge } from "src/components/StateBadge";
+import { StatsCard } from "src/components/StatsCard";
 
 import { PluginImportErrorsModal } from "./PluginImportErrorsModal";
 
 export const PluginImportErrors = ({ iconOnly = false }: { readonly iconOnly?: 
boolean }) => {
   const { onClose, onOpen, open } = useDisclosure();
-  const { t: translate } = useTranslation("admin");
+  const { i18n, t: translate } = useTranslation("admin");
   const { data, error, isLoading } = usePluginServiceImportErrors();
 
+  const isRTL = i18n.dir() === "rtl";
+
   const importErrorsCount = data?.total_entries ?? 0;
   const importErrors = data?.import_errors ?? [];
 
@@ -48,7 +50,7 @@ export const PluginImportErrors = ({ iconOnly = false }: { 
readonly iconOnly?: b
   }
 
   return (
-    <Box alignItems="center" display="flex" maxH="10px">
+    <Box alignItems="center" display="flex">
       <ErrorAlert error={error} />
       {iconOnly ? (
         <StateBadge
@@ -62,23 +64,15 @@ export const PluginImportErrors = ({ iconOnly = false }: { 
readonly iconOnly?: b
           {importErrorsCount}
         </StateBadge>
       ) : (
-        <Button
-          alignItems="center"
-          borderRadius="md"
-          display="flex"
-          gap={2}
+        <StatsCard
+          colorScheme="failed"
+          count={importErrorsCount}
+          icon={<LuPlug />}
+          isLoading={isLoading}
+          isRTL={isRTL}
+          label={translate("plugins.importError", { count: importErrorsCount 
})}
           onClick={onOpen}
-          variant="outline"
-        >
-          <StateBadge colorPalette="failed">
-            <LuPlug />
-            {importErrorsCount}
-          </StateBadge>
-          <Box alignItems="center" display="flex" gap={1}>
-            <Text fontWeight="bold">{translate("plugins.importError", { count: 
importErrorsCount })}</Text>
-            <FiChevronRight />
-          </Box>
-        </Button>
+        />
       )}
       <PluginImportErrorsModal importErrors={importErrors} onClose={onClose} 
open={open} />
     </Box>