Highlight YAML Dag source in the Code tab (#74633)

The AIP-85 YAML importer (#74586) stores its Dag source with language
"yaml", but the Code tab's Monaco setup only registers the Python,
TypeScript, Java and Go grammars, so YAML Dags rendered as plain text.
Register Monaco's YAML grammar the same way as the others.

Author: pierrejeambrun

airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.test.ts

@@ -27,6 +27,7 @@ const grammars = [
   { id: "java", load: () => import("monaco-editor/languages/definitions/java/java") },
   { id: "python", load: () => import("monaco-editor/languages/definitions/python/python") },
   { id: "typescript", load: () => import("monaco-editor/languages/definitions/typescript/typescript") },
+  { id: "yaml", load: () => import("monaco-editor/languages/definitions/yaml/yaml") },
 ] as const;
 
 describe("Monaco Dag-code grammars", () => {

airflow-core/src/airflow/ui/src/components/MonacoEditor/configureMonaco.ts

@@ -69,6 +69,7 @@ const loadMonacoModules = async () => {
   const typescriptGrammar = import("monaco-editor/languages/definitions/typescript/typescript");
   const javaGrammar = import("monaco-editor/languages/definitions/java/java");
   const goGrammar = import("monaco-editor/languages/definitions/go/go");
+  const yamlGrammar = import("monaco-editor/languages/definitions/yaml/yaml");
 
   const [
     monaco,
@@ -77,13 +78,15 @@ const loadMonacoModules = async () => {
     { conf: typescriptConf, language: typescriptLanguage },
     { conf: javaConf, language: javaLanguage },
     { conf: goConf, language: goLanguage },
+    { conf: yamlConf, language: yamlLanguage },
   ] = await Promise.all([
     monacoApi,
     workerUrls,
     pythonGrammar,
     typescriptGrammar,
     javaGrammar,
     goGrammar,
+    yamlGrammar,
     jsonContribution,
   ]);
 
@@ -99,6 +102,8 @@ const loadMonacoModules = async () => {
     pythonLanguage,
     typescriptConf,
     typescriptLanguage,
+    yamlConf,
+    yamlLanguage,
   };
 };
 
@@ -129,6 +134,8 @@ export const configureMonaco = () => {
         pythonLanguage,
         typescriptConf,
         typescriptLanguage,
+        yamlConf,
+        yamlLanguage,
       }) => {
         Reflect.set(globalThis, "MonacoEnvironment", {
           getWorker: (_moduleId: string, label: string) =>
@@ -147,6 +154,7 @@ export const configureMonaco = () => {
           { conf: typescriptConf, id: "typescript", language: typescriptLanguage },
           { conf: javaConf, id: "java", language: javaLanguage },
           { conf: goConf, id: "go", language: goLanguage },
+          { conf: yamlConf, id: "yaml", language: yamlLanguage },
         ] as const;
 
         for (const grammar of grammars) {

airflow-core/src/airflow/ui/src/vite-env.d.ts

@@ -56,3 +56,10 @@ declare module "monaco-editor/languages/definitions/go/go" {
   export const language: import("monaco-editor").languages.IMonarchLanguage;
   /* eslint-enable @typescript-eslint/consistent-type-imports */
 }
+
+declare module "monaco-editor/languages/definitions/yaml/yaml" {
+  /* eslint-disable @typescript-eslint/consistent-type-imports */
+  export const conf: import("monaco-editor").languages.LanguageConfiguration;
+  export const language: import("monaco-editor").languages.IMonarchLanguage;
+  /* eslint-enable @typescript-eslint/consistent-type-imports */
+}