elastic#69750 Auto-expand inputs with required & empty (invalid) vars

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_panel.tsx

@@ -22,7 +22,11 @@ import {
   RegistryInput,
   RegistryStream,
 } from '../../../../types';
-import { PackageConfigInputValidationResults, countValidationErrors } from '../services';
+import {
+  PackageConfigInputValidationResults,
+  hasInvalidButRequiredVar,
+  countValidationErrors,
+} from '../services';
 import { PackageConfigInputConfig } from './package_config_input_config';
 import { PackageConfigInputStreamConfig } from './package_config_input_stream';
 
@@ -33,6 +37,29 @@ const ShortenedHorizontalRule = styled(EuiHorizontalRule)`
   }
 `;
 
+const shouldShowStreamsByDefault = (
+  packageInput: RegistryInput,
+  packageInputStreams: Array<RegistryStream & { dataset: { name: string } }>,
+  packageConfigInput: PackageConfigInput
+): boolean => {
+  return (
+    packageConfigInput.enabled &&
+    (hasInvalidButRequiredVar(packageInput.vars, packageConfigInput.vars) ||
+      Boolean(
+        packageInputStreams.find(
+          (stream) =>
+            stream.enabled &&
+            hasInvalidButRequiredVar(
+              stream.vars,
+              packageConfigInput.streams.find(
+                (pkgStream) => stream.dataset.name === pkgStream.dataset.name
+              )?.vars
+            )
+        )
+      ))
+  );
+};
+
 export const PackageConfigInputPanel: React.FunctionComponent<{
   packageInput: RegistryInput;
   packageInputStreams: Array<RegistryStream & { dataset: { name: string } }>;
@@ -50,7 +77,9 @@ export const PackageConfigInputPanel: React.FunctionComponent<{
     forceShowErrors,
   }) => {
     // Showing streams toggle state
-    const [isShowingStreams, setIsShowingStreams] = useState<boolean>(false);
+    const [isShowingStreams, setIsShowingStreams] = useState<boolean>(
+      shouldShowStreamsByDefault(packageInput, packageInputStreams, packageConfigInput)
+    );
 
     // Errors state
     const errorCount = countValidationErrors(inputValidationResults);

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/components/package_config_input_stream.tsx

@@ -38,7 +38,7 @@ export const PackageConfigInputStreamConfig: React.FunctionComponent<{
     forceShowErrors,
   }) => {
     // Showing advanced options toggle state
-    const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(false);
+    const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>();
 
     // Errors state
     const hasErrors = forceShowErrors && validationHasErrors(inputStreamValidationResults);

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/services/has_invalid_but_required_var.test.ts

@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { hasInvalidButRequiredVar } from './has_invalid_but_required_var';
+
+describe('Ingest Manager - hasInvalidButRequiredVar', () => {
+  it('returns true for invalid & required vars', () => {
+    expect(
+      hasInvalidButRequiredVar(
+        [
+          {
+            name: 'mock_var',
+            type: 'text',
+            required: true,
+          },
+        ],
+        {}
+      )
+    ).toBe(true);
+
+    expect(
+      hasInvalidButRequiredVar(
+        [
+          {
+            name: 'mock_var',
+            type: 'text',
+            required: true,
+          },
+        ],
+        {
+          mock_var: {
+            value: undefined,
+          },
+        }
+      )
+    ).toBe(true);
+  });
+
+  it('returns false for valid & required vars', () => {
+    expect(
+      hasInvalidButRequiredVar(
+        [
+          {
+            name: 'mock_var',
+            type: 'text',
+            required: true,
+          },
+        ],
+        {
+          mock_var: {
+            value: 'foo',
+          },
+        }
+      )
+    ).toBe(false);
+  });
+
+  it('returns false for optional vars', () => {
+    expect(
+      hasInvalidButRequiredVar(
+        [
+          {
+            name: 'mock_var',
+            type: 'text',
+          },
+        ],
+        {
+          mock_var: {
+            value: 'foo',
+          },
+        }
+      )
+    ).toBe(false);
+
+    expect(
+      hasInvalidButRequiredVar(
+        [
+          {
+            name: 'mock_var',
+            type: 'text',
+            required: false,
+          },
+        ],
+        {
+          mock_var: {
+            value: undefined,
+          },
+        }
+      )
+    ).toBe(false);
+  });
+});

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/services/has_invalid_but_required_var.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { PackageConfigConfigRecord, RegistryVarsEntry } from '../../../../types';
+import { validatePackageConfigConfig } from './';
+
+export const hasInvalidButRequiredVar = (
+  registryVars?: RegistryVarsEntry[],
+  packageConfigVars?: PackageConfigConfigRecord
+): boolean => {
+  return (
+    !packageConfigVars ||
+    Boolean(
+      registryVars &&
+        registryVars.find(
+          (registryVar) =>
+            registryVar.required &&
+            (!packageConfigVars[registryVar.name] ||
+              validatePackageConfigConfig(packageConfigVars[registryVar.name], registryVar)?.length)
+        )
+    )
+  );
+};

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/services/index.ts

@@ -4,11 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { isAdvancedVar } from './is_advanced_var';
+export { hasInvalidButRequiredVar } from './has_invalid_but_required_var';
 export {
   PackageConfigValidationResults,
   PackageConfigConfigValidationResults,
   PackageConfigInputValidationResults,
   validatePackageConfig,
+  validatePackageConfigConfig,
   validationHasErrors,
   countValidationErrors,
 } from './validate_package_config';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/services/is_advanced_var.ts

@@ -6,7 +6,7 @@
 import { RegistryVarsEntry } from '../../../../types';
 
 export const isAdvancedVar = (varDef: RegistryVarsEntry): boolean => {
-  if (varDef.show_user || (varDef.required && !varDef.default)) {
+  if (varDef.show_user || (varDef.required && varDef.default === undefined)) {
     return false;
   }
   return true;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_package_config_page/services/validate_package_config.ts

@@ -171,7 +171,7 @@ export const validatePackageConfig = (
   return validationResults;
 };
 
-const validatePackageConfigConfig = (
+export const validatePackageConfigConfig = (
   configEntry: PackageConfigConfigRecordEntry,
   varDef: RegistryVarsEntry
 ): string[] | null => {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts

@@ -18,6 +18,7 @@ export {
   UpdatePackageConfig,
   PackageConfigInput,
   PackageConfigInputStream,
+  PackageConfigConfigRecord,
   PackageConfigConfigRecordEntry,
   Output,
   DataStream,