Add Consuming Tasks in asset header (#58060)

Author: guan404ming

airflow-core/src/airflow/ui/public/i18n/locales/en/assets.json

@@ -3,6 +3,7 @@
   "asset_many": "Assets",
   "asset_one": "Asset",
   "consumingDags": "Consuming Dags",
+  "consumingTasks": "Consuming Tasks",
   "createEvent": {
     "button": "Create Event",
     "manual": {

airflow-core/src/airflow/ui/src/pages/Asset/Header.tsx

@@ -39,6 +39,10 @@ export const Header = ({
       label: translate("producingTasks"),
       value: <DependencyPopover dependencies={asset?.producing_tasks ?? []} type="Task" />,
     },
+    {
+      label: translate("consumingTasks"),
+      value: <DependencyPopover dependencies={asset?.consuming_tasks ?? []} type="Task" />,
+    },
     {
       label: translate("scheduledDags"),
       value: <DependencyPopover dependencies={asset?.scheduled_dags ?? []} type="Dag" />,

airflow-core/src/airflow/ui/src/pages/AssetsList/DependencyPopover.tsx

@@ -35,7 +35,7 @@ export const DependencyPopover = ({ dependencies, type }: Props) => {
   return (
     // eslint-disable-next-line jsx-a11y/no-autofocus
     <Popover.Root autoFocus={false} lazyMount unmountOnExit>
-      <Popover.Trigger asChild>
+      <Popover.Trigger asChild disabled={dependencies.length === 0}>
         <Button size="sm" variant="outline">
           {dependencies.length} {translate(dependencyKey, { count: dependencies.length })}
         </Button>