(airflow) branch main updated: fix: `Stats` and `PluginImportErrors` layout (#49770)

[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 16da57bcdb6 fix: `Stats` and `PluginImportErrors` layout (#49770)
16da57bcdb6 is described below

commit 16da57bcdb68b87e9fbf237bdf86b783d565f672
Author: Guan Ming(Wesley) Chiu <105915352+guan404m...@users.noreply.github.com>
AuthorDate: Fri Apr 25 17:26:40 2025 +0800

    fix: `Stats` and `PluginImportErrors` layout (#49770)
    
    * fix: stat and PluginImportErrors layout
    
    * fix: reset count assertion
---
 .../pages/Dashboard/Stats/PluginImportErrors.tsx   | 68 +++++++++++-----------
 .../airflow/ui/src/pages/Dashboard/Stats/Stats.tsx |  2 +-
 2 files changed, 35 insertions(+), 35 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 a9764c6443d..5c0a89680c1 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
@@ -43,44 +43,44 @@ export const PluginImportErrors = ({ iconOnly = false }: { 
readonly iconOnly?: b
     return undefined;
   }
 
+  if (importErrorsCount === 0) {
+    return undefined;
+  }
+
   return (
     <Box alignItems="center" display="flex" maxH="10px">
       <ErrorAlert error={error} />
-      {importErrorsCount > 0 && (
-        <>
-          {iconOnly ? (
-            <StateBadge
-              as={Button}
-              colorPalette="failed"
-              height={7}
-              onClick={onOpen}
-              title={pluralize("Plugin Import Error", importErrorsCount)}
-            >
-              <LuPlug size="0.5rem" />
-              {importErrorsCount}
-            </StateBadge>
-          ) : (
-            <Button
-              alignItems="center"
-              borderRadius="md"
-              display="flex"
-              gap={2}
-              onClick={onOpen}
-              variant="outline"
-            >
-              <StateBadge colorPalette="failed">
-                <LuPlug />
-                {importErrorsCount}
-              </StateBadge>
-              <Box alignItems="center" display="flex" gap={1}>
-                <Text fontWeight="bold">Plugin Import Errors</Text>
-                <FiChevronRight />
-              </Box>
-            </Button>
-          )}
-          <PluginImportErrorsModal importErrors={importErrors} 
onClose={onClose} open={open} />
-        </>
+      {iconOnly ? (
+        <StateBadge
+          as={Button}
+          colorPalette="failed"
+          height={7}
+          onClick={onOpen}
+          title={pluralize("Plugin Import Error", importErrorsCount)}
+        >
+          <LuPlug size="0.5rem" />
+          {importErrorsCount}
+        </StateBadge>
+      ) : (
+        <Button
+          alignItems="center"
+          borderRadius="md"
+          display="flex"
+          gap={2}
+          onClick={onOpen}
+          variant="outline"
+        >
+          <StateBadge colorPalette="failed">
+            <LuPlug />
+            {importErrorsCount}
+          </StateBadge>
+          <Box alignItems="center" display="flex" gap={1}>
+            <Text fontWeight="bold">Plugin Import Errors</Text>
+            <FiChevronRight />
+          </Box>
+        </Button>
       )}
+      <PluginImportErrorsModal importErrors={importErrors} onClose={onClose} 
open={open} />
     </Box>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
index fc7ae1b7ec8..a0ec3f68a74 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
@@ -56,7 +56,7 @@ export const Stats = () => {
         </Heading>
       </Flex>
 
-      <HStack columns={{ base: 1, lg: 5, md: 3 }} gap={4}>
+      <HStack columns={{ base: 1, lg: 6, md: 3 }} gap={4}>
         <StatsCard
           colorScheme="failed"
           count={failedDagsCount}