(airflow) branch main updated: Fix plugin import error alignment issue (#57787)

[ash]

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

ash 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 ec5cfd7edce Fix plugin import error alignment issue (#57787)
ec5cfd7edce is described below

commit ec5cfd7edceb52002503b131abe1bc63a261b174
Author: Rahul Vats <43964496+vatsrahul1...@users.noreply.github.com>
AuthorDate: Tue Nov 4 13:55:23 2025 +0530

    Fix plugin import error alignment issue (#57787)
---
 .../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>