From ca07121193ec93aa30f11c13515d2b1d92a74084 Mon Sep 17 00:00:00 2001
From: Jens Scheffler <jscheffl@apache.org>
Date: Tue, 10 Jun 2025 23:12:32 +0200
Subject: [PATCH 1/2] Use Connection Hook Names for Dropdown instead of
 connection IDs

---
 .../src/airflow/ui/src/pages/Connections/ConnectionForm.tsx   | 3 ++-
 .../src/airflow/ui/src/queries/useConnectionTypeMeta.ts       | 4 +++-
 2 files changed, 5 insertions(+), 2 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..95950f6ce1fb6 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(
@@ -111,5 +113,5 @@ export const useConnectionTypeMeta = () => {
 
   keysList.sort((first, second) => first.localeCompare(second));
 
-  return { formattedData, isPending, keysList };
+  return { formattedData, hookNames, isPending, keysList };
 };

From 15af79fced0fb38d9d5a3579306869d61f166322 Mon Sep 17 00:00:00 2001
From: Jens Scheffler <jscheffl@apache.org>
Date: Tue, 10 Jun 2025 23:24:49 +0200
Subject: [PATCH 2/2] Sort by hook name, not key

---
 .../src/airflow/ui/src/queries/useConnectionTypeMeta.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts b/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts
index 95950f6ce1fb6..5f6f5c8826771 100644
--- a/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts
+++ b/airflow-core/src/airflow/ui/src/queries/useConnectionTypeMeta.ts
@@ -111,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, hookNames, isPending, keysList };
 };