[v3-1-test] Fix plugin import error alignment issue (#57787) (#57790)
(cherry picked from commit ec5cfd7edceb52002503b131abe1bc63a261b174)
Co-authored-by: Rahul Vats <43964496+vatsrahul1001@users.noreply.github.com>
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 ed9643c..d92f9ab 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 @@
}
return (
- <Box alignItems="center" display="flex" maxH="10px">
+ <Box alignItems="center" display="flex">
<ErrorAlert error={error} />
{iconOnly ? (
<StateBadge
@@ -62,23 +64,15 @@
{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>
