From bf0bc532d486a40e0b3ab294546f8fb486aba59b Mon Sep 17 00:00:00 2001
From: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>
Date: Wed, 11 Jun 2025 11:28:25 +0200
Subject: [PATCH] [v3-0-test] Use Connection Hook Names for Dropdown instead of
 connection IDs (#51599) (cherry picked from commit
 f41f5f23396a6dc97373ba1109f9dce28860026d)

Co-authored-by: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>
---
 .../src/airflow/ui/src/pages/Connections/ConnectionForm.tsx | 3 ++-
 .../src/airflow/ui/src/queries/useConnectionTypeMeta.ts     | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.tsx
index 6a17f1794f6bf..866d555c06857 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/ConnectionForm.tsx
@@ -49,6 +49,7 @@ const ConnectionForm = ({
   const [errors, setErrors] = useState<{ conf?: string }>({});
   const {
     formattedData: connectionTypeMeta,
+    hookNames: hookNameMap,
     isPending: isMetaPending,
     keysList: connectionTypes,
   } = useConnectionTypeMeta();
@@ -116,7 +117,7 @@ const ConnectionForm = ({
   };
 
   const connTypesOptions = connectionTypes.map((conn) => ({
-    label: conn,
+    label: hookNameMap[conn],
     value: conn,
   }));
 
diff --git a/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts b/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts
index 8f9d4137c2683..5f6f5c8826771 100644
--- a/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts
+++ b/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts
@@ -58,6 +58,7 @@ export const useConnectionTypeMeta = () => {
   }
 
   const formattedData: Record<string, ConnectionMetaEntry> = {};
+  const hookNames: Record<string, string> = {};
   const keysList: Array<string> = [];
 
   const defaultStandardFields: StandardFieldSpec | undefined = {
@@ -91,6 +92,7 @@ export const useConnectionTypeMeta = () => {
   data?.forEach((item) => {
     const key = item.connection_type;
 
+    hookNames[key] = item.hook_name;
     keysList.push(key);
 
     const populatedStandardFields: StandardFieldSpec = mergeWithDefaults(
@@ -109,7 +111,7 @@ export const useConnectionTypeMeta = () => {
     };
   });
 
-  keysList.sort((first, second) => first.localeCompare(second));
+  keysList.sort((first, second) => (hookNames[first] ?? first).localeCompare(hookNames[second] ?? second));
 
-  return { formattedData, isPending, keysList };
+  return { formattedData, hookNames, isPending, keysList };
 };