[v3-1-test] Fix plugin import error alignment issue (#57787) (#57790)

(cherry picked from commit ec5cfd7)

Co-authored-by: Rahul Vats <[email protected]>

Author: 2 people

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>