[js-yaml to yaml migration] @elastic/fleet

.github/CODEOWNERS

@@ -693,6 +693,7 @@ src/platform/packages/shared/kbn-workflows @elastic/workflows-eng
 src/platform/packages/shared/kbn-workflows-ui @elastic/workflows-eng
 src/platform/packages/shared/kbn-workspaces @elastic/observability-ui
 src/platform/packages/shared/kbn-xstate-utils @elastic/obs-onboarding-team
+src/platform/packages/shared/kbn-yaml-loader @elastic/fleet
 src/platform/packages/shared/kbn-zod @elastic/kibana-core
 src/platform/packages/shared/kbn-zod-helpers @elastic/security-detection-rule-management
 src/platform/packages/shared/presentation/presentation_publishing @elastic/kibana-presentation

package.json

@@ -1243,6 +1243,7 @@
     "@kbn/workflows-ui": "link:src/platform/packages/shared/kbn-workflows-ui",
     "@kbn/workplace-ai-app": "link:x-pack/solutions/workplaceai/plugins/workplace_ai_app",
     "@kbn/xstate-utils": "link:src/platform/packages/shared/kbn-xstate-utils",
+    "@kbn/yaml-loader": "link:src/platform/packages/shared/kbn-yaml-loader",
     "@kbn/yaml-rule-editor": "link:x-pack/platform/packages/shared/response-ops/yaml-rule-editor",
     "@kbn/zod": "link:src/platform/packages/shared/kbn-zod",
     "@kbn/zod-helpers": "link:src/platform/packages/shared/kbn-zod-helpers",

src/platform/packages/shared/kbn-scout/src/playwright/ui_components/monaco_editor.ts

@@ -8,8 +8,8 @@
  */
 
 import type { Locator } from '@playwright/test';
-import { expect } from '@playwright/test';
 import type { ScoutPage } from '..';
+import { expect } from '../../../ui';
 
 /**
  * Page object that wraps common interactions with the Kibana Monaco-based code editor.
@@ -40,28 +40,34 @@ export class KibanaCodeEditorWrapper {
    *   an empty string is returned.
    */
   async getCodeEditorValue(nthIndex: number = 0): Promise<string> {
-    return await this.page.evaluate((index) => {
-      const monacoEnv = (window as any).MonacoEnvironment;
+    let result = '';
 
-      if (!monacoEnv?.monaco?.editor) {
-        throw new Error('MonacoEnvironment.monaco.editor is not available');
-      }
+    await expect(async () => {
+      result = await this.page.evaluate((index) => {
+        const monacoEnv = (window as any).MonacoEnvironment;
+
+        if (!monacoEnv?.monaco?.editor) {
+          throw new Error('MonacoEnvironment.monaco.editor is not available');
+        }
+
+        const values: string[] = monacoEnv.monaco.editor
+          .getModels()
+          .map((model: any) => model.getValue() as string);
 
-      const values: string[] = monacoEnv.monaco.editor
-        .getModels()
-        .map((model: any) => model.getValue() as string);
+        if (!values.length) {
+          return '';
+        }
 
-      if (!values.length) {
-        return '';
-      }
+        if (index >= 0 && index < values.length) {
+          return values[index]!;
+        }
 
-      if (index >= 0 && index < values.length) {
-        return values[index]!;
-      }
+        // Fallback to the first model value if the requested index is out of range
+        return values[0]!;
+      }, nthIndex);
+    }).toPass({ timeout: 30_000 });
 
-      // Fallback to the first model value if the requested index is out of range
-      return values[0]!;
-    }, nthIndex);
+    return result;
   }
 
   /**

src/platform/packages/shared/kbn-yaml-loader/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { loadYaml } from './src/load_yaml';
+export type { Document, Pair } from './src/types';

src/platform/packages/shared/kbn-yaml-loader/kibana.jsonc

@@ -0,0 +1,8 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/yaml-loader",
+  "owner": ["@elastic/fleet"],
+  "group": "platform",
+  "visibility": "shared",
+  "description": "Async loader for the yaml package to enable code-splitting and reduce initial bundle size"
+}

src/platform/packages/shared/kbn-yaml-loader/moon.yml

@@ -0,0 +1,32 @@
+# This file is generated by the @kbn/moon package. Any manual edits will be erased!
+#  To extend this, write your extensions/overrides to 'moon.extend.yml'
+#  then regenerate this file with: 'node scripts/regenerate_moon_projects.js --update --filter @kbn/yaml-loader'
+
+$schema: https://moonrepo.dev/schemas/project.json
+id: '@kbn/yaml-loader'
+layer: unknown
+owners:
+  defaultOwner: '@elastic/fleet'
+toolchains:
+  default: node
+  javascript:
+    rootPackageDependenciesOnly: false
+language: typescript
+project:
+  title: '@kbn/yaml-loader'
+  description: Moon project for @kbn/yaml-loader
+  channel: ''
+  owner: '@elastic/fleet'
+  sourceRoot: src/platform/packages/shared/kbn-yaml-loader
+dependsOn: []
+tags:
+  - shared-common
+  - package
+  - prod
+  - group-platform
+  - shared
+fileGroups:
+  src:
+    - '**/*.ts'
+    - '!target/**/*'
+tasks: {}

src/platform/packages/shared/kbn-yaml-loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@kbn/yaml-loader",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "main": "index.ts",
+  "types": "index.ts",
+  "dependencies": {
+    "yaml": "2.8.1"
+  }
+}

src/platform/packages/shared/kbn-yaml-loader/src/load_yaml.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/**
+ * Loads the yaml package asynchronously. Use this in browser code to avoid
+ * pulling the full yaml library into the initial bundle.
+ * The returned promise resolves to the yaml module (parse, stringify, Document, etc.).
+ */
+export const loadYaml = (): Promise<typeof import('yaml')> => {
+  return import('yaml');
+};

src/platform/packages/shared/kbn-yaml-loader/src/types.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/**
+ * Type-only re-exports from the yaml package so consumers can type their APIs
+ * without pulling in the runtime. Use loadYaml() for runtime usage.
+ */
+export type { Document, Pair } from 'yaml';

src/platform/packages/shared/kbn-yaml-loader/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@kbn/tsconfig-base/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": ["node"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["target/**/*"],
+  "kbn_references": []
+}

tsconfig.base.json

@@ -2642,6 +2642,8 @@
       "@kbn/workspaces/*": ["src/platform/packages/shared/kbn-workspaces/*"],
       "@kbn/xstate-utils": ["src/platform/packages/shared/kbn-xstate-utils"],
       "@kbn/xstate-utils/*": ["src/platform/packages/shared/kbn-xstate-utils/*"],
+      "@kbn/yaml-loader": ["src/platform/packages/shared/kbn-yaml-loader"],
+      "@kbn/yaml-loader/*": ["src/platform/packages/shared/kbn-yaml-loader/*"],
       "@kbn/yaml-rule-editor": ["x-pack/platform/packages/shared/response-ops/yaml-rule-editor"],
       "@kbn/yaml-rule-editor/*": ["x-pack/platform/packages/shared/response-ops/yaml-rule-editor/*"],
       "@kbn/yarn-install-scripts": ["packages/kbn-yarn-install-scripts"],

x-pack/platform/plugins/shared/fleet/common/services/agent_cm_to_yaml.ts

@@ -5,30 +5,14 @@
  * 2.0.
  */
 
-import type { dump } from 'js-yaml';
-
 import type { FullAgentConfigMap } from '../types/models/agent_cm';
 
-const CM_KEYS_ORDER = ['apiVersion', 'kind', 'metadata', 'data'];
-
-export const fullAgentConfigMapToYaml = (
-  policy: FullAgentConfigMap,
-  toYaml: typeof dump
-): string => {
-  return toYaml(policy, {
-    skipInvalid: true,
-    sortKeys: (keyA: string, keyB: string) => {
-      const indexA = CM_KEYS_ORDER.indexOf(keyA);
-      const indexB = CM_KEYS_ORDER.indexOf(keyB);
-      if (indexA >= 0 && indexB < 0) {
-        return -1;
-      }
+import type { YamlModule } from './yaml_utils';
+import { createYamlKeysSorter, toYaml } from './yaml_utils';
 
-      if (indexA < 0 && indexB >= 0) {
-        return 1;
-      }
+const CM_KEYS_ORDER = ['apiVersion', 'kind', 'metadata', 'data'];
 
-      return indexA - indexB;
-    },
-  });
+export const fullAgentConfigMapToYaml = (policy: FullAgentConfigMap, yaml: YamlModule): string => {
+  const sortCmKeys = createYamlKeysSorter(CM_KEYS_ORDER, yaml);
+  return toYaml(policy, { sortMapEntries: sortCmKeys, strict: false }, yaml);
 };

x-pack/platform/plugins/shared/fleet/common/services/full_agent_policy_to_yaml.test.ts

@@ -9,6 +9,20 @@ import type { FullAgentPolicy } from '../types';
 
 import { fullAgentPolicyToYaml } from './full_agent_policy_to_yaml';
 
+// Mock yaml module for testing (matches YamlModule shape)
+const mockYaml = {
+  Document: class {
+    private data: unknown;
+    constructor(data: unknown) {
+      this.data = data;
+    }
+    toString() {
+      return JSON.stringify(this.data);
+    }
+  },
+  isScalar: () => true,
+};
+
 describe('fullAgentPolicyToYaml', () => {
   it('should replace secrets', () => {
     const agentPolicyWithSecrets = {
@@ -45,9 +59,9 @@ describe('fullAgentPolicyToYaml', () => {
       fleet: {},
     } as unknown as FullAgentPolicy;
 
-    const yaml = fullAgentPolicyToYaml(agentPolicyWithSecrets, (policy) => JSON.stringify(policy));
+    const result = fullAgentPolicyToYaml(agentPolicyWithSecrets, mockYaml);
 
-    expect(yaml).toMatchInlineSnapshot(
+    expect(result).toMatchInlineSnapshot(
       `"{\\"id\\":\\"1234\\",\\"outputs\\":{\\"default\\":{\\"type\\":\\"elasticsearch\\",\\"hosts\\":[\\"http://localhost:9200\\"]}},\\"inputs\\":[{\\"id\\":\\"test_input-secrets-abcd1234\\",\\"revision\\":1,\\"name\\":\\"secrets-1\\",\\"type\\":\\"test_input\\",\\"data_stream\\":{\\"namespace\\":\\"default\\"},\\"use_output\\":\\"default\\",\\"package_policy_id\\":\\"abcd1234\\",\\"package_var_secret\\":\\"\${SECRET_0}\\",\\"input_var_secret\\":\\"\${SECRET_1}\\",\\"streams\\":[{\\"id\\":\\"test_input-secrets.log-abcd1234\\",\\"data_stream\\":{\\"type\\":\\"logs\\",\\"dataset\\":\\"secrets.log\\"},\\"package_var_secret\\":\\"\${SECRET_0}\\",\\"input_var_secret\\":\\"\${SECRET_1}\\",\\"stream_var_secret\\":\\"\${SECRET_2}\\"}],\\"meta\\":{\\"package\\":{\\"name\\":\\"secrets\\",\\"version\\":\\"1.0.0\\"}}}],\\"secret_references\\":[{\\"id\\":\\"secret-id-1\\"},{\\"id\\":\\"secret-id-2\\"},{\\"id\\":\\"secret-id-3\\"}],\\"revision\\":2,\\"agent\\":{},\\"signed\\":{},\\"output_permissions\\":{},\\"fleet\\":{}}"`
     );
   });

x-pack/platform/plugins/shared/fleet/common/services/full_agent_policy_to_yaml.ts

@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import type { dump } from 'js-yaml';
-
 import type { FullAgentPolicy } from '../types';
 
+import type { YamlModule } from './yaml_utils';
+import { createYamlKeysSorter, toYaml } from './yaml_utils';
+
 const POLICY_KEYS_ORDER = [
   'id',
   'name',
@@ -30,34 +31,18 @@ const POLICY_KEYS_ORDER = [
 
 export const fullAgentPolicyToYaml = (
   policy: FullAgentPolicy,
-  toYaml: typeof dump,
+  yaml: YamlModule,
   apiKey?: string
 ): string => {
-  const yaml = toYaml(policy, {
-    skipInvalid: true,
-    sortKeys: _sortYamlKeys,
-  });
-  const formattedYml = apiKey ? replaceApiKey(yaml, apiKey) : yaml;
+  const sortYamlKeys = createYamlKeysSorter(POLICY_KEYS_ORDER, yaml);
+  const yamlText = toYaml(policy, { sortMapEntries: sortYamlKeys, strict: false }, yaml);
+  const formattedYml = apiKey ? replaceApiKey(yamlText, apiKey) : yamlText;
 
   if (!policy?.secret_references?.length) return formattedYml;
 
   return _formatSecrets(policy.secret_references, formattedYml);
 };
 
-export function _sortYamlKeys(keyA: string, keyB: string) {
-  const indexA = POLICY_KEYS_ORDER.indexOf(keyA);
-  const indexB = POLICY_KEYS_ORDER.indexOf(keyB);
-  if (indexA >= 0 && indexB < 0) {
-    return -1;
-  }
-
-  if (indexA < 0 && indexB >= 0) {
-    return 1;
-  }
-
-  return indexA - indexB;
-}
-
 function _formatSecrets(
   secretRefs: NonNullable<FullAgentPolicy['secret_references']>,
   ymlText: string

x-pack/platform/plugins/shared/fleet/common/services/index.ts

@@ -129,6 +129,8 @@ export {
 // Cloud Connector accessor module
 export * from './cloud_connectors';
 
+export type { YamlModule } from './yaml_utils';
+export { createYamlKeysSorter, toYaml } from './yaml_utils';
 export {
   packageInfoHasOtelInputs,
   packagePolicyHasOtelInputs,