From c119a6a8bca06cf107c80dc5068fe9c7c1754fa1 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Tue, 15 Oct 2024 12:15:19 -0400
Subject: [PATCH] [Fleet] Fix input vars non correctly rendered in package
 policy editor (#195925)

---
 .../package_policy_input_config.test.tsx      | 49 +++++++++++++++++++
 .../package_policy_input_config.tsx           |  6 ++-
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.test.tsx

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.test.tsx
new file mode 100644
index 0000000000000..9295679e0aded
--- /dev/null
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.test.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { createFleetTestRendererMock } from '../../../../../../../../mock';
+
+import { PackagePolicyInputConfig } from './package_policy_input_config';
+
+describe('PackagePolicyInputConfig', () => {
+  function render(value = 'generic', datastreams: any = []) {
+    const renderer = createFleetTestRendererMock();
+    const mockOnChange = jest.fn();
+
+    const utils = renderer.render(
+      <PackagePolicyInputConfig
+        hasInputStreams={false}
+        inputVarsValidationResults={{}}
+        packagePolicyInput={{
+          enabled: true,
+          type: 'input',
+          streams: [],
+        }}
+        updatePackagePolicyInput={mockOnChange}
+        packageInputVars={[
+          {
+            name: 'test',
+            title: 'Test',
+            type: 'text',
+            show_user: true,
+          },
+        ]}
+      />
+    );
+
+    return { utils, mockOnChange };
+  }
+
+  it('should support input vars with show_user:true without default value', () => {
+    const { utils } = render();
+
+    const inputEl = utils.findByTestId('textInput-test');
+    expect(inputEl).toBeDefined();
+  });
+});
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx
index 247f908668eab..e12a93e5bc9de 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_config.tsx
@@ -106,8 +106,10 @@ export const PackagePolicyInputConfig: React.FunctionComponent<{
           <EuiFlexGroup direction="column" gutterSize="m">
             {requiredVars.map((varDef) => {
               const { name: varName, type: varType } = varDef;
-              if (!packagePolicyInput.vars) return;
-              const { value, frozen } = packagePolicyInput.vars[varName];
+
+              const value = packagePolicyInput.vars?.[varName]?.value;
+              const frozen = packagePolicyInput.vars?.[varName]?.frozen;
+
               return (
                 <EuiFlexItem key={varName}>
                   <PackagePolicyInputVarField