[v3-0-test] Use Connection Hook Names for Dropdown instead of connection IDs (#51599) (#51613)

(cherry picked from commit f41f5f2)

Co-authored-by: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>

Author: github-actions[bot]

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,
   }));
 

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 };
 };