Use dag_display_name aliases when possible in the UI (#50305)

Author: bbovenzi

airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx

@@ -34,6 +34,7 @@ import { Checkbox } from "../ui/Checkbox";
 import EditableMarkdown from "./EditableMarkdown";
 
 type TriggerDAGFormProps = {
+  readonly dagDisplayName: string;
   readonly dagId: string;
   readonly isPaused: boolean;
   readonly onClose: () => void;
@@ -47,7 +48,7 @@ export type DagRunTriggerParams = {
   note: string;
 };
 
-const TriggerDAGForm = ({ dagId, isPaused, onClose, open }: TriggerDAGFormProps) => {
+const TriggerDAGForm = ({ dagDisplayName, dagId, isPaused, onClose, open }: TriggerDAGFormProps) => {
   const [errors, setErrors] = useState<{ conf?: string; date?: unknown }>({});
   const [formError, setFormError] = useState(false);
   const initialParamsDict = useDagParams(dagId, open);
@@ -149,7 +150,7 @@ const TriggerDAGForm = ({ dagId, isPaused, onClose, open }: TriggerDAGFormProps)
       </ConfigForm>
       {isPaused ? (
         <Checkbox checked={unpause} colorPalette="blue" onChange={() => setUnpause(!unpause)}>
-          Unpause {dagId} on trigger
+          Unpause {dagDisplayName} on trigger
         </Checkbox>
       ) : undefined}
       <ErrorAlert error={errors.date ?? errorTrigger} />

airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx

@@ -114,7 +114,13 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
               ) : undefined}
 
               {runMode === RunMode.SINGLE ? (
-                <TriggerDAGForm dagId={dagId} isPaused={isPaused} onClose={onClose} open={open} />
+                <TriggerDAGForm
+                  dagDisplayName={dagDisplayName}
+                  dagId={dagId}
+                  isPaused={isPaused}
+                  onClose={onClose}
+                  open={open}
+                />
               ) : (
                 hasSchedule && dag && <RunBackfillForm dag={dag} onClose={onClose} />
               )}

airflow-core/src/airflow/ui/src/pages/DagRuns.tsx

@@ -53,7 +53,7 @@ const runColumns = (dagId?: string): Array<ColumnDef<DAGRunResponse>> => [
     ? []
     : [
         {
-          accessorKey: "dag_id",
+          accessorKey: "dag_display_name",
           enableSorting: false,
           header: "Dag ID",
         },

airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx

@@ -57,7 +57,7 @@ const taskInstanceColumns = (
     ? []
     : [
         {
-          accessorKey: "dag_id",
+          accessorKey: "dag_display_name",
           enableSorting: false,
           header: "Dag ID",
         },

airflow-core/src/airflow/ui/src/pages/XCom/XCom.tsx

@@ -40,7 +40,7 @@ const columns: Array<ColumnDef<XComResponse>> = [
     accessorKey: "dag_id",
     cell: ({ row: { original } }) => (
       <Link asChild color="fg.info" fontWeight="bold">
-        <RouterLink to={`/dags/${original.dag_id}`}>{original.dag_id}</RouterLink>
+        <RouterLink to={`/dags/${original.dag_id}`}>{original.dag_display_name}</RouterLink>
       </Link>
     ),
     enableSorting: false,